In this video, we introduce Beaver Builder, the page builder inside of our website.

(00:01):

Hey, everybody. Today, we’re going to talk about pages on the new website.

(00:06):

If you log into WordPress and you see that there is no pages menu on this left-hand side menu, it is because your user has not been given the ability to edit or create pages. If that’s the case, please contact your team assistant and we can work through what the best next step is for that. As you can see here, my user is not currently a user that is able to update that because I am what is called an editor, not an administrator. We’re going to log out of this account and we’re going to log into our administrative account. If you see administrative account, you’ll now see a whole bunch more content here. One of the things you’ll see that is new that you did not get to see before is forms and pages, and today, we’re going to talk about pages.

(01:05):

Pages is by far the most robust component of the website, but it’s also the most complicated. But it’s not too complicated, because luckily we have a great tool called Beaver Builder that can help us build pages relatively easy. To add a new page, we click add new. We would title this page however we would choose the title. Right away, before we even do anything, we want to go to this page menu on the side, and notice that the URL is whatever you title this when you first type it out with dashes for spaces. Right now, this page is scbaptist.org/my-first-page.

(01:55):

If this is related to a sub ministry or another ministry or another page, you can also make it a parent page. Example, if this, say, was related to foster care, we now see that if I save the draft, you’ll now see that the page is now scbaptist.org/fostercare/my-first-page, because the parent is foster care.

(02:30):

The next thing you want to do is hit this little A right here, this Astra setting, and you want to disable the title from the page. This when once we build Beaver Builder, allows it to not have the title show up on the page and we can edit the page to be however it is. If you enable the title, it will show up on the page where you won’t be able to edit it because it’s embedded inside of the page itself. Hit the little A Astra setting and then hit disabled title. We’re going to go back to settings here. Then if we wanted to publish this page immediately, we would hit as such, or if we wanted to be private, we would go through those areas as well.

(03:19):

We currently don’t have any templates, but we’ll be working on those shortly potentially. Once you have those settings stated, you want to hit Launch Beaver Builder. You’ll see this Access Manager page on the bottom. What’s important is you actually don’t touch that or do anything with that, because that could affect global settings across the site and across your account. Hit Launch Beaver Builder, and now you are seeing a version of our website with the top menu at the top, a big box in the middle, and then our footer. From here is where you can start to really build out your page.

(03:57):

There’s some basic functionalities you can add. You can add headings and pictures and videos and et cetera. But we also have some modules that are pre-build out. First thing you want to do is sit aside how do you want your website, your page, to be laid out: one column, two columns, three columns? We don’t recommend four columns or any of these other options for consistency across the site. For right now, I’m going to do one column. All I do is I simply click and drag, and now you’ll see that I have a one column box to put content in my site.

(04:34):

What I’m going to do here, the first thing I’m going to do here, is make sure that my site is full width, so that way it’s the width of the site. This also allows me to widen or narrow, make the content more wide or more narrow, contingent upon what I want. I’m going to hit save and I’m going to go back. Now I’m going to add a heading. I want to add the heading in. Actually, I’m going to delete this just so that we … It’s removed. That’s How easy it is to remove. I’m going to actually add a text editor, and this is where I’m going to have some copy.

(05:31):

I can make this different styles of thickness contingent upon our heading settings, or paragraph, which is just normal text. You can also adjust the color here if you want to, but we would prefer that all texts on the website remains black. Again, there’s margins and availability and style here. What is important in the font component under style is if you need it to be centered, left, or right or align. We don’t recommend any of the text shadow or styling.

(06:10):

There’s some text right there, but let’s say I want to put a cool picture. I go here and I’d look for photo and I simply drag and drop it on top, if I wanted my photo to be on top, and I can go from my media library, either upload a new picture or put in an old picture and upload it there. But let’s hit save. Then let’s say I wanted to have this maybe on the side. If I click and drag, I’ve now made it from one column to two columns. Just that simple, now I have a picture and some text. Let’s say I wanted to add a heading. I just click heading and write whatever I would like. This is a heading. It could be any of the heading statements contingent upon what you would like. Then we would click save.

