Free Bricks Playground & Intro To The New Container

i would like to give you a quick intro to the upcoming brx 1.2 release and the new container element so this is not available right now as a download in your brix account but you can create a free account here over at try.bricksbuilder.io and just put in your email once you're logged in you can create pages with bricks using the new container element and which i'm gonna quickly show you now how this one is supposed to work so bricks 1.2 release candidate 1 looks like this so now we have our structure separated here on the right hand side previously up until bricks 113 the structure was inside of the main panel so when you were editing for example and you just want to have a look at your structure you basically um no longer edit your column because it just basically replaces this view so you need to toggle between those all the time now this is separated and using a new container your layouts now obviously and your whole structure becomes very versatile flexible and different and not really predictable anymore like before with this rigid approach that we followed of having a section a row a column and inside the elements definitely super helpful to just have this on all the time you can disable it you can hide it like this just by clicking on this structure icon but personally yeah i have i use it all the time okay so the new container um first of all you can just click on any element now so there's no need to like drag an element onto the canvas although you can still do this so let's just add a heading for example and you can see now my heading has been added to the structure and this new approach also has the big advantage of reducing your html structure if i would do the same thing here in brics 113 if i add my heading here and you can see that i have my section my row my column and my heading but if i'm going to style only this heading there's no need really to have all of this all of those wrappers around here like this this section so the html structure in the prior to a brix 1.2 was definitely way too bloated like this so using this um structure now here this means html structure is going to be smaller which means our page size is going to be smaller so loading time is going to be faster and also this will have a positive effect on your rankings okay so this is the heading um i'm not going to mess with this one here i want to show you the containers i'm just going to add a new one either just by clicking on it or i can just click here to add a new container i click and you can see now i have my container in here now i can add more containers inside of this container so let's say i i can do this by editing my container and then i go here and then i can just add containers like this um you can see they are now inside of my main container or i can also use this little plus icon here to add those three containers inside of my main container and then i can use the controls here to change the direction for example so if i set this to a horizontal you can see now we have this three column layout basically but only using a container on the root and having those three containers inside rather than having to have this sort of structure where we have our section our our columns in here okay but let's um let me show you the alignment options by using some elements so i'm going to edit this one then i'm going to put in a heading and a button i'm going to resize my container which now i can also do visually so i can change the width here um i can also toggle the units in my example i just want to change the height um now change it to something like this maybe also add a sorry wrong click background image um i'm gonna select this one of my cousin i'm just kidding this is some random guy from unsplash css filter saturation maybe make this a bit and you can see also like this is really smooth here how this one is resizing i'm really loving this one 600 okay and now i want to align my elements inside of this container centered so i'm going to set my main axis to center and this one to send out as well now you can see my heading still on the left this is because this block element takes up the entire horizontal width so what i can do i can just edit my heading and then i can go here to with and now we have this new order unit so now you can see the element only takes up the space that it needs um going forward i definitely want to provide option to select more units or just basically you know set any unit that you want right now this is not possible but it's coming for sure um let's change this here container style light it's a bit more visible increase this extra large okay that looks better and that's how i basically created my section just by having a container here with my alignment options which are also now more much more accessible just by having them straight in this content tab here rather than having to go to style layout and then scroll down to those settings like we need to do it previously now you need to go here click on layout go in here and then i change it like this now it's much more visual having those controls here right now also we have the ability to um like first of all sorry um you can change the html tag of your container as well using this um drop down here by default it's going to be a div if you want to set this to section you can set it to section um it renders a section tag on the front end here you can also choose different display options um you can also hide this one if you don't want to show this and this is also new in bricks 1.2 previously we always showed all of the elements in the build even though they were hidden which made it actually kind of hard to reason about like what is um visible at which point so now the element inside of the build is hidden because i set my display to none and using the structure having this on all the time this is another argument for it it's just that you can still see okay i have my container here and you have this little indicator here this little eye icon basically telling you that this element is hidden okay so if you notice um let's say i'm not editing my container anymore i'm like okay i have something here but i cannot see anything you see this little icon here i can just edit edit my structure and set this again to flex and now my container is visible so css grid that's something we also want to add going forward right now release candidate one will not have this um ability but that's definitely something we are going to add as well if there's anything else missing like some people already report it on facebook and also via email um some of the controls that we should add so yeah if there's something that you're missing in terms of the container elements definitely head over to forum.brixfield.io under announcements um there is a post about um this topic here the new container and that would be great if you can just add reply to this post and then we can just have a discussion over there okay i think this is actually enough in terms of showing you like the basics of the container um like i said just create an account here and try outbrexpil.io and you have all the time in the world to basically test everything out also if you are not a brics customer yet and so you don't have access to the software itself like on your own site and you just want to test everything going inside of your [Music] playground there are two plugins that we added so if you want to test for example acf there's acf installed as a plugin this is the free version um definitely that's a good idea if that's something that you're planning to use with bricks then you can just create a new field group define some controls there because that allows you also to test the dynamic data here in acf you can see it once you've defined it it's not available now because i'm not having this here but then you can add dynamic data and play around with that as well and we also installed the custom post type ui so you can create your own custom post types if you want to have a look basically trying to replicate your real estate listings you know you probably use a custom post type or projects or any custom post type really then that's the way to do this um using those um plugins here now for customers who are already using bricks and you already created your site with bricks using the section row and column approach obviously um this works completely different so we are going to provide a migrator um one with one click you can basically convert your existing paid bricks pages um from the sector and column layout into this new container layout but just because it's so flexible and we don't really have like a clear um definition of what is going to be your column um what's zero what's your section um and if you have a really complex layout you might need to make some manual adjustments but that's also another reason why we want to provide this um try.bricksbuild.io playground so you can also later on import your existing data and just like run the migrator um which is accessible well i don't have any data in here right now but um you're gonna be able to use the just to select any page that you created with the old structure and then using this bulk action you will be able to migrate to the new container you just click apply and the data will be migrated to the new container the old data will still be saved it's still going to be there so you can always roll back to a previous version of bricks and yeah continue using that one as well i think that's a wrap that's everything i wanted to mention in terms of the new container like i said please um test it you know let us know don't be shy just head over to the forum forum dot brix builder dot io reply to the official post about a new container and we would really like to improve this together with you as always in order to make sure we have like a stable 1.2 and the migrator is also working as well all right thanks so much for attention bye

Channel: Bricks - Visual Site Builder for WordPress

Views: 1,969

Keywords:

Id: LuHcy8e1szs

Length: 11min 35sec (695 seconds)

Published: Sun May 02 2021