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 WPCrafter.com 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