(07:08):

Let’s say I want to change it. I just hit the little gear box again and I go back to the setting. Sometimes it doesn’t update it live so you’ll have to save your changes. Since there’s a picture on this side now, I’m just going to rechange the style of the orientation. There we go. That looks pretty cool so far, yeah? Also in addition to that, we have some saved features, saved rows that we have created. We recommend that you don’t necessarily save them on your own, but if you did want to, you could save a role if you wanted to. If you clicked save, and I wanted this to be called something, I would call this text box left photo.

(08:13):

Then if I hit save, now you’ll see under here, if I go under save and I go to text box left photo right, and I just click and drag that, the entirety of the element is already built, and if I just wanted to change this picture, I could. Please for some simplicity’s sake, don’t over bombard the saved rows if you can, and see if there’s some options that already work that you can just customize versus creating tons of saved rows.

(08:45):

For now, I’m going to remove this, and I’m going to kind of build out a kind of standard look that we have on our pages. If it’s an internal page, we have this internal blue banner header that we kind of put at the top of the page. This is where we type in title of page. Then we hit the save. We also have a big feature with a CTA, call to action, as a potential header of a page, which you could then change the image by clicking a little gear box. Edit. I’m going to put this picture. Now you see here that’s cutting off their heads. You can go to here where it says position and you can go custom position. This is where you can adjust the Y position to make it so that it doesn’t cut off their heads. There we go. That looks pretty nice. Update this text, update this text, and then this is a link here, and then you can adjust how the text is oriented by this little spacer column.

(10:04):

This is created, again, with these columns under rows. For now, we’re going to delete this and show you some more saved options. We have this hero with a button that we can build. This is a big hero of a page. We normally create this for the main page of our site where we can update with a hero overlay image along with a button with an action step and then a design element. We have a footer contact dynamic. This is a dynamic form that is rather than creating multiple contact forms, this is a form you can attach to a page to have it go to whatever email you like. Some of the styling on this will be adjusted. That’s nothing that you can control, but that’s on our list to adjust. You would say to contact my page team, for example.

(11:17):

Then if you click here, you’ll see under this looks like gobbledygook code, but the only thing you really want to adjust here is the email address here, so alexlyons@scbaptist.org. Then when I hit save, the form comes back, and now anybody who fills out this little standard contact form will go there. This allows us to have one form that goes to multiple people dynamically versus having multiple forms throughout the site. It really cleans things up and keeps things minimalist and simplistic.

(11:55):

One of the other sections that we can do is internal page header, which is just like the blue bar, but it has a picture in the background. But I want this on the top, so I just simply click and drag it to where I want it. You’re seeing that pretty easily you can make changes to the website in a dynamic way without writing any code to design things how you would like. Beaver Builder is a very powerful tool to be able to do that. We have these templates over here, but please don’t use any of those. Those are more built for other styles that are not in our style guide. They were kind of included with WordPress. We have a FAQ section you could build out where you could update this little accordion with a question and a answer, and then it will just accordion out. Nice little way to build out a FAQ portion of your page, if need be.

(13:17):

If you wanted to add a video, we have this nice big background with a little statement and then a video. To edit the video, you would just click here and add whatever video it would be. We have the ability to add a verse, just a simple separator to divide the content. You’re seeing very easily, we also have the color boxes, three colored columns. This is a great option to display call to action for different ministries. It is in multiples of threes, so please keep that in mind. But you’ll see white text on one of our approved colored backgrounds in addition to a blue button for a call to action.

(14:32):

I’m going to hit done, and I’m going to hit save draft, and there is my page. Hopefully that gives you a brief overview about how to build pages inside of the Beaver Builder page builder inside of WordPress. Thanks so much.