by Adam Preiser updated July 16, 2019

Beaver Themer Tutorial – Creating Custom WordPress Layouts


Share on facebook
Share on twitter
Share on linkedin

Video Transcript

Beaver Themer Tutorial – Creating Custom WordPress Layouts

I want to welcome you to the first video in
this video series I put together on using

this new product that’s about to be released
called beaver femur and this feels good to

be all about building custom layouts for your
website using Beaver Themer and I’m in a go

through everything having to do with that
insult my name is Adam from

were I make videos like this for non-techies
so I’m doing something I don’t normally do

I actually put together kind of a presentation
so that my thoughts can stay organized and

I’m not wasting anyone’s time so working a
look at creating layouts using Beaver Themer

in this video now I do want to give you a
quick word of warming I have been using this

since February’s have been using this for
maybe the last three months or so and there

are a lot of new concepts that it introduces
and a lot of new possibilities it introduces

inuring to see that over the course of these
next few videos where I cover it in detail

as a result of that it’s not just that Beaver
Themer’s new to me there’s a lot of things

that are new to me so I might say something
wrong I might reference something by the wrong

name just got me a little bit of slack if
you are a experienced developer feel free

to leave a comment down below and give me
some correction if I refer to something the

wrong way because I want to be as accurate
as possible in this video series so talk about

custom labs this is one of the new features
that is coming with Beaver Themer or one of

the new things is going to enable you to do
is create these all layouts and first of all

let’s just talk about what a layout is so
when you visit a website and you click on

a blog post it is using a layout to generate
the way that that blog post is no look and

the same goes when you may be look at a WooCommerce
product page it’s using a layout now I want

to explain what the differences between a
layout and then using Beaver Builder itself

like how you normally use it on a page to
create a page layout layout these are different

things okay a layout is typically global so
what that means is every blog post is going

to look the same the contents going to be
inserted in the Bakken of WordPress and displayed

based upon how this layout is okay slats a
layout now typically what we do we use Beaver

Builder we might create an about us page and
a services page in the homepage those are

custom pages that you built with Beaver Builder
so here is the distinction if you want to

see change something and you’ve built pages
individually with Beaver Builder now if you

want to change anything you have to manually
go in and change them on each and every one

of those pages with a layout it’s different
because it’s a global so if I had 100 blog

posts or 100 product pages all I have to do
is modify the layout once and then it changes

on those posts or the various content that
is using that layout so this is where this

indifference comes in okay now here’s the
thing layouts are hard to create well before

Beaver Themer they were very hard to create
because it involves 100% custom code to create

these layouts and that’s why page builders
have become so popular because they truly

enabled you to create anything you would want
to visually and with layouts traditionally

you couldn’t create what you wanted visually
you would have to custom code everything but

because of Beaver Themer you’re now going
to be able to create custom layouts visually

using Beaver Builder and this is something
that you couldn’t do before you just simply

couldn’t do it there was no tool that I am
aware of that allowed you to do it with this

ease and that’s why there’s so many people
that are excited about it and that’s why it’s

opening up new possibilities for anyone that
is into building WordPress websites so no

want to talk about something called the custom
post type and explain what that is essentially

is any bit of content that doesn’t really
fit into a blog post or into your blog any

type of content in bulk so a good example
of that is the best example probably is WooCommerce

when you’re creating products so that is a
custom post type and it makes sense right

you can’t create products and put them on
your blog you need a different way of organizing

and categorizing styling and formatting that
unique type of content another type of custom

post type that you might see our firm may
be various event plug-ins or any plug-in that

creates a different type of content or allows
you to put in her final in a different type

of content that would not be in a blog post
so you’re actually using post types and custom

post types right now with blog posts and when
you’re using WooCommerce you’re already using

these post types and these custom post types
so you’re already familiar with not being

able to really modify the structure of the
layout of how they look on the front and now

these custom post types you can also have
something called a custom field and I’m in

a give you good example of that on my website
on my blog portion I can have a video post

and what happens is when I say I’m going to
do a video post a custom field appears where

