Choosing a good page builder is very important for building a WordPress website nowadays. In the previous article, we mentioned that when installing a theme, you can choose a suitable page builder to create pages. Among them, we chose Elementor as the editing option. Therefore, in this article, I will provide a more detailed introduction to Elementor, this page builder, and its main key features.
What is Elementor?
Before discussing Elementor, we need to understand what a page builder is. A page builder is a tool used for website construction that allows us to visually create or edit web pages without the need to write a significant amount of code. Among these tools, Elementor is a popular WordPress page builder plugin in recent years. It enables users to create various web pages on WordPress websites, ranging from simple static pages to complex dynamic content, all achievable through Elementor. Elementor offers a highly intuitive user interface, allowing us to effortlessly create and edit web pages by dragging and dropping web elements, setting styles, and arranging layouts.
Build and Edit Elementor Pages
We can build Elementor pages through the following methods:
- Log in to the backend, and under Pages, click Add Page to create a new general page.
- After adding the page, click Edit with Elementor at the top to convert the current general page into an Elementor page. If you already have other normal pages, you can also use this method to transform any existing normal page into an Elementor page.
- Once the conversion is complete, you will be redirected to Elementor’s interface for the page builder.
- If you go back to the backend, you will notice a small Elementor icon next to the newly created page, and there will be an additional option Edit with Elementor.
- Alternatively, after the page is published in the future, you can also find the Edit with Elementor option at the top of that page (visible only to administrators).
Elementor Interface Introduction
Create and Remove Elements
Next, let’s introduce the user interface of the Elementor editor. After successfully creating an Elementor page, you’ll see that the screen is primarily divided into two parts: on the left is the Elementor element list and settings area, while on the right, you’ll have the real-time layout preview of your current page.
On the left side, you can locate suitable elements and drag them directly to the appropriate positions on the right side. For example, you can select Image on the left side and drag it to the right side to insert an image.
Additionally, you can observe that when an element is dragged to the right side, you’ll see an action bar at the top. Here are the functions of the buttons on the action bar:
- Add a new editing section above the current section.
- Edit the currently selected section. After selecting it, you can use the left-side interface to edit the content within the chosen section. Additionally, you can hold and drag to freely move the currently selected section to a new position.
- Remove the currently selected section.
Layout Splitting
You can also click the + button on the right side of a section and choose a suitable layout for splitting. Then, you can place elements in the desired positions.
Elementor Settings
Returning to the Elementor toolbox interface on the left side, you’ll notice a settings icon with three horizontal lines in the upper left corner. Clicking on it will take you to the following screen. Here, you can perform various settings related to Elementor:
- Site Settings: Here, you can edit all settings related to the overall website. For example, in Global Colors, you can adjust the colors of the entire website, ensuring consistent styling throughout the design process. Of course, if individual elements have their own style settings in the future, the global settings here will be overridden by the styles of those individual elements. So, making style adjustments to individual elements is also completely possible.
- Theme Builder (Elementor Pro): Here, you can design every element of the website, such as the Search Results Page or a Single Post.
- User Preferences: Finally, this is where you can configure settings for the Elementor dashboard, such as choosing between light and dark themes, adjusting panel width, and more.
Elementor Bottom Bar
Elementor also provides several convenient quick functions at the bottom:
- Settings: Unlike the above Site Settings, the settings here primarily target the current page’s configurations, such as page title and more.
- Navigator: This section displays the structure of the current page in a clean and organized manner in the right-hand column. You can directly select the elements you want to edit from the options on the right side for further actions.
- History: This section contains all the editing history of the current page, allowing you to perform actions similar to version control.
- Responsive Mode: This section provides a preview of the page in responsive mode. Clicking on it allows you to switch between previews on different devices at the top of the page. Additionally, when selecting a preview for a different device, if you want to edit any element on the page, the left-side editing panel will also display a corresponding device icon to indicate the current device’s style design.
- Preview Changes: Preview the editing effects of the current page.
- Publish / Update: Publish the current page or update the page.
Templates
Additionally, a very useful feature when designing web pages with Elementor is the ability to save designed sections or elements as reusable templates. For example, you can select the section or element you want to template, right-click, choose Save as Template, and then enter a name for the template you want to save:
In the future, you can reuse the saved template by simply clicking on the middle folder icon wherever you want to use it.
