Working with Elementor Page Builder

Getting Started

Elementor Page Builder is an excellent tool for creating custom layouts for your pages and posts. It is a front-end editor plugin that allows you to easily create beautiful and intricate layouts from a live page builder. It even comes with free layouts that you can easily import directly into your site. You can download Elementor Page Builder here.  Next, navigate to Plugins >> Add New from your admin panel. Install Elementor Page Builder and activate it.

Creating a New Section

  1. In the Elementor editor, click the plus sign to create a new section. Then choose your structure for that section.

2. You can edit your section from the left panel in the Elementor editor.

  • In your Layout settings, you can adjust the width of your content and how you would like it positioned. You can also choose to stretch the section so it expands the entire width of the page, and you can set a minimum height for your section.
  • In your Style settings, you can choose your background type for the section. Choose to upload an image or video, or select a color or gradient. Then choose your position and attachment settings (for parallax effect, set Attachment to Fixed).
  • In your Advanced settings, you can add margin and padding to your section. Here is where you can also add CSS id’s and edit your responsive settings.

[columns] [span4]




At any point, you can access the Edit Section by clicking the middle button in your section.


Adding Widgets

  1. After creating a section, click the plus sign in a column to add a widget.
  2. Choose from Basic, General, or WordPress widgets. *Note if you are using a Kadence Theme you will find the theme widgets under the WordPress tab.

3. Drag and drop your desired widget into the column and edit your settings accordingly.

4. Just like sections, widget haves their own edit options. All options will look a little different depending on the widget. Generally it will look something like this:

[columns] [span4]




5. To edit the background color and opacity of your widget, open the Background tab under the Advanced settings and adjust as desired.

Background Overlay

  1. Click Edit Section and open the style tab.
  2. Open the Background Overlay tab.
  3. Choose a color, location (choose 100% if you want the overlay to affect the entire section), type, angle, and opacity.

Here is an example of a linear overlay type:

Row Separators

  1. In the Edit Section, open the Style tab, then click to open Shape Divider.
  2. Choose to edit the top or bottom of your section, and adjust settings as desired.
  3. Be sure to set the color to the same background color of your next section.

Mobile Settings

  1. When you edit a section, open the Advanced tab, then click to open the Responsive tab.
  2. When shown in mobile, the columns within your section will stack vertically. Here you can choose to reverse the order that they stack, so the last column will be on top and the first column will be on the bottom.
  3. Here you can also choose to show or hide certain sections on mobile, tablet, and desktop.

[columns] [span6]