I can post or just paste in the URL to my
video and then when I look at my blog post

on the front end of my website that video
is not with the rest of the written content

is placed elsewhere on my blog layout and
that’s typically what these custom fields

are for to put information that you’re going
to have be in separate locations on your layout

I hope you’re following me with the whole
custom field concept now the beauty of Beaver

Themer is its can also be very easy to pull
in the data that you might want to add on

these custom fields so right now out of the
box of Beaver Themer’s going to be fully compatible

on any theme when it comes to creating light
layouts for blog posts and for WooCommerce

product pages and the page to the shop page
that you see you’re going to be able to out-of-the-box

on any theme using Beaver Themer to go ahead
and create layouts there and also if you want

to create your own custom post types and create
your own custom fields you’re gonna be able

to use it Beaver Themer out of the box with
anything there as well now there are some

situations where Beaver Themer is not really
going to have full compatibility with certain

custom post types in this would be custom
post types for example easy digital downloads

or maybe an events plug-in right now in the
reason why is for them to get the integration

with WooCommerce to work perfectly they needed
to take what makes up a WooCommerce page right

there’s a section with the price there’s a
section with the description the section with

the picture of the section with the buy button
section with the review stars etc. etc. they

had to take that in slice and dice it up into
Beaver Builder modules that you could place

where you wanted now the nice thing is is
there is developer documentation for these

other plug in developers if they wanted to
make it possible for Beaver Themer two be

able to style their plug-ins layouts that
are generated but Beaver Builder has already

done that for WooCommerce now there are some
exceptions to that there’s a couple layout

extensions so if you are using a give you
an example I use a learning management system

and it is what I organize my online courses
and my lessons and it generates a layout and

I actually had to custom code a layout big
pain in the butt but now I can use Beaver

Themer for them and the reason why is because
all the parts that make up a lesson layout

so there’s basically an area for video there’s
an area for the content there is the title

and there are different parts that are which
it ties like the lesson navigation so summons

and of course they could jump to a different
lesson and those are actually widgets so it’s

already kind of sliced and diced up so I don’t
need anything special from Beaver Builder

because I can drag and drop it into the layout
using the native WordPress widgets also if

you’re using something that where where the
layout to be re-stitched together with shortcodes

so if the plug in developer perfect example
if easy digital downloads it had everything

that makes a product page be broken down into
a different short code which only be like

five or so different circles you can easily
place those in Beaver Themer how you wanted

it to look I’m sorry if I lost you there and
try to do my best to make this all makes sense

so enough talking let me just show you some
of these concepts in action so let me go into

the WordPress dashboard here and this is the
test installed and I’m in a use for everything

that we go through in this video series now
let me show you what a blog post looks like

by default let me show you what a WooCommerce
product page looks like by default animals

and explain why this is going to help you
from a business perspective where if you have

a WooCommerce shop to sell more if you have
a blog on your website to get more engagement

and more conversion so okay so here’s the
front end of the website right here it’s just

I haven’t style that haven’t done anything
just a default completely default all I did

was add one blog post and I added one product
page to WooCommerce so here is the blog post

right here a minute click on it as you can
see how it looks by default I just have my

title doesn’t show me the featured image although
I’m sure I can turn that on in the customizer

and just a bit of content right there is nothing
exciting about it at all let’s take a look

at my shop page right here I got this one
product here for a fidget cube and here is

what a product page looks like’85 Actually
mistake I was playing around with the ability

in Beaver Themer to create custom headers
that you would assigned to different locations

on your website and that’s actually I believe
in tomorrow’s video the next video in the

series I don’t know if you just notice that
right here I’ve got the default header and

then right here I have a header that I put
together that will only show on products that

are fidget tubes anyway so here is my WooCommerce
product page not like WooCommerce product

pages at all I think they’ll will they all
obviously look the same but when I come here

there’s nothing that is selling it there’s
a layout there’s no format there is no emphasis

on actually selling this to me so I have to
come here know what a fidget cube is already

and I have to know that I want to because
there’s nothing from a design perspective

