So today we're, going to be taking a look at bricks. Now what is bricks? Is it a page builder? It is, but it's. Not a page builder. Bricks is wordpress theme, but it's kind of more than that brick says: well: it's, more of a hybrid theme and page builder, all rolled into one, with the added benefit of a theme builder.
Let's. Look at another way if oxygen, elemental and divvy kind of had a bit of a love. Child bricks might well be that loved child. It has a lot of things in common with those different things: it's kind of taken, those good things out of all of those, listen to the community of those different sort of page builders and theme, builders, and so on and built a builder That has a lot of those features inside there, so we're, going to take a look at this today.
This is kind of like my first look. I've spent, probably about an hour an hour and a half playing about with this. So i'm just going to show you some of the things that i picked up, give you some of my initial feedback, the things i like the things i think could be improved upon and then i'm going to ask you For your opinions in the comment section so before we walk in let's, just take a look at what we're, going to be covering in bricks today.
So first off let's. Just take a look over the bricks website to see exactly what's going on now. At the time of talking about this, there's, a 40 discount for the early launch kind of thing. How long this will last, i'm, not too sure, but just to go over and let's.
Take a look at the pricing of this anyway, so these are lifetime prices at the moment. So a starter for one website is going to come in at 59.. There may be taxes applied to this depending upon where you are in the world, but the ultimate which gives you a thousand licenses thousand website licenses, is coming in at 149 dollars at the moment.
Like i say, this is lifetime for regular updates technical support, community template access, so basically everything you should need to be able to use this now. This is coming from the happy files developer and i purchased happy files when that was originally on.
The same kind of launch offers this for quite some time, and i ' Ve got to be honest. It's, a great little platform. It's, a great piece of software, so i have no doubt that this will continue to grow and develop in the same way that happy files has so that's.
The pricing side of things, which obviously is one of the most important things to start off with, but what exactly does this do, and why should you even care well, as we can see across the top, we've got a builder a designer performant And we can take a look at the roadmap, so what am i talking about? Well, basically, this is a theme and a page stroke site builder, all bundled into one platform.
So when you install it, you install the theme and the child theme. If you want to which i would recommend you do and in much the same ways you have with divi. You have all this kind of package together as one platform now some of the things that are kind of solid with this to start off with is it feels much better than a version 1.
0 product. It's well thought out well designed it's very, very fast to work with in the editor which you'll, see when we jump over into that. In a moment, the design aspect of it it's. Basically, you could look at this, as if the developers looked at a lot of the feedback, that's coming out for various different page builders out there on the market.
At the moment, listen to what people are asking for and thought, okay, how many of these can i realistically launch with and how many of those can we push on to as we develop? Take it into consideration what people actually want and need from a builder, and i'm, going to call it a builder.
I'm, going to call it a page builder or theme builder. We're, just going to call it a builder, so you have a lot of features inside here for the version 1.0. Now i've, been playing about with this for probably a day and a half, and i just scratched the surface of what you can do just so.
I can see how it works with various different tools that i use on a very daily basis, and this is nothing to look at. This is more a case of me just testing out functionality, and this is all being done with the builder itself, so created an archive page, which i can edit various aspects of we can jump in and i've created the template page for this.
We've got a sticky header on there or sort of scrolling header kind of thing. At the top create a two-column layout. We've got a related article section at the bottom of a footer. This applies to every single page, so this is very akin to what you're, probably used to if you're coming from something like elementor.
If you're using oxygen, if you've used divi there's kind of little bits and pieces from each of those builders, but take in probably the some of the best aspects of it now. Is it perfect not for me, there are still some things that i don't really get on with that.
Well, and these are things that i don't really get on with very well in other page builders. So i don't think it's specific to bricks. I think this is more just either the way that i'm used to working with the tools that i've, been using for quite some time, and i just don't find these alternative ways of working like divi.
For example, i don't really like the interface on that it looks nice. I find it cluttered when you want to get to do something and there's. Certain aspects of that that i find are inside bricks and i'll, show you what i'm talking about okay.
So when you install bricks, you ' Ll have a new entry, so we come in first of all, into the appearance. We go into themes you'll, see what i have is the bricks theme and the bricks child theme. Both of these are downloads that you have when you purchase bricks.
So you'll have access to both of these. I would recommend installing the child theme, because you can, if you want to get stuck in and do a lot more under the hood tweaking than what you can do with some of the other or maybe not necessarily what you can do, but it'S easier inside bricks, so there's, certain aspects of that that are akin to oxygen.
So once you install those and activated those, then we're, going to jump into the brick section and inside here you can see. We've got getting started, which is a nice simple way of showing you the various different things you should look at doing so getting started then dealing with templates and development, those kinds of things it's, like i say, for a Version 1.
0 version of software, it's very mature in the way that it operates and the way it's been put together so kudos for doing something really solid there. So if we jump into the getting started section, we have access to the academy, which then tells us things like how to install it.
How to work with gutenberg the various different things you can do and you can click and we can hop into lots of those, and many of these will have videos as well as written content, to show you how you get around.
But i think if you're used to any kind of page builder, it won't. Take you very long to grasp the concept grasp the basics and start creating pages. You know whether that's, just going to be a single page or whether you want to create headers and footers and then template files, and so on it's, not particularly complicated.
I've, probably looked at two or three things inside the documentation, just to get an idea of how certain things may work other than that i've just got stuck in, and most of it, like, i say, is very, very intuitive.
If we go to how to edit with bricks, for example, you can see this will take you into another article. So all that help is really really easy to access. You can get hold of that quite quick and easy. If we hop into the templates, then you can see this is very akin, like they say to work with something like elemental with the template files and so on and probably most other page builders.
So we can see we can edit this with brick. So we can go in and take a look at editing. Those and you can see. I've got a home page, which is set with a condition to be the front page. It's, a content type template.
Then we've got a post archive, which is an archive type template that is then, given the conditions for all archives default, footer for the entire website, and so on, so pretty self-explanatory. How to do this and, if you jump into add a new template, you'll, just come into what looks like the normal wordpress editor.
You can give this a title. You can say what template type it is. You can see we've got headers, footers content, sections, archives, search, results and error pages, so your for a force covered and so on.
You can tag your templates. If you want to to organize these, and you can create template bundles, you can apply featured images. None of these things i've done at the moment, because i'm more interested in how the builder itself works.
Now. One thing i do want to say is: if you are interested in taking a look at bricks in more detail, you'd like me, to create some dedicated tutorials on how to use it. Please let me know in the comment section below or if you see this on facebook.
Let me know in that thread there tell me the kinds of things you'd, be interested in and i'll, be more than happy to take a look at creating some more detailed structured content. Just beyond this kind of first look: video okay! So once you've, seen that if we come into the settings section and we'll come back to the templates and things we '
Ll have a look in there. You can see that we have several different options inside you to deal with the settings for the particular install of bricks. Now, if you look at some of the videos you'll see that that is pre version one.
I think that one of the videos i looked that was like version 9.09, so there are going to be some slight differences if you're looking at some of the tutorial videos to what you may see if you purchase this yourself yourself, so we've got general, we can say: where do we want the brix editor to be available? Do we want to restrict it to pages? We want to access posts, gutenberg data, for example.
Now this is quite cool. Do you want to load gutenberg data into bricks, and do you want to save bricks data as gutenberg data? I'm, not going to this too much detail, but what you can kind of do is you can have a two-way synergistic link between gutenberg data and editing that or at least opening that up and continuing your editing process inside bricks, and you can Do it in the reverse way? So if you create something inside bricks, do you want to make that data accessible to the gutenberg editor, those kinds of things so that's quite cool to see we can access svg uploads and you can set what access level or what roles can Do that builder access, as you'd, expect pretty self-explanatory.
What you can do you can just set this based upon the user roles templates. We have some options inside you, including things like accessing the save remote templates, which is quite cool again. I'm, not going to go into these things too much the builder.
We can set this to disable auto save, but by default it saves every 60 seconds. So any changes you make will be saved every 60 seconds, but you can change that cycle to whatever value you want or you can disable it completely.
You can alter the builder into dark mode or light mode, whatever you prefer and you can choose what the toolbar logo link does as well, whether you want that to go to preview home page so on so that's, quite cool you can edit Various different things inside here under performance, some of the things that, if you use any kind of performance software to enhance the speed of your wordpress, you're, probably used to things like disabling emojis, those kinds of things, disabling lazy load and so on.
So you can tweak this and i'm sure. This is something that, as this goes beyond version 1 to 1.1, 1.2 and so on. We'll, see more features inside a lot of these settings and i would assume, probably more features inside the performance setting api keys.
If you want to link this through to unsplash to get images directly inside the brix editor, you can do that. You've, got your google maps api recapture mailchimp those kinds of things, so that's, quite cool to see.
Now when it comes to like the mailchimp api, i'd like to see more apis inside here. For me, i use mailer lite. I'd like to see something to do with mega lite inside here, so i can link it through or worst case scenario, maybe even having access to linking this through something like integromat or you know, zapier those kinds of things and if you want To add in some custom code for css, header and body scripts for the scripts, you can drop that inside you, so the settings gives us plenty of options to tweak exactly how this is all going to perform and work.
Next up, we have custom fonts. Now i'm gonna i'm. Not gonna cover this in too much detail, but the nice thing is with this: you've got access to your 800 plus google fonts, but you also have the ability to upload your waff, waft2 or ttf font files and use those natively inside You so if you don't want to rely upon google, you want to access these and you want to have them as part of your site.
You can upload them inside here and use them inside the brix editor. So again, i always like to see the ability to work with fonts inside the editor itself. You can set up custom sidebars and you can see we can register these with a name and a description and then, when you're, creating your templates.
Your pages, your posts and so on, and you want to put in your custom sidebars you can do that quite easily system status is going to give you information about the environment, the theme all those kinds of things, so you can check anything.
You want inside your unlicensed, as his name will suggest, is going to give you access to the license options. Now i've got custom, advanced custom fields installed inside this setup as well reason being.
I want to show you later how we can work with dynamic data directly inside the brix editor, and this, for me, is one of the key things on why i'm, quite excited about where this goes, because for a version, 1.
0 release that has Native integration for dynamic content, you know your normal content, normal sort of dynamic content to do with wordpress itself. So your post titles meta and all those kinds of things great to see that, but the ability to work with acf pods.
I think it's, a meta box. It works with most of these meta field. Type tools i think tool set is exclusion. At the moment it's built directly inside you, and it is incredibly easy to work with. So i'm kind of excited where this is going, so i hope they focus more on this aspect.
Okay, so let's. Take a look! Let's just create something. Let's just jump into the templates i want to do. Is i'm going to delete my single post template and we'll, recreate that just so, you can see how this all works.
So we're, going to pin that off and we'll just delete this completely and we're going to add a new template. So we're just going to call this. We'll. Just say this is going to be our default single post, okay, nothing! You haven't already seen in lots of my other tutorials.
Let's. Just set this to be a content and that's. What i'm, going to do so. I'm going to save this. I'll, save it as a draft or publish it. Doesn't, actually publish it. Doesn't really matter too much.
It's, a test site anyway, so now we're going to do. Is we're going to edit this with bricks? And once i open this up, you're, going to kind of feel like you've, seen most of this before, which is no bad thing, because i think, having something set out that's very familiar is going to Speed up the learning cycle for working with a tool like this okay, so let's, have a quick tour around the interface.
Like i say i don't think i need to go to too much detail because i'm sure you'd, be used to this kind of thing top left hand corner. We can take a look at the structure which is going to give us the hierarchy of the page, so all the sections, the rows, the widgets that are being used, all that kind of good stuff and we'll.
Take a look at that. A little later you can directly insert a new section, you can insert templates and you can get help on how to use this particular function. Next up you ' Ve got your hover styles, which you can set different hover styles of various different things.
You've got your pages, which you can see. I've created a couple of pages inside you and you can just jump in and start editing. Those and you can see we ' Ve got various different options inside there.
Let's just take off the hover styles, your revisions, so you ' Ve, got full revision history on here. So as you're, creating content and editing things you ' Ll have access to those revisions inside just if you want to roll back.
You can do that and, like i said remember, this is saving every 60 seconds. Unless you change that instead of settings, then we ' Ve got our theme style settings which we can choose from a range of different predefined, uh sort of styles theme styles, and these are global styles and you can set up your own global style.
So again it's, one of those things that some other builders have taken quite some time to roll this out. It's integrated directly into version one so really good to see that option. So you can see we '
Ve got these template bundles that are part of the templates that ship with bricks - and we worry about that a little later anyway. So let's. Go back to our settings. We've got page settings and you can see we can do things like we can disable the headers and footers.
We can deal with one-page navigation, so pretty cool to see that your seo options are inside you, you've, got social media options, so you can set up social media and, as you can see, we ' Ve got direct links to unsplash.
If you've got an account set up which is free. I understand, and your custom code is inside you as well, so all nicely neatly laid out and finally, the template settings, which is where we can access those conditions and we can populate content.
So that's, the first section and how you can see that all works on the left hand side if we click on the plus, that just takes us to our elements or our widgets, of which they are a considerable amount for a version.
1.0 release. Okay, so then, across the top we have all the different break points. So we ' Ve got our desktop, which is our base breakpoint, we've, got tablet, portrait tablet, landscape, obviously mobile landscape and mobile portrait, and we can set up values directly inside you as well.
If you want to, we've then got undo and redo. We've got some help. We've got templates, we've got edit in wordpress, which will take us back into the wordpress editor. We've got our preview mode, which i quite like, because once you hit that you can see that now takes us into preview mode.
You can see just how quick this editor is, and then we can just press it again and go back. Super quick to work with so really quick and intuitive, and finally, we have the save option on the very right hand, side.
Now, when you come over these, you can see. We ' Ve got the insert new section, the template and we ' Ve got the help, so what we can do is we can say, let's insert a new section, so we can click, and that gives us this blue box, which is a section and everything is color coded inside you.
There's. Different colors for various different sections for rows, for columns for widgets. All the things have different colors. Now you can see, we ' Ve got a very elemental-esque section at the top.
With these four icons and you've got your edit. Your column, you've, got your adder column, you've got clone column which is just duplicating, and you ' Ve got your clear column.
Then. If we go on to the right hand side you can see. We've got a different set of colors. Now this sort of purpley kind of color - and this is for a row. So if blue is for our columns, purple is for our rose, and then we '
Ve got orange for our sections. So you can see, we can click on any of these and we get options on the left hand side, then, for how this all works. So we can see if we select any column, we now have a column.
We can control the column. We click on this. We can edit the row, and now we're in control of the row and again it tells us at the top what we're actually editing. Finally, if we click on the section you can see now we have the section so really quite easy and intuitive to work with.
So once we created this, what we can do is we can simply come in and say we want to drag an element inside there and there's a heading. We now have things broken down into content and style. So this is where it's very similar to oxygen.
Now i think oxygen could definitely take a few lessons out of brix's interface, because while they share a lot of similarities in how things are laid out, i think this is done in a much sleeker fashion.
Now, before we move on and start building the various different components out, let me just go back to something i showed you earlier, which is the structure option. We click on that you can see now, because we started adding content.
We now have structure inside here, so we've got a section and we can expand that out. We can see the row inside there. We can expand that we can see the column inside there and then we can see the heading.
So there's, our hierarchy again, exactly the same, pretty much as what we have inside oxygen now for me, the thing that i don't like so much about this is the fact that this is, in the left hand section so Either have this open - or i have something else available to me so in other words, if i come in, i want to start editing these sections or whatever.
Once i click that i lose my hierarchy and to go back in i ' Ve got to go back into structure and everything is collapsed. I do have the expand all option, which is very, very useful, but i would like to see this being something that can float, which, while we can position that, wherever we kind of want, we still have basically the same options inside there.
So we're, not gaining anything, but let's move that around. So if thomas is listening to this, i would love to see you have the ability to pull the structure side of things out and separate that from what we have on the left hand side.
I think it would just be a little bit more useful when you want to have your hierarchy open, and you want to be able to be editing, columns, rows, sections which is whatever it is. You're working on editing, so just a little thing and, like i said as i go through this video, i'm, going to talk about the things that i think could do with enhancing.
From my personal point of view for a usability point of view for someone that probably spends most days of the week, dealing with different types of page builders and interfaces and getting to find the things that are quick and easy to work with and the things that Slow me down, okay, so with that being said, let's.
Just take a look now at how we do some things now, what are some of the things that i find a little bit awkward for my working practice? I'm, not the biggest fan of having lots and lots of different widget-y icons like this for various different sections, especially over on the right-hand side, as opposed to being in the center, which kind of sounds a bit silly.
I know, but i tend to work on a 4k screen and mine is not always maximized. It gets a little bit frustrating to have to go from the left to the right to the left or the right to the left to the right to select things.
This is one of those things that i could say. I think divi is also guilty of doing this kind of thing. Do i think there's, a better solution. I don't know i'm sure. There are better ways - and i know i could sort of push this over and dock this on the right hand, side, and that might be something that i take a look at doing, but these are just little things that are in no way a problem when it Comes to working with this, they're just little things that i've noticed for myself.
Okay, so we're going to do. Is we're going to get rid of this widget and we're, going to start building out the template for this page, and i'm going to show you how easy it is, but also i'M going to show you how easy it is to start adding in dynamic data which, for me, is the most exciting part of this.
So you can see when you select a section and we take a look on the right hand, side and we expand this out. You can see we can go to the sort of little dots in the right hand, side, and we now have more options.
So again, this is one of those things that i think this is a super intuitive way of working. So we can save this as a template, a section as a template which is really cool. We can delete the section we can clone it.
We can insert a template below this. We can move it around, we can add a new section or we can edit the section and this kind of flows down through the hierarchy that we have inside the structure, slightly less options depending on how far you go down and what it is you select, but Really solid and easy to see how to deal with this kind of thing.
Okay, so now we've, seen most of the interface let's. Take a look! Let's, just delete this section and let's just add a new section in so we're going to say, insert the section and we're going to do. Is we're going to use this now to drop in a background image? We're, going to drop in our title and we're, dropping some meta information.
So to do that, we can come over. We can click plus and if we scroll through you can see, we have lots and lots of really cool options. What we want to do is go ahead and start adding in some of the key things we want.
So we come down to the single which we're. Currently working with you can see, we have a block of different options. Most of these, you should be used to if you set anything up to do with dealing with templates and things like elementor and so on, and you can also pin these particular features, which i think is super cool which again so many other page builders could really Learn a thing or two from what's being done here.
What looks like really really simple options? Are a game changer for people that use these kind of features day in day out. So if we pin this post title that becomes a pinned item right at the top, we've got quick access to this.
How cool is that that's, really really quite cool, so we'll do? Is we're, going to just drag this and drop this into our section, and there we go there's, our default single post. So once we've got that we can now go through it and set up the content and we can also set up any styling.
We want inside you. So at the moment this is said to be in h1, but we can choose from all the normal culprits so h1, through to h6. I'd, like to see some additional options inside there. So we can set this as a div as a span and so on.
So we can do other things to this. We can choose the type and you can see we can set this to be a hero or lead. We could say it's, going to be a hero option. We can set a style inside you, and this is where our global styles come in.
You can see we've got things like primary and secondary, and we can change all of these. So we set this to be secondary. For example, you can see that pulls in the secondary color. Whatever you set up in your global styles, go to dark, for example, that pull the dark style in light style.
You can see, or we can just delete that completely. You can add a prefix or a suffix. If you want to - and you can add some context so context to title on archive search templates - i haven't really tested this out.
So i'm assuming i could be wrong on this. So please correct me. If i am that this will put whether it's like a archive or a taxonomy or a tag, or something like that, so that's quite useful. If that is the case, i do like the ability to disable that, because i kind of find that a little frustrating okay, so you can see we can edit the title in settings page settings and seo.
If we want to let's, just jump over to the style now we have all of our styling options inside here our layout option - and you can see this is where we ' Ve got our margins and our paddings, and so on.
We can set, we want to display this as a block or none. We can set it to auto width. We can adjust the opacity, the positioning, you can set your z index any animations and that's just inside the layout section, so pretty cool to see all that we can link or unlink these values.
If we want to, we can set the width and so on. So let's just say we want to set this to be a vertical height and we're, going to set this to be something like let's. Just say: 60: you can see that now expands that out for us, you can say auto width if you want to, and you can see this will automatically fill out the size of it based upon the content that's inside there.
So we don't want to do that for obvious reasons. The other thing i like about this is you ' Ve got direct interaction with the editor itself, so, instead of having to go in and manually insert your margins and so on, you can do it directly inside the editor.
So if you want to, you can drag this down and you can see we've, set that to 45 pixels. If we take a look at the layout, we'll, see 45 pixels of padding. What you can do is so you can link these, so you can see the little chain link.
We can link that together and now the opposites are linked. So now the top and the bottom adjust proportionally. If you go to the side, you can see the sides adjust proportionally, you can also come back up and you can link again so now say all sides are linked.
So all four sides are now linked together and we get equal values and everything is set up. Equidistant, so pretty cool again really really easy to do. No keyboard shortcuts to worry about remembering anything.
You can just simply link the size and link the size link the opposites, whatever you kind of want to do or you can come in and you can manually set those values directly inside you. So let's just take those off there.
So, as you see, adjust in padding and so on is really really easy. Just depends on what you select you can see. We can add margins padding, depending upon which side of the box that you're, actually holding your mouse so really simple.
To do okay, so now we've. Seen how easy this is about editing the basic layout, let's. Take a look at how we can build out our template. Now, at the moment you can see this has default single posts which doesn '
T really mean anything. So let's, make our lives a little easier by having some content that we can see that we can edit to do. That is really simple: we're, going to come into the settings section into our template settings into populate content and inside there we can choose what content we want to use for our preview.
This just makes the whole process of designing your templates considerably easier. So we know this is a singles. We're, going to choose the content type and set that to single post or page. We can then take a look at any posts or pages.
We have created, and we ' Ll choose this hello world as an example, and we ' Ll hit apply preview that's, going to save it reload the editor, which is pretty quick anyway, and that's. Then going to show us the content, we've just chosen, so you can see hello world now, instead of just that placeholder.
So that's really easy to do so. The next thing i want to do is set up the position of this and also apply some styling and put the background image inside here. Now we're going to work with dynamic data.
Like i said so, we're going to do. Is we're going to come over to our structure? We're, going to select our setting and we're going to edit that you can see. We ' Ve got that set up now, because this is in orange and we know we '
Ve got a section because sections are orange. This is where, though, like i say, i would like to have the structure separated, so i could have that on the one side to select the items and then i can easily reference whatever items i want and then make the changes go back and reference without having To open these panels up and expand things, it's.
An extra couple of clicks that i don ' T think that i want to be having to do every single time. I want to use these options so that being said, let's. Come into the background. Section click on the little background, color chip and you can see we can select an image which, obviously, in this case isn't.
What we want to do unless you want a global image to be applied to all of your single posts, you can browse and splash. If you set up the api for that or we can use dynamic data and you see built directly into bricks, so we're, going to choose that option and we're, going to say featured image and that's.
Going to load in the featured image, we can choose what size we want to use from the range of different sizes. We have, and i'm, going to just choose the largest option. We've got so we ' Ve got the highest version.
If you want to, you can apply a parallax effect and you can also position the background attachment in the same way you can with elementor and the same with oxygen now for me, i would love to see a brizy style way of working.
Now i like with brizzy, i can literally click anywhere that i want inside this image to set my focal point and that to me is a more intuitive way of working over having to do things like top left center center, because sometimes your focal point, doesn't match any of those coordinates you can set, whereas if i could just click on what i want, that gives me a much better way of working a much more visual way of working.
So thomas, if you're watching this, and you can do you can do that, you can make that happen. I think that would be super useful to add in okay, so we ' Ve got all the normal options, so let's just set this to be, for example, center center.
We want no repeat - and we're, going to set that to cover that's perfectly fine. So we're going to do now is come back out of this. We're, going to go back to our layout and we have the option for full width section.
So we're, going to set that to full width and we're going to come into our height. We're, going to set this to a vertical height or sorry, viewport height, i should say - and we'll - set this to something like 65 percent, so this is 65 percent of the size of the window.
We're using that's. What the vh is is vertical, viewport height, so that's really easy. And if we want to check what this looks like on the different devices, we can simply do that, and the thing that i like about this is you can see when we make changes if we adjust styling or padding and things like that, all we need to Do is choose the view that we want to use this.
You know sort of like the break point we want to use, make the changes and that's immediately, reflected so really really easy to to work with okay. So we've done that next we want to do now is to select our content.
You can see there's, our h1, our hero, we'll, come into our style, we can come into our typography and we can choose our font family, so you can see all the normal culprits. Are there your system fonts? Alongside all the google ones, and if you've uploaded custom fonts, they'll, be there for you as well.
So we're, going to set this to something like monster rat because well let ' S. Be honest: that's? What we all use font weight will set something like 600. font style. We'll leave that as it is, and we're gonna come down until we get to the text color and we're gonna set that to be something like white.
Now you can see the thing i like about this: is you've got all of those colors there, which are your sort of global colors. You can choose from other global palettes. Should you have created them? You can switch between list view, which will show you a list and any names you apply to this, or you can just jump back over to the grid view, and you can name any of these simply come in and name them, which is again really really cool.
You can copy that color to the clipboard. If you want to you, can edit it or you can delete it so again, just built in really really nice way of working want to add a new one in well create a new palette.
If you want to, you can do that switch between hex values, rgb or hsl, so you can set these up to use whatever values you're, most comfortable with so that's, pretty cool to see, and you've Got your hue saturation lights and transparency sliders as well.
Your hsl so really cool to see that or you can just be lazy and just set it inside there directly really really easy to do. Okay. So once you've done that we'll, just minimize that, and we'll, make any tweaks we want.
So we'll, say text align we're, going to set that to be center. We're, going to say, text transform. We want this to be all uppercase and actually let's. Make this a little bit thinner, let's, make a nice thin, slimline font and then we '
Ve got the font size as your line heights and all those normal things. Pixels m's and rams. So all the options you should need to set your values inside there. So let's, just adjust the font size and we'll, set that to be something like 70, for example.
Okay. So with our title in we're ready now to add some more items in so let's, come into elements and widgets. We're, going to just find text, and this is something that i think is really cool. Let's.
Just drop a text item inside there set the alignment to be the middle, come into our style section and come into our typography, and we'll set this to be let's. Go for wider, let's. Go for georgia! Doesn't really matter too much.
We're going to come down and we're, going to set our text color to be white as well. So we're, going to just drag that to white there we go. I will adjust the font size to be something like i don't know let's just say: 18.
. Okay, so now we ' Ve got that inside there it's, got the content. You can see there's, a normal text editor and you can edit this directly on the page. If you want as well you don't have to do it in the left hand, column, but this is what i really really like about this.
Let's just delete that from there and we're going to do. Is we're going to use this little dynamic data icon? This is really really cool, so we're going to do. Is we're, going to say, author colon, and we're going to just drag the author's? Detail in so we're, going to go to author post author name boom there's! Our author's; name, let's just set that to be central line.
Again. Let's put another pipe inside there and we're, just going to say posted on and we're going to save again. So we're going to click the dynamic data we're. Going to come to our post and we're just going to scroll down and say post date, bang now push the placeholder in there.
So let's. Go down to the next line and i ' Ve got some acf data inside you, so we're going to do. Is we're, going to just put in publication? Now we can come in and we can start using these options.
You can see acf inside there, but if you had pods or you had med box or anything, they'd, be listed here as well, and you can see, we've got publication date and publication, and these are acf fields.
Now, what i can also do is, i can click inside there. You can see that puts acf publication and we're going to do. Is we're just going to do this manually? So we're, going to say publication or publish publication date, doesn't matter too much and what i can do is i can open the curly brackets and then i can start typing in exactly what i want.
So we say publication and i'm sure this is probably going to be wrong, but you'll get the picture and i can drop that inside this. So there's, my shortcode or my macro. Whatever you want to kind of call it for any of my fields, all of them, you can see, have these custom curly brackets and then inside there.
The name of that particular metadata. So i can manually put this in and i can put it in line - and this is something i really like. I'm, not restricted. To only be able to put this in little blocks, then having to use css positioning to align things up next to each other.
I can literally just come in with a text box type in what i want drop in the dynamic data that i want directly inside. There really intuitive, really simple to work with and then i can come in. I can set my type and my style and so on inside there.
So i can style all this and i can go to text you can see. I can do it inside there. If i want to in a simplified editor and again, we've got all the options for our typography, so let's just say you want to change that from georgia and we're going to put that to be.
I know helvetica, for example, and we'll, set that to be 16, we don't want to be quite so big there. We go job done so that's. How easy it is to start adding our dynamic data inside you, and i can say this is what i'm excited about.
I love to see things that make life easy. Okay. So now we ' Ve got our title, our featured image. We've got our post data, all those kinds of things. On there. Let's. Come back over to our structure.
Let's, just add in a new section, so we're going to just say we want to add a section, long pause there when i figure out what the heck i'm doing so there's. A new section you can see it's, all ready for us, and now we're going to do.
Is we're, going to do a search for post and we want content. So we're going to drag that down into there and that will be our post content so for some reason we're, not seeing anything right now. So i'm, not too sure why, but let's.
Just hit save just to make sure we've got everything saved on there and let's just preview. This so hit preview mode, and we're, not getting anything. So this is sort of like a little quirk like this, where things just don't necessarily show up.
So what i do is i go back to my structure: expand everything out and you see the post content is inside there. So we know we ' Ve got that element there. Let's edit it and for some reason it's. Deciding it doesn't want to show so let's, expand that this could well be down to me.
I could be doing something wrong here. I'm going to delete that element. Yes, yes, i'm sure. Let's. Try that again let's just scroll down until we find our post content. Let's. Try dropping that inside there for some reason we're, not actually getting anything in there.
So edit wordpress content inside wp admin we don't want to do that. We don't want to come into here, and this is our post content, so you can see we have content inside there. We have text and images and all those kinds of things so for some reason, this isn't playing ball with me right now.
Okay, so i've reloaded the editor and, as you can see, the content has now shown up. So strange little quirky, it is still version one. This could be down to me, but i use this on both a mac and a pc both in chrome.
So it might be a chrome based issue, but, as you can see, there is a little bit of a quirk every now and again, but a quick reload and everything is sorted out. So there's, our content. Now what we can do is we can also apply custom css to any of this.
So let's. Just select this column, which contains our custom content, and what i want to do is i want to make a bit more space. Above all of my images, but i don't want to go to the hassle of doing this inside the gutenberg, editor or one image at a time.
So we open up the css option.
