Mastering Bricks, Core Framework & Advanced Themer - Beginners Guide

I get asked an awful lot about how do you get started using bricks alongside Advanced thema and core framework well today I'm going to go through a very simple primer that's going to give you

some real world examples of how you can get started using this now first of all let me just quickly say this is not a comprehensive guide to all the things you can do I will reference other videos that I've created which you can check

out that goes in more detail with certain different aspects I'll be covering today also I'm going to assume a certain level of prior knowledge that you are com able with the basics of using bricks Builder to be able to

create simple pages and you want to just take it to the next level by using these additional tools to speed up your design process and make your whole design more flexible with that other way let's take

a look at how we get started with everything now I'm going to break this down into multiple different sections we're going to start off with the tools we're going to use the differences between other tools you may have been using before and getting some of those

basics in place now first of all if you are moving over from something like Elemental or and you're not used to working with a class-based design tool like bricks there's going to be quite a few different changes that you're going

to have to make to become more efficient in the way that you work just kind of switching your mindset a little bit won't take you very long and once you kind of get to grips with it you realize just how much more flexible this method

of building websites actually is so okay let's take a quick look now at core framework some of the basics we have set up and then how we take some of those values and move those over into bricks itself to give us a flexible starting

point for building all of our websites so this is the interface for core framework you can see we've got things broken down on the left hand side into colors typography spacing and so on

again I've covered a lot of this in his own dedicated videos which I'll will link everything down in the description down below so you can check those out to get more info so what we're going to take a look at is how we configure some of these options so first of all

underneath the color section you can see we've got our three brand colors now you can add as many more as you want in here or take away if you don't want to use them if you want to change a color you can simply click on the preview chip and

change it to whatever value you want you can also change things over based upon the color format you want to use if you prefer to use hexadecimal values or hexadecimal values with Alpha channels and so on you can simply choose what you

want from here and you'll see that we now have more options available so Alpha channels and so on or switch this over to something like RGB you can see we can change it inside there as well but I'll show you a little later how you can

easily change values inside you and have that reflect across your entire site again one of those real benefits of using something like a framework like this if we scroll on down you can see we've got things for our background text

neutral colors and so on including things like statuses again we can change any values add additional ones in by simply clicking the little plus set whatever values you want inside you and you are done if you want to get rid of

that all we need to do is click on the three little dots click on delete and confirm and we've removed them from the actual panel it really is quite simple we're also going to take a look at how we can map various different values

inside you to various different parts of our theme style to make sure that we have everything connected up and working seamlessly you also notice we've got things like typography spacing and so on

I'm going to leave all these values at their defaults for now if you want to change them you can do it's very easy for example with your typography if you say for example you want to set your minimum font side to something different

all you need to do click inside change the values to whatever you want that will reflect inside our preview window in the main panel and you can also going to change the scale ratios if you want to so for example

your minor thirds and so on so it's up to you I'm going to set these back to what I'm used to working with which is 18 and 20 and we'll leave that as it is and again you can add more inside you if

you want and simp you click the plus you can see this will automatically increment them with 5 XL 6 XL and so on so it's really really simple to be able to add more values inside you as you need them and you can come back at any

point and add them in if you want to once you've set everything up you can click on Save change es and everything then is saved and committed so those are the basics of setting up some of the simple values we have it's also worth

going into the preferences section and taking a quick look inside here so you can see we've got things like a project title default themes and so on what we also got then is the font spacing so

this is set to 62.5 in other words 16 is the standard default value of your typography this will then take 62.5% of it which means it's 10 pixels which sounds complicated but it means that it

just makes it a little easier if you want to scale things if you're using Rems and M's and so on we'll leave this as it is there's pros and cons to setting this to 62.5% as opposed to 100%

but let's not bog things down by making things too complicated your maximum screen width 1366 which is perfectly fine but if you want to change that again you can do there's a little note here that says if

you're using a website builder which we are we're using bricks you want to use this variable so you can see we got the max screen width let's copy that from there for now just so we can use that and I can show you how we can use it

let's copy it job done then you've got some other options if you want to use them so things like prefixes and customization so if you wanted to give this a custom prefix to all of your

classes and variables and so on you can simply pop those inside there and also for the variables up to you if you want to use it I'm going to leave it as it is and we're going to leave all the other values as they are for now and we'll

