GenerateBlocks HUGE UPDATE — Style CLASSES from the Editor 🤯 Now a Class-Based Builder!

with today's release of generate press 1.9 and generate press Pro 1.7 we get an entirely new way to build websites including being able to build and style classes right inside the editor now if you're coming from a system Like Oxygen or bricks this style of working won't be new to you but if you've been working in generate blocks or Elementor or any of those other page builders for a long time you're going to have to shift the way you think about building websites now I am going to warn you it's going to feel like a little bit more work upfront but I'm going to demonstrate in this video just how much time you're going to save on on the back end by using a class first approach so in this video I'm going to use a really simple example to show you the old way and new way so I can show you just what a huge change this is for Generate blocks with that said let's dive in and take a look so before we jump in and I start showing you the new way to do things I want to do a quick reminder on how we've been doing things all along I think seeing these things back to back is going to show you what a discrepancy there is between the old way of doing things and how much more efficient it's going to be using the new way of doing things so what I've set up here is just a simple section I have a container with an inner container inside that is a grid block and inside that are my three cards inside those cards we have an image and a headline now we've gone ahead and designed this the way we wanted right now duplicated all the cards and everything's good but of course we come back with fresh eyes later and we realize that font really should be bold and there's too much padding inside that card so what do we do we go to this first headline here we go down to the typography panel we change the weight to bold we go to the card we go to the spacing and we change it to maybe 24 pixels of padding so now we really like this card a lot better than we like the original version but now we need to transfer that design to each one of these other cards so we can either click on this text and change it to bold or we could copy its style go to the next text and paste it now we'll have to do the same thing here for the padding on the box we can change that to 24 or we can copy these sty files and paste it in here apparently that didn't even work so I'll just change it manually to 24 okay so now all of our cards are looking the same again but of course something's going to happen down the road where the client wants the image to have some rounded Corners so we have to go through that process all again going to each one of the images and changing the Border radius now this isn't too bad when we're just talking about three cards on a single page but let's suppose you put these cards across 10 different pages on the website each one of these changes is going to take you 10 or 15 minutes to just replicate throughout the entire website and every time the client comes back with another change you have to do that process all over again now generate blocks does have Global Styles which we've been using for a while but unfortunately it lived in a completely different area of the website which meant anytime you needed to make changes to those global Styles you'd have to leave the editor make the changes and then come back in which wasn't super efficient but the new version of generate blocks actually fixes all all these problems I'm going to go ahead and set up another section here and we're going to style this using classes so we can make making changes very easy to scale across our entire website so let me start over here where I have my container my inner container and my grid again we'll choose three columns and we have a 20 pixel horizontal Gap I'll go ahead and delete the extra two containers here so we can just start with this original one now instead of doing my styling directly to this block what I want to do instead is style a class so you can see we have a new box here that says add or create a style when you click into it you can see existing styles on the website and choose from those or create a new one for Simplicity sake I'm just going to call this card and we'll hit create we'll go ahead and start with an empty style now we've been taken into the brand new Global Styles panel this should look fairly familiar but it's actually got a whole lot more new powers inside of it so let's go ahead and style up this card like we did before so let's go into our borders and we'll give it a a one pixel border we'll go into our spacing and again we'll start off with 40 pixels of padding inside of that we're going to add an image go to our media library and select our image and we're going to go ahead and give this a class card underscore image we'll hit create start with an empty class and underneath the image we're going to add a headline block we'll go ahead and type in electronics and Exel accessories and instead of styling it we're going to add card title and we'll hit create now with classes attached to each one of these elements we can safely duplicate these items so we can see what they all look next to each other now let's go ahead and make the same changes we made before first off we need a little bit of spacing in between this headline and image so I'm going to click onto my headline block and you can see I'm still in the global Styles area here here inside spacing I'm going to add 20 pixels of top margin and you can see all of these changed at once because I'm not styling this individual block I'm styling the class that all of these blocks share we could also click onto the title make sure we're editing the global style go into typography go into font weight and change the weight to bold as you can see it changed across all instances that are using the same class another thing I forgot to add originally was getting rid of the bottom margin on the headline so we can go into our spacing and zero that out now on our image we can click it go to our card image class go to our borders and we can give them all a nice border radius lastly if we want to change the padding inside the card we can just go in here make sure our card class is selected go to the spacing and change the padding from 40 to 24 just like that we're able to change the style of multiple elements all at one time and yes this will update across the entire website anywhere you use this class hopefully this demonstration showed you just how powerful this change to generate blocks is and the good news is this is only scratching the surface as to what's changed inside these new versions over the next couple weeks I'm going to be creating a lot more small videos like this to help discover all the new things that are possible as we go through the alpha beta and finally the full release so if you want to make sure to keep up with all those hit the Subscribe button and we'll catch you in the next video yeah

Channel: The Admin Bar

Views: 2,864

Keywords:

Id: fRxLfgVcNl8

Length: 6min 30sec (390 seconds)

Published: Thu Feb 29 2024