Beaver Themer Tutorial: Create A Custom 404 Error Page


By Web Designers Academy

What does a swearing dog, firing incompetant employees and a ladder have in common? They are all hella-great ideas for custom 404 error pages that you can create with this Beaver Themer Tutorial.

Now sure how to use Beaver Themer? This article will show you.

WTF is Beaver Themer?

The very first thing you need to do is to start off with the best WordPress framework THEN once you have that you need to pick up it’s brother-from-another-mother named Beaver Themer.

I know it’s a little confusing, so let me explain.

The difference between Beaver Builder (plugin) and Beaver Themer (plugin) is that Beaver Builder Themer gives you the same level of design control that you normally have in the content area of page (all those cool Beaver Builder modules) to things like the Header, Footer, WooCommerce products, Posts, etc… AND you can also get super specific about where you want your designs to appear. 

If I could sum up Beaver Themer in one sentence: It puts you in complete control over what happens OUTSIDE of the normal page/post content area.

For example: you can have a blue header on ALL your blog posts (except that one blog post about red headers) and a green header on your About page.  You can make a WooCommerce product layout that has the description above the product image then followed by the buy now button.


Now that you are up to speed and you’ve bought and installed all the plugins mentioned above… let’s learn how to create a custom 404 error page using Beaver Themer

IMPORTANT: You need to buy and install a copy of Beaver Themer BEFORE you will have these options!!

Beaver Themer Tutorial: 404 Error Pages

STEP 1: Move your mouseover Beaver Builder then click Themer Layouts, like this:

Beaver Themer Tutorial

STEP 2: Once there, click the Add New button at the top of the screen

NOTE: I am showing you this from our live site… that’s why you see other Layouts already in there.

Beaver Themer Tutorial

STEP 3: Now you will be at the New Layout screen, give it a title, leave Themer Layout chosen and them chose 404… then click Add Themer Layout

Beaver Themer Tutorial

STEP 4: When the page refreshes, right-click the Launch Beaver Builder button and open it in a new tab

PRO TIP: I always recommend opening Beaver Builder links in a new tab so that you don’t lose the admin area (and you will).

Beaver Themer Tutorial

STEP 5: Once the Beaver Builder interface loads now you just build your 404 error page using the standard BB tools. If you need some inspiration (and a unique way of thinking about 404 error pages) check out this post about ideas for custom 404 error pages.

I was going to show you what we designed for our website right under this paragraph but I’ll keep that a secret and instead show you a GIF of Bob Ross painting a beautiful landscape.

Beaver Themer Tutorial

STEP 6: Once you’ve designed your 404 error page, click Done then Publish… like this:

Beaver Themer Tutorial

Now whenever someone clicks on a broken link (or just goes to they’ll see (and hopefully love) your custom 404 error page built with this Beaver Themer Tutorial.

Want to share your Beaver Themer 404 error page? Paste a link to it in the comments below.