• What Is Elementor?
• Navigating To Elementor
• Setting Up Consistent Styling and Branding
  • Global Styles - Fonts & Colors
  • Style For Design Elements
• Editing With Elementor
  • Sections
  • Elements
  • Columns
  • Preview, Save Draft, or Publish
  • Other Common Content or Page Edits
• Helpful Time-Saving Elementor Features
  • Copying/Duplicating Sections, Elements, and Styles From Other Pages
  • Making Templates of Pages or Sections
  • Undoing Changes in Revision History
  • Following a Style Guide

What Is Elementor?

Elementor is a WordPress plugin that provides a visual, drag-and-drop page builder interface for designing and customizing web pages without writing code. It is a user-friendly design tool for users of all technical levels. In this KB, we will focus on the basic design elements for setting up the page layout using Elementor.

Links to resources related to the basics of Elementor user interface:

• Basic Widgets (“Elements”)
• Examples of website design in Elementor
• Preview of the current (as of April 2025) Elementor interface for building web pages

Navigating To Elementor

There are three ways to open a page with Elementor.

• For a new page, create a new page. Then, click “Edit with Elementor”. This will open a page with the Elementor page builder.
• For existing pages:
  • If you are on the page you would like to edit and logged in, you can click the “Edit with Elementor” link in the top navigation bar options.
  • If you are in the WordPress Dashboard, select the “Pages” tab. Search for the page you want to edit and hover over the title. You will see links below the page title appear, and you can click on “Edit with Elementor”.

Setting Up Consistent Styling and Branding

Global Styles - Fonts & Colors

Set up global styles in the Customizer (WordPress Dashboard > Appearance > Customize) to set fonts and colors on all pages so you don't have to adjust this on each page manually.

• Before building pages:
  • Set the styling of the heading levels like H1, H2, body text, etc. — Typography Section
  • Links — Typography Section
  • Background color – Colors Section

In the global styles, you can also set up custom CSS.

Style For Design Elements

You can also set specifics to reuse for design elements like background, divider lines, icons, etc. You can do this within the Style tab in the Elementor widget by clicking on the "+" icon in the color selector. This icon represents "Create New Global Color." You can also label the color there to distinguish or define how the color should be used.

To select a saved global color, click the globe icon, which represents "Custom." This icon represents a list of colors saved as global colors.

Editing With Elementor

The Elementor page builder sets up the page layout using design elements. These elements include sections, elements (widgets), and columns, which you can add, edit, style, and move around.

Sections

Sections can be used to group elements and will be the first thing you add when setting up a new page's layout.

• Add — Click the “+” icon button within the dotted gray box or the “+” icon in the pink tab at the top of an existing section.
• You can also structure sections with multiple columns by selecting the structure option you would like or adding columns by right-clicking on the gray column icon at the top left of the selected section.
• Style — Select the section so there is a pink border highlighting its selection. Then use the left panel settings “Edit Section” to customize the section style. You can give sections a background color or adjust the padding/margins.
• Move — Select the section you want to move by clicking on the top pink tab and dragging, holding from the middle where the six dots are, wherever on the page you want to move the section. Elementor shows a pink highlighted area to give a preview of where the section will be moved. Once you let go of the selection, it will appear where you dragged it.

Elements

The most used widgets are: text editor, heading, image, buttons, and accordions.

• Add — Drag and drop from the left side panel labeled “Elements” under the “Widgets” tab, or use the features of copy/paste or duplicate to get an exact match of an element if you want to retain the styling.
• Edit — Select the widget in the right side of the page builder by hovering over and clicking on it. A pencil icon in the upper right corner and a pink border around the element will appear. The left side panel will also show a content area and settings that can be edited.
• Style — Select the widget so there is a pink border highlighting its selection, and then use the left panel settings “Edit [Widget Name]” to customize it. You can give elements a background color or adjust the padding/margins.
• Move — Click on the widget you want to move and then drag and drop it wherever you want to move the section. Elementor shows a pink highlighted area to preview where the element will be moved. Once you let go of the selection, it will appear where you dragged it.

