GutenBricks & Bricks Builder: The Ultimate Design Duo For Clients

imagine allowing your clients to easily transform their WordPress site with just a few clicks turning it into a visually stunning Masterpiece without ever giving them access to Bricks sounds like a dream right well that's precisely what good and Bricks the Revolutionary new WordPress plug-in for bricks promises Bridging the Gap between design freedom and content flexibility so Gooden bricks allows web designers to use bricks Builder to craft custom blocks or patterns offering an unprecedented le

vel of design control directly within WordPress and still allowing users to modify all the content inside each block now this isn't just another design tool it's a game changer for bricks users who are delivering websites to clients so with good and bricks every block you insert can be tailored to Perfection then locked down so the end user can edit content without altering the design Vision Plus updating a Block's design globally without touching the content that's now a reality so if you're re

ady to elevate your web design game and give your clients all your own own WordPress site The Edge it deserves stick around I'm digging deep into good and Bricks how it works showcasing it seamless integration with bricks Builder and demonstrating why it's a tool you didn't know you needed until right now so let me give you a demonstration first of all of what I'm talking about and then show you how easy it is to actually get this up and running for yourself now before we go any further this is

still a kind of Bea products not fully released yet but I will link in the description down below to the Facebook group the slack group and also information on the website so you can take a look for yourself and see what pricing is available no affiliate no Kickback no nothing on my part okay so if we go on this is a typical page that our client would actually see so you can see that we've got the guten bricks demo if we take a look on the left hand side and click on our plus we have these custo

m blocks inserted we also have some patterns these are custom created inside bricks but that's not the best part part of it let me show you a bit more let's go back to our blocks let's add in for example this hero section we'll click added in pretty cool looks exactly the same way as I designed it but now I can start editing this as a user not as a bricks user you'll notice there bricks is nowhere to be seen on here so for example we want to add an image in we'll click we'll choose an image from

our media library which we can upload as well and there that's now added in want to change the text easy now we can just change the text so just change it pretty cool we can easily select our button double click we can change the link on this to set it to go wherever we want to same for our call to action change the text all inside your once we finish this section let's go and add another one in let's come in to add the plus let's say we want the features let's click to add it and then we have

our features section again we can click to add in an image change the text all those kinds of good things so imagine now if you wanted to create a full Suite of blocks that you wanted to hand off to your client so you have full design control but they can change the content to anything they want to this is exactly what guten brick does but it also does an awful lot more but I'm going to leave that for a different video because I'm waiting for it to still mature in other words we can start using

ACF for various different things not just ACF but also metab box and ACP will be coming hopefully soon it makes it even more powerful this is a plugin that's being developed very very quickly so there's a lot of new features so we've seen how easy all this is to work let's go and see how easy it is to set one of these blocks up and how everything works in the back end with Gooden bricks so first of all let me quickly say what I've got set up inside bricks itself if we come into our templates I'v

e got a template that I use as my kind of catall for my posts it's a very simple template but let me show you because it is kind of important so this is the template it's very very simple we've got a section with a container inside it as you're going to do pretty much always when it comes to Bricks then we've got we've got the post title which is just one of the standard elements and underneath that we've got the post content element it's important that you use this and also set it to work with

WordPress and not bricks this is what's going to show the content using those blocks those patterns whatever we create just as long as you got that set up then come into your settings make sure your template settings is set up to be post type in this example posts if you want to set one up for Pages or you to get very specific on where you want to use it that's perfectly fine just need to make sure you've got that template set up and you have this post content set to Wordpress as well once that'

s done you're golden so now all we need to do is start creating the blocks or the patterns that we want to use for our client for our website again let's come back into bricks into templates and let's add a new template we'll give it a name and then the important thing is that we set the template type correctly if we open this up you'll see we have two new entries Gooden bricks block page and good Gooden bricks block we want to choose the block we'll publish this and we've now created the blank

placeholder for our template there's a couple of other things before we jump into bricks I want to show you but these are totally optional if you open these Gutenberg block settings options up you'll see we've got a range of different blocks inside here that we can easily fill out to give our end user more information so the title of the block a description for it and if you want to guidelines and documentation on how to use it so if you're handing this off without giving training this could be

a good way of giving information to the end user on how to use any or all of the different blocks and patterns you want to include as part of your site and now we can start building our template in whatever way we want to now for ease I've already copied one over and I'm simply going to paste that in there's my basic design you can see everything is set up going to come over I'm going to give this a bit of space now I'm using core framework for this but obviously if you're not using a framework

doesn't matter just build your template in whatever way you you want droping your placeholder images text content and so on all becomes editable so I'm going to give this a bit of space I'm going to simply just add in a little bit of space at the top that looks pretty good and that's all I need to do but once we've got all this set up we're going to click on Save and we are basically done let's go and take a look at this on the front end now and how the end user can easily start interacting and

