Beaver Builder Website Teardown See How I Build This Page

by Adam @ WPCrafter   |   Last Updated: May 18, 2017
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Video Transcript

Beaver Builder Website Teardown See How I Build This Page

Thanks for joining me on another video my
name is Adam from WPCrafter.com where I make

videos for non-techies like me and in this
video I wanted to do sort of a page tear down

where there’s this page that I recently created
for my main domain well with my name my full

name AdamPreiser.com I’m redoing the whole
thing in Beaver Builder and I’m working on

this homepage here and I just want to do a quick

A page tear down where I show you how I did
this so that maybe you could get some ideas

of better using the features and the tools
that come with the Beaver Builder so here

is the page and I’ve got this background slide
show going on so there’s this real subtle

movement I’m going to exactly how to do that
right here I actually have a pop-up integrated

where I can click here and then it will generate
a pop up like this all were someone can opt

in and get whatever I’m giving when you scroll
down I have this little stats area and you

could see have got these different bottom
of the road texture is going on styles over

the finger just called Rose styles and then
I kinda have it continuing in on the top here

in our little area here where I’m featuring
some testimonials I have some testimonials

here on the right from people that I may have
helped with my videos and then down here I’ve

got some testimonials from different product
developers where I helped them may be educate

their customers a little better and I have
this seminar you consider using these rose

separator designs and to hear we are that
feeds us right into my marketing stack in

this room highlighting the three main tools
that I use pretty much exclusively and I’ve

got another bottom of a road texture which
is this down arrow in appointing people off

here to my different blog posts and then I
got a little contact form year with a background

image so we actually get into the page builder
dish first show you how I did some of these

things and then on the second part of this
video on the go ahead and just re-create them

for those that might not be aware of all these
little features that you can leverage to have

a nice looking site I really like how the
subtle movement as their son was on the homepage

builder and jump on in here now some of these
rose were predesigned templates that came

from a add-on a plug-in called ultimate add-ons
for Beaver Builder and I’ll have a link for

that down below so first we got this background
motion so if I click on the were the row is

and I click on row settings it’s gonna pull
up the settings into my sites on my development

server right now it’s a little on the slow
side so if you see some delays is not due

to Beaver Builder it’s due to my development
server so here with the row settings and I’ve

explained many times a website is only a series
of rows and in those rows they have columns

in these rows on the background you can have
images or colors or videos and then in these

columns you put modules and that’s all a website
is you can break any website on the Internet

down to that so I’m in the row setting and
so this whole section here is a row and now

when I scroll down you can see for the background
I chose a slideshow a lot of people that have

built Beaver Builder don’t even realize this
exists so I chose slideshow and then right

here you can choose the background slides
and some of the settings so to get this slow

movement I put two of the same exact photos
I set the speed to 60 seconds so that’s can

make it move really slow and then I played
this can Burns transition so that’s the way

the image moves it’s a random movement but
there’s all these other different options

you have as well alright and then the transition
speed minimize photo background color so that

is the main settings of what I did to get
that image in the background and get it moving

and then if you have ultimate add-ons for
Beaver Builder you’ll have this affects tab

in that’s where you can put in effect to the
top of the row or the bottom of the row so

I put it to the bottom of the roan I use this
thing called the big triangle left so that’s

why it has that goes down and then it goes
up so that’s called the big triangle to left

and you can change the size and then there’s
that little area that you see how it pulls

up on each side were you actually need to
make it guys set a color for that and usually

wanted to be the same color as the road directly
beneath it and that’s how you get that look

in case let me cancel out of that now here’s
something as well so I put the big image of

myself I need to take some new pictures which
is fine but you want if you use an image of

yourself you’re going to want to make sure
there’s no margin and padding underneath it

so the bottom of the image lines of exactly
with the bottom of the row and so Austria

had several quick but a lot of people put
pictures of themselves were they crop out

the the background and it’s just them but
then it doesn’t line up right is just like

floating in it doesn’t look right so you see
right there doesn’t look right but of course

when you actually save it and then look at
it it looks perfect let me show you how to

get rid of that margin and padding I’m click
on the image properties go on advance in its

right here where I removed the margin on it
and I think I added that five for a particular

reason it was when you save it it lines up
perfectly but it was that’s how I have that

that’s how you can take an image in control
how far down to the left to the right to the

topic goes by limiting margins and padding
summary cancel out of that is just a standard

box with the button in its and here are just
the number counters and you can see I’m using

that same Row affects all over the reason
the colors are coming right as good as my

development server which is fine so let me
actually try to start rebuilding some of this

I created a test page right here and so first
time to make a road layout now I’m using the

ultimate add-ons for Beaver Builder in one
of the benefits of that it adds by about 35

new modules and there’s new things you can
do with Beaver Builder but also has predesigned

rows and pretty soon redesigned people page
templates so here’s the rose colored sections

and then there all listed here so when you
click on hero it was probably this one right

here so if I drag-and-drop it across its GNU
put this predesigned row in their and it actually

