How To Use Elementor

Introduction

Elementor is a plugin for WordPress. Elementor is a page builder that can be used to build entire web pages from scratch. These web pages are publicly viewable by any visitor to your website.

Although WordPress comes with its own built-in page builder, it offers only limited features. By comparison, Elementor offers more page building features than WordPress.

The following is a set of basic instructions on how to use Elementor to build web pages. These instructions assume that you have a fully functional WordPress system, and that you have installed the Elementor plugin into the WordPress system.

How To Run Elementor

The first step is to log into the admin area of your WordPress system.

Next, go to “Pages”, then “All Pages”.

You should now see a list of existing pages in WordPress. Like this:

This is a list of pages that you have created in the past, or pages that were automatically created by WordPress or one of its plugins.

At this point, you can edit an existing page, or create a brand new page from scratch. Let’s create a brand new page from scratch.

Click the “Add New” button near the top of the screen:

On the next screen, you will be asked to enter a title for the new page. This title will appear in the page list in the WordPress admin area, which we have seen above. It may also appear in the browser tab when the page is viewed live. Enter a title for the new page:

Next, we will specify the URL slug. The slug is a piece of text, typically less than 10 or 20 characters long, that will form the last part of the URL of this new page.

On the right side of the screen, under the “Page” tab, there is a field named “URL”. Click on this field. In the resulting popup box, enter the URL slug for this new page.

No space characters are allowed in a slug, so use hyphen or underline characters instead. Also, use lowercase characters (a-z) instead of uppercase characters. Number characters (0-9) are allowed in a slug.

Let’s save our changes. Click the “Save draft” link near the top of the screen. This will create the new page. Don’t click the Publish button unless you are okay with an empty page being shown publicly to all web visitors.

Now we can edit the page using Elementor. Click the “Edit with Elementor” button near the top of the screen.

This will run the Elementor editor. Here is what it looks like:

Notice that on the left side of the screen, there is a panel entitled “elementor” with a dark red title bar. This whole left panel is called the Elementor Panel.

On the right side of the screen is a preview of the page being edited. At the top of the preview is a header containing the site title “My Cool Website” and some menu links. At the bottom of the preview is a dark footer containing copyright information. The header and footer are usually determined by the WordPress theme.

Inbetween the header and footer is the main content of the page. Only the main content can be edited within the Elementor editor screen.

Elementor Page Layout

In Elementor, every page contains some kind of content – for example, text headings, text paragraphs, icons, bullet lists, links, images, input fields, buttons, and more.

This content is organized into a two-dimensional page layout, which is conceptually similar to the rows, columns, and cells of a spreadsheet. Unlike a spreadsheet, however, the rows and columns on an Elementor web page are typically irregular. Yes, there are rows. But each row can contain its own number of columns. One row may contain three columns, while another row may contain two columns.

In Elementor, a row is called a section, and a column is called a column.

In the preview area of the Elementor editor screen, a section is indicated by a blue rectangle, which looks like this:

In the above blue rectangle, there are three columns. In Elementor, columns within sections are indicated by dashed rectangles.

All content, such as text headings, text paragraphs, icons, images, and buttons, goes inside the columns. For example, here is the same section as before, but with content inside the three columns:

Creating Sections & Columns

To create a new section on the page, find and click the red plus button near the bottom of the page:

Then choose how many columns you want in your new section. You can also choose the relative widths of the columns.

A new section is then inserted onto the page. For example, if you chose a section with three columns, it would look like this:

If you mistakenly chose the wrong number of columns, don’t worry. Later we will cover how to change the number of columns in a section.

Editing Sections

You can change the properties and behaviors of any section by clicking the middle icon at the top of the section’s blue rectangle. The middle icon is the one with the 6 dots:

If you right-click the icon, you get a popup menu that allows you to copy the section, paste a section, and duplicate the section.

If you left-click the icon, the Elementor Panel (on the left side of the screen) shows a set of properties of the section that you can modify or change.

With these properties, you can change the section’s background color, background gradient, background image, border appearance, margin, padding, minimum height, and more.

Editing Columns

You can change the properties and behaviors of any column by clicking the dark gray icon square at the top-left corner of the column’s rectangle:

If you right-click the icon, you get a popup menu that allows you to add a new column to the section as well as delete the column. Other menu options include copy, paste, and duplicate.

If you left-click the icon, the Elementor Panel (on the left side of the screen) shows a set of properties of the column that you can modify or change.

