Creating a complete WordPress website might seem daunting at times. But no worries – we are here to help!
In this tutorial, you’ll learn how to build and design a full website using Elementor’s powerful Theme Builder & the digital agency kit.
You will learn how to:
00:00 – ✔︎ Create a Complete WordPress Website Using Elementor Kits and Theme Builder
00:55 – ✔︎ Install a WordPress theme
01:35 – ✔︎ Create new website pages
04:02 – ✔︎ Adding a header
04:36 – ✔︎ Adding a menu
05:50 – ✔︎ Adding a footer
06:25 – ✔︎ Editing an archive/category page
07:38 – ✔︎ Creating a new post
09:02 – ✔︎ Designing a single-post template
10:49 – ✔︎ Adding pages to the menu
11:16 – ✔︎ Creating a 404 page
hile its zip from elemento in this
tutorial we’ll go over the complete
process of building a website with our
digital agency kit by using the theme
builder to turn it into a full-fledged
site just like you see here the kit
provides you with all the materials you
need and I’ll show you step by step how
to connect all the different pages into
one full site so let’s dive in and
create it together first let’s have a
look at all the pages on the site as you
can see we have a home page and about Us
page a services page with one sub page
called social media a client’s page and
use archive page with single posts and a
Contact Us page
besides for these pages we also have a
header and footer that appear everywhere
as well as a 404 page for when your
visitors might get lost okay
so now that we understand the structure
let’s get started in the dashboard go to
appearance and then themes as you might
know a wordpress powered website uses a
theme to simplify the process of
creating the site it is a collection of
templates and style sheets that define
the appearance and display of the
website each theme comes with a
different design layouts and features so
a user needs to choose the one that
suits their tastes and requirements I’ll
go ahead and hit add new then and the
popular change the default WordPress
theme to our lightweight and super fast
hello theme it’s lighter than most
themes because it comes almost empty of
styling and scripts all the design is
done using elementals editor and theme
builder which we will use soon but first
let’s start creating our pages I’ll
trash these default ones and click add
new to create our first page the home
page I’ll give it a name and click Edit
with elemental in the page settings I’ll
change the layout to elemental
full-width which includes a header full
with content and a footer as you can see
the default header isn’t complete don’t
worry we’ll create our header in a bit
first let’s open the library and search
for a digital agency home page here it
is I’ll go ahead and insert it cool
let’s publish and have a look
great let’s move on to the about page
I’ll use elementals finder by hitting
command or control II type add and
choose new page like before in page
settings I’ll change the layout to full
width and give the page a name in the
library I look for the digital agency
about page and insert it hit publish and
check it out cool I’ll go ahead and
repeat this process to create the
services social media clients and
contact us pages now that we finished
let’s go back to the dashboard and check
out the pages we have so far if you’ve
noticed I haven’t created the news page
yet it isn’t a static page like the
others it’s an archive page with dynamic
content and we’ll go over it soon first
let’s set the site’s homepage to the one
we created go to settings and in reading
change the homepage displays to a static
page and then select the home page to
set it don’t forget to hit Save Changes
back in pages you can now see that the
home page is set as the front page okay
great let’s move on like I mentioned
before besides for the static pages we
just created our website needs a header
footer an archive page for the news as
well as a single post page for the posts
and lastly a 404 page as you might know
WordPress themes don’t always allow us
to control and design these parts of a
website the way we like unless we know
how to code this is where the Elemental
theme builder comes into play making it
possible to design every part of the
website dynamically visually and with
zero code required simply go to
templates and choose theme builder this
central panel enables us to access these
parts of the website by creating
template types such as the header giving
us total design control over them with
elements or editor so let’s start off
with a header click add new header give
it a name and create the template in the
library search for the digital agency
kit header
and inserted as you can see there’s a
nav menu widget which is one of the
dynamic site widgets you can use to
create your own header templates at the
moment the nav menu is empty because we
haven’t created a menu for our site yet
so let’s go to the menu screen to create
one and the menu structure give it a
name and click create menu now under add
menu items we can add the pages we want
to show in the nav menu as you can see
there are four types of items we can add
for now let’s add the pages we created
before I’ll go ahead and select them
then click Add to menu we can reorder
the menu items by dragging them to where
we like we can also set them to be sub
items by moving them a bit to the right
I’ll do that for social media and set it
as a sub item for services ok gret hit
save menu and go back to our header
let’s publish it and check it out as you
can see we can set the conditions that
determine where this header template is
used throughout our site I wanted to
display across the entire site but you
can also choose to include or exclude
them on specific pages with the theme
builder you can even create multiple
header templates each set with its own
condition I’ll go ahead and set it to
entire site then hit save and close
refresh the page and voila our header
has a menu let’s move on to the footer
go back to the theme builder and in
footer choose add new footer give it a
name and create the template I’ll go
ahead and search for the digital agency
footer and insert it although we can see
the header here as well in this area we
can only edit the footer like before hit
publish add condition and set it to show
across the entire site then save and
close let’s check it out
great now we have a header and footer
now let’s move on to our news page which
is an archive page similar to a blog for
example as you can see it has its own
custom design as well as the collection
of posts grouped by category in this
case only one category called beyond
news
also each post has the same layout and
design because they are inherited from
the same single post template only the
content is different let’s see how it’s
made first let’s go to our theme builder
and create the news archive page click
archive then add new and give it a name
then create the template we can create
our own archive pages from scratch but
let’s insert the archive from a digital
agency kit cool this widget is called
archive posts and is one of the dynamic
widgets we can use when creating archive
pages such as the archive title as you
can see it displays the default hello
world post so we need to create new ones
and set them to show here instead first
let’s hit publish and add a condition to
apply this template on all archives then
save and close now go to the dashboard
and click on posts here you can see the
post we saw before let’s trash it and
add some new ones give it a name and add
some contents set a featured image and
add an excerpt if you like I want these
posts to be added to a category called
beyond news so under category click add
new category give it a name and edit
great now let’s publish and create the
rest I’ll go ahead and fast forward this
a bit you aren’t missing anything
slowly but surely our website is coming
together
okay let’s go back to our news archive
page and check it out cool our posts
look awesome
but when we click on a post it doesn’t
look that great this is because we
haven’t created a single post template
yet the theme builder will help us here
as well it allows us to create a single
post template which we only need to set
up once then if you create a new post
the design of the page will
automatically be inherited from this
template let’s go to the theme builder
and choose single then add new and here
select post give it a name and create
the template as you can see in the
library this kit has its own single post
template we can create our own one from
scratch but let’s insert this one and
check it out here is the post title
which will dynamically change according
to the posts we create you can find more
of these dynamic widgets for the single
post templates over here we can easily
embed them by dragging the widget
anywhere we like let’s check out the
post info widget we can control the
metadata items such as author and debt
and add items such as comments and much
more here we see our featured image and
excerpt we set before and this widget
here allows us to edit the post content
as you can see creating your own single
post M plates is quite easy simply drag
these widgets onto the canvas and star
them to your liking there’s also a cool
feature that allows you to see what your
other posts will look like with this
template simply go to settings and under
preview settings set this to post and
search for it over here then hit apply
and preview cool now let’s publish and
set the conditions here we can control
where this single post template will be
applied I’ll go ahead and set this to
category and search for news now only
the post I’ve added to the beyond News
category will inherit this templates
design then hit save and close let’s
check it out
cool
the posts look great slowly but surely
our website is taking shape now let’s
add the news archive page to the menu
this time we’ll go to categories and add
the news category we created before then
add it to the menu and drag it to
wherever you want hit save menu and
check it out cool it works perfectly
last but not least we need to create the
infamous 404 page luckily our theme
builder has us covered here as well a
they follow a broken link or type in a
website address that doesn’t exist to
build this page simply add another
single template type and set the post
type to for a full page give it a name
and create the template let’s insert the
kids for a full page then publish and
hit save and close so now when visitors
get lost they do so in style well that’s
it now you know how to use elementals
powerful theme builder in combination
with our template kits and turn them
into full-fledged websites have fun
playing around and don’t forget to
subscribe to our YouTube channel for
more tips and tutorials ciao for now
