Divi Feature Update LIVE | Amazing New Divi Transformation Controls

you you hello everyone and welcome today we are doing our transformation controls this is our brand new feature from TV I'm really excited to show you what this switch is all about but before we get started please let me know if you can hear me loud and clear in the comments box below so that we get off to a very good start okay I can see quite a lot of you are already turned in this is fantastic we are live streaming on Facebook and also on YouTube so here on Facebook I can see we have John Nikki surrender Mario awesome good to see you guys and also on Facebook we have oh we have quite a lot of future again we have a ghonte from berlin we have steve from canada Peter from Belgium Caroline from Sydney awesome that's a fuller from Spain also says loud and clear that's brilliant we also have Driss from burkina faso Wow I think that's the first time I've heard Burkina Faso on the on the livestream here victor saying hello Matt good to see you victor we also have Rajesh and Kara from Portland Oregon awesome Jess from India if I left anyone out here we have GM GMC come from Scotland also Adriano from Brazil wow that's a lot of chill again this is fantastic so today as I mentioned it will be talking about the brand new transformation controls that would be that was released last week is a brand new feature now this feature is a freehand design which alarms which allows you to transform elements on your page now you're able to transform your elements by skewing rotating zooming in moving now these are the type of features you normally get in programs like Photoshop Illustrator and also sketch so it's fantastic to see that we have this now in Divi so there's a lot of things that you can do with this feature so what I'll be doing today is just demonstrating you know how the interface looks and maybe give you a quick example of how you can use this now the brilliant thing about this as well is you can also use hover effects on this feature in fact I'll be doing a quick demo to show you how the hover affects actually works and also if you want to read more about this feature the link is in the in the video description below so you can go ahead read more about this feature okay so before we get started here I'll be working on my local DV install so this is where I'll be doing my demo so I'll be switching back and forth so I can show you what we can do now if you have any questions regarding this feature please let me know or please post your questions in the comments box below and I'll do my best to respond to those questions okay so let's have a look here and there's also quite a few who have also joined us from here Wladimir from Croatia that's awesome we also have someone here from Russia but I can't pronounce the name Monique good to see you as well George awesome good to see you Frederik from France we have Steven from Australia Wow we have people from all over the world this is amazing a ways from Pakistan Carol from Netherlands breathing designed from Newbury is this new brewery in the UK or this is somewhere else we also have Renee from Hong Kong awesome awesome alright guys I don't know waste a lot of your time let's dive in and let's get started so I'm just gonna switch over here to my to my main computer ooh that's strange sorry about that anyway so over here the first thing you want to do is to make sure you update to the latest Divi okay the latest diffident or sometimes it may not show here so what you may want to do is to come over here to updates click on that and this will show you if you have anything that needs updating here so in this example you can see here I don't have anything that I need to update great so let's start by creating a brand new page so I'm just gonna come over here click on add new ok so we're gonna give our page our name so I'm just going to call this transformation okay use the Divi builder so for the transformation feature you can either use this on existing pages you can also use it on premade layouts so pretty much it works anywhere okay so next I'm going to come over here to choose a premade layouts because I think it'll be easier if we use a premade layout that'll save me a lot of time to redesign these layouts okay so as you can see here I'm just trying to look for something that I can just go in and quickly make some changes to okay so I think we'll go with let's have a look okay let's go with this web agency layout pack so I'm going to select it and then click on use this layout right I see a comment here from Adriano saying the transformation has stopped okay I'll get back to I'll get back to that oh we also have Reese from Birmingham also that's that's where I'm actually based Birmingham here in the UK awesome right okay so I've got this page here that I just loaded up so you know what to make things easier I'm just going to delete this top section here because we're just gonna focus here on this row right so let me demonstrate how these transformation works so if you I mean in fact this works on rows or modules or sections so all you have to do is to come over here to your row settings click on design and you can see here we have a new entry on our list of design options and it's called Tron transform so you can just click on that and this is the brand new interface but I won't be using this on the row I'm gonna use it on the module okay so I'm going to come over here and then I'm going to click on this little gear icon go to design and then click on transform so this is where our feature is so let me just start off by showing you how to and launch this so if I drag you can see here as I'm dragging this is getting bigger and bigger okay so that's the expand you can actually make it smaller as well so that's really cool let's move on in fact let's let's set this to a hundred now you can also do some basic transformations here as you can see when I was making this bigger it was happening both on the width and the height okay I'll just show you one more time you can see there it's happening right now let's say you want to expand this but you would you want to do it to each sides individually so what you need to do is to break this chain and then now you're able to just do the height do the width but note that because we have text in here the text is also going to be stretched so that's something that you may want to consider there okay right so so let's bring this back to normal so I'm gonna set this to a hundred and then set this one to 100 as well okay oops I need to go back in here transform okay so that's how we can do that now the other thing that you can also do here in this interface is to move things around so you can see when I click on the second tab here I can actually move this around see that is really really really cool so that means that if you want to specifically move items around you can just go in here and just drag it closer to elements further from elements you know you can drag it to the bottom and so on okay so that's really cool let's move on to the next one now over here this is where you can do even more interesting stuff so this interface actually shows you visually how you can play around with with these controls so first of all this one here is the rotate as you can see here as I'm dragging things are now rotating sideways that's really cool so you can also do it this way in this plane like that okay and if you move on to the last one here we can also do this in 3d space so these are all these these are all the features that we can use on on our brand-new interface here for those of you that are just joining us this is the DV feature update live today we're talking about the new DVD transformation controls so we're just doing a quick demo and seeing how we can use this in our designs okay let's move on to the next one so in fact let me reset this so I can show you the next one okay right so the next one here is the skew so we can also play around with this and skew our design I'd really like this by the way it's one of my favorite so again we can skew this you know at different directions like that okay so we're gonna undo that so let's say you want to actually use this in a practical way these few things that I need to to mention and that is do not go extreme with this with these designs because I mean with these transformations because this can actually mess up the way things actually look on your website because with this a blurb you can see that with the text inside it stretches the text so I would actually use this with caution or if you want to use it just use it slightly don't go to extreme because it's just going to make things distort however now you can also use this with hover and hover States which means you can animate these states so I want to show you quickly how you can animate this in fact before I do that in fact before I continue I'd like to respond to a gear I think it's guy out saying this transformation is not useful I think well I beg to differ because when it comes to design there are so many ways that we design our elements on our website and in most cases let's say you wanted to add let's say a a an image or let's say a monitor on your screen as a design elements but you wanted to you know to be skewed you would have to go into Photoshop to do that and then come over and do all that I mean do all that design in Photoshop and then bring it over to to 2dv so this feature now allows you to do all of that in Divi itself so I mean it's just an extra tool I mean is this extra tools that you can actually use in your design process so in my opinion I think this is a good design of course it's not a design you want to use crazy but it allows you to have that option if you wanted to do so now if you were to take a look at the the code the CSS code that you'd need in order for you to achieve this it'll be crazy and this is why being able to define a design this visually I think is is fantastic right Victor say is the transformation also available for buttons yes it's a value it's available for all all modules sections and rows so it's it actually works everywhere right so let's go in and let me show you how to how to use this so let's say in fact you know what I'm just gonna go ahead and start from scratch so I can show you a few things that we can do here on this design so I'm sort of going in here and again I'm gonna come over here to my transform so let's say you want to add a subtle animation onto onto our design here so right now it's on a hundred percent so I'm just gonna drag in fact let me go to my hover options so on however here the default is 100 okay now on hover I want to actually scale this up a little bit to about maybe let's say 112 okay and then I am going to just make sure that it's working okay great right so I'm gonna save this and then I'm gonna publish and we're gonna do a quick review now you notice that I only made just two just two changes onto this right so let's exit the visual builder okay so now look at that we are able to make a quick hover effect using our transform tools and also our hover State so that's a quick way of just going in and adding a zoom when our on hover and I think this is really really cool now you can even go in and add some shadows if you wanted to you know there's so many ways that you can play around with this now there is also a layout which I want to show you which which I think was really cool and I guess they used something similar to this to achieve that layout so I really have to look for it so just bear with me let's have a look here so this layout had things which were showing at an angle now if I if I if I'm unable to find it I can district a try and recreate it for you so you can see what it looks like in three mobile phones which are aligned in at an angle so let's see if I can find it right looks like I'm unable to find it here it's gonna take me longer than I expected okay Oh in fact here we go so you see a design like this in fact let's click on use this layout so you can see it okay it's gonna take a bit of time here to import this there we go so this is also something that you can that you can achieve with these transform this transform tools so as you can see here you come with a normal you know image and then you can just align this make them look you know totally different in a different plane so this is what I was talking about that you can actually go in and make your own custom designs and you don't have to go into Photoshop you don't have to use illustrator and any of these tools so this is actually you know one way that that we were able to design something similar to this using these transform tools so what I'm gonna do now is I'm just gonna go back to to that design and make a few adjustments to the design as well just to sure just to show you you know what else you can do with this okay so I'm just gonna click on use this layout and then it's going to re-import again right so what I'm gonna do now is I'm gonna come in here and try and set these on I mean design these at an at a different angles so I'm just gonna go in and do this to the first one so I'm gonna come over here to transform so with this one here I want to use rotate okay so I'm going to go with that angle about 13 copy transform Styles then I'm gonna come over here pace transform styles is that work yes it has we're gonna do the same here we're gonna paste the transform styles there we go so now I was able to just go in quickly and add all my my blurbs at an angle so now I can go in as well and perhaps I may want to move these so let's say I come over here to transform let's go to the move one and now I can move I can move these closer like that save that I'll come to this one here and let's move that closer as well okay and as you can see this is just quickly doing this on the fly using our new transform tool so now that's a pretty much a new designs all I have to do now is to just go in and add some some padding to this so I'm going to come over here to design spacing and I'm gonna add top and bottom padding just to give this some more breathing space okay just like that okay so as I mentioned you would have to go into Photoshop if this if these were images you would have to go into Photoshop and line them in Photoshop add them on a on a transparent background and bring all your design elements into into DB but you see with this I mean you can simply just go in and make those quick transformations okay so I can see there's a lot of comments here there's a lot of questions let's see what's going on here so I'm gonna start here with reading the comments on YouTube right can we get a feature where we can move elements any way like in Kevlar actually you can use these la you can move these elements anywhere on the page so it doesn't really I mean you can I mean pretty much you saw how I use the Move tool you can actually move these elements on on the actual page that you're designing so it's it's you can actually do that and this question was from Cara okay Rattler's says I think this transfer this transform controls should have an option to select if the selected image is placed in layers now I totally agree but I think in this case here if you wanted this on the top you would need to use z-index so you just go in and apply using z-index to the CSS right let's have a look here yes Roger polar I get your point here I can see your second comments yes instead of adding the z-index if we could just do it in layers on the actual design on the actual page that would really much much better I totally agree with that I agree with agree with you on that Victor says the zoom on hover is so cool it looks so clean and flexible absolutely so this transfer this transformation controls feature I mean you can do quite a lot with this and and to be honest I'm really really excited with this let's have a look here we have comment here from Giulio you okay Julia here is responding some of these questions that's fantastic let's have a look here toss PDSA is how can we move the left hand yes to toss pedia you would have to use as n z index in the CSS - to place that on the top of of the other one and I'll see if I can do this for you as well a waist says will this affect the website speed I wouldn't think so I wouldn't think it will affect the website speed because these features here is CSS so it's highly optimized when when all this was all these designs are put together so I don't think these this will really slow down your website I'll be worried if this was a plug-in that we were adding on to DV to achieve these transformations so I think if wouldn't affect the speed however I will do you know specific tests to see but I've also tested some some of these features before as they were added to see if this slow down the the website but it didn't really have an impact okay so moving on here a says can I move this differently on mobile yeah actually yesterday when I was playing around with this in fact let's go in and let me show you right or so for mobile if I come over here and let's go to design transform right so you notice we still have this little tab here for for mobile devices so if I care if I go to tablet okay we can see here in tablets we can actually you know resize you know make it bigger and so on we can you know move things around so you can specifically have this the way you want on different mobile devices so so that when people visit your website on a desktop or a mobile you can have this you know however way you want it for those specific views so yes I would actually go in and and make sure that things look great in the desktop tablet and also on on mobile phones mobile phones Amit says is there any update on the header to the header and footer updates there only away right now we are releasing these features you know step by step but I'm not really sure exactly when the header and footer updates are coming but they're part of our schedule so they're definitely going to be released very very soon Hritik says I'm a high school student from India I want to design my website using Divi but being a student I really love your unlimited life lifetime plan but it's expensive any discounts you offer actually there's a 20% discount right now as we speak go to elegant themes dot-com they said we are celebrating our 11 Iran ever siree it's 20% off so go ahead right now in fact this was great timing go ahead to elegant themes calm they say 11 year anniversary okay sometimes these features don't work properly on desktop tablet and mobile even after yeah it could be that they were some bug issues which we tried to fix quite a lot in fact we've been quiet for quite a while in terms of releasing features that's because we're working on bug fixes so we've pretty much covered quite a lot of them but if you go in and try now and make sure you're running the latest update TV update you will find that these features or these bugs were actually fixed so give it a give it a go if you have any issues let our support team know and we'll go ahead and fix all those bugs bugs so for those of you that are just joining us this is the DB feature update live today we're talking about the DV transformation controls this is a brand new interface brand new feature that allows you to scale rotate skew move and large elements on your website this works on modules sections and and rows as well fantastic feature and also it works on you can also animate these elements on hover okay can we disable this feature on yes you can also disable this feature if you wanted to all you have to do is to go in and make sure that that section does not show on mobile devices or whatever device that it is that you want to disable it on okay yes breathing design says hi Mac what about the featured WooCommerce update yes these updates are in the pipeline they will be released slowly slowly so far we've done two updates in a row so I'm hoping that this is going to be the trend to release all these updates as they come but all these features that we've promised you promised everyone they will be definitely coming out including the WooCommerce one the only thing that I don't have right now is the the timeline or the all the dates when these features will be released but I can tell you for sure that all these features are going to be coming out I'm also really waiting for them as well right let's take a look here rasûlullah says Chad you're streaming on Facebook and Twitter oh thank you so much I'd really really appreciate that we'd like to quite a lot of people to to see all these features and be able to go in and use these features on TV Monique says very helpful for those who are not up to speed with Photoshop yes absolutely in fact you know what I've been using Photoshop for so many years and the program has become so powerful that you can design amazing designs with it but let's say you're a designer and you just want to go in and just make basic basic edits I mean you're greeted with this massive interface which is I mean which needs a learning curve to actually find out what you're actually doing in Photoshop so the advantage of this is now we have the ability to make these changes in Divi itself so one it saves you money to buy the Photoshop subscription you can just go in and do things in in TV so this is why I'm really really excited about this and the more features we get that allow us to do all this I mean it just gives us all these design options that we can play around with right let's take a look here okay right so this feature is out as we speak so I would highly recommend that you go ahead update and start using these brand-new transformation controls and also we'll be doing some tutorials on this feature itself just to show you how far you can go with played around with this brand-new feature so keep an eye on on our on our social media channels and you will see quite a lot of tutorials coming through right right Julie Julie oh I think it's you leo saying so far so great a layer of view will come in super handy with new controls yes absolutely Venus IT solutions how you doing good to see you good to see you write erotic says I know about 20% offer actually I'm alone and all my incomes are used on study right in that case Retief why not go for the yearly subscription once you've taken on the yearly subscription what I would recommend that you do is with all these tutorials and all these features that we have out there I'm not saying this I'm not I mean you don't get this wrong I'm not telling you what to do but one way you could do is you could buy the the yearly membership in that whole year you can design four or five websites for you know for clients or for anyone that wants a website design you could charge them a little bit of money to that and that could go towards your your lifetime membership because you know there's a lot of - I mean a lot of tutorials out there that can show you how to create a basic basic website so what you could do is you can start up approaching you know small businesses or anyone that wants a website I'm sure you can find people around there that you can ask around if they wanted a website designed so I would go with 20% discount by the yearly membership and then try and design a few websites that would raise up raise money to purchase your your left arm membership because to be honest these are the two payments plans that we have for elegant themes so I hope that helps that's all I can come up with right now right Oh Julia also says rity I can also confirm 100% you can get your money back with your first job Yoli is a great way to start fantastic yes please guys you know this - I mean Divi you're you're able I mean they're design agencies that actually use Divi to run their business just using one license so this Divi Divi theme is very very powerful it's it's powering you know hundreds and thousands of websites out there so do try and explore ways of making money with it I mean don't just use it on your own websites try and you know expand try and design websites for even like your local clubs people that you know and then this can expand to even small businesses so definitely Julio I totally agree with you this can actually you can make You minute your money back with the first website and average websites to be honest even if you're a beginner you would charge at least you know $100 you know for a website if you're just just just starting out but of course you can charge you know as much as you want you know depending on your experience ok so guys for those of you who are joining just joining us this this has been the new Divi Transfer transformation controls that allows you to scale rotate skew and enlarge elements on your website so for those of you who had joined us late this was going to be on our Facebook page and also on our YouTube page so go ahead and just you know quickly watch that I wasn't unable to go into crazy designs but I just wanted to show you basically the new interface you know what you can do with it especially you know subtle elements like the hover effect where you can just zoom in or skew so these are elements that you can start adding onto your website right away so I highly highly suggest or suggest that you go ahead and update to the latest DVD all right guys I really have to go thank you very much for watching I really really appreciate you spending some time with me today on this Divi feature update so tune in again next week the same time and hopefully we'll be talking about another brand new design a brand new feature all right guys have a great rest of the week and I'll be seeing you soon take care you you

Channel: Elegant Themes

Views: 5,337

Keywords:

Id: 9q_l_4QdV_E

Length: 35min 45sec (2145 seconds)

Published: Tue Mar 19 2019