How to Use Elementor - Getting Started
What is Elementor?
Elementor is a visual page builder plugin for WordPress enabling the creation of web pages in a live, visual way. This lets you focus on the look and design of your pages, instead of tripping over the behind-the-scenes mechanics of building websites.
This step-by-step guide walks you through how to create a stunning website using Elementor.
Before getting started, watch our video tour that explains the basics of the Elementor editor.
If you are an Elementor newbie, this article will help you understand the essentials of successful page-building.
You will learn about:
- Getting Started with Elementor
- Page Layout
- Creating Your First Section
- Customizing Your Section Layout
- Mobile Editing
The fun begins now!
1. Getting Started with Elementor
1. On the top left side of the WordPress dashboard, click Pages > Add New:
2. Click Edit with Elementor to enter Elementor Page Builder.
The website editing screen is located on the right side. This is your workspace, where you can add sections and templates:
The panel is located on the left side of the screen and contains creative tools called widgets that allow you to add elements to your page. Some of the most commonly used widgets include Heading, Text Editor, Button, Image, Video, and more.
To find a specific widget, use the search field:
Place widgets inside the editing screen by dragging and dropping them according to the blue line indicator. Once you add a new section, click on the plus sign located in the center of each column to open the widget panel. Then drag in a widget. To return to the list of widgets click the Hamburger icon on the top right in the panel.
2. Page Layout
Each page is made up of sections, columns, and widgets.
In Elementor, a web page is made up of several sections, which are horizontal boxes:
Each section is made up of columns, which are vertical boxes:
Inside each column, widgets make up the content.
You manage and customize each of these elements, by clicking on the corresponding section, column, or widget handle. Access the handle by hovering over the top right corner of widgets until a blue box appears, or on the top left corner of a column until a gray box extends.
Let’s edit a section.
Hover over the top middle outline of a section to access its handle - the blue box.
The handle lets you:
- Move a section up or down the page by clicking Edit Section and dragging it.
- Duplicate, add, save, or delete a section.
The same handle options are available for columns and widgets.
Templates are pre-designed pages that can be inserted into any page with just one click. They are stored in Elementor's Template Library. You can also save sections and pages you created inside the library under the My Templates tab.
1. To enter the library, click Add Template from the editing screen. Scroll down to view the templates:
2. Click the magnifying glass icon to preview a template.
3. Click INSERT to select the required template.
4. To find a specific template, enter its name inside the SEARCH field.
5. Check out further search options in New, Trending, or Popular templates.
6. Give your favorite templates a heart and save them to MY FAVORITES.
7. Click the arrow on the top right corner to import a .JSON or .zip file from your computer.
4. Creating Your First Section
Here you will learn how to drag in widgets, edit their settings, and customize their layout.
- Set Heading
- Set Text Editor Widget
- Set Button
- Layout & Alignment
Now that we covered the editor and template library, it's time to create your first section from scratch.
1. Click ADD NEW SECTION in the website editing screen.
2. Select the relevant structure.
3. Drag a Heading widget from the panel into the left column of your section.
4. Press the Hamburger icon to return to the widget menu. Then drag a Text Editor widget into the column below your heading. The blue line indicator shows you where the widget will land.
5. Drag a Button widget into the column:
6. Finally, let’s add an Image widget. First, click on the PLUS sign in the center of the right column to open the widget menu in the panel.
Then drag in an image widget.
Once the image widget is in place in your column, go back to the panel to select an image by clicking Choose Your Image.
Here you have the option to upload an image either from the Media Library or from your computer. Click the Upload Files tab > Select Files, choose a file from your computer, press Open and Insert Media.
5. Customize the Layout of a Section
Customize your section with Layout, Style, and Advanced in the panel:
1. Click on the section handle.
2. In the Layout tab (top far right in the panel) click Height and choose Min Height.
3. Toggle to adjust the amount of height or enter a specific number.
4. Set your preferred Column and Content Position, it may look best in the center.
Setting the Background Color of a Section
1. Click your section handle. Go to the Style tab in the panel.
2. Under Background, click the paintbrush next to Background Type, and click Color:
3. Select a color shade or enter a specific Hex code (e.g. #f12184 for hot pink). If you change your mind, just click clear to reset the color. You can also adjust the opacity or brightness using the right slider bars. You can also change the background color of your columns by clicking their panels and doing the same process under Style>Background>Paintbrush>Color.
To view how your section looks live, click the Hide Panel arrow in the middle of the editing screen.
To publish your page, click Update in the panel.
Editing Widget Style Settings
The widget settings panel includes 3 tabs: Content, Style, and Advanced.
First, we will explore the CONTENT TAB.
1. Click the Headline widget handle to open Edit Heading and the Content Tab. Under Title, you can type in your text. Or simply type directly inside the headline widget itself in the editing screen.
2. Do the same for your paragraph of text. Click it’s handle to edit the text.
3. Now edit your Button text. You can enter the button name in the panel under TEXT. Or type directly in the editing screen, just click anywhere inside the button itself to bring the cursor where you want it.
4. Also under the Content tab, you will find an Alignment option at the bottom of the panel. Try out setting your different widgets to the right, left, center, or justified. You can also adjust the size of your button here under SIZE (XS, S, M, L, or XL).
Let’s add some flair using the STYLE TAB.
Go to Style to change the color and typography settings.
1. Click Style > Typography:
Here you can select the relevant font family. And below, explore the other parameters in Style, such as size, weight, and letter spacing.
See other docs and videos dedicated to the Advanced Tab.
6. Mobile Editing with Elementor
Making websites fully responsive is easy with Elementor’s mobile editing tools. You can switch on mobile editing for any widget. Just click on the desktop icon located next to SIZE in the STYLE tab and switch to the mobile icon on the far right.
Once you choose the mobile icon, you can edit individual widgets and change their settings for mobile. After editing, preview how your section or page will appear on mobile.
Another way to preview your website in tablet or mobile is by clicking Responsive Mode in the panel on the bottom left:
How to Undo Changes - Page History
Need to undo a change? Go to the bottom panel and select the History arrow icon. Here you’ll be able to see all your edits. You can switch back and forth between your versions.
Click History to open Actions and Revisions.
In ACTIONS you can view all the steps performed while building your website.
REVISIONS shows all versions saved after every change. Here you can easily return to an earlier version.
Congratulations! You’ve Completed Our First Steps Overview.
Now you’re all set to start designing your first pages with Elementor. So what are you waiting for?!