by Adam Preiser updated September 6, 2017

How To Professionally Design Your WordPress Website With Image Separators


Share on facebook
Share on twitter
Share on linkedin

Video Transcript

How To Professionally Design Your WordPress Website With Image Separators

Welcome back for another video my name is
Adam from were a make videos

for non-techies and in this video I want to
show you how to cut a spruce up your website

a little bit if you’re using Beaver Builder
now as multiple ways to do what I’m gonna

show you in a make it clear if you need the
free version and or the paid version or some

other tool when you try to make it so you
can do the same thing even if you have the

free version of Beaver Builder so I actually
came across this I’m on the ultimate add-ons

website and what this is a module that they
added to their plug-in called in image separator

in what it allows you to do is put an image
smack dab in the middle of two rows of content

to spruce it up in a minute show you how to
do it in their point in my mouth to try to

do it in the beaver normal Beaver Builder
plug-in as well so everyone can be included

in this video here are some creative examples
how they have it you see there’s an image

in the middle right here there’s an image
in the middle right here there is one and

this was actually really neat how they did
this where the of the earth there, lines of

right in the middle it’s pretty cool and so
let’s us if we could do that in Beaver Builder

so here I am on a test site for Beaver Builder
in I loaded up one of the templates I didn’t

put too much thought into it I just thought
this might be a good template so this is really

good trick to put maybe a company emblem or
some kind of company symbol two in between

two Rosa, separated some and just make your
website stand out just a little bit more now

if you go to my websites or if you’re watching
this on YouTube all have a link in the description

I’m gonna give you this download right here
it’s can include the Adobe illustrator version

of these images you can change the color and
just the normal PNG’s so if you are not or

graphics or have someone that does a can easily
change these colors and is a series of icons

that you can use as row separators so what
I want to uses this right here this quotes

and I think this to be great to go right above
a testimonial area so let’s see if I scroll

down here this might be a testimonial area
right here or maybe something right here maybe

there is a $right there but go ahead and just
try to put it right there now this is to work

best these images when you see this area here
it’s white and there’s a slight white of perimeter

around the circle so I went to change the
color of this background the white so it just

looks good so for someone to go ahead and
click on edit page I’m sorry large page builder

now there’s a couple ways is said to do this
again for someone to show you the ultimate

add-on way with the ultimate add-on module
and a show you how to try to get the same

effect with just the normal Beaver Builder
now show the pros and cons of each so many

scroll down to the section here so first I
wanted to make this background white just

so that it looks better with the image actually
I want to that output the image in and then

show you so I’m going to add contents and
it’s under here cold image separator and it

is right here in our managers drag-and-drop
that right there okay so now I need to select

the photo anime click on that Artie have that
quotation there but also have this one of

me and this one their blitzes uses quotation
because that’s what I said and I’m gonna drop

it in their and there you have it it’s smack
dab in the middle of these 29 need to set

a color a row color to match what’s above
it and a right here with us images but you

can see how it perfectly aligns it up right
there and if I wanted it to be smaller I can

adjust the size right here to say 100 and
it’s going to make that just a little bit

smaller but it still smack dab in the middle
there which is perfect okay and you can do

some other stuff it was an image that already
wasn’t perfectly a circle you can make it

a circle or square or something along those
lines and there’s other things that you can

do to maybe push it up a little push it down
but by default it can be smacked dab in the

middle and you can also add in animation zone
I cannot do any of that managers make it look

better here are some click on save and so
I said in the section I was gonna make whites

so let’s do that now I can either make this
section whited to match the white or I can

make this sections background match this Brown
Bowman to go ahead and make this one white

and it looks like it said is a photo but I’m
to make it a color and I’m good to make that

color whites and then click on save so there
you can see how it perfectly is in the middle

and click on this life preview button and
you could see exactly how that fits perfectly

I really like this it as just that extra little
bit to your website in essentially all web

design is is taking blocks of text and make
it look really good with your images on single

pages and this is just something that adds
to it so now you can see how it is done in

ultimate add-ons now the advantage of ultimate
add-ons is it’s perfectly mobile responsive

but we can do the same thing in the normal
Beaver Builder so let me go back here and

why don’t I do the same thing right here for
the normal Beaver Builder sis is what I would

do are good at contents and I would go to
limits go back there right there I would go

to where the basic module is in I would choose
the photo and output that right there at the

top and then I went to choose the same photo
which is this right here and let’s see how

were looking so far so just to put the image
there no need to push it up and the way to

do that it was this was only call the negative
margin so I think I will go to -90 and you

can see right there I don’t know if that’s
perfectly perfectly in the middle it might

be maybe I might need to do a -100 looks like
it’s a little too pushed up so maybe 90 was

it okay someone to do that and you can do
this would be free or the paid version of

Beaver Builder with your image and you see
it looks nice so let me save this and show

you what it looks like in a mobile phone so
when we save it on the desktop is probably

gonna look just as good so there it is right
there and I made that a little smaller on

second thought I don’t think I got a perfect
that’s okay that’s one of the nice things

about this right here with ultimate add-ons
as it can be perfect so will go this now let

me switch my browser into responsive design
mode what this allows me to dudes in Safari

web browser allows me to see with my page
will look like on these different devices

right here so I’ll go to the iPhone 6+ cassettes
what I use and this is what the website will

look like now when you scroll down you can
see this is how it looks with how we did it

the Beaver Builder method that anyone one
can do you can see it’s not in the middle

anymore but when you scroll down you could
see the one with ultimate add-ons is still

perfectly in the middle so this is just a
video how you could do this images separator

with ultimate add-ons or you can use the normal
Beaver Builder to do it if I was using the

normal Beaver Builder I would set that image
should just not even show when someone’s on

a mobile device is a lot better did not have
it at all than to have it pushed down so a

if you’re interested in ultimate add-ons or
Beaver Builder I have links down below in

the description or during my website I have
them down below as well on what you know those

are affiliate links which means if you click
through and you make the purchase I get a

nice little credit from those software developers
and what I want to do for you as a thank you

I have a course called Beaver Builder essentials
and you could purchase this course for $47

however if you buy Beaver Builder or ultimate
add-ons you can forward the receipt to me

I’ll make sure that you made the purchase
through my link and I’ll give you access I’ll

gladly give you access to this course for
free before you go I have something for you

and before I get into that I wanted to ask
you to do something for me you can give me

a thumbs up on this video and if you’re not
a subscriber click on the subscribe button

right beneath me if you have a question on
this video I’m happy answering you can also

leave a comment or question down below this
video hey I put together a horse just for

you and him and they give it to you for free
all you have to do is click on the button

right here on the right is called three steps
to WordPress success is an awesome course

you’re gonna love it I would love for you
to join in and enroll as a student in this

thanks for watching this video I really appreciated
and I do it just for you

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.