that’s going to get me excited to buy this
fidget cube unless I was just price shopping

for veggie cubes okay so at your standard
WooCommerce layout so now let me go back here

you have already created a layout in Beaver
Themer memo to show you what I did but let

me just show you the difference right off
the bat so all the Beaver Themer stuff is

going to be in the section here that’s his
builder and here we have our theme layouts

and this is where you’re in a find everything
this is a Beaver Themer central right here

so you can see I created a blog layout let
me go ahead and click into it and I’ve already

created it but then what you do after you
created is you assign it to the specific content

that you want to use this particular layout
so for me I’m going to choose let me just

choose all posts right here all posts like
that and I’m in click on update so now let

me go back to the homepage and let me click
right here to look at that blog post so there’s

an immediate drastic change I’ve taken that
featured image I’ve made it very large put

it on the background there I overlaid the
title and I have some meta-information I didn’t

really do much beyond their because I just
you you probably already know how to use Beaver

Builder at this point so you don’t need me
to teach you how to use that so here we are

let me click on launch the page builder so
I can show you what I did to make that drastic

change so when you go to create a new Beaver
Themer layout it immediately actually my default

poles in this style right here I don’t think
I changed it actually at all and it’s all

pretty much the default style here but essentially
right now you can pull in anything that you

would normally use when you’re building a
Beaver Builder page I can put a new row down

here and I can put some information I can
make some columns I can change background

colors I can do anything I want I can move
it all around I wanted the header down here

I can do that if I wanted to add a picture
of me or the author or something like that

I can easily put that right there and then
I can take this layout and assign it to whatever

blog posts I want so a perfect real-world
example of this is my website I primarily

have video posts with the video but I also
want to start having written content in there

as well so in my scenario I would have a blog
post layout for video and I would have a separate

blog post layout for just written content
and I can have multiple blog posts layouts

for video depending on the video that it was
for there so many different powerful options

and choices that I have so you can really
have the full Beaver Builder flexibility now

right here you’re gonna see what is new in
it says post modules and when I click on that

these are new modules that are available that
pull in the content from your post so any

image is an author bio comments featured image
which is linked in the background image there

we’ve got the post content itself which is
right here and then the post info which is

right here and post navigation I haven’t explored
that yet and then we have post title which

is obviously being used right here so I hope
you see the power you might be thinking Beaver

Themer that’s a little on the complicated
technical side but the reality of the matter

is is you are already really good with Beaver
Builder if you use it for any amount of time

and Beaver Themer really isn’t any more complicated
than what you’ve already learned with Beaver

Builder and that’s one of things I like about
the route that they went if you know Beaver

Builder Juergen a note Beaver Themer so let
me get out here published changes and then

let me get back into Beaver Themer here and
show you the product page that I created it’s

under builder theme layouts and then it’s
right here for a WooCommerce product page

now let me ask Aiden show you the design yet
because I don’t have it assigned so I’m going

to sign it in this situation I’ve been assigned
to a product category so with blog posts and

WooCommerce products you can put them in a
category and you can even tag them so you

can tell Beaver Themer to apply this layout
may be based upon a category or based upon

a tag so I know for my blog I’m in a do it
based on tags for WooCommerce I would probably

do it based on categories you can have it
be a little different so I’m going to choose

a pop product category that I created called
fidget cubes let me go ahead and updated and

let’s go ahead and try to take a look at that
someone go back to the home page click on

shop and now I’m going to click on the product
itself and you can see it looks totally different

than how it looked before remember though
this is my custom header I’m in a show you

how to do that later so I got my big title
right here I’ve got my price right here I

have some review stars right here which is
actually really nice because that is social

proof actually this is something I was playing
around with I have a countdown timer and I’m

using a module for from ultimate add-ons for
Beaver Builder it’s an Evergreen timer so

it’ll trigger for someone when they first
visit the product page and then I was actually

thinking here maybe having a fullwidth row
with maybe different product images or something

like that to really make it more sexy and
I got this background image here of fidget

