How To Migrate To The New Container Layout in Bricks 1.2

thomas from brix here in today's video i want to show you how you can upgrade your existing brick site to the new container layout in brix 1.2 this is a necessary step after you update it to 1.2 so i would say if there's no immediate reason for you to update right away i would recommend that you wait until brix 1.2 becomes available as a one-click update from your worldpress dashboard and this is just simply because the migrator right now is in its first version and we can definitely apply some improvements to that one making the migration even easier and faster for you okay so what are we going to migrate in this video yes you can see i'm here on the home page of bricsbuilder.io so we are going to migrate this header template here those two sections this top bar and our main header then the entire homepage you can see all of those sections we are going to migrate and the photo template as well which starts here the pricing table goes down here faqs and some more navigation menus down here so i've already updated to 1.2 but i'm not performing this on my live site obviously if you have a site that is receiving traffic or maybe you're running some ads i would definitely recommend you that you clone your live site do this on a staging environment then you have all the time that you need to perform the migration and yeah once everything is migrated properly you can just merge it back into your main live site and you're good to go okay let's have a look at our wordpress dashboard here and as i said we're going to migrate our header template that's what i will start with as well so under brix templates you can see here i have this notification telling me that i need to migrate my existing bricks data to the new container layout there's a link here as well to the riggs academy in case you want to know how the container works there's a video in this academy article as well okay so in order to run the migrator i just need to select the template that i want to migrate you can do this in bulk you could just select all of your templates because you can see they all need to be migrated so you have this little indicator here this little label telling you this has not been migrated yet personally i would do this one by one this is also what i'm going to do here so i'm going to select my header template and before i actually start migrating anything i want to show you how the site looks like right now because we haven't performed any migration but your content is still being rendered on the front end although not it's not going to be perfect anymore so this is how it should look and this is how my site looks right now with bricks 1.2 without performing any migration so this is still using your old section row and column data and as you can see my header here definitely needs some adjustments in terms of alignment this section looks good this looks good as well this needs some fixes that one is good alignments here needs to be fixed here as well here as well and down here as well all right let's get started so i've selected my header template now i go to bulk actions and then i just click on my great bricks data and then i click apply and you can see here now my brix data was converted to the new container layout structure okay let's open this header in the builder and let's see what we've got okay you can see i have my two sections here migrated if i collapse my structure you can see i have my top bar and i have my header so i'm gonna start with my top bar here so if i expand this one you can see we have our top bar our row and our column so in bricks 1.2 all of those are containers so you can see this little container icon here this is the indicator this is a container the only reason it's showing you this row label and this column label is because of the migrator i just want to make it easier for you to understand that to see what actually happened here what has been migrated okay this one this section already had this label here top bar that's why you see this label instead of section so yeah and then inside of this column we have two elements here so this is our text and our button as well and actually when you perform this migration it's not just simply an effort to make sure that you can just use bricks 1.2 but it's also going to be an opportunity to actually optimize your html structure to make it yeah less bloated resulting in a better page size and then obviously also better loading times and etc so and of course he was prepared for future enhancement in terms of the layout itself so if you do perform this on a client side they are definitely upsides in the long term to do this migration here as well okay so for this simple [Music] section i actually don't need a row in the column so in my case now i would move this one out of here and my button as well and then i'm just going to delete this row and column and now you can see rather than having a section row and column which was necessary in the previous version of bricks now you can just have your container here and inside this container i have my text and my button so i just need to align them now so all i need to do is change the direction by default everything is aligned vertical so i'm going to select horizontal and that's already it my first section is migrated let's save this change and let's continue with our next section here so if we expand all of them you can see we have a header here i'll row our column and our four elements inside of this one okay how can we accomplish how we can get from this mess to this sort of layout here okay let's just move everything around a little bit first so the row and the column here are not really necessary so what i'm going to do i'm going to move this straight under my main container here i'm going to do the same for my nav menu and then i'm gonna take my column and move it here my row i'm gonna delete and you can see now i have instead of having those um four elements on one level i now basically was able to group those two buttons together using this container i can actually rename this so let's just call this one buttons okay so now we have three elements inside of this container so let's just align them as well next to each other and i think we want to have space between all of them exactly and then we should need to adjust our width here for our container because by default it's trying to take up all the available horizontal space so first of all we're going to change our direction and we want to push our content to the right and then also we want to set the width to auto so i'm gonna go here under layout and i change my width unit i'm just gonna put in auto here and you can now see it the container takes up only the space that it needs and that's actually already it um one thing i would probably change is just rather than having my padding here in this container because this was my column previously i would remove this one so let's just remove it and just apply it to our outer container so our logo is covered here as well so we set this all to 15 and this is how it looks like right now on desktop let's have a look at our smaller breakpoints to make sure our header looks good there as well so i'm gonna first go to a tablet portrait i can see okay this is how it looks like right now um i don't really necessarily need this little hamburger menu icon centered here anymore so what i could do i can go here to style layout and then i can work with auto margins so what i can do here if i want to push this to the left hand side i can set the auto um right like this and this is going to push my nav menu to the left if i would do it the other way around i will push it to this side so it really depends on the layout you want to achieve now i can give this some margin here maybe 20 pixel and this is how it looks like right now let's go to the next smaller breakpoint looks good as well this one now is breaking which is not really what we want so we need to see how we can fix that one thing that you also realized here now what you can see is that i no longer see this account button and this is because i'm actually hiding this button here on this smallest breakpoint so if i would go to this button here you can also see the setting it's called display none and with this basically you can hide any element at a specific breakpoint in our case we hide it on mobile portrait okay just so that you know not that you're surprised why this button suddenly is gone and if i go to my header here and i'm gonna have a look how to accomplish this that i can wrap this basically that everything is on one line i can change my rep to no rep and then it's basically all on one line because by default at the mobile landscape we would have this break so this way now it stays all on one line what i can also do here for my topper i could actually increase the height a little bit because now i don't really have a spacer to the bottom of this section so i can just drag it like this maybe i'm gonna set this to 110 and then it just looks like this this breakpoint this breakpoint and our biggest breakpoint okay let's save our header and let's continue with our home page okay so we can actually close that one let's reload here okay you can see now in our staging site our header looks like this now and let's continue going to our pages and i have my home page here and if you were actually trying to edit this with bricks before you migrate it's just maybe you're not aware of this label here and you would just click edit with bricks then the builder would load and well obviously now we have our header here covering this and you would see that this page contains all data and this information basically just telling you that you should perform the migration here okay let's close it and let's migrate so i'm going to click here apply and now my home page has been migrated you can see the label is gone and we can start editing with bricks okay so there's our header right here and our section and let me just collapse all of them and then we can go over them one by one starting with our hero section here and the first thing that you notice is that the alignment here is off and the reason for that is previously we were just able to select typography text align center and this way all of your elements and all of the text would be centered now the elements only take up the width that they need is not 100 anymore that's why this text align center does not work to center also buttons there was like a hack that we used before up until 113 now you can use the proper alignment controls to accomplish this rather than this text align hack by using text align center so i can actually remove this this has no effect in this case and again we can optimize here we don't need the row we don't need to column this is a very simple section we are simply going to move our elements outside of this right into our hero container and we can delete those two all we need to do to light the center is just to go to our container and align our items centered and that's it for this section let's go further down this one is already looking good there's actually nothing i need to change here because this one is a little bit more complex we actually need our columns here um we have here and yeah the text here the image here so yeah i would keep that one i would not touch this here we need to adjust the alignment as well so i can just click here on this container and set this one to center same thing for this one this needs some centering and rather than going through them one by one like this you can also just right click copy the style paste it paste it paste it you can go here and this actually is also not really necessary center it again and that's it for this section as well let's save our changes and let's continue going further down this section also no need to adjust anything this one looks good as well so you can see it um i'm not aligning anything horizontally here really so i don't need to do anything in terms of adjusting and fixing my migration i can just continue but that's actually already it for this home page so you see there was not that much to do and one thing i want to point out is that in brics 113 and all the previous versions we had this margin bottom for our elements now because of the new flexible layout um and because everything is an element also the container there is no more default element margin if you want to set it you can do so using the theme styles so i can go here to theme styles and then under general i can set my element margin so first i'm going to unlink this and then you can see here when i'm changing this now you will see that the margin here between my two elements should change you can see here now it changed and we have proper spacing between all our elements and the same thing also for this root container margin so the naming is maybe a bit unfortunate because we don't really have sections anymore this is the container margin for all of the containers that are on the root level so by default previously the section margin bottom was 30 so if we want to restore the same value we would just put in 30 pixel here okay if you increase this value to 130 you would see now the spacing between those is 130 and not just 30. okay that's our home page and we can continue with our photo template okay let's close that one let's go back to our templates select our footer select our action apply it and let's see how the footer looks like okay pedal our home page and our footer starts here okay again alignments needs to be adjusted so we would just click on our container here and align this centered that's it this one as well center it this looks all good um this needs some adjustment as well instead of horizontal this needs to be vertical vertical and vertical and that is it so i think within 10 to 12 minutes we basically migrated our entire photo template we converted our home page entirely and our header as well and the header actually took the most time because we need to adjust for multiple break points we need to align our mobile menu in a different way or at least that's what we did i deliberately took this detour to show you how also to use the order margin if you're not familiar with that also now in bricks 1.2 you can set the unit for each direction individually you can put in any unit you want as well so there's a lot of enhancement in bricks 1.2 and i think it's going to be a great investment um performing this migration you're not just simply migrating to a new data syntax at the same time like what we did with the header we removed some of those columns we removed some of those rows some of those complexity is now gone there was previously in bricks 113 and the previous version is a requirement we always relied on this really rigid section row column element hierarchy now we completely flew it completely flexible and i think this is going to lay a great foundation for future layout enhancement for extending your site for creating more complex layout for your own site for your client side so yeah i think it's time well spent we try to improve the migrator as time goes on as we receive feedback so like i said if you don't have a mission critical project right now that requires 1.2 that you need to migrate from an existing site i would recommend and tell you to wait until the one click update is available from your wordpress dashboard in case you decide to go ahead and try the migrator and for some reason um or you just don't have the time to do all of those steps that i just performed then you can always roll back you can always go to your brix account you can download 113 after migrating your existing data the old data is still gonna be there you can always go back to an old version and your site is just gonna run just like before and whenever you're ready you perform the migration with brics 1.2 and yeah if you build a new site definitely start using brix 1.2 rather than the old version and yeah you're going to be set up for a great future

Channel: Bricks - Visual Site Builder for WordPress

Views: 852

Keywords:

Id: 3MrLHRQssrg

Length: 19min 8sec (1148 seconds)

Published: Thu May 20 2021