adding content into this new block that we've added in so I've reloaded my page that I'm working on and as you can see we now have this new block called content you can see it automatically has created the thumbnail for it so you can see exactly what's going on and again you can see this is fully responsive because the template that we created are totally responsive across all different devices again pretty cool so now all we need to do is go where we want to insert this and we can just click to

add our contact in or you could click on the plus and you can see all our different options are here so we'll say We'll add contact there's our contact information we can now start coming in changing the content inside here change the image drop a map in whatever you want to do inside here so all incredibly simple to work with and like I say when you take a look at the ACF and applying conditions and so on you can get even more creative with this I'm going to keep that like I say until it's mat

ured a little bit and I get a full understanding of how it works but even this most basic level let's say for example you didn't want to show this image you just want to have this basic information above well you could just turn that on or off using an ACF switch it is going to be pretty cool but that's just the basics of it it's going to go further Okay so we've seen how easy this is this's upd this now that's pretty cool but one of the other things that makes this even more useful is the fact

that as a designer accessing bricks not our client as as the designer we can make changes to any of these block templates and that will reflect on the entire site so for example you may change the typography you may change the layout you may change a multitude of different things all of that will be reflected as soon as you make a change to that Master template let me give you an example let's choose our call to action for our contact information and what we're going to do is going to come over

to the style section into our background and we're going to set a background color it's going to be pretty ugly but it's going to demonstrate how this works so we'll set this to be bright yellow looks awful but hey doesn't matter we'll click on Save now we'll jump over here we'll make sure this is updated and we'll just take a look at this by refreshing it's now bright yellow with black text and like I say looks pretty ugly let's add an image in just to make it look even worse pretty cool so you

can see we can very easily make changes globally throughout any of the templates you make and update that if you're using a framework like core framework or acss or anything like that you can make changes to everything and then all these templates will take effect immediately it's incredibly powerful now this is just scratching the surface of what you can do let me show you one other thing that I think is incredibly powerful for example let's say we want to give the client the ability to drop i

n a section or a pattern that includes the sort of latest blog posts so this is is all dynamically generated and will change as new content is brought online we can do that and we can make sure they can't edit that content so for example let's come into the patterns this time come down to our custom patterns and we're going to choose the option right at the top which is a kind of the blog layout consider this like a Blog archive we'll click to add this in and you'll see that's now being added in

to our design now we can click on the various different elements it might look like we can make changes to them but we can't actually edit anything I'm clicking on the keyboard nothing's happening same thing here because these are dynamically generated so they're not editable however if we come out to the blog section and we come to the title and all these bits and pieces which can easily be changed and may need to be changed on an instance by instance basis you can change them that's how cool t

his is so you can create these kind of templates and in a future version you will have the ability to make templates editable various different features editable or not editable so you could customize different things for example you may not want to allow them to change the image but still have the ability to change things like the tagline the name address phone numbers and so on that will be possible in the future this is incredibly powerful if you want to hand off to a client and still retain

full design control now you may be wondering how do we go about getting things set up so they are either inside the block section or they inside patterns underneath their own custom pattern section well let me show you how to do that when you create any kind of template inside bricks you'll notice that we have template tags and template bundles template bundles allows us to well kind of bundle things together but we can use this to pull it into either blocks or patterns it's incredibly easy all

we need to do let's just say this one the contact is just a block all we're going to do is type in the word block We'll add that in and we've Now set that to be a block we'll update this and it's now a block let's go back to our template one more time come into our blog archive list which is what I've just shown you we'll edit this and you'll see see this is set to be a template bundle of pattern now if we go into bricks and into Gooden bricks you can see we've got these different options so we'

ve got blocks and patterns so we say do we want our bundles to be blocks or as patterns well we're going to say our blocks are going to be used as blocks and our patterns are going to be used as patterns as simple as that so now anytime we give a tag of pattern it will be put into the pattern section anytime we give it a tag of block it will be put in the block section so you can use this to organize your content it might sound a little bit weird at the moment but once you kind of set things up

it's very very easy and you can set a default which if you don't set a value to any of these it will automatically drop them straight into the blocks and all the patterns it's up to you how you want to handle it save out changes job done if we jump over to the client experience tab this is where we can set a few other parameters up there's not a lot inside you at this point in time but you can set a few things up so we can set things for the ACF settings when we use those so we set a default lab

el that'll appear inside the editor you know inside Gutenberg kind of thing you can set text editing so if you have it deleted text it will fall back to the prefilled out text or not whatever your choice is and then you can choose whether you want to show or hide patterns media tabs and so on inside Gutenberg itself Integrations this currently is only for acss so if you are an acss user and you find you've got some weird things going on with any padding and so on you may want to make sure you do

have this checked and enabled and that should then sort any problems you have out other than that there's just a license tab at the end and you are pretty much golden now I previously covered how you can do something similar but without using guten bricks just using standard Gutenberg blocks if you want to check that video out you can take a look in whichever corner it is right now and follow along check that out as your next [Music] video