Bricks 1.3.2 - Auto-Scaling Canvas, Copy & Paste Elements, Sticky Elements

hey there thomas from rixx here today we are going to have a look at the brand new brix one three two and although this is a minor release version this might as well just be bricks 2.0 considering all of the features that we put into this release if we scroll down here on brix build io change log you can see all of the new features up here so i think we got more than 20 and then we've got various improvements and also bug fixes so i think overall this is a very solid release we've got more than 40 items on the list here and this is less than three weeks ago so pretty good output and yeah as always with this sort of release video we are only going to have a look at the main new features so it's usually a handful of features that we're going to check out in each video otherwise this is turning into a three hour screencast tutorial and first up we have the canvas auto scaling so this one is a great addition for everyone who is editing with bricks on a smaller screen on a laptop or just on a partial window now because previously what you actually saw inside the builder and what you saw on the front end could differ quite a lot depending on the screen size that you're editing in but this is now all fixed thanks to the auto scaling so we can have a look at this one first then we're going to have a look at copy and paste elements so previously we could already copy and paste element styles and now we can copy and paste entire elements either on the same page or between different browser tabs or between different browser windows then the community template library which was previously all built on the old section row and column layout is now all container based we added a new template bundle we've introduced new section packs and also we're going to add new woocommerce templates very soon also when inserting templates you can now import the theme styles and the color palettes of those templates so that's pretty cool and we're going to make use of that when importing a template from a template bundle the sticky header there are some new options here also pretty neat because some people were really not happy with the way their sticky header was behaving by default overlapping the content so this one has been fixed as well and maybe we're going to have a look at one or two other items in this list here also we might quite an effort um this time and also going forward by adding a description to each of the new features so if you go through this list and not really sure what a specific item contains or what it means you can just click on it and then you will see a short description like in this case here the woocommerce mini card has a new off-camera setting and this is basically how it works and what it looks like all right without further ado we are going to head straight into the builder and have a look at the canvas auto scaling okay so first of all i'm going to explain a little bit about the screen that i'm working with here i have a total width in my browser here of 1600 pixel so i got my pedal on the left which already takes up 300 pixel and the same also for my structure here on the right hand side which leaves me with a container width of exactly 1 000 pixel now the problem when i'm editing with bricks here with this small screen is that it actually doesn't give me the full picture i'm looking here at my base break point and it looks like as if this would actually take up the entire width of my page but this is not the case because by default if we go to our theme styles and then under general we can see that the default container width is actually 1100 pixel so we can also see the same thing happening here i'm sorry not the same thing happening we can see here that it actually doesn't take up the entire horizontal width because this is 1100 pixel and my entire browser tab is 1600 but of course because i only have 1 000 in here it really doesn't give me an accurate representation of my desktop so what i can do now i can go in here and i can just increase this value now this width this was not possible previously so now i can say how does it actually look on a screen that's 1400 pixels although my canvas here is just 1000 pixels i put in 1400 i press enter and now you can see here in this new scaling control that according to my width is 1400 and the actual width that i have inside of my container here which is 1000 it calculates the scaling and it scales down my content in here so this way i can actually preview and work on a desktop of any size i mean you can go up here and put in [Music] 2560 which is also pretty common resolution and then it looks like this i mean i would not recommend to go up so high because then it scales this to 39 so it's really hard to preview and especially smaller funds i would probably just go with maybe 1200 that's already enough or i just said i want to have this 1280 and then it scales it automatically down to 78 so everyone who is working on a smaller screen i think this is going to solve a huge pain point when editing this base breakpoint but also for smaller breakpoints as well we're going to have a look at this in a minute i just want to further explain a little bit about this width here so let's say now you've set this to 1280 in my case and you're going to save your changes you're going to close this tab or you're going to reload the builder or you create a new page and you reload this new page then this would be gone and every time you load the builder you have to set this canvas with for your base breakpoint right so in order to avoid this what you can do you can actually save this base base breakpoint with so i want to say okay i'm happy with my 1280. all i need to do i just hover over this w character which stands for with obviously i can see this little lock icon here so if i click this i've now locked my base breakpoint width of 1280 and you can also see i'm not allowed to edit this anymore this change has now been saved inside the database inside of your user meta table which means next time you reload the builder it's going to pick up this value but only for your account everyone else who has a different account who everyone is going to set the setting individually and so i'm going to reload the builder i'm not going to save any changes and we're going to have a look is it preserved do i have my 1280 still and you can see now i have this lock icon here it also tells me my desktop has been locked to 1280 and i can just work with this going forward if i want to unlock this um i just click it again and now i can change this to something else if i want to say i want to go back to my 1000 and it looks like this scaling adjusts to 100 percent because we work with exactly 1 000 pixel so this is great because it's only going to lock in the base breakpoint with of the logged in user so if you work in a team you have a bunch of people different designers or writers working on a specific page or blog post or custom post type in bricks everyone is able to set their own with so if you're the only one in your team maybe who has like a smaller screen size and who needs to rely on this lock setting you just set this for yourself everyone else will not be affected by this and the same thing goes for the scaling so this by default scales automatically up and down if i would to reduce for example my canvas width here by resizing my panel you can see that this value will go down and that scaling will be affected so let's just scale this okay so i'm going to reduce this and now you can see how it's scaling down to 94 93 all the way down to okay this is the maximum of 600 pixels for my panel on the left here and you can see it's sticking with my minimum base break point width because everything smaller than 992 would be would fall under this tablet portrait so now it's scaled to 70 percent if i change this back i actually like to exit i always like to have this aligned exactly the same always must be like this for me so now you can see i'm back at my 100 and i have my 1000 pixel here now let's just switch to tablet portrait you can see there's no scaling here because we work with 990 pixel here and as you remember in total we have 1 000 pixel available so that's why now it doesn't scale on this breakpoint but if i would have a smaller window sorry i actually need to reduce this more once i hit my 768 yeah you can see now how it starts scaling down because that is again the smallest width for our tablet portrait everything smaller than 768 falls under mobile landscape so if i go to mobile landscape i can see a hundred percent because yeah i cannot make this smaller that's all i can drag this to but you get the idea if i would have even a smaller i'm not going to resize my browser here but if i would even smaller here then this would also to start scaling down as well and what you can also do you can also disable the auto scaling so for some reason you would actually like to work with a scale of 100 then you would just click here and you same way that you lock your with you can disable the scaling just by hovering over the percentage sign you click it and now the scaling has been disabled again only for your user account and if you would reload the builder now the scaling would be still disabled to enable it again you would just click here have it disabled you can see if i decrease this it's still going to use my 100 and this is pretty obvious once we go smaller than 768 because that's the mobile landscape and that means by default all of the inner containers are stacked so that's why it looks like this and this is basically all fixed with auto scaling for everyone who is working on a smaller screen all of those differences between working in the builder and actually having a look at the front end they should all be fixed now all right that's everything in terms of auto scaling let's jump right into the next feature and there will be the copy and pasting of elements again i've prepared a little section here and i'm not going to win any design or what's here this is just some demo content and all we have here is a container and then we've got a heading and a button and you already know how we can copy and paste styles so for example i'm going to put a button down here and i want that this button is using the same style as this one i can just right click on this button i click on copy button styles i hover over this one i paste it and now this button is using the same styles as the one up here the same thing is now possible for entire elements so you can copy and paste elements in the same way that you could copy and paste styles either on the same page in a different browser tab or even in a different browser window and i can do this with an individual element like my button here or i can also copy and paste my entire section here in my case it's just a pretty simple section with a container and two elements but if i would have a container with a column layout and nested containers and 20 different elements they would be copy and pasted in the same way and there are two ways to do this the first one is again same as copy and pasting of styles i can just right click and now i can copy this container because that's the one i have selected you can see it's highlighted here and i'm also editing the hero container you can see this here in the panel so i can right click i can copy so i click copy and it also tells you hero is copy that's the name of my container so you know what's going on and now i can paste it if i want to paste this below this container just to show you how it looks like on the same page the right click menu is not available here when i just click on the canvas it's only available when you right click on an element so if i actually want to insert this below this root container here i can use the shield sheet keyboard shortcut command p sorry command v or if you're on a windows ctrl v and you can see it's also here this is little helper command v in my case because i'm on a mac so i deselect everything i'm just here on my canvas and i'm just going to you're not going to see this i'm going to click command v you saw this little notification that the hero has been pasted and you can also see now in the structure i've got two hero sections that's on the same page now if i want to insert this inside of another container so let's just add a container here quickly just to show you what this looks like maybe also make this a bit smaller actually you know what i'm just going to change this to my 1280 1200 okay let's lock it and if i want to paste my container that i now just copied previously right inside of this container all i need to do is just to select this container and now it just basically works the same way where you would add a normal element so if i would go to my pedal here and i would just click on heading the heading will be added inside of this container right so now this container has been selected again i can just right click on it click copy and paste sorry click paste or command v or if you're not on a windows control v so i paste here and you can now see my hero container with my heading and my button has been pasted inside of this container that's basically how it works on the same page just to show you that i can also use this through different tabs i'm going to go to this design let me just reload this did i preserve my change here yeah this one is locked let's reload all right you can see we go with our 1200 locked base breakpoint width and i now want to paste my container from my other page that i already have in my clipboard after this one so all i need to do is just here i'm on my canvas i click command v and you can now see i pasted this container i can do the same thing here for this image gallery i just right click copy image gallery copied go to my other page command v image gallery paste it and that's a really easy way and really quick way i think this is a great time saver and a fun little tool to play with i would definitely recommend you to if you use this a lot um get familiar with the keyboard shortcuts command c command v or ctrl c and ctrl we if you're on a windows machine yeah that's pretty much everything for this new feature very powerful but yeah also not too much to explain um yeah let's keep moving the new um community template library this is really interesting i'm really excited to finally be able to allocate some more resources towards this effort um i'm pretty sure we made some great strides already with the template library right now you're going to see the new one in a minute but basically up until now we've had our community template library just based on this old section row and column templates and when you whenever you inserted a template it's in the background it was converted into this container based layout and obviously that was not really a 100 accurate conversion so we basically got rid of all of our templates only the sizzle and rank template bundle we overhauled we added a new template bundle which is called digital i think we're going to check this one out in a second and we also going to start introducing a new kind of template and we're going to call those ones section packs what this one is basically it's a single page template but it contains various sections all in the same layout like header you would have hero section maybe testimonials a contact form a map and a photo and that you can mix and match and you can use for different pages but they all play nicely with each other also very soon we're going to release our first woocommerce templates we now got some professional designer help that we can finally start crunching out and releasing templates on a regular basis so let's have a look at the new community template library where i'm going to do this let's just clean this one up here all right now i go to templates those are my templates and those are the remote templates um while i'm recording this video the community templates are not live yet that's why you see this little label here and you can see we've got three template bundles rank and sizzle if you're already a brix user for a while you probably know those but they are completely redesigned with the new container layout structure and we've got a new bundle it's called digital this is how it looks like it contains 12 different templates let me show you one the home page looks like this all right so it looks like and this is basically the style of this digital template bundle all right i'm going to first insert um this is the section pack i mentioned um previously so they basically look like this so this is a section pack it has a hero section and we've got here this little text base section here we've got this section got this accordion got those icon boxes here yeah and this one is also probably going to receive a header and a photo as well and i think we're already working on the second section pack and after that we're going to do some woocommerce templates all right what i actually wanted to show you here is the following feature which is down here and this is the ability to import theme styles and color palettes when you insert a template so especially when we work with template bundles in the background we always have set up a theme style for the section bundle because obviously we want to use the same colors throughout our entire website and also the same goes for our colors so i'm going to show you how this looks like using this one here digital first i need to make sure i want to import my images and replace the content and let's just use the homepage that we just previewed just a minute ago and then we click on insert and now you can see this notification this is also this is new in bricks 132 is telling me this template contains a theme style would you like to import it yes i want to import it and then it also detected the color palette so whenever you import a template that has colors from a color palette they can also be from different color palettes bricks will basically generate a unique color palette from all the color palette colors that it finds inside this template yeah i also want to import this entire color palette if you hover over individual colors you can also see the color code here hex values or rgba um alpha based colors as well yes let's import it and now it's inserting templates it's downloading all of the images because i selected this um they're now inside of my media library so if i click here i can see this image is actually now locally here in my wordpress installation you can also see that the theme style has been applied if we go to [Music] settings and then theme styles you can now see here the digital template bundle theme style of course we need to add a condition by default it's not going to be applied so if i want to have this applied to my page here what i would do so this page is called copy paste elements i would add a condition individual and then i'm going to look for copy and paste elements okay so next time i reload the builder it's going to use this template style let's just save it and let's have a look at the color palette so maybe we can have a look at this button it's using the primary color for the button so if i go here in my theme styles and then under button primary you can see the color here and if i scroll down you can also now see the color palette and name of the color palette that we just imported if you remember those are all of the colors we saw previously in the template model when we inserted the template it's basically yeah i'm generating this on the fly and the name of the color palette will always be the name of the template that you inserted of course i can rename this if i just want to call this digital only i can just say edit palette rename it to digital or maybe bundle as well so i know where it's coming from hit save okay now it's been renamed if you want to rename those colors by default they just have didn't don't have any unique names you can just go to list view oops and then go here and then you can just give them a different name okay we're going to keep this color and yeah this is basically how it looks like now i think this is a much more streamlined process and it also goes hand in hand with the new community template library and the extensions that we're going to provide there all of the new templates so it's much easier to just start working with the colors that we've already defined which is probably going to save a lot of time let's have a look at the change lock there was something else i wanted to show you the sticky header on scroll and the slide up setting there's my header i'm not going to reload my builder here i'm just going to stick with my 1000 pixel width so you can see here i'm editing a header template which is visible because you can see i have this little label here header settings if i click on it you can see i have my sticky header enabled and i have sticky on scroll enable and this is new if you don't enable this setting the behavior would be pretty much as it was before let me just disable it so the sticky headers overlapping now my content area here so you can see now it's not above it it's just sitting like it's overlapping my content so if i set sticky on scroll what it does is by default it's going to be precision relative and then once you actually start scrolling down it's going to be sticky like this now what you can also do you can specify the slide up so let's just say once you scroll down 400 pixel i want this header to scroll up automatically and if you scroll down you can see if i scroll up it comes back once i scroll down more than 400 pixel it actually disappears all right next up is the sticky elements i'm not sure why i didn't include this in the list here um because it's here and it's was uploaded i think it has a 500 upwards make any elements stick as a visitor scroll up or down your page and we can actually already see this here in this layout because this one here is scrolling down so this is a sticky element but i have a different page here i actually wanted to show you sticky elements this one again very simple it's not anything fancy here in terms of design but you can see here that i have a sticky container which is this one this one here not sticky this one down here also sticky so if i have a look how i actually set this it's very simple you can do this for container you can do this for any other element like a heading like you saw before here for our header this one is sticky as well all you need to do you edit your element then you go to style layout and then position sticky so this is the actual css rule it's just set to position sticky which i've done here and then there's also this little information here telling me that i should at least set the top value you can also set the bottom value but then you need to align your element um also to the end um to the flex end so yeah we're not going to do that usually you just would set the top value in my case i've set this to 100 pixel so you can see as i scroll down it's not scrolling yet okay i have a 111 pixel here so once i scroll down those first 11 pixels is going to be picked up because i have the top set to 100 this is 111 which means once we scroll past this first 11 pixels is going to pick up and it's going to stick with a distance of 100 pixels to the top you can see i scroll down a little bit and now it starts scrolling this one is not sticky here you can see this is just a plain old container this one it doesn't have any position set here so it's not scrolling down now as i scroll down i have this container here you can see this is also set to sticky and the top is also set to 100 pixels so once i scroll down i scroll down i reach my 100 which is the same amount that i have set here so you can see once they are on the same level it's going to start scrolling as well all right you can see that here and that's all there is to um sticky elements yeah just make sure to go to layout position set it to sticky set your top value if you want to change this if you want to say i want to scroll this this should be 50 you can see in real time now it scrolls and it's going to stick with a 50 pixel difference to the top all righty what else do we have i think there were some other things i quickly wanted to show you rankmarth we did a survey quite a while ago in our facebook group in terms of seo plug-in support and rank moth was the most requested one we actually already work with their development team and now also from our side we integrated this seo analysis integration i'm going to show you what that means if you're ranked math user you know what is this um yep that's the post here so i created a post it's called the rank math post and you can also see here my score of 61 this is how what i currently achieve and you can see there's actually no post content inside here so gutenberg is empty but i still get the score and this is because um the rank math api is now consuming your brix data from this post so if i go to my post i can actually see this is how my post looks like so it's just a post title here then i have an h2 heading which contains my focus keyword so that's why it's happy here additionally yeah focus keyword is found in the subheading because i've set it here so it's gonna be it's picking up that one as well um at least one external link if you do follow found in your content the external link is my button here which is linking to bricsbuilder.io and yeah that's basically how it works so now let's go of 61 if i would remove this button that should probably have a negative effect let's see stewart 61 right now reload and now we're at 55 so you can see the change i just made by removing this external link button it affected my score now to do follow link pointing to an external resource is not happy yeah that's basically how this integration works and let's have a look was there something else i wanted to show you i think there was some woocommerce related features mini card we've got an off campus setting here as well let me show you that one quickly i think i can see this let's just un stick this one i should probably get some padding here 10 20 30. let's click and mini card my card details let's show them this is how it looks by default so this is just this card detail model of canvas is disabled because we're using this layout and now i can say i want to have my off cameras at the top on the right on the bottom or the left let's just put it on the right hand side close it open it this is how it looks like also various other settings here i can change the product image width from 60 to 100 then it looks like this 110 120 i can change that border i can change box shadow precision and transform i can change if i'm not using the off canvas i can change the width i want to set this to 500 it looks like this 300 that's not really enough 400 yeah that's possible now what else do we got um yeah position and transform that's possible for the chord detail model the product filters there's a search input that was also requested there's no description here because i think it's pretty self-explanatory you can now add a search field to the product filters element someone has translated bricks into malaysian thank you very much for that um lightbox we can set the image size separately from the gallery image sizes query terms we can exclude now there's some new dynamic data here form element we can change the recapture score thresholds um the developers from the relevancy i hope i pronounced this correctly have also gotten in touch with us so briggs is also compatible with the very popular relevancy search plugin oh yeah i posted a screenshot of the new typography controls it's a pretty opposite is in a facebook group a few days ago and i think it's it's a small change but it's one click less that you have to perform every time you change your typography so let me just show you quickly how this looks like now we already have this sort of like bit more visual controls like those ones here rather than just having this drop down everywhere and if you go now to typography you can also see this here so text the line previously it was also just a drop down like front family of course here it makes sense we cannot really show this any other way but yeah for those sort of controls that you can present in a more visual way we're trying to do this more and more so our text align we've got this now same goes for text transform and same goes also for text decoration very nice i like seeing this [Music] inside of bricks itself inside of the builder we've updated to the latest version of vue.js and also ux so this is where we store all of the state inside of the builder various bug fixes here as well and i think that's it very happy with this release um pretty major release actually i mean that's how it i feel i just feel better and better about the updates the re-release they become more more solid and honestly i mean every release just should be like a 1.3456 release because of the amount of features that we put into each and every release if you appreciate this sort of release video make sure to hit the like button underneath this video subscribe to the channel if you want to stay up to date and be the first to be notified about any upcoming release and yeah i hope you enjoyed this new update um as much as we enjoyed developing it for you if there are any bugs here which of course creep up in every release especially now that wordpress 5.8 has been released yes no on the 20th of july if you notice anything unusual if something isn't working as expected please let us know via email at help brix build io or you can also go to the forum we have a box category over there as well if you want to discuss the new features with your fellow brics users also make sure to head over to our facebook group over at facebook.com brix community and yeah thank you so much for watching and i'll see you soon bye

Channel: Bricks - Visual Site Builder for WordPress

Views: 7,542

Keywords:

Id: 5cr6FUSbFgU

Length: 36min 34sec (2194 seconds)

Published: Fri Jul 23 2021