cubes and then I’d I pretty much stopped designing
it from there because I just was doing this

very quick but right away I can put in my
sense of urgency with this countdown timer

I got my social proof right front and center
where it should be heck you could even put

a testimonial here may be us a rotating sliding
testimonial or multiple testimonials to just

have that social proof the point being with
having full control of a layout for something

as crucial as your WooCommerce product page
you can actually use your product page to

actually sell the product and sexy it up and
get someone wanting to buy this product so

let me show you that in the page builder so
go ahead and launch my page builder right

here and here we are this is just from right
here where it says WooCommerce modules and

this is what I was saying in the presentation
portion of this video where with WooCommerce

beaver steamer has already segmented and separated
each part that makes up a WooCommerce product

page and they made them into separate modules
here that you can move around so I have my

buy button right here if I wanted I can move
it anywhere I wanted I can put that wherever

I want I have full control without touching
a line of code to have a beautiful product

page that actually sells the product and like
I said we’ve got this ultimate add-ons for

Beaver Builder countdown timer by click on
add content I have the plug-in installed obviously

and it is their countdown timer and you can
actually have it be evergreen so all of these

beautiful modules and I’m sure the other add-on
package providers they either will add compatibility

or if for Beaver Themer or it might already
be available I know that today ultimate add-ons

for Beaver Builder pushed out there update
for the compatibility before the product is

launched Beaver Themer is launched and so
now you can actually use all of these beautiful

modules that they add to beautify your website
you can use them in these theme layouts already

which is pretty amazing but I think this countdown
timer is really cool sexually evergreen so

you do have a countdown timer built in the
Beaver Builder natively they’re the only ones

with an Evergreen countdown timer and you
have full control over the style and everything

and this is actually really really cool right
here when the countdown reaches zero so it’s

not the same for everyone so when you land
on the page that’s when the timer starts ticking

for that person and they get cooking and then
you can have in after the timer expires what

to do if you can redirect into page that has
a different price so you are holding to this

limited discount.

Our you can do whatever you wanted right there
sites actually a really powerful feature that

you can use in these product pages if you
wanted to and so here it is using the Beaver

Themer to create beautiful product layouts
now be power of it is that you can create

layouts for different categories of products
and you can also create and really cover this

in the next video headers different headers
for different categories of products as well

which actually brings me to an interesting
idea that I don’t know if it’s possible I’m

in a find out right now what I think would
be needed to have the WooCommerce shopping

add to cart button in the header and have
it be a sticky header I wonder if that is

actually doable let’s see if not maybe I can
ask them all right so let me get out of here

now in the same way you would create a new
team template is the same way you would create

a new header or footer for your website when
we actually test this this will be fun so

I created a header layout let me launch the
page builder and this is actually just showing

me the header layout only although it doesn’t
look like it allows you to do that bummer

I wonder if there’s going to be an override
because I think that would be actually really

cool to have the the add to cart button in
the header for the products when you’re on

the WooCommerce page that would be pretty
sweet that’s can be a frequently asked where

that can be for the Q&A for Robbie so tomorrow
in the video were to go over these custom

headers which is a power power feature of
Beaver Themer to be able to change the visitor

experience on your website depending on where
they are on your website which is going to

be massive for membership sites any site where
someone logs in or even a website that is

selling things you might want to totally different
experience when they’re in the actual shopping

pages or product pages so that you eliminate
the distractions to kind of drive them to

do the decision that you want so what I’m
ask you to do right now is go ahead and leave

a comment down below to let me know if there
was something specific about this that I did

not cover just the custom layouts by the way
if there was something specific that I did

not cover that you would like me to cover
and also if you had any specific ideas of

how you think this these custom layouts could
really be leveraged to have an amazing website

experience for your visitors want to go ahead
and add that information down below if you

haven’t already subscribed I’d hope you’d
consider clicking on the subscribe button

and I’ll see you in the next video

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Join The Conversation

Your email address will not be published. Required fields are marked *

Stay Up To Date

Enter your name and email for the latest news, updates, and tutorials.