Website Build-Along: Beaver Jams

Lesson Overview

Explore our WordPress Theme and Page Builder Plugin as we build a website together. The site flaunts a rock n’ roll motif with a homepage design that is inspired by a popular music publishing company. Turn your site building beaver power up to 11 with the Beaver Jams website Build-Along.

Adding Placeholder Content

In this lesson we are going to add some content to our site so we can see the stylistic changes we will be making in the customizer.

• Create 6 new pages: Homepage, Services, About, History, Core Values and Contact (00:19)
• Create a menu and add pages to the menu (00:40)
• Add lorem ipsum text to the homepage (01:47)
• Add headings to the placeholder text (02:30)
• Add links to the placeholder text (02:42)
• Add a button to the homepage (03:08)

Customizer Settings

This video shows how to dial in customizer settings in the Beaver Builder Theme interface.

• Settings > Homepage Settings (00:22)
• General > Background (01:11)
• General > Accent Color (link colors) (01:29)
• General > Headings (01:45)
• General > Text (02:10)
• General > Buttons (02:31)
• General > Social Links (03:05)
• Header > Header Layout (03:34)
• Header > Header Style (04:00)
• Header > Header Logo (04:38)
• Header > Nav Layout (05:20)
• Header > Nav Style (05:47)
• Content > Content Background (06:13)
• Footer > Footer Style (06:33)
• Footer > Footer Widgets (and additional unused tabs) (07:00)

Creating a Hero Header

In this video we will begin to build out our page content using the Beaver Builder Page Builder. The first element on our page is a hero header section.

• Create a new row and dial in the row settings (00:47)
• Add a background image to the row (01:04)
• Select a font for the heading from Google Fonts (01:45)
• Add a colored overlay to the row over the image (02:47)
• Add a heading module to the row and stylize the heading (03:29)
• Add a call to action using a heading module and button module (05:00)
• Dial in the responsive layout settings (08:00)

Creating Testimonial Boxes

In this video we are going to utilize pre-built content to create testimonial boxes.

Embedding A Video

In this video we will embed a video onto our page.

Creating A Social Icon Row

In this video we will add a row of social icons to our page.