Create a One Page Website on WordPress – Monday Masterclass

we’ve been making these Monday master
classes for a few weeks now and during
that time there’s been one request that
keeps coming up to show the process of
building a full website using the Hello
theme and the elements or theme builder
which is why we’ve decided to dedicate
several master classes to exactly that
where in each master class we’ll be
showing you how to create various parts
of a website and we’ll start this week
by showing you the process of building a
one-page website with a header of footer
and the content will begin with a clean
WordPress installation using the 2019
theme now I’ve already installed the
free element or builder and elements or
pro but nothing else first we’ll go into
the theme section on the dashboard and
we’ll search for the hello theme we’ll
install it and activate it now we’ll
create our page as you can see it’s a
blank page and if you were expecting to
see something I mean we did just install
a theme after all well don’t panic one
of the main benefits of the Hello theme
is that it gives us this pristine blank
slate to work on in this masterclass we
want to create a one-page website for a
yacht rental service I’m going to look
for a template that suits our purpose
and we have one here so I’ll add it and
use it as a foundation for our page now
as you can see our page includes the
following sections the top features
about us our CEO destinations a photo
gallery subscribe and contact us but
there is a chance that when we import
the template the sections might have
been renamed automatically so to prevent
that from causing any future problems
we’re going to assign each of these
sections a CSS ID right now and to do
this we simply right click the section
handle and select edit section now click
on the Advanced tab and in the CSS ID
field we’ll enter the correct section
name I’ll name the first section notice
that one we’re in the elements or editor
we don’t add the hash sign or the pound
sign in front of the
Eydie names because this already happens
automatically within the elemental code
and if we add it it just confuses things
a little now we’re going to speed things
up a little while we name the rest of
the sections and we’ve decided to name
our sections as followed so we’ve got
top features about CEO destinations
photos subscribe and contact you might
prefer to use different names and that’s
completely fine now that each section
has a clear idea it’s time to build our
pages menu to do this I’ll bring up the
finder with command e or ctrl e if
you’re on a PC and use it to get to the
menus options this takes us to the
WordPress dashboard in the menus options
which is in the appearance section now
we’ll name our menu one page menu and
click create menu now we can begin
adding the items to our new menu we’ll
start with the features because we want
to turn the company logo into a home
button later now when I add each item I
specify the URL using the appropriate
CSS ID and obviously I include the
hashtag here because we’re not in the
elemental editor and I specify the name
of the section so I’ve created the
following menu items the name of this
item is features in the URL I’ve added
hash tag features the name of this is
about us in the URL I’ve added the hash
tag about next section is our CEO I’ve
added the URL hash tag CEO the next
section is destinations and I’ve added
hash tag destinations the next section
is photo gallery and I’ve added hash tag
photos the next section is subscribe and
have added hash tags subscribe and the
last section is contact us and I’ve
added hash tag contact to the URL here
now that we’ve finished creating our
menu items we’ll assign the menu to an
appropriate location in the menu setting
will set this to primary and we’ll save
this menu
now let’s move on and create our header
we’ll go to templates theme builder and
we’ll add new and in the dialog box
we’ll select header and we’ll give it a
name and click create template in the
template gallery we’ll select a header
that suits our design like this one and
click insert now we’re back in Elementor
and let’s start tweaking this header by
deleting this image widget here and
replacing it with an icon box okay so in
the editor we’ll change the icon to an
anchor and in fact in both the updated
free and pro versions of Elementor we
can add a custom icon or logo here in
SVG format so we want the icon to be
framed and we’ll add the name of the
company in the title box let’s delete
the description text and we’ll turn the
icon itself into a home button by
entering the link to the top section
right here it’s basically the link to
the site with hashtag top in the slug
and I’ll change the icon position and
now I’ll go to the style tab and change
the icon color to the same dark blue
that’s used elsewhere on the page let’s
make the icons frame and background
white and change the spacing to 27 and
the size to 21 as for the text will
change the color to white now in
typography let’s set the size to 18 the
weight to 500 and let’s use the
transform option to set it all to
uppercase in the hover settings let’s
add some animation and have the icon
float
now we’ll tweak the navigation menu and
set the pointer to text will have this
animated like our logo and set the
animation to float and we’ll set the
submenu to classic in the style tab
under typography we’ll set the font size
to 14 and the way to 400 and we’ll have
the text transform to uppercase let’s
make the text color white and add some
padding here let’s also change this icon
here’s color to white by going into the
search forms style tab and changing it
there now let’s go to the section editor
and make sure that the columns have no
gap and perhaps make the proportions of
these columns in the section a little
better now let’s make the background
transparent because we kind of like that
lovely seascape with all those yachts
that we’ve already got on our page and
we’ll make a solid border only on the
bottom with a width of 1 pixel okay so
once we’re done with designing our
header we’ll click publish in the dialog
box we’ll add a condition and we’ll
select it to appear throughout the
entire site and then we’ll save and
close and now I’ll bring up the finder
and use it to access our page and test
it in View mode as you can see we’ve got
the header nicely up here now we
recommend that you click on all the
links in the menu to make sure that they
actually work and navigate down reaching
the assigned location on the page using
the finder with command E or ctrl e on a
PC will search and access the theme
builder again and we’ll use the exact
same procedure to create a footer and
then apply our design
now that everything on this page is
starting to look according to plan we’ll
go back to the wordpress dashboard
and into the reading settings to sent
our page as the home page
and there we are we now have our
one-page website including the header
the content the footer that is of course
the optimization which we obviously need
to do to make this site load much faster
including caching but that’s the subject
we’re saving for a future master class
this week we saw how simple it is to
work with the Hello theme and the
Elementor theme builder and we use them
both to create a one-page website
smoothly and efficiently so be sure to
click the subscribe button below and tap
that bell so you don’t miss our next
master class in the series full of tips
and tricks for website builders and we
hope this has all been helpful and
inspiring and as always we appreciate
any comments and insight and any
criticism you may have and of course
please post any helpful tips so that
other users may enjoy them too after all
our goal is to be the best and helping
others excel at their craft thanks for
watching