Create a Complete Website Using Elementor Kits and Theme Builder

Create a Complete Website Using Elementor Kits and Theme Builder


– [Ziv] Hi, all, it’s Ziv from Elementor. 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, an about us page, a services page with one sub
page called social media, a clients page, and News
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, layout 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 under 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 Elementor’s 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
a first page, the homepage. I’ll give it a name and
click Edit with Elementor. In the page settings,
I’ll change the layout to Elementor 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 our
digital agency homepage. 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 Elementor’s finder by hitting Command or Control + E, type Ed 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 homepage to set it. Don’t forget to hit save changes. Back in pages, you can now see that the homepage is
set as the front page. Okay, great. Let’s move on. Like I mentioned before, besides for the static
pages we just created, a website needs a header, footer, an archive page for the news, as well as the single
post page for the post. And lastly, for a full 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 Elementor
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 Elementor’s 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 kits header and insert it. 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. Okay, great. 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 want it to display
across the entire site, but you can also choose to include or exclude them on specific pages. With a theme builder. You can even create
multiple header templates each set with its own condition. I’ll go ahead and set it to the 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. Al though 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 our 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 edit 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 content. 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 date and add items such as comments, and much more. Here we see our featured image,
an excerpt we set before, and this widget here allows
us to edit the post content. As you can see, creating your own single
post templates is quite easy. Simply drag these widgets onto the canvas and style 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 previous 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 drag
it to wherever you went. 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 404 page is what your visitors see when 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 404 page. Give it a name and create the template. Let’s insert the kit’s 404 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
Elementor’s 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.

39 thoughts on “Create a Complete Website Using Elementor Kits and Theme Builder

  1. nice i love elementor but still need some work like controling the padding/margins straight from the mouse and other things like that .. also you could add some skins the pink layout is ugly af –

  2. Today why not update the master class, i want to see the woocommerce video with elementor. But also thanks for your great video

  3. I want to say this tutorial is not detailed enough for a good-looking website. You even missed responsive design, basic alignment and content width settings. For example: Width of a single blog article section shouldn't be larger than 720px(960px at most in some situations), then you need to use two columns layout to align elements(widgets in Elementor) and get a better UI .

    And you really need professional Photoshop skills and HTML/CSS knowledges when using Elementor, otherwise your website would be ugly as hell. What you can do with Elementor is very limited, you can't achieve many of your creative ideas. Website builders may be easy to get started, but the CMS and marketing automation are much more important for corporations.

  4. How do you set the heading/list styles and space between elements in the Post Content section? Do we still have to do that with CSS?

  5. Good walk through until I came to the Archive bit and found there was no Hello World widget and no widget menu on the dashboard. When the template was saved it didn't appear on the posts. Widget menu is available with other themes?

  6. why the audio file is not playing in the popups? is it a bug? please provide the solution

  7. Thank you for this Video. I wonder if clicking the link in 404page to the home page really work .I can't check this ..? because I didn't make a mistake. Is there a way I can check it.

  8. It is important to create a web site for your business or activity but Choosing the right web hosting is as important as making a website. People want to know the answer of the "Which service should I buy?" question.

    Save money, get a good support, a good security, fast loading, uptime ect. Very important.

    I have found a blog post about comparing top best web hosting services of 2019-2020.

    Worth reading.

    Link : https://besthostingadvices.com/the-best-5-web-hosting-services-pros-and-cons-2019/

  9. Thank you for this tutorial! But I've stucked with one thing. Maybe you can clarify it to me: I have two custom post types – "Books" and "Authors" with some posts in each. I'm trying to configure one common single post template for any posts in this two CPTs and add a button called "All" with dynamic url bellow the post text. This button should link to Books archive page or Authors archive page depending on which post you are on. What dynamic value should I use and does Elementor work with dynamic CPTs values?

Leave a Reply

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