wasn’t this one but that’s okay I can show
you how I would modify it so I would drag

this to hear so now I have it here and here’s
where I would put my image and then I could

change my background so many change the background
by going here to the row settings and let’s

see I’m going to this actual row is full height
I don’t actually want that someone ago default

in a Titans it up there a minute go down here
to background choose slideshow I’m in and

click on create gallery it’s good to show
the images I have here and then I’m just gonna

go ahead and choose those two images that
were identical and add them to the gallery

and then click on update Gallery change this
the 60 change the transition to a can Burns

and one seconds fine and randomize photos
is fine so and then I did the effects it was

the bottom row big triangle left and we can
leave that white for now and so there it is

I just re-created so now I just need to put
a picture here I go to add content another

nice thing about ultimate add-ons as it adds
the search function I can just go for type

photo and then drag and drop that photo when
and then I’m in a click on select photo and

I’ve got a photo of me somewhere is probably
that right there and then I need to remove

the padding there on the bottoms let me just
put zeros throughout there we go right and

then I’m click on save now I’m way too large
there so I’m going to want to him see what

I’m doing and clicking on this right here
and it allows me to dynamically resize this

column so I probably want to be a little smaller
like that now when I save it this little cut

off here is going to it’s just going to go
away see you’ll see what I mean when I actually

save it so actually and it also looks like
I might have a background color going on there

an overlay color let me remove that someone
going to the row settings and then I’m gonna

go down just to check it looks like I have
that yet the back run overlay I don’t want

that some click this acts and then there it
is a goes away so now you can see how I created

that top section there so now it’s great that
number section and this is simply just click

on it and start editing whatever you want
I made the button transparent it’s all pretty

simple this info box setting I would also
push it down a little here on the top there’s

actually one of my favorite features that
ultimate add-on as it has the ability to center

align a comment column and this is what I
mean so here’s an element in this column I

can click right here click on column settings
and then I’m going to get this option here

to equalize column height of change that the
yes and choose center it’s what that does

is in this is unique to ultimate add-ons it
centered it perfectly for me this column that

right there is actually huge because when
I discovered that I use it all the time before

I would have to kind of guesstimate how far
I needed to move something down and it wouldn’t

be exact and with this one feature I’m able
to just the center columns and it’s actually

my favorite features okay so now we get to
the number box below that, click on sections

again and that was on number or counter let’s
see how accurate is number and it see that

the which one was it this was it right here
summon a drag-and-drop that so these are these

predesigned columns that are certainly predesigned
rose to get out of ultimate add-ons for Beaver

Builder now what I did is I didn’t need for
only needed three so first I hit X to remove

the module in their and then you also have
to remove that column that’s all you remove

the call they going now just to spread it
out perfectly for me like that and you can

click in any one of these like this and change
the icon to whatever you want ultimate add-ons

also adds four different icon packs so here’s
one here I actually really like these top

four rows a lot but you see there’s a lot
more add-ons that you I’m sorry lot more icons

that are here is a cute little rocket click
on save and so that’s all I did to us start

to to do this rope but then I also added that
same effect to the bottom of it that same

row effect so we do that real quick, going
to the row settings and I’m a good effects

in this time is not the top it’s the bottom
so I’m in a do a big triangle right so here’s

the left and then I switch it over to the
right have to come back in and fix these colors,

and have to make the color right here match
this color and actually do that now so I went

back to my roast style here’s the background
color I can click here and let’s just copy

the color code into my clipboard in him and
click on save so I need to set it actually

in this role so we go back in there and then
go back to fax and then right here I need

to set its to the color code that’s in my
clipboard and click on save and then we should

see it now the colors match see how that matches
now and so on next I did that really cool

a role where there’s half of its one color
the other house another color and you can

put whatever you want to now was a another
pre-design dissection and let see diving them

up in the content section somebody scroll
down these pretty fast okay so it’s something

similar to these but that’s not the one I
used let’s see if I find it’s there so many

up here it is right here someone a drag and
drop this down here okay and it’s gonna pop

up in what I did years I made two of him so
this is how one was and then I duplicated

it in then I just swapped the colors so let
me show you how to do that and then I swapped

the content across the know I need to deal
with this little gap problem right here you

see that the color and I actually might’ve
just misled you I think what idea it is I

plied the top row effect here and I didn’t
apply in effect hears let me let me check

that real quick so we remove this bottom effects
that I just don’t you add is okay I’m doing

this all off-the-cuff some good effects and
I’m in a lemonade that just like that and

I’m in a safe and then I would apply to the
top of here to get that effect that I had

some now I’m good at it this row just like
this and him and go to the facts in this am

going to do on the top limited be doing a
big triangle right and the background color

I think I had to make that same color like
that and lessee that does it okay so that’s

exactly how I did that you see that how I
made it go like this and then I think I made

this whites right now I think it’s that same
kind of a gray so let me change the color

