This is the complete Elementor tutorial for beginners when building website contents.
If you’re like most of us,
- You want to create a visually stunning and highly functional website without learning web programming.
- You want an easy way to build and customize your own WordPress site.
Then the Elementor drag and drop page builder is the solution for you. Elementor allows you to create, edit, and customize the layout of your WordPress site without having to write any code.
Let’s dive into it right now.
(Note: Elementor is a plugin that works only on WordPress. If you haven’t had a WordPress installed in your web hosting, please start from here to create your WordPress website.)
1. What Are the Elements of Website Contents?
Basically, the content throughout a WordPress website is built up using pages and posts. In order to make your site as user-friendly as possible, it is essential that a balanced combination of posts and pages is utilized to curate your content fully.
Pages are a great way to add timeless, static content that doesn’t need a publishing date, such as the “Home,” “About,” and “Contact Us” pieces of a site.
On the other hand, posts provide the opportunity to create dynamic content that carries a publishing date and can be updated on the fly.
Overall, the key to excellent website content is the careful curation of posts and pages, which together can provide highly engaging experiences for visitors to your site.
2. The Easiest Way to Build Website Contents for Beginners – Drag and Drop.
When starting up a new website, many WordPress beginners find it difficult to change or customize page layouts to fit their preference. When many premium WordPress themes come with a variety of different layouts, these are typically very hard to effectively customers for anyone who does not have a strong background in the fundamentals of web programming.
This is a significant cause for why most users often ask questions such as “How can we make the WordPress development process drag and drop friendly?”. In talking to users who have decided to make the switch from Weebly to WordPress or from Wix to WordPress, their most common response is typically along the lines of “I just wish that WordPress provided easy access to a drag and drop website building solution.”
3. The Elementor Drag and Drop Page Builder is the Best Tool for Content Curation
Elementor is a powerful drag and drop page builder that empowers even the newest of WordPress developers to create professional-grade websites with ease. At its core, Elementor is a live page builder plugin, which means that its users get to see changes to their pages live as they are being edited in real time.
Users can create sections and easily select the number of columns they would like for each section. Additionally, they can drag, then drop widgets from the selection panel to their desired location. Elementor comes with tons of exciting widgets, including some of the most commonly used website elements seen throughout today’s websites. From basic images and text widgets to advanced accordions, sliders, testimonials, social media feed, and so much more.
Don’t want to dedicate the time to build your own layout? Elementor can also handle this task with ease, thanks to its many ready-to-use templates that can be easily inserted into your existing web pages. Overall, Elementor is one of the best WordPress development tools available and can help even the newest of site developers create professional work in no time whatsoever.
4. Elementor Versus Elementor Pro: The Main Differences
At the end of the day, Elementor Pro is technically an add-on that users can purchase to get more functionality out of the free Elementor plugin. As such, when users buy this add-on, they’ll have access to all of the great tools provided by both active plugins on their site. With over 30 additional widgets provided by Elementor Pro, features such as Header & Footer builder, dynamic single post design, popup, Form and WooCommerce widgets can be easily integrated across your site.
Furthermore, Elementor Pro allows users to access the full PRO Elementor template library. This means that you’ll have the ability to choose between dozens of great options that could form the basis of your next great website.
Now, Elementor Pro isn’t for everyone. For example, if you just want to design some basic, yet highly attractive content, free Elementor might be the best option for you. This also goes for those who are already using a flexible theme like WP Astra Pro, which means that they might not need the extended features of Elementor Pro.
On the other hand, if you intend on building more complex content and landing pages or want to incorporate WooCommerce into your site, Elementor Pro is likely the best option. This is especially true for WordPress developers looking to build their entire theme using the Elementor interface, as having access to the full Elementor template library can pay impressive dividends for detail-oriented designers.
Just like some of the people, I was using free Elementor to create my website when I started. I installed a lot of other plugins to compensate with what Elementor lack of, for example, header & footer builder. However, I ended up with a lot of plugins installed, and some even are not 100% user-friendly and compatible. This also caused a lot of time spent on troubleshooting.
I would say everything goes nice and fast after I used Elementor Pro. The number of plugins and development time have been greatly reduced for building a perfect website. Hence, I strongly recommend to try out Elementor Pro with $49/year only if you want to make your life easier. You will definitely love it after using it. In my implementation sections, I’m going to use Elementor Pro for the tutorial as I think this way is really “healthier” for your website.
5. Before We Get Started…
Before we use Elementor to build up the pages & posts. Let’s prepare some materials and do some configurations for the website.
Decide the branding color(s) and font(s). For example primary, secondary, text and accent colors. If you have no idea what colors to choose, you may refer to ColorHunt to choose for your branding colors. And Elementor also supports all fonts from Google Fonts.
Prepare a website logo. If you don’t have, you may visit Fiverr to get a logo as low as USD $5.
Decide website pages structure. For instance.
- Post 1
- Post 2
Prepare a design of your website. Perhaps sometime you just need a concept in your mind should be enough. If you want to get a professional web design services, can go to freelancer website such as Fiverr to look for designer.
6. WordPress Configuration and Cleanup
6.1. Change permalinks Structure
Settings -> Permalinks -> “Post name” structure. Choose “Post name” and save changes. This changes the style of your URL and it will help in SEO.
6.2. Delete All Posts
Posts -> All Posts -> Select all posts -> Move to Trash (Bulk Actions).
6.3. Delete All Pages
Pages -> All Pages -> Select all pages -> Move to Trash (Bulk Actions).
6.4. Create New Pages
Pages -> Add New -> Name title -> Publish. Create new pages according to your website routes structure. For instance, Home, About, Services, Contact & Blog pages. Write your page title name and click publish.
6.5. Change Home Page and Blog Page Display Settings
Settings -> Reading -> A static page -> Change Homepage & Posts page. Select your homepage displays from a static page. And select the home page that you have created just now and also do it for the post page if you have a blog.
6.6. Create A Menu
Appearance-> Menus -> Create a new menu -> Name Menu -> Create menu -> Add pages to menu -> Tick primary menu -> Save menu. Create a menu according to your website routes structure. Create a new menu. Fill in a name for the menu for example: “Primary Menu” and click create menu. Select the pages from the left column and click add to menu. The pages will appear on the right column, you can drag and drop to change the position of the page. Remember to tick make it as the primary meu. And finally click save menu. A menu is then created.
Until this step, you have done the basic configurations of wordpress settings. Next you will set the settings for Elementor Pro.
7. Elementor Settings
Elementor -> Settings. You can leave the default settings unchanged or you can play with the settings. I usually use the default settings provided.
7.1. Elementor Editor Settings
Pages -> [Any Pages e.g. Home] Edit -> Edit with Elementor. You will be redirected to Elementor page builder editor.
Menu -> Change settings.
Default Color. Choose 4 branding colors for your primary, secondary, text and accent colors.
Default Font. Choose the font family and its weight for each type of text.
Color Picker. Choose some of the most used colors, These 8 color options will be your preference colors which will always show up.
Global Settings. Don’t change.
Dashboard Settings. Don’t change
8. How to Use Elementor Page Builder?
8.1. Editor Explained
Before starting, let’s understand what are the components inside the editor. There are two main columns exist. According to the image below, the top and bottom action bars, as well as the widget library, are located inside the control panel (left column). The right column is the live preview of a page.
The control panel provides drag and drop widgets to let you design a page at the live preview and whatever design shows up in the live preview represents your actual page design. The hide button is used to hide the control panel to let you see the complete website design with full width. There are several actions in the bottom action bar.
- Settings. Settings of a page / post / template.
- Navigator. Display a navigation panel to help you select your elements in the page easily.
- History. To let you undo the changes you made.
- Responsive mode. To change the page view among desktop, tablet and mobile view. You need to check and ensure your page is working on all three views by switching the views.
- Preview changes. This will prompt out a new tab to show the real page design.
- Publish / Update. This is to save the changes
- Save options. This gives extra options for saving. You can save it as draft without publishing or can save it as template to be used in other page.
8.2. Section, Column and Widget Explained
Section, Column, and Widget. Basically a page built by Elementor contains three main elements which are section, column and widget. Section is the outermost wrapper and a page consists of several sections / rows. There are inner wrappers inside a section called columns. A section can contain at least a column or several columns. All of the visual widgets are inserted row by row in a column. For examples of visual widgets are heading, image, button, etc.
There are more than 80+ widgets available for you to build up your page in the Elementor Pro version. The images below indicate how each section, column, and widgets look like.
8.3. Properties of Section, Column and Widget
All the section, column and widgets have their own properties. Both section and column has layout, style and advanced properties whereas most of the widgets have content, style and advanced properties.
Layout property. Controls the size of a section / column and also controls the children position.
Style property. Controls the appearance of an element for example the color, background image, border, shadow, typography etc.
Advanced property. Provides extra advanced properties for example controls the margin and padding of an element.
Content property. Fill in your content of a widget for example image and sentences etc.
8.4. Extra Tips
Right click on any element. There are extra functions that can be showed up when you have a right click on certain element. The image below shows the situation. For instances of useful function are duplicate and past style.
The image below shows the box model of an element. This must be understood when you are designing your page.
Content – The content of the box, where text and images appear
Padding – Clears an area around the content. The padding is transparent
Border – A border that goes around the padding and content
Margin – Clears an area outside the border. The margin is transparent
Please take note that each padding, border and margin have their sides at top, right, bottom, and left.
9. Create a Header (Only available in Elementor Pro)
Templates -> Theme Builder -> Header tab -> Add New Header- > Choose “Header” type -> write a name for the template e.g. “Header General” -> Create Template -> Select one template -> Insert. In this step, you are going to produce a header for your website. Follow the steps according to the image shown. You will end up entering the Elementor editor with the header template chosen.
You can do your customized header based on the template you have selected. It has slightly different compared with when designing a page. Especially you are provided with site-related widgets such as Site Logo and Nav Menu because these are common components for a Header.
Start customizing by building the structure of your header for example, how many sections needed, need how many columns, inside each column what widgets to put, what content for each of the widgets and so on. After building the structure and putting all the contents, then only start designing the appearance or the styles of each element. The very last step is to click the arrow button beside the publish / update button and choose Display Condition.
Add Condition -> Include -> Entire Site -> Save & Close. Let’s apply this header to entire site initially. You can create several header templates for different kind of pages or posts.
10. Create a Footer (Only available in Elementor Pro)
Templates -> Theme Builder -> Footer tab -> Add New Footer- > Choose “Footer” type -> write a name for the template e.g. “Footer General” -> Create Template -> Select one template -> Insert -> Start designing -> Save display condition. This step is very similar to the previous step when creating the header template. Just repeat the previous steps to create your footer template.
11. Build Pages
Pages -> Hover to Home page -> Edit with Elementor. We already have the design of header and footer templates. Now is the time to create your main content of the website which is pages. In this step, you have to design for every single page you created for example Home, About, and Contact pages. The designing steps are similar when you designed your header template, the only difference is it has more sections to be designed. Design the sections row by row. For each section:
- Insert section with the number of desired columns.
- Drag & drop widgets to the column you want it to be.
- Insert contents of the widgets.
- Change the properties / styles for section, column and widget.
- When you are satisfied with the design, click publish / update.
- Your page is now live.
- Repeat these steps to design for other pages.
12. Build Post Template (Only available in Elementor Pro)
Create several post e.g. post 1, post 2
Posts -> Add New -> Name the title -> Put some content inside -> Publish. Repeat this step to create the number of posts you want.
Note*: Remember to come back here again to continue adding /updating your content.
Templates -> Theme Builder -> Single tab -> Add new single -> Select “Post” type and Name the template as “Post General” -> Create Template -> Select a template post -> Insert. This is similar to header template, you are preparing a post template first.
Single Settings -> Choose “Post” -> Choose a post topic -> Apply & Preview. Before designing your post template, just make sure you choose a post created previously to use as reference for the post template.
It is time to design your post template. It is provided with post related widgets this time. The design procedure is the same as previous design process.
Add Condition -> Include -> Posts -> All -> Save & Close. To apply this post template for all of the posts created. You can create several post templates perhaps for different categories of posts.
13. Check Mobile Responsive for Your Design
Mobile responsive design means the design of a website when it is loaded on mobile devices such as tablet and mobile phone.
Switch to different devices’ view for checking design. You have to check the design for tablet and mobile phone views from Header (Section 7) to Post Template (Section 9)
Adjust properties for each mobile device. Some properties (See below) consists of a desktop icon beside the property name. Once click it, it will expand. You can set the property value for tablet and mobile phone. Or else, if leave empty, they will follow the desktop’s property value. Some properties which can set their responsive values are size, alignment, margin, padding, border, image
Until this step, you have completed all the 6 steps to build a website. Next thing what you need to do, is to go back to Pages and Posts tabs to keep adding/updating your content. Keep practicing and make the development process faster and smoother.
After complete inserting all your contents, you may go to GTMetrix to check for your website loading speed.
If you find it is slow (more than 3s), there are several factors that can affect your website speed, for instance, web hosting, WordPress theme, cache plugin, content delivery network (CDN) and etc. You can check out my complete WordPress speed optimization guide to optimize your website speed.