click on Save changes to make sure everything is committed so now we've got the basic setup inside core framework which we can change at any point if we want to we can easily now move these

values over into bricks itself so let's just open up any page in bricks I've created a blank homepage this is part of my sort of starter site again I've got a video on my blueprints which you can check out here and Link in the

description we'll show you how I've got all this set up let's open up our homepage so this is my blank homepage ready to set things up and you can use this on any page you want what we're going to do is going to come into our

settings section open up our theme Styles and I've created a theme style called brixies Global if you haven't set one up it's very simple to do all you need to do is click on the plus to

create give this a name and save it once you've done that you set your condition up to say where you want to use this in this example the entire website so providing you've got that we now have

our theme style ready to be able to map those different values so let's take a look first of all at that maximum width we've got set inside core framework we're going to do is going to come into

our element container and expand this and you can see we've got width minimum width and so on so what we can do is you can put arbitary values inside you but that really loses the flexibility if we

just pop in that variable that I just copied over from core framework you'll see that 1366 value is now inserted in but we're using a variable to do it what

this means is that if we go back to core framework and change that 1366 to something, 1400 1200 1100 whatever you want that will then reflect on the site without just having to come back here

and make changes and you have various different locations in which you make changes this is where when you start to use a framework like core framework and you set things up and this is why I would always recommend you have a blueprint because chances are all these

things are going to be set up beforehand and then you just use core framework to make those changes it just opens up a ton of flexibility without having to to and fro all over the place and potentially forget changing a value

inside here if we're using those variables that map over to core framework half the work is done for for us so what you can do is you can also set up your minimum width if you want

to so you can do Min screen width you can see we start typing in that pulls in the value pulled in directly from core framework you kind of get the idea what you can do here you can set up your

basic values to start off with so again if we now close this down let's come into something like our colors open this up you can see is our primary secondary and so on well we've got some primary

colors secondary colors tertiary colors and so on all created inside core framework so let's map those over and then everywhere things like buttons and so on that uses the primary and secondary and so on will automatically

have those values pulled in from core framework you can see this is is going it's just like kind of mapping these things together to give us one source of Truth which is the core framework editor that we reflect across our entire site

so for our primary color we'll click and open this up there's our primary you can see hover over it it tells us VAR primary there's our primary variable job done secondary come into our

secondary come into to our light color for example there's light come into our dark color there's dark you kind of see where I'm going with this I'm not going to go through all of these but we'll go

into for example our success which will be this green color and our warning which will be this red color and you can map any other ones you want inside you so pretty cool same

thing goes then for things like a typography so if you open our typography you can see there's our base font size that's 62.5% which is perfectly fine it's the same as what we have set up inside core framework then you can come

into your body for example and you can say what kind of typography do you want to use well we've got this text Medium let's get rid of that completely let's right click inside here and this will open up the little context option for

core framework there's our FL flu typography settings and as you can see as we make changes it reflects on the screen itself cuz these are using variables as part of the header and footer templates not going to worry

about those we're going to set this to M media which is the kind of Base value that we've got for our typo graphy that's perfectly fine again if you want to change things like your color you can do so you can see we've got our variable

for text body I've set some of these up previously using the same principles again you can click change this to whatever you want so you got your base values and so on change it to a color it's a variable so there variables can

be updated inside core framework and reflected throughout your entire site same thing goes for your headings you can come in here change your color now obviously you wouldn't want to set a font size for all your headings that would be a bit silly so we're going to

leave that as it is but you can if you want to map your headings in various different ways but we've got those set up anyway inside core Frameworks we don't need to worry about that and you can carry on going through here setting

things up so for example we come into our button this time let's go into for example our primary well we can choose the primary option so our background color we'll click can choose our primary

from there you can set any sort of hover value so secondary for example we come into our secondary we'll set the options inside there for our secondary

color style light say same thing again choose one of our light values dark choose our dark value cool want to change the hover

State all you need to do is click on the pseudo classes at the top and change this to be the hover you can see that now changes our buttons over so for example if we come into our primary our background color is set to this kind of

dark color which is fine our typography color set to this white again which is fine so like I say I've set some of these values already but you can see how it all works you're setting them up to

be globally accessible inside the editor itself once you finished with all that we can close this down we'll hit save to commit those changes and now we can start adding in and using those variables if you want to make changes

