Skip to Main Content

How to Build a Complete Website with Elementor

Divi: the easiest WordPress theme to use

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Elementor regularly offers themes that help you build a complete website out of these. Every month we release new themes that are built around a specific niche, yet flexible enough that you can finally customize them to suit your own needs.

Combined with Elementor Pro, these themes help you get started quickly with every part of your website, including:

the pstatic ages, like the home page,

  • the header
  • the footer
  • page 404
  • the Archive section 
  • the blog
  • Popups and others

So, in this tutorial, we are going to show you how to build a complete website using Elementor visual page builder.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

How To Build A Complete Website With Elementor Themes

In this tutorial, you will learn how to use a theme as the basis for all the important parts of your website and then put everything together to create a cohesive website.

More precisely, the theme Digital Agency.

Your website will have a number of basic pages, such as pages:

  • Home
  • About us
  • Services
  • Clients
  • Blog
  • Contact

And it also offers sections dedicated also to dynamic content. For example, your blog post archives and post templates automatically match your stand-alone pages. You can also change your header, footer, and pages 404.

How to create a complete website elementor blogpascher 1

So here's how to create a website with an Elementor theme:

1. Install and activate Elementor Hello theme 

Because you're going to be using Elementor and a theme template to build your entire website, you don't need to search for other elements.

Instead, you'll just need a lightweight, performance-optimized website, which the Elementor Hello theme provides.

To get started, go to Appearance → Themes → Add and search " Hello elementor". Then install and activate the theme. 

2. Configure the basic static pages of your website

Then go to the menu Pages → Add to create the basic pages of your website.

First, create a page called " Home And click the Edit with Elementor button to launch Elementor.

Open Page Settings and modify its layout so that it is equal to Elementor Full Width.

Then open the Elementor template library and search for "Digital Agency" under Pages :

How to create a complete website elementor blogpascher 2.

You should see a list of page templates of this theme. Insert template Home Page from the list of models.

Now you should see a full home page. The header looks a bit dull for now - but don't worry, we'll fix that soon..

How to create a complete website elementor blogpascher 3

Then use Elementor Finder to add another page to use for your page " About us" page (in French).

As before, change the Layout - Page Layout - à Elementor Full Width. Then open the template library and insert the template About of the Digital Agency theme.

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Now just repeat the same process to create all the other pages including: Services Customers, and Contact.

