Beaver Builder
Video (10:31)
Bonus Notes
Beaver Builder started in 2014 by three friends who in their agency work were looking for a way to build faster sites. Robby, the co-founder, writes 2014 in Review: The Beaver Builder Story | Beaver Builder. There are over 1,000,000 websites using Beaver Builder today. They support the open-source community and have a lite version of their builder) in the WordPress plugin repository. They have three products, the builder, the theme and a product called Themer allowing you to them all areas of your website, like the header and footer.
Bonus Materials
[00:00:08.680]
Welcome back.
[00:00:09.840]
So in the next few videos,
[00:00:11.960]
we're going to talk about front
page builders that are available for
[00:00:17.040]
WordPress.
[00:00:19.440]
There is a default Gutenberg page builder
that we've already explored quite a bit,
[00:00:25.200]
and then there's add on page builders
that you can add with plugins,
[00:00:30.440]
the first one we're going
to discuss is Beaver Builder.
[00:00:33.480]
And to install Beaver Builder,
we're going to go into our dashboard.
[00:00:38.960]
And plug ins.
[00:00:42.200]
And I have re-installed it,
so we're just going to click on activate.
[00:00:47.960]
Head back to the plugins lesson to learn
how to install new plugins, if you like.
[00:00:57.160]
Alright, so Beaver Builder light is
[00:00:59.880]
a completely free plug in,
there is also a pro version that gives you
[00:01:04.960]
additional functionality,
but both work pretty much the same.
[00:01:08.920]
The pro version gives you a few more
[00:01:12.160]
options as far as the types of blocks or
widgets or whatever you want to call them
[00:01:21.480]
available to add to the
[00:01:24.920]
interface. So here we have a little quick
[00:01:27.840]
add new, so let's go ahead and
go ahead and click add new.
[00:01:39.640]
Alright, so here's our
[00:01:42.440]
page and we're going to click
on launch Beaver Builder.
[00:01:46.920]
And that's going to take us away
from the WordPress page editor
[00:01:50.720]
and into a new editor,
which is the Beaver Builder editor.
[00:01:56.240]
And once you start Beaver Builder, it will
ask you if you want to take a little tour.
[00:02:01.440]
We'll go ahead and do this so
that we can kind of follow along.
[00:02:04.760]
So the first thing that you want to add
[00:02:07.200]
from up here is into a
little plus is rows.
[00:02:12.040]
So you can click on rows.
[00:02:15.080]
If you want a three column layout,
[00:02:17.400]
six, call me out, I have a divided layout,
you can click and drag these rows into
[00:02:25.280]
the page itself and we'll
look at that just a second.
[00:02:29.200]
Then you want to add new content.
[00:02:30.800]
So we have all of these modules available.
[00:02:33.320]
We have audio, photo, video,
text editor, HTML, and a sidebar.
[00:02:41.280]
[00:02:47.120]
[00:02:55.040]
Alright, so if we come from a plus, we
get rows, let's add a four column layout.
[00:03:02.160]
So it's going to add work, home layout,
you have four columns here that we can add
[00:03:06.320]
content to, so if we want to add
in the first column of photo.
[00:03:16.040]
It won't bring up an editor bar or an editor window
[00:03:19.960]
that you have all of the different
options for a photo.
[00:03:23.040]
So you want a photo from a media library
[00:03:25.520]
or the URL. You want to go and select a photo
available.
[00:03:33.560]
I show the title attributes
of the caption, link it to something,
[00:03:38.880]
a lot of different options here.
Under style, you have options to crop
[00:03:45.280]
the photo so we can easily make it
into a circle, into a portrait.
[00:03:56.080]
Different notes here.
[00:03:59.840]
[00:04:07.760]
And then you can also set the width so if
[00:04:10.840]
you want it to be wider,
you are limited to the width
[00:04:14.040]
of the of the column itself, but you
can modify the width to what you want.
[00:04:21.560]
[00:04:23.040]
You have more options here for kind
of the width and the style,
[00:04:28.880]
if you want, this is specifically
for the border and then for a radius.
[00:04:34.960]
So let's say you want.
[00:04:40.120]
[00:04:43.200]
A radius does
[00:04:45.360]
smaller that kind of curve on the edge,
[00:04:50.560]
so it's not a full circle, but
it does give it kind of a little curved
[00:04:58.880]
effect.
So that might be a little nice.
[00:05:01.680]
And then you can add a box shadow
and all kinds of different things.
[00:05:05.000]
These are things that normally you would
[00:05:06.320]
do in something called CSS
cascading style sheets.
[00:05:10.760]
But Beaver Builder allows
it to be really easy to do.
[00:05:14.920]
If we change our mind and we want it to be
maybe a three column layout
[00:05:19.640]
or two column layout, we can just go
in and delete the the columns here.
[00:05:25.640]
This is an edit column so you can go
in and go to that column settings.
[00:05:30.680]
So let's say we want it to be 25 percent
[00:05:34.040]
or 30 percent
and the image to be kind of a larger
[00:05:38.560]
percentage, kind of modify
that and work at it.
[00:05:43.160]
And then lastly,
[00:05:45.280]
so clicking on the area will give you
the settings for that area,
[00:05:51.520]
for the photo, for the column,
and then this icon will duplicate.
[00:05:58.080]
So if you get something like you like it
and you want to duplicate it and then say
[00:06:02.800]
we want to change the image, you would
just go in here and select an image.
[00:06:16.360]
Doesn't work too well with the settings we have,
but that gives you the idea.
[00:06:20.640]
And then lastly,
if you want to move something around,
[00:06:24.120]
you either want to reorder it or you
might move it to the other column.
[00:06:28.560]
You can grab the cross
pairs and move it around.
[00:06:36.560]
So just like we added the photo,
you can add videos.
[00:06:41.120]
A text editor will just allow you to do
basic text,
[00:06:45.320]
gives you the classic evidence so you have
full control over the text that you add.
[00:06:53.200]
You can add audio and you
can add a sidebar.
[00:06:57.440]
You also have widgets,
so all of the images that you have
[00:07:00.240]
available in your WordPress site,
you can also add into Beaver Builder.
[00:07:06.600]
So if you want to add
a list of your categories.
[00:07:18.320]
One category of uncategorized
[00:07:21.760]
or a listing of your pages.
[00:07:26.040]
This is a new way that you can kind of
[00:07:29.960]
add menus and add sidebars to your layout
without actually having a pause button.
[00:07:38.880]
Lastly, under templates,
[00:07:41.160]
this is something that is part of the pro
and we'll go look at the pro here.
[00:07:49.000]
It opens a window.
[00:07:51.920]
So the Beaver Builder plug in the pro
version, the pricing is
[00:07:58.800]
on a scale for how many sites you have
so or the packages that you get.
[00:08:06.720]
I'm sorry.
[00:08:07.360]
So the standard is available
for unlimited sites
[00:08:13.320]
and you get all of the premium features.
[00:08:16.400]
It is a little pricey, it's
[00:08:18.200]
$99 dollars.
[00:08:19.720]
I will tell you, though, Beaver Builder is
[00:08:23.520]
pretty much, I think,
still the best builder out there.
[00:08:26.640]
It is what I prefer.
[00:08:28.360]
A lot of people like using Elementor,
[00:08:31.080]
which will go through next,
but Beaver Builder is still my favorite.
[00:08:35.440]
If you jump up to the pro,
you've got the Beaver Builder theme
[00:08:40.160]
and then it is also multi-site capable,
which means that you have one WordPress
[00:08:45.760]
installed with multiple sub installs are
sharing all of the news and plug ins.
[00:08:53.720]
So if you like Beaver Builder and you can
[00:08:58.000]
afford the $99 dollars,
it's really a great way to go.
[00:09:02.040]
There's a lot that is there
[00:09:05.360]
and you get a lot of templates
in addition to a lot of extra widgets.
[00:09:11.000]
So let's see if it shows the templates, there we go
[00:09:15.760]
so there's landing page templates
and there's content templates
[00:09:20.960]
that you can choose from or what that will
do is it will add the full page of content
[00:09:26.840]
to your page and then you can
go in and modify it as needed.
[00:09:33.840]
And there are some ways around being
the pro for this, we have a bonus section
[00:09:40.120]
in the course called Astra starter
themes, and this is a great way to get
[00:09:44.920]
started with Beaver Builder
and the theme and
[00:09:50.040]
get a basic layout set up for you so that
you don't have to start from scratch.
[00:09:56.320]
Once you're done making all your
changes, you click on Done.
[00:10:00.360]
Here you have the options to discard
the save as a draft and to publish.
[00:10:08.000]
And once you publish or
[00:10:11.160]
save as a draft, it will refresh
to the page and you can see it in action.
[00:10:16.520]
So Beaver Builder is a great page builder.
[00:10:19.560]
It's a drag and drop
[00:10:21.600]
that makes it very easy to kind
of visually see how things act.