Bricks 1.2 (Release Candidate 2)

here today i want to show you what is new in brix 1.2 release candidate number 2 which is now available in your playground account over at tri dot brix builder io and for full change log it's best to head over to our forum and then inside the announcements category you can see the full changelog because there have been a lot of bug fixes that i don't really want to talk about in this video i want to focus on showing you what is new what has changed because there's some features that are not so obvious to catch so i think this video is going to provide a great basis to just understand those more advanced so like a little bit of um sort of hidden features in the new and upcoming brics 1.2 and let's just start with our container element so basically we always looking for ways to offer little tools to provide you with a better workflow or something that can save you time especially if you build websites on a daily basis for more advanced users and one of them in release candidate 2 is the new container layout builder so usually if you want to up until now if you want to create a layout here using the new container you would just click here and then you can add inner containers like this and then if you want to have padding inside you would go to your container you would add your padding maybe you would use the copier style containers and then apply the padding to those containers as well but if you already have a good idea on [Music] what you're trying to build how your layout is supposed to look like you can now do this much faster using this new layout builder so you can see here on the top left hand side of my container element i have this little layout icon so if i click this one and this is a really basic version right now on purpose we just really want to hear from you what is missing here what we should add rather than trying to replicate all of the container settings and just cram this with too many features so right now what you can do you can just create your container and you can also do a full width here by enabling the stretch options which is what i'm going to do and then you can set number of inner containers so for example if i already know i will have a container full width with three you know containers i can just select three here and then i can select set a padding for my inner containers so all of them i want to have a padding of 15 pixel and then i can click insert container and you can now see here in the structure panel it shows me my full width container and my three inner containers and each container is now padding off 15 pixels and you can just this by default stays opens you can just keep adding containers like this so if i know next container i want to have below here should have two vertical inner containers then i can just click here and now i have another container below you can see here this is my first container this is my second root container which is now two you know containers which is what we have set here and yeah it's pretty basic but that's how it works i think it already um is a great time saver at its current state but yeah definitely i'm happy to hear any input in terms of how we can improve this one further and next up we added some new controls to our container so if we go here to our first container previously you had the ability to align your items and justify the content inside and now you can also align the container itself so i'm gonna hide my structure you can see this battle you can see this is a full width container now and this is actually something i accomplished just by setting this alignment option here so usually or previously i would have to go to layout and then select my percentage width drag it to 100 and then it's going to be full width now all you need to do is just to click on this stretch icon if i remove this you can now see it just takes up the default width of 1100 pixel and you can also align this at the start so you can see here centered which is default at the end or i can stretch it like this okay the other new addition here is our css order property so by default each container has a order priority of zero so if i would set this to one it would show up underneath so basically that's how this one works something that you would probably gonna use a lot when you work with mobile breakpoints because then you can easily rearrange your layouts the order of the layout without yeah much difficulties this is a really easy way to do this of course you can also change the direction and rather than have this vertical you can have it vertically reversed but you can also use the order to really you know rearrange them in between each other i can make a totally um completely different flow here so that's a great little addition as well another new addition is the ability to select um to use a custom html tag so before release candidate 2 you're limited to those number of html tags now you can select custom here and then you can enter any custom tag that you want just make sure it's a valid html tag but yeah you can put in anything you want here in case it's not part of this list that's custom html tag and another improvement in terms of the um to clean in order to clean up the interface a little bit on the canvas especially if you nest a lot of containers inside and you have maybe a lot of containers really close to each other because you maybe have a layout with six columns then having a lot of those actions here takes up a lot of space and sometimes yeah it can conflict a little bit with like you know being able to select your container properly so now you can see we've reduced the number of icons that show up so previously we had our edit pencil here which is still available but of course you can just click anywhere else inside your container to do this next up we had our little move hand so this is basically been merged into this pencil icon so you can see now if i hover over this pencil it shows me my cursor now is this move icon so i can basically just use my you know drag and drop this right here going over this pencil icon adding inner containers stay the same and now we've removed the clone and the lead icons still available you can just right click clone your container like this go down here delete your container like this and if you really need access to this um on the element itself you can always go into the structure panel and they're still available here and yeah you can clone from here you can delete from here we also removed the tooltips i think it's pretty clear what every icon here does and especially if you used it a few times so there's really no need to have those tooltips here and showing up all the time then the element itself um we've also repositioned our action icons here so now you only have this pencil icon to edit your element and also of course to just drag it around okay if you right click on it you can clone it you can delete it you can save it as a global element you can copy its styles and again you have all of those other actions available also here next up the builder toolbar logo links at the top left hand side if you remember if you go to in your wordpress dashboard unlock bricks settings we have this ability to customize this link so you can link to a preview on the front end of this page you can go back to wordpress so it has the same functionality as this edit with wordpress button and now you also have the ability to link this to your dashboard directly so that's possible now as well and then another time saver which i think is pretty cool i really like using this one all the time now is the ability to only use your keyboard to add new elements so rather than having to go here with your mouse especially if you're already editing an element like say i'm editing my heading now and now i want to add another element so what i would normally do i would just click somewhere on my canvas or click this little plus icon and then i go here and then i click on my element so now what i can do straight away from here just by using the keyboard shortcut so first of all bringing up the elements i can press command shift and e okay brings this one up and it also automatically focuses on the search input here if you're already in this view you can also just press command shift s brings the focus here and then you can use your tab key so if i press tab on my keyboard now you can see i can navigate through this list here like this and if i press shift tab i go back up so now if i know okay i want to add a button underneath my heading i just focus on this element and then all i need to do is just press enter okay now i've added my button i can press tab again click enter and then i can add as many icons as i want i can click on command z to undo all of those changes if i place to select something wrong i actually want to have an image here i would add it like this so simple feature but yeah definitely useful if you use bricks if you spend a lot of time inside the builder in order to edit your to add new elements onto the canvas really quick and just by using your keyboard next up i think yeah that's in terms of um container that's pretty much it um the panel itself also has a new addition so you already had the ability to hide your structure panel and you can resize the main panel but there was no way to just hide it um i was thinking to add this as a keyboard shortcut but then if you press this by accident and you don't have any additional icon here to toggle this then yeah it's gonna be confusing and probably gonna result in a lot of support unnecessary support so that's why we made this really clear how you can do this and there's only one way to do this right now and i also don't think this is going to change much in the future so if i hover over my panel resizing bar here you can see this little toggle icon so all i need to do is just to click and this way i can toggle my panel pretty simple but yeah for the users who want to utilize this functionality or if you're working on a smaller screen or you really already have everything in place in terms of your layout and you just want to make some changes here to your text you can just do it like this and you don't need to deal with the panel at all then the structure panel also has some new additions and some fixes first one being we've changed the structure icon up here which was pretty similar to our templates icon so now we use this little you know this new icon here which i think is more distinct and doesn't look like this template i can anymore but it's a little improvement in terms of ux and another little time saver is the ability now to click anywhere on the element inside of the structure panel to edit it previously you had to go and hover over those three little dots and then you can click here to edit it and now you can click anywhere on this element so you can just click on the icon itself to edit it and also inside of the label okay and then i added now the icon in that case and you can also rename your elements so for example if i say instead of naming this button i can say i have a custom label for this element and which is going to be click me and you can also see immediately in real time this updates here in the panel so next time i'm editing my button here it gives me this name basically you can see and you can change this anytime to something else then display none so if you were hiding an element we had this little indicator here as well let me edit this heading oh no let me actually edit a container and display none which means this element will not show up will not be rendered on the front end will not be displayed and we have this little eye icon here as an indicator and yeah when you are using smaller breakpoints this basically did not show up so that has been fixed as well also works between smaller break points and if you want to show it again you can just click on this little eye icon and it will remove or reset this setting here so if i click it you can now see my element is visible again and this display value the selected one has been removed so it's back to its default then we had another bug in terms of the scrolling here of the structure so let me just add a lot of elements i'm going to put in 55 inner containers and you can see like personally i'm using this all the time now this little layout builder comes in pretty handy and now you can see you can scroll up or down here it's working fine also in terms of rearranging your elements inside the structure panel we had this behavior previously that as soon as you started dragging all of the containers like each element would expand automatically so if you have a lot of containers like in my case here now previously if i want to take this and drag it up this would all auto expand which was not a good experience so now this doesn't happen anymore you can see nothing is expanding by default anymore so that's another improvement and yeah that's i think those are the main points here in release candidate number two like i said it's available in your playground account over at try.brix build io if you can just use this little feedback button that you will see inside of the builder to submit the screencast a little short video that would be great in terms of reporting any bugs and also any improvements that you want to mention and the final brix 1.2 release that's going to be public and it's going to be available in your brics account as a manual download so this is basically the rollout strategy that we have for this release just because it's such a massive change to bricks um people who just start using bricks or people who have been who already bought it and they're waiting for this new container element yeah you should be good you can just download it as a manual download you don't need to migrate anything if you already have an existing site that you've built with bricks using the section row and container elements then we need to migrate your existing data and already mentioned this also on facebook a few times that we will provide a one click migrator and i'm just going to quickly show you how this one is going to look like so first of all bricks 1.2 available as a manual download in your brix account later this week once we got enough feedback as well for the migrator so people who already build a site with bricks manually download 1.2 migrate an existing site there's definitely going to be some things that are not working mmsa is supposed to do simple because we cannot test any possible layout that you might have just and this infinite number of possibilities how you set up how you align which elements you use which mobile settings you have yeah so it's really really depend on your input in that regard to make sure that the migrator is as good as it can be for as many people as possible and once we reach that later in may we will provide this as a one click download for all of your sites and i think actually this is a pretty good safeguard especially if you have client websites and if they would just see 1.2 they're going to update but they cannot take advantage of the new container because they need to migrate the data which is obviously something that yeah you are going to do so yeah i think that helps in terms of making sure the migration goes as smooth as possible and i'm going to show you how the migrator looks like so now here i'm inside of my dashboard i'm having a look at all of my pages and you can see on the post site here for example this one has been built with bricks and it has already been migrated any page or custom post type item that has not been migrated that is using the old section row and column layout will have this little note here not migrated this basically tells you okay there's bricks data but it's the old one we need to migrate and the way to do this is just by selecting this page and then under bulk actions we have this migrate bricks data you click apply it runs it just takes less than a second to execute and your data will be automatically migrated and then you go to edit with bricks have a look at the base breakpoint all of the mobile break points if anything needs some adjustment or something is really broken if it really doesn't look like what you've built previously then really like please send us a link let us know via email the forum facebook that we can address this and we can fix this for you and also probably a lot of other users that will have this problem otherwise you could do a bulk migration just by selecting all of your pages but i would really recommend that you not do this um yeah simply because you also want to make sure that you take a little bit of time to just go have a look at each page quickly if it needs some adjustment in any breakpoint um yeah so i would recommend to do this one by one for each page and yeah that's basically how the migrator will work as soon as it's available in your downloads later this week yeah and if you have an existing site any feedback here is very much appreciated and yeah that's everything about release candidate number two like i said um the final 1.2 manual downloads later this week and the migraine and everything for 1.2 as a one-click update later this month as soon as we approach this um some the final stages here definitely going to update you um through our channels and but yeah i think that's everything from my site all the information i wanted to share i've shared and yeah looking very much forward to your feedback and happy testing bye

Channel: Bricks - Visual Site Builder for WordPress

Views: 1,754

Keywords:

Id: UPGfQs0FDJY

Length: 19min 37sec (1177 seconds)

Published: Mon May 10 2021