This is tutorial 3 in my series How To Make A Website With Beaver Builder. In this tutorial we are going to start building our site by configuring the setting and colors we need to achieve the look of our website.
Configuring the Beaver Builder Page Builder Plugin
Let’s start by configuring the basic settings for the Beaver Builder Plugin. From the dashboard of your website choose Settings > Page Builder.
If you would like to be able to use the page builder for your blog posts choose Post Types > add a check mark next to Posts and click on Save Post Types.
Configuring the theme settings to get the basic look of our site
I like to set up the basic colors for my website and fonts. Beaver builder makes it easy to set up your defaults by using the WordPress Customizer function.
There are two ways to get to the WordPress Customizer. If you are on the back end of your website in the WordPress dashboard you can go to Appearance and then select the Customize button.
Or If you are working or viewing the front end of your website you can click on the Customize button from the top Admin bar.
Beaver Builder Presets
The first setting is the Presets setting. If you want some ideas on different color schemes and different header options you can work with these settings. Just be careful not to adjust these settings after you have customized your site because it will remove and replace all of your other settings!
Setting your websites logo
For most of my web projects I base the colors of the site on the company logo. So let’s change the site logo first.
Under Header go to header logo.
Change the Logo Type from text to image. Click on select image to upload your logo file. Keep in mind that the size of your logo will effect the size of your header. In this example I’m using a logo file that is 150px wide by 50px tall.
After uploading your logo click Save and Publish button at the top to save your changes.
You will now be able to see how the changes we make to the site look with our logo.
Setting the default colors for your website.
Go back to the main customize menu by clicking the left arrow at the top next to Header Logo.
Go to the general tab. For this site I want to have a dark look so that the fire items stand out nicely from the website background. so for the back ground color I chose black.
The next item Accent color I want to match the red color in the fire and effects logo.
If you want to find out what the hex code is for a specific color check out the linked tutorial where I’ll show you how to find the web color in an image.
Setting the fonts stye and font color defaults
Let’s move to the next setting Headings. This will be the default heading section. You can change the heading options on specific items that you add to your pages later.
We want to change the default headings color to a light color I’m using a light grey #e8e8e8
Select the font family. I’m using Lato for the header font sytle.
I also like my font sizes to be a little bit larger so that they are easier to read. I moved up all the font sizes by 4.
Click save and publish to save your settings.
Now go back to the general section and choose Text.
Since this example is using a dark colored background I’m changing the font color to a light color. For the text color I choose #f4f4f4
Font family Source Sans Pro
I also adjusted the font size up by 2 to make it easier to read.
Setting up the Website Header area and Menu style
Lets go back to the main customize setting and adjust the rest of the header settings.
The top bar layout adds additional information like text or a menu or social icons.
The top bar style will adjust the colors of the top bar.
Next for the Header Layout Settings. You have several choices for the position of the menu and the logo. I like the default settings.
Next is the padding this is the extra space around the header. For this site I wanted to keep the header short so I changed the padding to 10.
Finally is the option for a fixed header. This will keep the header bar at the top of the window all the time. You have the choice of several different ways that this can be displayed, or you can choose to disable the fixed header.
Setting the colors for your Header and Menu Section.
Under Header Style you will find the color settings for your header section. Background color and text colors.
I set the background color to black. The text color to white. The link color to the same color as my logo. #BB4646 and the hover color to white.
The last thing is to change the font for the menu section. You will find that under Nav Style. I made the font Source Sans Pro and changed the weight to Light 300 and the font size up 2 to 16.
Then click save and Publish.
Content Page Settings
The Content settings will be the basic settings for content sections like your blog page, or if you are creating an online store with WooCommerce there are some special settings there for that.
The first thing that we need to adjust is the content background I changed that to black or #000000 so that it matches the rest of the website.
Under blog layout I like to make the side bar smaller. The default side bar size is extremely large. I recommend using Medium or Small. I set it to small for this tutorial.
At the bottom of the blog layout you have some settings that you can use to control if the Author, date or number of comments displays.
Adjusting the Footer and Footer Text
The footer allows you several options for adding content including widgets. We aren’t going to cover the use of widgets in this tutorial so I’m going to skip those settings.
Under footer layout you can customize the very bottom text of your site. You can choose 1 column or 2 columns and which settings that you want the information that is displayed.
If you want to add your social icons. You can choose that setting now and they will show up when we add the links to our social media profiles in the next step.
Change the Copyright information in the Beaver Builder Theme
Where it says Column 1 Text you can add your Copyright information. If you choose to add a second column the first column will move from the center of your site to the left and the content in the second column will show up on the right side of your site.
Adding your Social media links to your website.
The final thing that we are going to set up is our social media links. If you added social media links to the header or footer of your website once we add them here in the settings they will start to show up.
Still in customize go to settings, select social links. You can choose branded and that will have your links show up in the colors of the social media company, so blue for Facebook and red for youtube. Or you can choose Monochromatic to have the social icons appear in the highlight color that you selected earlier.
Below that you will want to add the links to your social media pages. If you just want to see what it will look like you can populate the fields with a #.
That covers the basics of setting up the Beaver Builder Theme and Plugin. We will be coming back to the customize settings to set which page we would like to appear as our home page and to add our main menu to our website.
In the next tutorial we’re going to build the home page for our website. I’m going to show you how to use the Beaver Builder plugin to layout and create a great looking home page. How to setup a home page with Beaver Builder.