Columns

Columns are helpful in varying page layouts. They can be made in sections or using the “Inner Section” widget.

• Add — Hover or click into a section. Then, in the left upper-hand corner, hover/click on the gray icon that looks like two columns. You can either “Add New Column,” which provides a blank area, or “Duplicate” the column, which is a copy of everything in that column.
• Style — Select the column so that a gray border highlights its selection, and then use the left panel settings “Edit Column” to customize it. You can give columns a background color or adjust the padding/margins.
• Move — Grab the gray column icon in the left upper-hand corner, then drag and drop it either right or left, above or below. Columns can also be moved within the section or into another section anywhere on the page.

Preview, Save Draft, or Publish

You can preview changes to the page builder before making edits live by clicking the eye icon next to the “Publish” button at the top right-hand corner.

If you want to save your changes but not publish them, click on the down arrow next to the “Publish” button and select “Save Draft”. Only you can see these changes when you open the page later using “Edit with Elementor.”

To ensure your changes are made public, click “Publish.”

Other Common Content or Page Edits

• Add or edit link URLs
  • Some widgets have a field that allows you to add a URL, such as headings, buttons, icons, and images.
  • For the text editor, you can link text by highlighting the words you want to be hyperlinked. Then, select the chain icon in the editor tools. This will open a small dialog box where you can enter the URL and then click the arrow button. The normal keyboard shortcut you may know does not work in the editor.
  • You may want to link to a media file in the WordPress media library, such as a PDF, PowerPoint slides, images, etc. You can get the file URL by opening the Media Library and selecting the file, which will open up settings on the right side and an area to copy the URL (Button “Copy URL to Clipboard”).
• Embed Videos
  • Use the “Video” widget if only adding a video URL (like YouTube or Vimeo) or the “HTML” widget if you have an embed code. You can refer to this UW-Madison “Make It Accessible” guide to ensure your video meets web accessibility standards.

Helpful Time-Saving Elementor Features

Copying/Duplicating Sections, Elements, and Styles From Other Pages

Right-click on the area you want to make an exact copy of and select “Copy” or “Duplicate”. If you select copy, you can paste that section/element/column/style not only anywhere on the page but also other pages you have open in edit mode.

Making Templates of Pages or Sections

• For template pages, click the down arrow next to the “Publish” button and select “Save as Template.” You can add these templates to new pages and edit the templates (but editing them will not change them on an existing page utilizing that template).
  • To add the page template, click the envelope icon within the dotted gray box in the Elementor page builder. Then click on the “My Templates” tab in the open dialog box. You can see a list of templates that have been created and can insert as many as you want on a page.
  • To edit a page template, go to the WordPress Dashboard > Templates (under Elementor). These can be edited using Elementor just like pages are by clicking “Edit with Elementor.”
• For template sections, right-click on the section that you want to make into a template and select “Save as Template.” To add or edit a section, follow the instructions for page templates.

Undoing Changes in Revision History

You can revert to previous page versions by clicking on the “E” icon (Elementor logo) at the top left corner of the page builder. Then select “History” in the dropdown menu and “Revisions” in the tab.

Following a Style Guide

Once a website is built, it’s helpful to have a webpage with a style guide that can be referred to and used for building new pages. If this is a living style guide, such as a webpage on the site, it can be updated using Elementor any time and elements from it could be copied and reused (ie. reusable components). Some suggested elements to include in this style guide are:

• Heading levels and link styles with details about the typography (font size, type, weight, color; and sometimes the purpose for the heading level or link)
• Button style(s): primary and secondary buttons
• Icon library, especially for custom icons and what they are used for
• Styled accordion
• Styled tiles/boxes
• Color combinations that pass accessibility contrast requirements