Beaver Builder Themer Tutorial – Adding Custom Page Titles

thank you so much for watching the press Avenue YouTube channel my name is John and we talk about WordPress tutorials how to do particular things plugins themes snippets and freelancing tools if any of these interests you go ahead and hit that red subscribe button and click the little bell to see more videos just like this one today we're gonna be talking about beaver builder we're actually talking about a add-on to beaver builder called beaver builder themer so I'll head over to their site so I'm at WP beaver builder calm and at the top it says beaver theme or add-on plug-in and you click up here to get to this particular add-on now a lot of people read this and they do get confused about what this is and what it does basically allows you to create templates for post types for archive pages for single pages for individual pages you can do parts so right here chose themed parts you could do a menu or a call-out or a footer and also you can connect it to things like advanced custom fields or you could bring in particular pieces of data into a template and then make it universal across the site so it is very powerful but a lot of people don't realize what it is or even what it does and today we're gonna be talking about building page titles so just put on pages not on posts showing the titles in a more stylish fashion and how you would go about doing that alright so let's get started so I'll go ahead and close this alright so we have this website here um that we're going to go through its using the beaver builder theme the child theme the beaver builder plug-in and then the beaver theme er plug-in so theme er even though has the word theme in it it's not a theme it's a plug-in for building on to the theme so like any website there's a header so that's this white bar across the top then there's a menu and then we have this says meet Jane this is the title of the page itself so you can see up here in WordPress it says edit page below that's the content I'll skip down here now we have this brown bar here which is right above the foot and then we have this blue bar which is the footer itself it's kind of the gist of this site what themer allows me to do is insert say I want between the menu here and the title I can insert another bar and put a call-to-action sign up for our newsletter I can put an ad I can put a phone number anything again the same thing I could say right above this header bar I could put another blue bar that says join us on Facebook so that's kind of how you can do it Thema allows you just insert blocks of code it's not necessarily code that you see with beaver builder but drag and drop blocks that you drag in and insert into the page and you can do it throughout with a set of rules alright so let's get into it what we're gonna do is change this meet Jane to something a little more stylish than just this meet Jane in an h1 tag that happens to be blue so we're gonna do is head up to the top and go to new and then go to theme ER layout so if I click that it will bring us back to the back end of the site but it'll give us some options so you can ignore that notification from Yoast again on the back end you can go to under builder it'll say page builder or it'll say beaver builder depending on the version you have add new again you can also go to theme or layouts and then click add new again it's like like add new all right so here we are so we're gonna title go away we're gonna title the part that we're building here and this is just for your reference so it's something that just comes to mind so I'm gonna name it page title I've seen here a page title and people put a longer description explaining what this piece is for it's entirely up to you type so we click type we have themer layout from here you can also do a beaver builder template row or module but we're just gonna leave it at theme or layout because that's what we're talking about and then next to layout here we have six options structure is header it'll if you're using the beaver builder theme within the customizer you have header options if you select header here it strips those away and just lets you use this same with the footer and then down to content archive is your blog post archive so shows newest first and goes down from there this allows you to adjust the archive singular would be single blog posts or single pages so remember they're they're just post types 404 is an error so if somebody goes to your site comm slash a bunch of gibberish you can customize the error page and then finally part is what we're talking about part lets us take a part and insert it anywhere within the site so go ahead and do part I'll say add themer layout now it brings us here it pulls over our title shows the page builder and then below that and I think these should be switched but they're not it says themer layout settings type is a part unfortunately you can't change this not on a why you'd have to either create a new one or delete it if this part is wrong so if you chose singular and that won't work you have to choose part position so this says where do you want it on the site so I can say when the page opens or closes before the header or after the header before the content when the content opens closes etc and this is typically known as hooks we're hooking into different parts of the site but this just allows us to select from a menu and go from there so we are actually going to do after the header and then if you have several of these you can order them so if you have three parts that are after the header you can say one two three and stack them accordingly next location I'd say choose we're gonna do this on pages you can see of a lot of different options I'll click page and I'll say all pages but I want to exclude the home page so click add exclusion rule exclude and I go back down here page instead of all pages I'm going to come down and say home so now our rule says on all pages across the board except for the home page I would like this themer part to show you can add additional rules so you can choose from here post title so you can say only if the post title has the word Twitter in it show this blue background which is fantastic so I'm not going to do a rule so I'm going to close that over on the right hand side it shows draft that's what this is so far some categories that I already have added in if you're just starting with this this will be blank I always set page if it impacts the page and then this one also impacts the layout I mean asked to make primary that's just a part of WordPress I ignore it and then if I do a blog post if I want just single blog post to look a certain way in a category I would create the page builder category of single and then I'd also do categories so I can just remember it if you're going to do a lot of these alright next we'll go to launch page builder now that we've set up our rules so here it brings in the header bar and the menu then this middle part here is where our part is getting inserted and then further down it says content area so right now we're previewing this page as the newsletter page but I don't believe there's content on there so we're going to go to page and we'll just go to about and it doesn't show any different so maybe I'm wrong alright so we'll leave it at that we'll leave it at about so now it says drop a row layout or module to get started so I'm gonna go to rows and I'm gonna drop in a single column so there it is there I'm gonna hit the wrench and I'm gonna make this full width and then I'm gonna leave the content width fixed and I'll hit save so I give it a second save next I'll hit the plus and I'll go to modules and I'll go to heading and I'll drag that in now on the beaver builder website page we read that they have field connections so heading is going to be different across the board depending on the page that I'm on so I'm going to instead of typing something in here I'm gonna click the plus and it gives me some options archive title post title let's scroll down site title I here we go post title so connect what it does is it connects this whole section here with this attribute of the page title which happens to be about Jane insert inserts a shortcode in here and allows me to add stuff before or after it I'm so I'm gonna connect it so I'm gonna go to post title Connect so now this is gonna take the post title there it is I want this post title to be an h1 so there it is and then I can style it accordingly so I will say blue it's at the lighter blue maybe it already is I can change the size of it here I can make it centered I can do left aligned I'll leave it at left aligned and I'll go ahead and hit save and now no matter what page I go to that title will change so I'll go over here to coaching reload it says coaching this way since I'm connected you can see it there I'll show you the insert so I'll go to plus and then post title insert now it inserts this and then I can say - maybe a date or anything you want hit save now it says coaching 2019 if I go to page I go to about it says the title of the page - the fixed version that I added in there but I don't want that so I'm just gonna leave it at this all right we'll go ahead and go to save and now I'm going to jazz this up a little bit more we'll go to row settings we'll go to background we'll make it a gradient and we'll say let's see maybe Green will make this white make let's change this to maybe 180 I will do 180 all right and then maybe we'll do a shape and see circle we should make this a gradient no we won't do a shape I'll leave it this alright so now we have about Jane I'll hit save all right so now I'm gonna publish this so I'm gonna click done publish and right now we're still on the it says post type FL theme layout so I want to just click over to an actual page so now you'll see here this title still remains and then because it was always there before and it was automatically added in manually which is fine for small sites but for huge sites manually adding titles can be about pretty much a bear so if I come back in here and I edit this I'll just close this one out and I'll get rid of this rule I had done publish and there it is so across the board every single thing will have this green part now you can see it's repeating the title here and that's fine all pages from here on out will have this page part without this so this was manually added in so doing something like this part is great especially for huge sites you don't want to go through a thousand site or a thousand page excuse me adding page titles manually you want to be able to do it here and if you ever need to change it you simply go to page builder when I hover over it because this is a page I can do coaching which is the content or it can hover over page builder I can edit the footer the header or the title if I click title here's that part I can go to the gradient tone it down a bit way down and now I can hit save and now every title across the board has a slightly green fade instead of the dark fade before so that's how to create page titles using the beaver builder themer plugin and we've built him using a themer part so if you have any questions about this please leave them in the comments below you so much for watching if this was helpful in any way go ahead and give it a thumbs up and let us know in the comments how you use it additionally right below me is a box if you click it it'll let you subscribe to the channel very quickly right next to it's a circle that'll bring you to the website where you can join us on our free Facebook group to get additional help over on the right hand side here are two playlists one exactly for you and the other one is the most recent upload thanks for watching