With these properties, you can change the column’s background color, background gradient, background image, border appearance, margin, padding, and more.

Creating Content Using Widgets

As mentioned earlier, all content, such as text headings, text paragraphs, icons, images, and buttons, goes inside the columns.

In Elementor, all content is represented by something called widgets. A widget is templated content that you can insert onto the page and whose visual appearance, behavior, animation, data, and other properties you can edit and customize.

There are different kinds of widgets. There are heading widgets, text paragraph widgets, image widgets, button widgets, and much more. There are widgets that consist of multiple items, too.

To insert a widget onto the page, click the 9-square icon on the right side of the Elementor Panel’s title bar:

This will show a list of widgets in the Elementor Panel, like this:

As the above shows, these widgets include the Heading Widget, Icon Widget, Text Editor Widget, and other widgets.

All of these widgets are organized into multiple categories, such as “BASIC” or “PRO”. There are other categories as well, including categories provided by Foxy Effex.

Choose a widget, then using your mouse, drag the widget from the Elementor Panel and drop it into a column on the page (in the preview area). The widget will then be inserted into the column on the page.

For example, here is what it looks like when an Icon Widget is inserted into the left column of an otherwise empty, three-column section:

You can repeat this process any number of times to insert as many widgets as you need into as many columns and sections as you need.

Editing Widgets

After a widget is inserted onto the page, you can edit or customize its appearance, behavior, and other properties by clicking the blue pencil icon square at the top-right corner of the inserted widget’s rectangle:

If you right-click the icon, you get a popup menu that allows you to copy, paste, duplicate, or delete the widget.

If you left-click the icon, the Elementor Panel (on the left side of the screen) shows a set of properties of the widget that you can modify or change.

With these properties, you can customize the widget’s content and visual appearance. For example, with an Icon Widget, you can specify which icon is shown, as well as the icon’s color, size, horizontal alignment, rotation, link URL, margin, padding, and more.

Here is another example. With a Heading Widget, you can specify the text content of the heading, as well as its color, font characteristics, shadow effects, horizontal alignment, link URL, margin, padding, and more.

Putting It All Together

Based on what we’ve learned so far, it should now be possible to put together something that looks like this:

Here, we have a section containing three columns. Each column contains an inserted Icon Widget, Heading Widget, and Text Editor Widget. Each Text Editor Widget insertion is showing a paragraph of text.

Each of these widget insertions has been customized. For example, the Icon Widget in the left column has been customized to show a truck icon, the Icon Widget in the middle column has been customized to show a hospital icon, and the Icon Widget in the right column has been customized to show a bank icon. These customizations were all made in the Elementor Panel.

Let’s improve the design by adding a background color gradient to the entire section. To edit the properties of the section, click on the middle icon at the top of the section’s blue rectangle.

Then in the Elementor Panel, go to the Style tab. Open the Background property section.

You will see two sub-tabs named “NORMAL” and “HOVER”. These refer to normal mode and mouse-hover mode, respectively. We are interested in normal mode, since we want the color gradient to appear under normal conditions, whether or not the mouse is hovering over the section.

For the Background Type property, click the gradient button.