you can come in here and add variables in if you haven't already if you forget something and then if you want to make a change to any of those colors or anything else you can do that inside the core framework editor pretty cool pretty

simple and very very powerful now if you're getting value from this video why not hit the subscribe button to be notified as soon as new content is added I release videos every single week on a range of different topics including tons

to do with bricks Builder hit that subscribe button down below and be notified as soon as new content is added anyway let's get back on with the tutorial so now we've seen those Basics let's now move on and take a look at

some of the options I've got set up with Advanced thema just to make our lives a little easier now I've got a video that's dedicated to the top options that I recommend setting up there are still some new ones that are coming out cuz

Max's changing things on a very regular basis so there may be some additional options that have been added in since then which I would recommend and I will be doing another video on this in the future but the link is in the description down below okay so if we

take a quick look over on the right hand side you can see I've got all these shortcuts which means that I can easily and quickly add in common different elements that we use let's take a quick look if I click the first one that adds

a section in if I click inside the container for example and I add two blocks in you can see now I've got a couple of blocks inside you really quick and easy let's say for example I want to change this from a div to something else

I can click where it says div and I can change from a range of different options you also notice across the top we've got an additional option called at which is the advanced thema main menu which I can

click to open up and there are a ton of options inside here if you like to work with grids for example we can turn those on and we now get a 12 column grid so we can see how our design is working so many different options inside J like I

said it's beyond what I want to cover in this video I've covered quite a few of these different options in their own dedicated videos and I will be adding more in over the the near future let's turn that back off for now okay so there

some of the basics we've got set up now let's take a look at how we can start to build things out we've added this section in but you'll notice I've got a bit of a problem where I've got this navigation bar at the top which is a

separate little template because this is a sticky header automatically things go behind it so we have a little bit of a problem here where the top part of this section is now sitting behind our

navigation so we need to push it down well let's make sure we've got this section selected let's rename it just for good measures now we're going to come over and we're going to create a class now a global class allows us to

apply this to any other element we want to at any point in time so what we're going to do is we're going to click inside J and we're going to start this off with global I like to proceed my

custom classes with the term Global because it makes things just a little bit easier to be able to find them then we're going to do a dash and we're going to put it's a very long class name but well it's there to sort

of describe exactly what we're doing so we'll hit enter or return and now we've applied a global class to that hero section element now nothing has happened because we've done nothing with it yet so what we're going to do is we're going

to come into our style section and from there we're going to come to layout we're going to come to our top margin and we're going to right click like we've seen and again you can see this opens up that context menu now we've got our fluid spacing set up we're going to

set this to be 2XL which is defined like I say in core framework so now we've got this space at the top this means that we don't have to remember the values we've used inside

there all we need to do is apply this class at any point to any other section we add in and that will add that on top so let's say for example let's minimize this let's just add another section in

okay so there's our section so let's just select that section come back over type the word Global there's our Global section margin click and now we've added

that margin a 2XL margin to the top of that section as well simple as that okay so let's get rid of that now there's our hero section okay so now what we're going to do is we're going to take a

look at some of the other options we have we inside here we've got two blocks these blocks are basically going to contain our left and our right pieces of content an image and some text your

typical kind of hero section so what we can do is we can select this container and we can come over to our classes and we can start to use some of the global classes we've got set up as part of core

framework so for example if we type in call you can see columns let's do columns two we now have two column grid set up I want to put a

gap in there we can just click and we can put Gap and we can choose a gap so let's go for something like medium so cool we now have basically like a CSS Grid or we've got a two column layout

which you can do and you can start to build these out by using these kind of like classes that we've got set up as part of core framework for me personally this isn't the way that I work I prefer

to use sort of CSS grid and have more control over things myself but you can use these options if you want to again if you want me to go into more detail about this let me know in the comment section down below but for me this can

very quickly add up to a lot of different classes applied to a container or section or whatever it is and it can get a little bit unwieldy so let's take those off let's remove them let's go

back to what we had originally which is just our basic container what I prefer to do is come into the content area and from there we're going to set this display to be great GD and now what

we're going to do is we're going to do 1R 1R so we now have basically the same thing want to put a gap in let's use one of our variables from core framework so

