Bricks 1.3.6 - Rich Text Editing, Code Completion, Quick Edit Links

hey there thomas from briggs here i want to show you what is numerix 136 that we just released seven new features in total actually supposed to be a hotfix release after the massive 135 updates um six days ago but um yeah we actually have seven new features in this we release makes sense to uh shoot a video and to show you how those work um at the very top the first feature we've got is the exclude conditions so now you can exclude your templates and your theme styles from specific pages according to a certain conditions um let me show you how this works for the theme styles so i'm editing a page currently here go to theme styles and i can see that right now i'm applying this theme style to my entire website what i can do now i can add another condition and say i want to exclude so this is going to be an exclude condition so i don't want to show this theme style on my blog page alright now i save here and let's just head over to our blog where is it here's my blog and you can see the theme style is not applied here you can see on this page how it looks like um actually i'm having a custom font here for my headings and then a google font i think this is poppins um for my body text and you can see on the front end those fonts are no longer applied and that's because i am excluding my theme style from my blog page now if i would remove this condition reload the block you can see now the theme start is applied again let's jump to our header template and let's exclude our header from the block so you can see how this works for templates i'm going to jump into my header template conditions right now i'm showing it on my entire website same thing as my theme style before and i want to exclude it individual and then block and you can also see up here so once you have all of your conditions closed you can see your excludes right away they are marked as an exclude here so now my header shows my entire website except for my blog save it let's reload it and you can see the header no longer being loaded that's exactly what i wanted if i remove it reload it again you can see now it's been loaded again that's new feature number one now the second new feature is the text element one of the most used and most important elements on any website of course has received some great improvements um previously you were not able to add your headings there at least not in the visual tab and also not your images or your attachments in general you now can and i'm going to show you how this looks like let's close our header and i have this page here and this is the new rich text element you can see here previously we just called this text now it's called rich text we've also got another a new element here the basic text we're going to have a look at that one afterwards but yeah the text element is now rich text and you can see here that i can now specify the html tag so this one here is an h1 if i change this to h2 you can see how you can change this really easy and same goes for the images i have an image here which is aligned left if i change this to a line right you can see on the canvas also how this one updates immediately and how it looks like i have my text here then i have another heading here which of course i can also change to anything else that i want and yeah those are the abilities now you can resize your [Music] editor as well the tiny mce editor and that's the new or the improved text element now named rich text to separate it from the new element which is our basic text that's our third new item here and you're now able and this is really the element that you should use if you just have a one line of text a text string or maybe just a simple link um [Music] as it was um prior to bricks 136 if you just want to edit a simple link you would have to use the text element but then the link was wrapped inside of a paragraph and now that's no longer the case you can just use the basic text element i'm going to show you if i add this to my page you can see this is how it looks like right now i can still edit it i can still click here and say i want to have this one bold and then now it's bold you can see here in the preview in this text area exactly the html that's been generated you can change the html tag by default it's a div if you want to change it to anything else or use a custom html tag that's not in the list you can do that you can link the whole element to let's say an internal page if i want to link this to my blog now you can see this is a link on the underline this is the theme started apply to my links so yeah this is how this looks like right now this basic text element um you can add line breaks the line break that you add is going to be a line break like this the br tag that's how this element works now here this is the first iteration if you have any suggestions how we can improve this further don't hesitate to let us know all right let's remove that one or let's just keep it here let's save it and let's keep moving item number four the wordpress admin bar that's a real nice time saver here if you're previewing your templates or just browsing your site on the front and you want to quickly navigate maybe you see a mistake in your header what you can do and i'm going to show this here on my let me go to this page actually i'm going to preview that one you already know that you have this edit with breaks link if i click here i'm going to edit my page content but now if i hover with my mouse over this link you can now see i can also with one link jump right into the header builder or into the photo builder so it tells me here i can edit my header and then it's going to show you the template name in my case i'm simply calling this header and the same for the footer you can go to your brick settings with one click and you can also go to the bricks template admin screen from here so that's a simple feature but very helpful um a lot of people requested that one as well now the next one this is a bit more yeah for developers the developer feature the code completion via emmet so you can now speed up your html and css generation i'm going to show you a few examples here maybe just start with some css code let's just say i have my container here and then i want to change the background color of my containers i can go to my custom css you already know about this and then i would add my root keywords so now instead of having to type out all of my css properties i can just use the um all sorts of css abbreviations and i'm going to leave a link to the emit article documentation in the video description below but let's just say for the background color what i can do now i can just simply say bgc you can already see here there's this preview so as soon as i hit tab this preview is going to be added onto um like inside my coat here so what i can say now let's just say i want to have a background color red okay this is what it's going to look like so i'm just going to press tab and you can now see i've applied my background color now you can do all kinds of things if i want to put a margin i'm just going to put in m and then we can say m10 tab and it's going to add a margin of 10. now i can do the same thing for padding p 10 pixel um top and bottom and then left and right i want to have maybe two em all right and it would add the padding just like that and you can use this for all kinds of css properties so that's really handy to quickly generate your css you can do the same thing for the code element just maybe remove my text here let's go to the code element okay this is my code here i want to actually execute this code and i want to remove what i have here and now you can use the css syntax class-based or element id based to generate even some complex and nested html structures so i can show you one um for example by adding a unordered creating an unloaded list real quick so i can say i want to have an unloaded list that i'm going to give a css clause of list wrapper and inside of this unordered list i want to have some list items so i'm going to call them list item and i want to have three items and i'm going to populate them with some text so i would just write something like this and now if i hit tab the html will be generated for me so that's a real quick way you can go much more complex and once you wrap your head around the syntax um so yeah i'm gonna leave a link in the video description as well to the cheat sheet for this html abbreviations that but that's a real nice time saver here in bricks 136. let's keep moving to the responsive background video um let me grab one quickly for you and add it to our section here okay so this is background video and previously the way the background video was working in bricks was that we just centered the background video then we used some transform scale to make it bigger that it's gonna and it's covering your entire container now brix is dynamically calculating and updating the video dimension of your background video according to the container dimensions so whenever those change either on window resize or maybe you change your mobile phone from portrait to landscape brick is automatically recalculating the dimensions of your background video yeah for optimal results you can also specify the aspect ratio most videos by default are now using 16 to 9 but you can just add anything else here if you want to have a video that's 4 3 you can create your video dimensions just like that and then you can see that it's gonna be updated here right away as well of course you can still apply some scaling if you want to and yeah that's the responsive background video let's save again and let's head to our last feature and this is an extension of the pseudo elements that we added in the previous release in brics 135 you can now add the content css property to your before and after pseudo elements and let me show you how you can do this here on this last section that i have here i have this price here and what i want to do now just a real quick example is i want to add some content before that i want to style differently but i don't want to have to create another element for this so what i can do now i can go up here we already know about this from bricks one three five and i can create a pseudo class or if pseudoelement i haven't done this yet so what i'm going to do now i'm going to create my before pseudo element so i'm going to put in a double colon and then i'm going to name this one b4 hit enter and now you can see the pseudo element has been created i actually already added this one previously that's where you can now see this setting is already here so i have my dollar sign here and what i can do now because this has been added here [Music] right before my text i can style this differently so i can say i want this to be a different color or i want this to be a different font size as well make this a bit smaller i can do this and i can also do the same thing for my after content so i'm going to put in a double colon after create and then i have this per month in here which i also already created previously in my tests um so that's why i have this string here and this one is actually also already styled i already put a background and color here text color and yeah that's basically how you can work with this before and after of course you can also create if i were to create something here on my container which is not a text but i mean i can get creative with this i had also something here already you can see i have some before contents if i click here you can see this is what i added here before container but yeah this can be anything i can just put in an empty content you can say i want to have background color [Music] and then i just need to give it a width and the height if you're familiar with css and working with those pseudoelements you know what i'm doing here now this is a dimension now i can change my positioning to absolute put it at the top right corner just like that without having to create another element and trying to figure out how to position it i can just work with those before and after pseudo elements and those are all the new features in bricks 136 make sure to check out the improvements down here as well then also again um some bug fixes here and yeah this update comes just six days after our last major release so it was supposed to be a hot fix it turned into much bigger release yeah we hope you enjoy working with bricks136 and i'll see you in the next update bye

Channel: Bricks - Visual Site Builder for WordPress

Views: 1,586

Keywords:

Id: aEHHPZSJ6r8

Length: 15min 33sec (933 seconds)

Published: Sat Nov 13 2021