Specify two different colors. In this example, we are using light blue (#0080FF) and dark blue (#004080).

These property changes should immediately give the section a background color gradient that goes from light blue to dark blue.

Let’s make another design improvement. Let’s add some padding (i.e. spacing) along the top and bottom sides of the section. Go to the Advanced tab. Open the Advanced property section.

For the Padding property, specify a value of 100 for each of the Top and Bottom sub-properties. This means there will be 100 pixels of padding on each of the top and bottom sides of the section.

Next, we will need to change the colors of the icons, headings, and text paragraphs so that they will contrast well with the blue color gradient of the section. To edit each widget, click the blue pencil icon square at the top-right corner of each widget’s rectangle. Then in the Elementor Panel, go to the Style tab and change the color of the widget’s content.

For the icons and headings, we will use a yellow-orange color (#FFC000), and for the text paragraphs, we will use a light-gray color (#C0C0C0).

Here is the final design of our section:

Saving Changes & Exiting Elementor

To save our changes, we just click the green “UPDATE” button on the bottom-right corner of the Elementor Panel:

To exit the Elementor editor and return back to the WordPress admin area, click the hamburger icon on the left side of the Elementor Panel’s title bar:

Then click “EXIT TO DASHBOARD”.

Publishing The Page

In the above examples, we have used Elementor to create and design a simple web page containing a section with three columns, where each column contains an icon, heading, and text paragraph. We have also saved our changes.

Normally, our changes would be viewable immediately by web visitors. However, recall that when we created the page in WordPress, we created it in draft mode. As far as WordPress is concerned, the page has not yet been published.

To put the page in published mode, go to the WordPress admin area, then go to “Pages”, then “All Pages”.

You should now see a list of existing pages in WordPress. Like this:

Find the page that we have created earlier. Edit the page by clicking its “Edit” link.

This should launch a WordPress edit screen that is similar to what we saw before, when we first created the page. Click the “Publish” button near the top-right corner of the screen:

The page should now be publicly viewable by web visitors at the slug URL specified earlier.

Other Elementor Features

With Elementor, you can:

Set margins on sections, columns, and widgets. A margin is extra distance, often specified in pixels, that separates a section, column, or widget from its neighboring sections, columns, or widgets. You can set margin values on a section, column, or widget by going to the Advanced tab in its properties.
Set paddings on sections, columns, and widgets. You can set padding values on a section, column, or widget by going to the Advanced tab in its properties.
Set a background image on a section, column, or widget. You can set a background image on a section, column, or widget by going to the Style or Advanced tab in its properties. You can give the image fixed scrolling behavior. You provide the image, and it must first be uploaded into WordPress as an asset in its media library.
Put a border around a section, column, or widget. You can put a rectangular border around a section, column, or widget by going to the Style or Advanced tab in its properties. You can control the border’s color, style, and thickness, as well as the roundness of its corners.
Put a section inside another section. There is a widget named “Inner Section” that you can insert into the column of an ordinary section. Like an ordinary section, you can create any number of columns in an Inner Section, and you can insert any number of widgets into any column of an Inner Section. However, you cannot insert a section or Inner Section into any column of an Inner Section.
Put images on a page. Elementor comes with an Image Widget. In its properties, you can control the image’s width, maximum width, horizontal alignment, link URL, opacity, and color properties. You provide the image, and it must first be uploaded into WordPress as an asset in its media library.
Put buttons on a page. Elementor comes with a Button Widget. In its properties, you can control the button’s text label, font characteristics, icon, link URL, horizontal alignment, size, text/icon color, background color, border, and inner padding.
Set widget spacing inside a column. Within any column, a standard pixel distance separates each widget from its neighboring widgets. This is the widget spacing. You can set a column’s widget spacing by going to the Layout tab in the column’s properties. The property name is “Widgets Space”.
Position multiple widgets horizontally in the same column. Earlier, we have seen widgets being stacked vertically in the same column. But you can also stack them horizontally across the column. To do this, go to the Advanced tab in each widget’s properties, open the “Positioning” property section, and set the width of the widget to “Inline” or “Custom”. You can set the horizontal alignment (e.g. left, right, center) of the column under the Layout tab in the column’s properties.
Move sections, columns, and widgets around. You can move an existing widget from its current location to a new location on the page. Press and hold your left mouse button on the blue pencil icon square at the top-right corner of the widget’s rectangle, then drag the widget to a new location on the page. You can move sections and columns in a similar way.
Set a section’s height. By default, the height of a section depends on the height of all the widget content within its columns. But you can also set a section’s height to be the height of the visitor’s browser viewport, which may differ from visitor to visitor. Or you can specify a minimum height value, either in pixels or as a percent of the browser viewport height. If the widget content in the section exceeds this minimum height, the section height becomes the height of the widget content. You can set the section’s height by going to the Layout tab in the section’s properties. When specifying a minimum height as a percent of the viewport height, use “VH” units instead of “PX” units. “VH” stands for “Viewport Height”.

Elementor also comes with a modest set of special effects.

For example, in the free version of Elementor, you can set an entrance animation for any section, column, or widget. An entrance animation is any change in position, rotation, size, opacity, brightness, blurriness, or other visual characteristic that occurs when the user scrolls the object into view for the first time since the page has loaded. The premium version of Elementor supports scrolling animation, which is any change in position, rotation, size, opacity, brightness, blurriness, or other visual characteristic that occurs while the page is being scrolled.

The free version of Elementor has a feature called Shape Divider which allows you to set a special graphical boundary separating two neighboring sections on a page. By default, a solid straight horizontal line separates two neighboring sections. The Shape Divider offers a number of alternative shapes and designs, such as tilted lines, waves, curves, and more. Shape Divider only works if one or both of the neighboring sections has a solid background color.