let's set that same inside there so now we've got exactly the same thing set up but the beauty of this is we can apply this to a class and we can use that class and then all of these settings

will be applied so we don't have to do one at a time like we've just seen we can literally do all the things we want inside you apply it to a class and then apply that anywhere we've got the same kind of structure it's a lot more

flexible in my opinion now before I show you another really useful feature inside Advanced thema let's add a little bit of content to these two columns so we've got what we want to build out inside here so the first one is going to have a

couple of pieces of text and some buttons and so on so let's add a heading in add a second heading in we're going to come down and we're going to add in just couple of buttons and then we're going to go to

our second block and what we're going to do inside here is just simply add an image in so you can see how much quicker and easier it is to be able to use these shortcuts on the right hand side for setting everything up so we're going to do is we're going to choose the block

we're going to come over and from the options and the content we're going to come into our row Gap right click and we're going to set this to be extra small now we have control over exactly

what's being spaced out inside there next thing let's come to our first button and we're going to right click and we're going to say wrap this inside a div expand that div out and pop the second button inside there this now

gives us a little bit more control over the position and so on in alignment and things of the buttons and things like that okay so we've got our basic structure let's just change the content to be a little bit more in keeping let's use another little Nifty feature that

we've got as part of advanced thema let's add some dummy content in cool there we go we've got some dummy content now first of all let's go and choose our first heading let's choose this and set

it to be H1 cuz it's the primary heading let's choose H2 and set that there so you've got a nice hierarchy and it looks absolutely terrible but we will deal with that in a moment let's choose our

image and let's pop in an image inside here as well let's go for this one insert that in okay so now we're starting to get somewhere let's change our button Text Okay so we've got the

basic information in and like I say it looks absolutely terrible so let's make some changes to this now we could easily start coming in and making changes to all the different elements inside here

but that's not really the best way of working so what we can do is first of all rename these to make a little bit more sense okay so now the naming is done let's take a look at what's going

on inside the actual structure panel you'll notice that some of these have these little red lines on the right hand side what exactly does that denote well this is one of the advanced thema options that's telling us that that

particular element has some styling at the ID level in other words we don't have a class applied to it but styling has been applied now before we go any further let me just quickly say that

some people will say to you that styling at the ID level is a big massive no no and in some instances that is right but in General if you've only got one instance of something displayed on your

entire site creating a class for doesn't generally make a huge amount of sense it's only one instance of it so you're still going to have to make changes on that one instance anyway so don't think

it's a bad thing however if you want to use any of these elements or any of these sort of blocks and so on in more than one instance in other words you want to use different pages or templates and so on then it makes absolute sense

to have classes applied to them so with that in mind let's take a look at what we can do here to make life a little easier you'll see with all these named we've got a nice logical hierarchy so

ideally we would choose these and we would apply a class to them however it becomes a bit of a pain when you want to create multiple classes so let's make life a little easier what we can do is

we can choose this hero container and rightclick and we have the option for class converter which again is another one of those options that we have as part of advanced thema so all we need to

do is click on it and this will send show us a hierarchy of exactly what we've just seen so there's our hero container and inside there are all the different elements that we've named now in some instances we don't want to apply

a class to them because it's irrelevant but other instances we do so for example I'm not care about the hero container so I choose to skip that and we don't care about this one

either what we want to just control is the things like the primary heading and so on so this is now using what's called bem naming block element modifier naming

so the block is our a hero container the element is our primary heading and we don't have any modifiers applied at the moment so there's lots of ways in which you can use bam name in and if you want to find out more about it I've got a link down below so you can check that

out so we're going to say we're happy with this we're going to have the options underneath copy the ID styles to the classes so we can say yes unless the class already exists this stops US overwriting classes if we accidentally

have created one before and we've named something the same so we're going to say yes unless it already exists and we're going to say erase the ID style so if we any Styles applied to the ID level it will remove those and put them into the

classes pretty cool say create classes six classes successfully created so let's close this down now if we choose our primary head in you can see this our

hero container primary heading there's our class already set up so now we can make styling changes on the class level so let's come into our style for example let's come into our typography let's

choose a size from here so we'll just something like let's do 3XL we'll change the font weight there we go looks particularly ugly but you kind of get the idea now if

we go to the secondary heading you can see you got own dedicated class so let select it again let's choose the text so let's go for some like Excel there we go let's choose our button our first button