Don't worry about the Blog page just yet. This page is not static like the others. For this reason, you'll be creating it there via a different method (which we'll cover later in this tutorial).

To finish setting up your static pages, you need to tell your WordPress installation to use a static home page. To do this…

  • Go on Settings → Reading
  • To choose  Static page under your homepage settings 
  • Select the page that incorporates the theme's home page template

3. Create the other parts of your website

Now you are ready to build the other parts of your website using Elementor. Elementor allows you to go beyond creating static pages (like you did above).

With Elementor, you can also design sections such as: en-head; the footer, etc ...

And thanks to the Elementor theme, you will be able to import templates for all the sections that are already in the static pages you created in the previous step.

To access Elementor's visual builder, go to Templates → Theme Builder. You will need to install Elementor Pro to be able to access it.

Now it's time to create your sections

Header

To get started, go to the tab Header of the visual builder interface, then click Add New Header. On the next screen, give it a name, then click Create Template.

Then you will see a selection of templates in the Elementor library. Just like you did with the static pages, search for “Digital Agency” and then insert it:

How to create a complete website elementor blogpascher 4

Now you should see a visual preview of your header, as well as some empty space for your navigation menu.

At the moment, the navigation menu is empty because you haven't created a menu yet. To create your menu ...

  • Go on  Appearance → Menus in your WordPress dashboard
  • Give your menu a name
  • Click on Create the menu

How to create a complete website elementor blogpascher 4

Once you have created a menu, you can add the pages you created in step # 2 to your navigation menu.

Read also: 10 Automation Tools for Small Business Marketing

When you're done adding menu items, save your menu and return to your header template in the Elementor interface.

Then, publish your header and use display conditions to display your header template across your entire website. If you want, you can also use display conditions to create different headers for different types of content:

How to create a complete website elementor blogpascher 6

Then press Save and close.

Footer

Now it's time to create your website footer:

  • Return to the visual page builder interface
  • Click on the tab Footer 
  • Click the button to Add New Footer
  • In the pop-up, give a name to your footer and click on Create Template

Now you should see a list of footer templates just like you did with your header. Search for "Digital Agency" and insert the footer template.

Once you've inserted the footer template, you should see a preview of your footer:

How to create a complete website elementor blogpascher 7

Then, publish your footer template and use the display terms to display it on your entire website.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Home Page

Unlike the static pages you created in step # 2, your website's blog page is a " archive ". Basically this means that it dynamically displays the most recent content on your website.

If a user clicks on a specific item on the blog page, they will be taken to a page with that item's content. This is called the "single" page. Your unique design ensures that all of your content will have the same basic style - the only thing that changes is the actual content (like post title, body, featured image, etc…).

Discover How to add table of contents in WordPress with Elementor

To create archive pages and unique page templates, you should use the Elementor visual builder - not zones page ou article WordPress default.

To begin…

  • Open the Theme Builder interface
  • Go to the Archive tab
  • Click on Add New Archive
  • Give it a name and click on Create Template

As with your header and footer, you'll see a list of archive page templates. Look for the “Digital Agency” template and insert it.

Now you should see the basic design for your news page, although the only content will be the default “Hello World! From WordPress:

How to create a complete website elementor blogpascher 8

For now, all you need to do is publish your archive page and set it to display on all archives.

Read our guide on How to manually migrate a WordPress website

Then you can go to the regular posts area of ​​WordPress and create new blog posts. Assign each article to a category called “Beyond News”.

Now when you navigate to your archive page, you should automatically see all of these new posts:

How to create a complete website elementor blogpascher 9

Creation of the blog post template page

At this point, your blog page has a fairly user-friendly look. But if you click on a specific blog post, the layout will not match the rest of your website.

To solve this problem, you need to create a "unique" template with Elementor:

  • Open Elementor visual builder
  • Go to the Single tab
  • Click on Add New Single

In the pop-up New Template :

  • Give it a name
  • Select Post in the drop-down list Select Post Type. This tells Elementor that you want to use this template for your blog posts (as opposed to Pages or some other custom post type you could use)

Once again, you will see the Elementor template library. Find the unique article template of the "Digital Agency" template and insert it.

Read also Maintenance mode on WordPress: Explanation and configuration

If you want, you can use the many dynamic publishing data widgets to control the appearance of your page.

For example, if you modify the widget  Post Info, you will be able to control the metadata elements that appear, such as on the publication ...

  • Author
  • Date of publication
  • Comments
  • And many more functions

How to create a complete website elementor blogpascher 10

Once you are satisfied with your item model, click Publish. Then you can use the display options so that this unique template only applies to posts in the “Beyond News” category:

  • Select from the catégorie
  • Choose the category Beyond News

How to create a complete website elementor blogpascher 11

Then press Save et to close.

Now all of your blog posts should have a design that matches the rest of your website.

To finish things off, go to Appearance → Menus and add your blog page to your navigation menu. To do this, you can add a link to the "Beyond News" category in the section Categories.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Page 404

Finally, you need to create the 404 page of your website. The 404 page of your website is what visitors will see if they follow a broken link or try to visit a page that doesn't exist.

Discover also our 5 WordPress plugins to better manage errors 404

To create your 404 page, use Elementor visual builder to add another unique template. Only now use the drop-down list Select Post Type to select 404 Page :

How to create a complete website elementor blogpascher 12

Insert the 404 page template as done above. Then publish your template to complete your website.

Get Elementor Pro Now!

Conclusion

Here is ! That's it for this guide that shows you step by step how to build a complete website with Elementor. If you have comments or suggestions, do not hesitate to let us know in the reserved section.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks

...

This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
0 shares
Share
tweet
Save