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.
Elementor regularly offers themes that help you create a complete website from them. 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:
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
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 on the button Edit with Elementor to launch Elementor.
Click on Settings to open the page settings and change its layout to be equal to Elementor Fullwidth.
Then open the Elementor template library and search for "Digital Agency" under Pages :
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..
Next, add another page to use for your " About" page (in French).
Easily create your website with Elementor
Elementor lets you create Easily and Free any website or blog design with a professional look. Stop paying a lot for a website you can do yourself.
As before, create a page and change the Layout to Elementor Fullwidth. Then open the template library and insert the template About of the Digital Agency theme.
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 → Playback
- Choose your favorite A static page (choose below) 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 lets you 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
To get started, go to the tab Header of the visual builder interface, then click Add New. On the next screen, you will see a selection of templates in the Elementor library. Just like you did with static pages, search for “Digital Agency”, then insert the:
Now you should see a visual preview of your header, as well as a navigation menu from the template you inserted.
If you want to change it
- Go on Appearance → Menus in your WordPress dashboard
- Create a new menu
Once you have created a menu, you can add the pages you created in step # 2 to your navigation menu.
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:
Then press Save & Close
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.
Do you want to sell your products on the internet?
Download WooCommerce for free, the best e-commerce plugins to sell your physical and digital products on WordPress and easily create your online store. Perfect for beginners.
Once you've inserted the footer template, you should see a preview of your footer:
Then, publish your footer template and use the display terms to display it on your entire website.
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 latest content from your website.
If a user clicks on a specific item on the blog page, they will be taken to a page that displays the content of that item. This is called the "single" page. Your unique design ensures that all of your content will look the same – the only thing that changes is the actual content (like post title, body, featured image, etc.).
To create archive pages and unique page templates, you should use the Elementor visual builder - not zones page ou article WordPress default.
- Open Theme Builder interface
- Go to the Archive tab
- Click Add New
- 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 of your articles page.
It should be noted that if you only see one article it is normal, because WordPress only comes with a default example which is “Hello World! ".
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 posts menu in your dashboard and create new blog posts. Assign each item to a category called “News".
Now, when you go to your Blog page, you should automatically see all of these new posts:
Creation of the blog post template page
At this point, your blog page has a pretty 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 tab single Post
- Click on Add New
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.
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 ...
- Date of publication
- And many more functions
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 News
Then press Save & 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 "News" category in the section Categories.
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 the Elementor visual builder to add another unique template.
- Open Elementor visual builder
- Go to the tab error 404
- Click on Add New
- Insert Digital Agency template from 404 page
Next, publish your template to complete your website.
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.