what we're going to do here is come choose the actual Class come to content going to change this over from style I'm going to set this to primary choose our

second button and we're going to set this to be secondary now you see we got a couple of issues here we need to change typography colors and so on so I'll show you how we do that in a moment

but you'll notice that when we've done that we've got these little red lines by the side of these particular elements now you're probably thinking well I chose the option to create a global class and I've selected the global class

and I've set a style to it well that's because these Styles where you choose the button style that's part of your theme Styles it kind of goes on the ID level it doesn't really apply to the

actual uh class itself so this is something to bear in mind you are going to get that so you find if we remove this from here you see it goes once we apply

this you can see it comes back so now we've got classes applied to all this so we can control the look of this so again let's come into our image for example choose that choose the class for it come

into our Styles and from there we're going to come into our borders and shadows open this up we're going to connect our borders together and we're going to Simply choose the right option

grab one of our nice variables that we've got set up as part of core framework and boom we now have that set up so you can see how we can start to utilize these together and be able to

make changes and set things up the way we want so let's save this and let's deal with this problem we've got with this button so you can see that our primary button has the wrong text color so what we need to do is come into our

settings into our theme Styles come down to our buttons from there we're going to come into our primary choose our typography and from there we're going to set our color and we're going to set this to be one of our

variables which is light and that picks that up and again if you want to change things then you want to make your type a little heavier for example say 600 you can see that makes it a little heavier so we've got that all set up everything

is working the way you want you see how easy it is now let's just say we also want to do something like we want to change the border on it we want add a little bit of a radius on this so let's just choose the option

in here and for this example we're going to come into our design Tab and from there we're going to set the radius to be small and then we go a rounded button simple as that okay so let's just save this and you can see that's updated

everything we want there so this doesn't look particularly nice looking but you get the idea of how it works so let's come back out of this and let's move on now to create something else let's just

minimize all this let's add a new section in again you can see why I use these they just make life so quick and easy so we'll choose our section we'll rename this we'll set this to be staff

section and inside the container we're going to add a single block element in for now and this is going to be a basic card design for each of our staff members so what we're going to do is we're going to pop in a heading going to

pop in an image and we're going to pop in some basic text we're going to rename this to excerpt we going to change our block name to staff card so now we've got everything set up been there let's

simply use the class converter one more time enable that you can see this has pulled all the relevant in information in so we're going to say yes to these and create our classes and there's our

four classes successfully created so let close that down so staff card has the staff card class applied heading so on and so forth with that all set up let's

now make that semantically correct so what we're going to do is we're going to select our container we're going to click where it says div and we're going to set this to be a UL an unordered list and then we're going to come into our

card change that from a div and we're going to set this to An Li a list item so one thing that happens here is because we've set this to a list item we need to get rid of an extra little bit of spacing that's automatically added in

to list items so what we're going to do is we're going to select our container which is our unordered list come over into our layout and you'll see inside there the padding has been set to 40 let's set that to zero and we've got rid of that extra little space and

everything is now lined up the way it should be okay let's get styling first of all let's add our image and we're going to come to our staff card our content selected image I've already uploaded a couple so we'll just add the

first one in so what we're going to do now is we're going to give this person a name and the excerpt like we' seen before let's just get rid of that little bit and we'll pop in some dummy

content there we go so let's come back to our card design select the class for that come down and we're going to say for our row Gap right click we're going to set this to be XS like we've done

before okay so there's our basic card setup let's choose our image with our class selected come in and we're going to just come into our borders link these

together set our radius set it to medium there we go so that's looking pretty terrible but you get the idea what's happening here so what we're going to do now is we're going to come back to our container we're simply going to come

into our content and we're just going to set this to be a grid just to keep this simple whe I'm going to CSS grid too heavily I'm going to reuse the simple option saying 1R 1R 1R so we now have a

three column layout let again like we've seen before let's put our spacing inside there again if you want to have more videos on covering how to use CSS grid let me know in the comments section down below take a look at creating something

for you okay so there's our Basics setup for our first card let's tweak The Heading a little bit select the class come in and from there we're going to

come into our typography settings set this to be large font weight we'll leave it like that that looks okay okay so now we've

got the first things done let's come to our image one more time let's set up some values inside here let's come into our content set our aspect ratio for this example let's set this to be one by one