of this column know I know when I was first
using Beaver Builder I missed these column

settings and you don’t want to miss them so
the when you hover right here you see this

is a column and this is a column but if you
click here like that it gives you this option

of column settings as you don’t want to miss
that and this is how you can put a picture

just in this column or change the color just
McCallum so right here I think I made it why

just like that so that’s how you see it kind
of stands out and I did the same thing here

but I flip to the color so I will make this
white and then this black so go here like

I just showed you column settings and then
I’m going to go down here in for background

I’m going to click here and make it black
just like that now when you have a black background

or a dark background Beaver Builder makes
it really easy to change the text color so

I can also change the text color right here
and make that white and that’s how easy that

is and then I need to do the same thing here
I need to make this white so I’ve got to go

here go to column settings just like that
and so the color I need to remove the text

color because it’s good to be white so the
text needs to be black soma to get rid of

that and now the text went to its default
color and then the background I’m going to

get rid of that as well and so that’s how
I got that effect right there now I think

what idea it is I added that role effect to
the bottom down here so let me do that kiss

him and to save that and then I just move
this to hear like that so I went like this

I moved here and then I did this and I moved
it there so you have that reversal flipping

effect okay so now I need to put the effect
on the robot in here someone to click on row

settings in him to go to fax I’m a Doobie
triangle right this time so I’m alternating

left right and then the background color and
put that same color in right there, click

on save whoops I think I really screwed it
up I put that on the top when I wanted to

put it on the bottom yes I screwed that up
let’s fix that some going in here going to

fax and I do that sometimes let’s make that
none and let’s put it down here triangle left

and let’s put that color back in like that
out there it is you can Artie see it and then

say okay so there it is so there we got that
affected going on right there and right there

so now I added another predesigned section
that you get from ultimate add-ons to get

those for actually here let me try to find
its to get those four boxes that seats gotta

be in here I don’t remember the name of it
my been something like that out here it is

right there so many drag and drop that now
right there and it’s good to pop that in and

what I did is I removed the first boxlike
like this and then I just added some text

there and then here in in these I just clicked
on them and I change the icon to be one that

I liked I changed my heading I change the
info and then I clicked on the link in order

to add a button so you can just add a button
like that and linseed should just add a button

right there and I believe I made it transparence
right here and then I think I also made it

full width so there should be an option here
for the way it and then I made that fullwidth

and then us like I perfected no one and then
I just copied it and pasted it across just

like that alright so there it is so then what
I did is I deleted this one I deleted this

one and then I duplicated across this is this
is how I try to do things faster I’ll modify

one with the colors get everything perfect
and then I’ll just use this duplicate button

and then edit the text for them this might
be a lazy way of doing it were knows I just

like that’s less how I do things a little
quicker and then I added the road texture

on the role beneath this to get that down
arrow and that was simply just the blog grid

so if you go to add content right here let’s
see if I type blog blog posts something like

that I just added that down there someone
I can go through that and lastly I added a

row with a contact form and that’s good to
be sections and then think it’s contact info

so here’s all these different predesigned
rows to highlight your contact information

this is exactly pretty nice right here and
it would be very fitting but I used this one

right here so let me drag that down to the
bottom just like this now I’m not a fan of

that bright yellow so what I did is I changed
it to an image so you just go here here and

click on row settings and change the background
from color to photo select your photo and

I just chose this one right here and then
it’s a little no sounds a little hard to see

your form so what I did then to make it easy
to see I added this background overlay like

that scene okay and then I made the opacity
a higher number probably something like 80

or something like that see you can subtly
see it I probably actually won’t keep that

I’m not like loving it so let’s see and I
click save yes I’m not really love and love

and that background image of figure out something
to do with that but anyways this is essentially

you saw in the last 10 minutes exactly how
I built this page and so all you have to do

is click on Don and you just saw how I built
the home page for this site of mine I hope

that me showing you how I did this I don’t
care if you copy exactly what I did if you

really liked it that much but the purpose
of it for me is to just show you how you can

use real-world experience to do these things
into my kind of give you some ideas of what

you can do to make your site a little better
your clients sites a little better I by no

means am a website designer soap redesign
is watching this website give me a break because

I’m not a website designer and that’s why
like to rely on tools like Beaver Builder

and Altman add-ons to kind of do the designing
for me I just change an image here change

the text there and I’m gone and so that’s
kind of the way I like to build websites now

so anyways I’ve got links all of this down
to below what can you do something for me

if you’re watching this on you too can you
give me a thumbs up and I want to invite you

to subscribe to this YouTube channel there’s
a button right beneath me and I really appreciate

if you did that and I got something for you
I don’t want you to leave empty-handed if

you just click off here to the side it’s a
free video course that I put together just

for you call the three steps to WordPress
success you will love this course registration

is free right now all you have to do is click
on the link right next to me thanks for spending

this time with me and I can’t wait to make
another video for you

Adam @ WPCrafter

Adam @ WPCrafter

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.

Leave a Comment

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