The good thing about innovation is that is provides creative and unprecedented solutions for our unarticulated needs. Nowadays, almost anything is possible, and for all those with a huge desire to create and start a website, for whatever use they need, it is made achievable in the simplest way possible.
No code, no worry, you can craft an exceptional website with little to none coding knowledge. And that’s the beauty of innovative minds. If used the right ingredients the results will be of magnificent proportions.
In this article, we will reveal the power behind Elementor, an impressive and compelling page builder, designated to help you design your website easily, all with an intuitive interface. Although Elementor is straightforward to use, we intend to compose this article to serve as a guiding point for all those who are new to Elementor.
Introduction to Elementor
Elementor probably needs no introduction, but since this is a beginner’s tutorial I will shortly mention all the powerful features it offers and how you can use them to your advantage. Elementor is a leading drag&drop page builder packed with a user-friendly interface that will ease the angst of every novice out there.
This WordPress plugin is a sterling product that pioneered the live editing interface among page builders, it provides as an all-in-one solution that will allow you to control all parts of your website and design them matching your style and aesthetic.
Not to be confused with Elementor’s beginner-friendly demeanor, it covers a broader audience from novices to professionals, thus delivering high-range flexibility to drag 29 + amazing widgets to create rich content and outstanding design.
Spice your site up with moving animations, bold colors straight from the advanced color picker, and large and striking typography. Elementor is a highly capable tool used to build anything, starting from entire websites to eye-catching landing pages.
First Steps for Creating a Website
WordPress is the leading content management system, and as an open-source platform, it is available for everyone to download and create websites utterly free. Elementor, on the other hand, is established to increase WordPress’ functionality, by allowing users to build and design their websites hassle-free.
This dynamic and powerful duo can be used to craft just any website you aim for. They make the entire website building process simpler and fun, giving you a sense of conformity and reliance.
To get started with Elementor conspicuously you will need to have established a WordPress site up and running. We have compiled all the necessary tools and steps you need to follow to create a website in our previous article. Assuming you already a website in place, next you will need a theme that caters to your needs.
WordPress holds a vast number of themes in its repository and choosing one from the largely extensive list can be a headache.
- If you need a theme that’s entirely compatible with Elementor, we recommend you take a look at our Best Elementor Themes.
- If you are looking to create a website for your online business and to expand enterprise in the online community, you can check our comprehensive list on the Best WooCommerce Themes.
- Or if you simply are in need of an elegant, minimal theme then, we’d suggest checking out our amazing list of Best Minimal WordPress Themes.
For the purpose of this article, we will use the Astra Theme, a lightweight and free theme deemed to be compatible with Elementor. You can easily install the Astra Theme if you go to WP Dashboard > Appearance > Themes. From there you would need to click on the Add New button, search for Astra in the search bar and click on Install. This process won’t take longer than a minute or two. After you have installed the theme, you can go ahead and Activate it.
A premium alternative to Astra with high flexibility and functionality is Bifrost Theme. Elegant, Flexible, and Lightweight, all you could want and need in a WordPress theme.
WordPress Website ✔
WordPress Theme ✔
Now to get going you will need to install Elementor from the WordPress Dashboard, or you can download it from their official website. Go to Plugins > Add New, search for Elementor, and click on Install.
Upon installation, you will need to activate the plugin and start taking full advantage of the rich features they provide.
How to Create a Site Page
Now that the technical procedure is set in motion and you have your website established, you will need to enrich it with engaging content and design it to correlate to you and your visitors as an entity. It might sound intimidating, but we are here to walk you through each step.
WordPress offers the ability to create pages and posts out-of-the-box, it is simple and straightforward. We will walk you first how to create the “must” pages for every website like a Homepage, an About us page, and a Contact us page.
To make this tutorial simpler, but in the meantime more productive we are going to install another plugin that is going to increase your capacity and save you a lot of trouble deciding what widget to use and where for the sake of engagement and composition.
How you present your site is a crucial aspect of how your website will e perceived by your audience. As a novice in web design, I can tell that having a source of guiding point released a huge burden from my back.
That is why we are going to use Envato Elements for this tutorial. The plugin comes with an impressive collection of templates designed for each individual niche. The relationship between the two plugins, Elementor and Envato Elements thrives with some amazing templates designed especially for Elementor.
I am assuming you already know the drill, you will need to install the Envato Element plugin if you go to Plugins > Add New, and activate it.
Use Envato Elements Template to create a Homepage
The templates can easily be imported and customized to match your website. Upon installation and activation, go to Elements, in the left panel of the WordPress Dashboard, and click on Free Kits. In this category, you will find beautiful niche templates for every website. Search through the endless options and pick the one you like.
For this article, we will go with this amazing template of Vegan Restaurant. Click on Install Kit and you will be able to harness all the beautiful design for each page, thus creating a coherent style for your site. Some of the templates require Elementor Pro to have them installed.
After you have installed it click on the View Kit and select a Homepage template. Click on Import Template. Upon installation, if you click on the View Template button it will direct you to the Elementor editor. You can make the changes and adjustments needed and save it as a template. Click on the Update button and this will be saved as a template for you.
We can edit the images, the text, typography, but first, we will change the page layout. To do that you will need to create a new page, go to WP Dashboard > pages > Add New. Type the page’s title, since this is going to be a homepage we will name it Home, for future references.
You would want to save it as a Draft, and then continue to work with Elementor. Click on the Edit with the Elementor button, you can’t miss it. Once you are on the Elementor’s editor, click the wrench icon at the bottom of the left panel and under General Settings > Page Layout choose Elementor Full Width from the dropdown menu. This option will leave you header and footer, while you can customize the content inside.
To implement the template you just imported click on the Envato Elements icon, there you can find all the templates you have installed and you can easily choose which page template you want to insert.
Search for your favorite template that you have previously installed. Click on the View Installed Kit button and choose the page template you would wish to insert, simply click on the Insert Template button.
You can also search from other templates you have not yet installed right from this window, choose either a Premium Kit, a Free Kit, or a Free Block. Install it and insert it easily from your Elementor editor page.
After you have inserted the desired page, you can go ahead and make the changes necessary. The free version of Elementor will offer you a bountiful of widgets and elements that you can use to your advantage. Replace the images, choose a different font, change the size of the images, the text. Basically, you can change anything you want from the template.
You are your own connoisseur and you can design your website however you like it. Match the colors with the aesthetic you want to show and strategically place a call-to-action button for more engagement.
Create other Pages
The same procedure will be applied when creating the other pages like About us or Contact us, you can choose from the masterfully created templates by Envato Elements. Start off by creating a new page Pages > Add New and name them accordingly.
Click on the Edit with Elementor button, don’t forget to go Elementor Full Width as we explained. and from the in-page settings, you can open Envato Elements, search fro there and insert the template you wish for.
Customize it, adjust it to the extent you are satisfied with the results ad you can Publish it. You can simply do that if you click on the Publish button at the left bottom of the page.
Elementor Components: First Steps
Elementor is a powerful page builder, offers you the possibility to easily manage your website and its design. They have created a logical categorization divided into Sections, Columns, and Widgets. Sections are the larger entity, Columns reside on Sections, and Widgets are the tools that add functionality to your site, they reside inside Columns.
You can edit Sections, Columns, and Widgets independently varying from the design or the task you wish to perform. Each of the components has a handle by which you can easily have access to the edit options.
Clicking upon each handle will open the settings option for the corresponding component. You can hover over the section, columns, or the widget for the handles to appear. To delete either component you can right-click on the handle and click on the Delete option.
To open a section you can click on the + icon, choose the structure by deciding how many columns you would need, and inside columns, you can drag and drop widgets you wish to add.
Each component will have three tabs available at the left panel the Content Tab, the Style Tab, and the Advanced Tab. From the Content tab, you can adjust parts of content that you add on your site, from the Style tab you can design your components and the advanced tab hold options like Z-index margins or paddings.
How to Create a Menu with Astra
To start building your menu with Astra first you will need to go to the WP Dashboard > Appearance > Menus. Name your menu and click on the Create Menu button. From there you will find the pages you created, simply click upon each page and check them. After you have decided the pages you want to include in your menu click on the Add to Menu button.
On each page you add to your menu you can adjust the settings, you can change the navigation label, or you can move it up or down the menu list. To move items in the menu you can also drag and drop items behind the preferred item of the menu. At the Display location, you can tick the Primary Menu option.
Besides pages, you can add Posts, Custom Links, and Categories in your menu. You can create subitems by moving the item one space further to the upper item. Once you are done with your menu click on Save Menu to register the changes you made.
By default, Astra comes with a header that integrates the navigation and the logo. The Primary Header can be customized if you go to the following options available in customizer under Header > Primary Header. You can choose from the three header position.
- Logo Left – Logo will display left to the menu. This is a widely used header style.
- Logo Center – Logo will be placed above the menu in the center. If you have a long menu you can opt for this layout.
- Logo Right – Logo will be placed at the right of the menu.
Under the customizer, you can also edit the width, border, and even optimize your header for mobiles.
Elementor Editor
Elementor’s coolest feature so far is the Theme Style. Theme Style is global settings that you set for your website and they will be used as a default style.
The changes you make for particular components will by no means affect other parts on your website. It also works with History and Revisions.
This feature will allow you to create a coherent design style and make it possible to leave a print of your own throughout your entire website. To set the default styles for your site, first, you must disable Elementor’s default colors and fonts.
To do that you need to go to WP Dashboard > Elementor > Settings and place a check in the boxes next to Disable Default Colors and Disable Default Fonts.
To access the Theme Style settings you need to click on the hamburger menu at the top of the page and locate Theme Style.
Theme Style can be of great help to create content without making a fuss about settings the right fonts and the right size for the h2 tag. You can set the default settings for :
- Images
- Form fields
- Buttons
- Headings
- Links
- Text
- Backgrounds
Each of the settings will contain multiple options to set various colors, fonts, sizes, default background as an image, video, or classic. Play around with the options and decide on something definitive.
Template Library from Elementor
Template Library is yet another amazing feature of Elementor. From here you can insert stunning pre-made templates and blocks. It works almost the same way as Envato’s Elements, only this one is integrated within the Elementor’s editor and can be easily accessed from there.
You can choose from the bountiful templates that they offer, or if you are simply interested in inserting only a fraction like a 404 page, an archive page, and many more blocks. Once you have opened the Elementor editor, next to the + icon from where you can insert section, click on the folder icon to open the template library.
At the top of the template window, you can choose from the pre-made Pages, Blocks, and My Templates. The My Templates tab will contain all the templates you have created using Elementor and you can insert a template you have previously created. Simply hover over the preferred template and click on the Insert button. You can preview the template prior to inserting it.
In addition to inserting templates from the Template Library, you can also export and import templates if you go to Templates > Saved Templates or Templates > Theme Builder and click on the Import Templates button. To export a template, under My Templates click the 3-dots and click Export.
Final Words
In this article, we concluded all steps you will take to create a basic three-page website and a menu to match your header. e have had multiple requests from our users to have more tutorials of this kind, and we delivered.
We have included all free products you can use to set up a great looking website with basic functions, to get more features you must upgrade to their premium plans. All in all, Elementor is an amazing page builder that offers amazing flexibility, Astra is a great and lightweight theme to match with Elementor and Envato Elements can save up your time and help you have a guiding light for your site’s design.