now that squashed it down looks a bit silly so we need change this over to be cover as you can see that doesn't look too bad but let's just say you want to have a little bit more control over things well we can use another function that we've got available as part of

advanced thema which is the object position you could manually set this if you want to but we can also use this Focus Point option so we click on this change this over to custom and now we

can choose where we want this to be focused so you can see we can say focus is going to be mainly on her face position that we want and you get this representation then of how it's

going to look in the different scales so now once we happy we can click apply and that now looks a lot better inside our overall design so now let's go and

simply duplicate this a couple of times we now have three iterations of the same person so we can just easily come into each one of these and make changes and as you can see it's very

easy to set these options up so now they've picked up all the same styling because you've got classes applied to them so let me just show you something now because we've got three iterations of the same thing here let's say we want to make a change and we want to reflect

change across all of these this is where using classes comes in super handy so for example let's come to our heading let's select one of our headings make sure we select the class come into our Styles and let's come into our font

weight let's set this to be something like 700 looks terrible let's say it to be all uppercase but you can see every single iteration of that on this page and any other page we're used in that

same class will have those changes reflected this is one of the key reasons why using classes is so much quicker and easier than messing about with things like templates and all these kind of other things you can do and copy and

spacing classes and things this is just so much more flexible okay so there's a really simple example we now have our three column grid we've got information inside each one of these and we can see how easy it is to be able to to apply

classes change classes and change information and so on very very simple let's save this and let's move on to the next section where I want to take a look at how we can create more interesting

layouts for example Bento grids are definitely one of those things that's kind of really popular right now but if you're not used to working with them they can be quite complicated but using

bricks Builder some classes alongside Advanced thema makes the whole process very very simple so let's do that next let's close this section down let's add

a new section into our layout and from there we're just going to name this bendo section and we'll just call this bendo container and inside there we're going

to just pop in first of all a first block and inside our block we're going to keep this really simple for the layout and the content we're just going to Simply add a heading in and we're going to add in some basic text so we're

going to change this to Bento block and change this to text so like we done before let's make our life super easy easy let's right click on our Bento block let's come down to the class

converter you can see Bento block heading and text looks good to me yes and yes and create classes there's our classes created you can see how quick and easy this is you don't have to mess about naming things yourself you can

just name the sections the containers whatever it is and then use this option to rename them as you see fit okay so there's our first thing so first thing you want to do is Select our bentor block and our class we're going to come

into our layout options and we're going to just connect these padding options together add a chunk of space inside there let's do large for this so let's select our section and we want to change

the background color of this so let's create a class so we're going to call this Global section dark hit enter or return now we've applied a class to that so come to

our background set our background color on there we'll set it to our dark background color and now if you want to apply that to any other we can do that so for example we could say our hero section we can select it

and we can just come up we can add a new class to that if we want to so we do global global section dark boom job done simple as that when to get rid of it all you need to do is click on the X to

remove it but you can see you can easily come in and make changes to things should you want to then the other thing you can do here is so we come back to our bendo section with our class select it come into our typography and set our

color on here cuz obviously we don't want black or gray text or dark text on the dark background doesn't make any sense so let's set that to something like light and that will pick up the formatting in certain instances now it

doesn't work on things like headings so you're going to have to come in here and change your heading so this is where you could if you wanted to use a modifier so for example where we've got our heading

you can see that's now just a heading inside this Bento block heading but let's just say you want to apply a modifier to this no problem all we need to do is Select it come over and choose

the option to rename the class so what we need to do is do Dash Dash and we'll do light hit enter or return we've now created a modifier so now we have our

bem naming set up there's our block Bend our block there's our element heading and there's our modifier light so now with that selected we're going to come to our color and we're simply going to

set this to be our light color and we set the other stying we want up in here as well so let's say we'll set this to be the extra large there we go and we'll also do things like set this to be to be capitalized

each beginning letter is all capitalized and come to our bendo block again making sure that's selected come into our content area set our row Gap we'll set this to be XS like we've done before

let's choose our Bento block make sure our Bento block class is selected come over into our borders and we're going to come in and add a border in so we're going to just link these together set

those to be one set this to be solid and we're going to choose a color let's go for something like this for

now and we'll also come in to our radius and we'll search for radius medium there we go and we're also going to set a background color so we'll change our background color for our

