In this video, Elementor educator & designer Dave Foy shows step-by-step how to recreate the popular Flywheel blog.
Dave Foy teaches non-coder designers how to build their businesses faster and more profitably with Elementor.
hi i’m dave roy from design build web
and i’m here today to show you how to
use the amazing new single builder in
elements or pro so in today’s video to
show you the power of the new single
builder i’m gonna recreate a really nice
single blog post design from a company
you might have heard of using elements
or pro so the blog post design will be
recreating is from the blog published by
flywheel flywheel you might already know
are a really great specialist wordpress
hosting company here’s the blog post
design from flywheels blog i’ll be
recreating today their blog post layout
is really very nice indeed
high impact fold with header image at
the top lovely white clean player
layouts fairly narrow main content
column here which makes the text really
easy to read nice short line lengths
couple of sidebars either side of the
main column with some extra
functionality and content and if we’re
is right down past the article itself we
have an email signup box plus comments
links tomorrow articles the latest three
full width email signup section and
links to flywheel social channels now
there’s no way we’d be able to recreate
this design using our themes pre-built
single post template but we certainly
can achieve this with elements or pro
i’ll show you let’s get started just a
few quick bits were set up first in
elemental settings style content width
i’ll change the default content width
from
flywheels blog layout the fonts they use
are monster out for headings and source
sans pro for body copy both google fonts
so we can use those in elements or right
away also in a couple of places flywheel
use museo sans rounded which isn’t a
Google font but is available in Adobe
Typekit
so I just connected to my Typekit kit
with its ID under the integrations tab
here so I can also use that font in
elements or really easy a couple of
other things to very quickly mention
before we get started for speed
I already recreated flywheels header the
logo and now using elements or pros
header builder feature so in my
templates under header I added a new
header and I just use elementos blocks
feature as a starting point so it was
really quick to make took minutes I then
set this header template to replace my
themes header really easy and I did the
same for the footer to using elements or
prose footer builder now the single post
template are be creating today will be
automatically applied to all our blog
posts so before the video I already
added a few blog posts you can see here
under all posts I’ve literally just
copied and pasted the content from the
last few flywheel blog posts so you can
see there’s the title here the main body
content is here
and I added a featured image to each
post – that’s the main full-width header
image at the very top of each post
I assigned each post to a different
author and it’s the same author name for
each post as it is on the flywheel blog
in fact I added each author as a new
user in my test site here and I added
each post to the same category that fly
will use as well okay that’s enough
setup we’re ready to roll first job we
need to create our blank single post
template that’s in element or my
templates and under the single tab
because we want to create a template for
single posts so I’ll add new single onto
select post type we want this particular
template to be applied to single blog
posts only so I’ll choose post if it’s
template a name for future reference
single blog post is good and click
create template at this point we’re
given the chance to choose a prebuilt
black and white template one of element
source blocks and this is a very useful
feature I used it to make the header
earlier but for this we want total
control a blank page so I’ll click X to
close notice the header at the top here
now this is being pulled in from the
header template I created earlier it’s
good to be able to see this while we’re
designing the rest of the page first job
we need to set this template so it’s
using the entire full width of the page
so we have the full canvas to play with
to do that come down to the Settings
icon bottom left and then under general
settings let’s change the page layout to
elements or full width that will give us
the full width of the page to play with
but it will keep the header and footer
which is what we want
next when building this template we’ll
also need some real content from our
actual blog post to work with so let’s
choose which of our existing blog posts
we want to use as a preview when
building the template so to do that more
still in settings under preview settings
now you can see he’s already suggesting
the latest post here it’s called the
best free stock photo sites in 2018 and
that one’s great so I’ll apply and
preview now nothing appears here yet and
that’s because we haven’t added any
dynamic content we haven’t had any
elements or widgets that’s ok let’s
remedy that now let’s flip back to
flywheels blog post starting at the top
the first element is this full width
header image so back to our single post
template
I’ll click add new section we only need
one column and we want this image to
always stretch full width and change its
shape appropriately at different screen
sizes so rather than adding an image
widget we need to add our image as a
background to this section so I’ll click
the section Settings icon in the middle
of the section and then in the section
settings on the left under style and
background remember the image at the top
is our posts featured image I could add
a background image manually here from my
media library but then every blog post
review would have the exact same image
every time not good we want a dynamic
featured image pulled in automatically
from each post we’re viewing so to do
that instead click dynamic and featured
image that’s now pulling in the featured
image dynamically from the post we’re
using to preview exilim we can’t see
much of the image though that’s because
background images aren’t inline content
so they’re not adding any height to the
section yet we need to tell this section
to be a certain height so that we can
see the image properly there are a
number of ways of doing that but the way
I’ll handle it here in this section
settings under the Layout tab and in
height
I’ll choose min height
I could set this height in pixels but
I’d prefer to set the height as a
relative measurement so if instead I set
this using VH that stands for viewport
height that will then be a percentage of
the height of each visitors screen I
think 40 looks pretty good there I find
using VH helps the image be visible
properly at different responsive screen
sizes this background image needs
positioning properly now so back to the
style tab still under background
I’ll set position to be top center
repeat we want that to no repeat we
don’t want this image to continually
tile over and over again under size I’ll
set that to cover cover make sure that
the image always covers the entire
section perfect all right let’s have a
quick preview and that is looking good
let’s keep moving looking back at the
flywheel blog design so let’s add these
three columns now so back to our
template I’ll add a new section to three
columns I’ll roughly resize these four
now by dragging them so left can be
around about 10% right I think it should
be around about 25% I’ll be the middle
roughly 60% or so later we can click
each column settings and type the exact
percentage we want and you can set
different widths for tablet and mobile
too I won’t be looking at responsive in
this video just purely for time all
right let’s take the middle main column
first we need the title of the post
dynamically pulled in from each blog
post so to do that we’ll use elements or
pros post title widget so click the
widget menu appear and scroll down to
the theme elements section this is where
all the widgets are that allow us to use
elements or as a theme builder so here’s
the post title widget I’ll drag it in
notice it’s automatically pulling in the
title of the preview post we set earlier
which is great
our flywheels post titles use montserrat
as the font so in style and typography
I’ll set Monserrat
I think there’s also a little bit more
line height so I’ll set that at one
point two M’s
check that against their design
yeah looks good so far now notice
there’s a gap between their header image
and the content below so we’ll add that
to ours too now I always like to add
space him working downwards if I can so
I’ll add margin to the bottom of this
header section so click the Settings
icon up here and margins in advanced
I’ll unlink the margin values and we
just want to set the bottom March into
next we have the date and the author
name so for that we need the post info
widget and that is under the theme
elements as well because it’s dynamic
content I’ll drag it in
now we don’t need all that info just a
day I’m the author so I’ll delete time
and comments and I’ll switch day and
author around edit the dates
I’ll remove the link to date archives
and turn off the icon I’ll set it to
none
then edit the author
remove the icon here too
and then in the before field just type
by now I need to sort out this gap so
I’ll set that in style I’ll set that to
seven go check flywheels blog and their
post info font size is a little bit
smaller so back to our template and
under text
I’ll set the size 2-16 instead
preview that check flywheel again their
headline and post info are a little
tighter to each other than I was so back
to our template I’m a few ways of doing
this but here I’ll add a little bit of
negative bottom margin to the post title
that will pull the date and author up a
bit
again that’s looking awesome so far now
to add the post content so we need to
pull in the main content field of our
blog posts as a reminder that’s the
contents of this field here when we
added our blog posts to do that we need
the post content widget this time I’ll
just start typing here to find it
instead of scrolling there it is
I’ll drag it into place and there’s the
content from this post I’m really happy
with that
now I already set source Suns Pro as my
default body phone in elemental settings
before we began but if I wanted to
change the styling I could do that
really easily in the style tab for this
widget onto the Left column now a
reminder we have an author profile photo
here for that we need the author box
widget so I’ll type that here again to
filter the list and there it is so let’s
drag that in I’ll leave the sauce
setting here as current author it’s
pulling in the current authors profile
photo automatically I’ll turn off
display name and biography and there’s
no need to change any styling this
narrow column is forcing this image to
be pretty much the size we need but
there are loads of options and styling
controls in this widget if you need it
then underneath here let’s have a look
on flywheel they have the name of the
current category being viewed so for
that we need the post info which again
now we actually need none of these
options this time so I’m gonna delete
all of them put the first one I’ll edit
that and I’ll change the type to terms
and the taxonomy we want to display is
categories I’ll turn off the icon
and then in style let’s have the
alignment centered it has a background
color background color is set in
advanced in this widget so advanced
background classic and I’ll set the
color is this ready pink I know I set
all these colors in the palette in
alimentos color picker or peer before I
started and then set the border radius
to something very round like 30 pixels
not bad we still need a few text tweaks
so back to style and text and the color
I’ll set the text color to white and
then in typography let’s set the weight
a little bit more to 600 set that to be
uppercase and I’ll also set the text
size just a little bit less to 16 pixels
all right as quickly check fly wheel not
bad let’s keep going next let’s add the
social sharing icons so we add the share
buttons widget why we’ll use Facebook
Twitter Linkedin and Pinterest so I’ll
switch Google+ for Pinterest and drag it
to the bottom
there’s some styling so the view is icon
only the skin is framed
shape is circle and only one column so
that now fills the full column which
she’s great so I’ll preview that now
it’s looking good but a little bit
squashed first I just want to add about
section hold in the columns it’d be very
useful especially on smaller screens
leaving some breathing room I’ll
actually do that for every section that
we add to the page and I also want to
add a bit more breathing space more
white space between the left and middle
columns here so I’ll add about 20 pixels
right hand pad into the left column to
add some space inside it so click the
column settings and then in advanced
unlink the padding values and out of 20
pixels right padding let’s preview that
and yep I’m pretty happy with that so
far so that’s the main column and the
left column is now time to build the
right-hand column so over to flywheel
here’s their right hand side bar until
now I’ve shown you every single setting
step by step I don’t want this video to
be really really long so I’m now going
to build the right-hand side by myself
but I’ll fast forward the video and then
quickly explain how I build each part so
there’s an email signup box a list of
posts and I’ve worked for local by
flywheel and a little call-out here if
we go back to our template but fast
forward pass me building the entire
sidebar here it is
here’s just a heading widget set to be
age 3 and in style I set the text color
to light blue and in typography set the
font to montserrat a lighter font weight
element or pro form widget now we don’t
have the styling controls to place the
button inside the form field as flywheel
did though I could achieve it with some
custom CSS and this looked perfectly
fine though and I’d argue it’s a little
easier to understand there’s nothing
special styling wise here the main thing
to know is in the style tab of the form
widget and under field
I set the border radius on the email
field to be really rounded again 30
pixels and also the exact same with the
button too I dragged in a space a widget
here set to 20 pixels there are a few
ways you can add more space between
elements vertically I just went with the
space of widget here because it’s very
easy the top posts section I actually
duplicated the first heading are made
and interact the duplicate here and then
just turned off uppercase in the
typography settings notice in advanced
under border I added a light gray bottom
border to the heading and also some
padding but I just added 10 pixels
bottom padding to the heading so that
there’s 10 pixel space between the text
and the border line and for the top post
list well the element or post widget is
perfect for this to get a simple list of
posts I just used the classic skin in
one column and set to only four posts
send each post image off and turned off
the excerpt and the metadata and the
read more as well under query that’s
where you set which posts to show here I
actually created a new category earlier
called top posts I assigned the blog
post that I want to appear here to that
top post category and they’ll just be
the most important posts you want to
highlight then down at the bottom in
exclude I chose current post so we don’t
see the actual post that were viewing in
this list and finally in style
under layout I set rows gap to zero now
this still leaves a gap between the post
there is a minimum it won’t let you set
less than but it looks great to me and I
set the alignment to center and finally
under content set the text color to gray
and the typography to monserrate 16 size
and that’s top post done then there’s
another space widget here the local by
flywheel ad now I actually created this
as a separate template in the template
library just in case we want to use this
advert easily in other places on the
site too so just in my templates I added
a new page template here it is so in the
section settings I actually set the
content width of this to just 350
I don’t want it wider than that ever so
it forces it to that size then in the
column settings I added a background
color to the single column here then in
the Advanced tab of the column I added
some padding inside the column to create
a bit of space
and all this is is just an image some
text and a button and this bit here this
little flag is also a separate image now
I added that image to the top of the
column but then in that image widgets
custom CSS
adding a bit of CSS to position this
image exactly where flywheel hover
sticking out of the side that’s not
essential but it is a nice effect then
once I finish building this particular
template are then dragged in the
template widget here and from the
drop-down chose the template that I
created and this call-out here is really
straightforward it’s just a heading text
and an image I won’t talk you through
all that right let’s preview this that’s
looking pretty good
now I just think there needs to be a bit
more breathing room between these two
columns a bit more space so I’m going to
add a little right-hand padding to the
middle column here so back to the
template I’ll click the column Settings
icon on the middle column and then in
advanced and padding let’s unlink the
padding and try let’s say 30 pixels yet
preview that again
yeah that’s looking great almost there
so now let’s fix the final parts of this
template and that’s the elements that
appear at the end of the article itself
so back over to flywheels blog again and
scroll to the end of the article first
the email signup box at the end of the
article now notice this is a box with a
gray line all around it and a yellow
border at the bottom and then inside
that box is a heading text and a form
and they’re all wrapped inside this box
and there’s also a funky little yellow
tag sticking out of the side okay back
to our template
I could just start adding ahead in
widget a text widget a form widget the
problem is they all need to be wrapped
in a box with a gray border so we need
something that will wrap around all
those elements another way to do that is
to nest a new column here inside our
main column and we can then apply the
border and the padding inside it to that
nested column itself that’s really easy
I’ll drag in a columns widget the
columns widget actually comes with its
own section so first in the section
settings I’ll set the columns in this
section to be no gap because we don’t
want any space around this email box the
columns widget comes with two columns by
default I’ll just delete one of them we
only need one and now I’ll add in the
heading and the text and the form I’ll
fast forward the video to do that
because you don’t need to see every step
there
just ahead in widget a text editor
widget and the farm widget I forgot to
mention earlier in the form widget
settings you can integrate the form with
various email marketing services like
MailChimp or drip or even vias appear to
hundreds more now I’ll need to add a bit
of padding to the inside of the column
too just for a bit of breathing space
I’ll do that now
in the gray border all the way around so
we in the column settings I’ll add a one
pixel gray border all the way around
choose a nice light gray color here the
box has got rounded corners so let’s
have an 8 pixel border radius and there
was a yellow border at the bottom too
and we can’t have a separate bottom
yellow border with these settings but we
can fake that using box shadow so in box
shadow I’ll firstly set the yellow color
for the shadow a nice solid yellow color
then just set everything to 0 because we
don’t want any spread or blur like with
normal shadows now I’ll just set the
vertical shadow to 4 and that gives us
the solid line perfect now let’s just
sort the little yellow tag sticking out
the side and I’m gonna drag in an image
widget to the top
then choose the image I already added it
to my media library earlier was that in
style I’ll set the image size to around
[Music]
then in advanced we need a little custom
CSS here to position it exactly where we
want it so I’ll go down to custom CSS in
advance and just have a little play with
those and that he’s looking good right
we’re almost there what’s next on
flywheels blog ah blog comments so I’ll
come back to our template to add those
firstly I’ll just drag in a spacer now
we need the post comments widget that’s
just another dynamic widget so it’s
under the theme elements in the widget
menu here are the only available skin
and styling right now for this widget at
the time of recording anyway its theme
comments this uses the currently active
themes design and layout for the comment
forms so for now that’s totally fine it
doesn’t look exactly like flywheels but
it’s okay then we have links to more
articles underneath this is now a
completely new block on the page it’s a
whole new section so we’ve broken out of
the main content column now out of that
three column layout so in our template
or add a new section it can be one
column in the section settings in style
I’ll give it a really light background
color
and again for speed I’m going to fast
forward this next bit and then explain
why I did so this image is just an image
widget this is just a head in widget I
also added a good bit of padding to this
section just to create some room inside
the section itself and then for the
posts themselves an element saw has a
post widget which is perfect for this
drag that in
okay we’ll want the cards skin three
columns is great
we only want three post property Oh use
only the medium-large version of each of
the featured images that’s totally fine
the image ratio on flywheels blog is
very small is about not 0.3
in metadata we don’t want day or
comments
the badge over the image we can remove
that flywheel don’t display one and then
down to query now that just means which
posts we want to show now we want to
leave this as showing post that’s great
but further down in advanced let’s say
order by two random I’ll just pull in
random post which is fine for this
purpose important here we need to always
exclude the current post from displaying
in this block this block is more
articles so we don’t want the same
article being suggested that we’ve just
been reading and then in style tab on
the card we don’t want each card to have
a box shadow so let’s turn the hoff here
then under content so we’ll make the
title nice kind of dark grey
we want the title font to be Montserrat
under the excerpts make those around
sixteen pixels size
and then for the reidmar there can be
the same
okay let’s just preview that quickly
he’s looking pretty good one more bit to
do let’s check flywheels blog one more
time so the last part of the layout is a
full-width email signup block at the
bottom of the page it’ll be hard to get
this exact layout and effect without a
fair bit of custom CSS code the precise
way this laptop image sits within this
block especially responsibly now their
layout is hand coded I don’t want to go
down a CSS rabbit hole here in this
video so let’s get pretty close
using just elements or standard controls
and there’s a little bar underneath with
links to fly with all social channels as
well so once more for speed I’m going to
build this book fast forward and then
explain what I did so this is a new
section it’s got two columns with a
purple background color
this is just an image widget I’ve not
changed any styles on this but in the
section itself in advanced
notice I added top padding so that’s
that space here I added some left and
right padding to give breathing room on
smaller screens I’ve done that for every
section but notice there is zero bottom
padding that’s just so that the image
sits on the bottom of the section I
didn’t want a gap down here and then
here on the right is a head in widget
this is set to Museo sans rounded which
is a Typekit font I set that integration
up earlier and the standard element or
form with a bit of styling and that’s
pretty much it it’s not exactly like
flywheels but it is close and then
finally that footer social channels bar
so this is just a two column section
with a dark purple background and I set
the columns to be 50% with each this is
ahead in widget now I set this one to be
right aligned just so it sits over here
and then the social icons widget with a
bit of styling shake set to me circle
and then in style just a bit of custom
collar styling that my friends is the
entire single post template complete
whew
now of course at every stage we should
also have checked responsive to tweak
how it all looks on tablet and mobile
but if I go back and do that in this
video we’re all going to be here all day
I’m sure you’ve got better things to do
so sticking to desktop mode for now
let’s have the moment of truth let’s see
how our template looks when it’s applied
to all our blog posts so first we need
to publish our new template and we now
set the display conditions meaning where
did we want this template to be applied
so add condition and we don’t want it
apply to all singular or that will apply
to all pages and other things too we
only want blog posts so it’s all posts
and then publish and job done okay let’s
see how this looks I’ll come over to the
list of posts in the WordPress admin
panel hover over the top post and view
and yet that looks great so here’s that
post featured image the post date author
the author profile all pulled in via
element source dynamic which is that’s
for you another one
and this looks great as well all this
dynamic data pulled in from the blog
post that we’re currently viewing right
now at one more
and there we go featured image post
title date author category content as
well as all the other elements that we
added to and that’s it now we have one
master single template that powers all
our blog posts in future if we want to
redesign our blog all the way across our
site we can do it in one place by
editing our single template in
elementals library
Annie’s greats and not be restricted by
our themes single post design hope you
enjoyed this video I’d love to hear what
you think if you’ve got any questions or
comments drop them below this video and
I’ll do my best to answer huge thanks to
the Elementor team for having me as a
guest today be great fun thanks guys
I’ll see you all soon