bendo block and we'll choose try this one that looks okay okay let's save this now and let's take a quick preview so you can see there's our first Bento

block setup now obviously we've only got one block inside just so let's go and take a look at how we can create something a little bit more interesting using some of the functions we've got as part Advanced thema so I'm going to do is I'm going to duplicate this a couple

of times so we now have a couple of instances of that so what we're going to do is we're going to choose our Bento container come over to our content area

and from there we can now start to set things up so again let's give this a class Global bendo container so again if we want to use this in other design examples we can do let's come in and we're going to set

this to be grid and once we do that we get this new option which is the grid Builder so what we can do is we can click to open this app and now we've got a visual representation of our grid and we can control various different

elements from here again I've got a dedicated video on this which I'll link in the description down below but I just want to show you how easy it is to set this up first of all we're going to set

this to be three columns and two rows forget the gap for now that's just a value that's being put in you we're going to leave it as it is we're going to say use min max and we're going to say replace CSS automatically used M Max

just gives us a little bit more flexibility over the code that's generated for our grid and the replace CSS automatically means that because this isn't put into various different

setting sections inside uh bricks itself it's actually put into the CSS section this will automatically replace any changes we make inside here as opposed to just like incrementing things on just

keeps things clean and simple so now we're going to do is we're going to grab this fourth one we're going to pop that over to the right hand side we're going to grab this third one pop this over to the left and expand this across the two

grab this one and push it over push it over to the right hand side and extend this out as well so now we created a little bit more of an interesting grid so we're going to say

apply grid and close and now we've got our bentor grid set up let's get rid of this Gap and give ourselves a bit more flexibility by using one of our variables set this to be medium which we've used in a lot of different places

and now we've got the basics of a Bento grid set up now let's go in and take a look at one of our Bandoo blocks I don't like the spacing on this I want to make them a bit taller so what going to do is choose one of our bentle blocks and

you'll see each one of these is now highlighted in blue saying that we selected a class that applies to multiple different elements inside our design so now we know that if we make a change to one of these and I can say

let's just say the third one in this example we can select it and make a change so as long as we choose the class all of those are selected and now we can come into our style come into our layout

and we're going to do is we're going to set a minimum height on there and for this example let's just say we want to set this to be something like 40 so in other words about 400 pixels High

pretty cool now all of those have picked that up and we've applied that class to them we can make changes to them we can customize and state everything we want all done on the class level okay so that's pretty cool we've seen how we can

do some pretty useful and pretty nifty Little Things by using Global classes by using variables pulled in from core framework and so on now let's just say we want to make a change to some of these colors we don't like this blue

color so what we can do is we can come back out of here and go back into core framework let's change our primary color let's change this to something completely different let's come down and choose this purpley kind of pink color

hit save changes and now we've made a change inside just one location and now if we take a look at the front end of the site you can see anywhere that's referenced that change will be reflected

so you can see in this example it's only this button but let's go and add that button into a couple of different locations and see how all of them will change so we now got three instances of the same button and you'll see they've picked up the same styling because

they're set as the primary so again if we choose that button come over and take a quick look you can see this is set as primary so again let's save this if we take a look at our site you can see there's our

button there's our color let's go back and change that this time let's change it to something like a green color save our changes reload our

page there's our buttons all looking cool want to change things like the typography the text and sizes again super easy let's come into our typography let's change this over to

something really dramatic let's just say 10 and 14 so everything looks considerably smaller again let's save things let's refresh our

page and all our text now everywhere is smaller because we've made that change in one single location now this is really just scratching the surface of what can be done but hopefully it's

demonstrated how you can start to utilize just some of the simp simple tools that are available inside bricks core framework and advanced thema to speed up your design process make changes afterwards great if youve got a

client that suddenly changes their mind that they don't want red they want to have blue for example well you can make it in one location and everywhere else will be reflected hopefully what you can also see is how using variables inside

your theme Styles and inside the various different parts of your overall settings for elements gives you a lot more flexibility now as always if you want to learn more about working with bricks Builder simply check out this playlist

here there are tons and tons of videos covering things like Advanced thema core framework and Bricks itself tons there for you to learn from as always all applicable links are in the description my name is Paul C this is WP TS and

until next time take care

[Music]