Elementor WordPress Plugin

Creative Commons LicenseThis tutorial by Tierney Steelberg, Digital Liberal Arts Specialist at Grinnell College’s DLAC, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Table of Contents

  1. What Is Elementor?
  2. Setting Up Elementor
  3. Elementor Walkthrough
  4. Elementor Styling
  5. Elementor Pro
  6. Additional Resources

What Is Elementor?

Elementor is a free pagebuilder plugin for WordPress that allows you to build out site content with a user interface that allows for granular control over styling and customization. As a pagebuilder plugin, Elementor can be used instead of the Classic or Block editor. Elementor is activated at the page level, so the Classic or Block editor can still continue to be used on other site pages.

Elementor allows you to drag and drop content types called “widgets” onto a page, and easily organize them in different Sections, with Columns within them (Sections > Columns > Widgets). See the screenshot below to get a sense of this page structure (visible in the Structure pop-up at right as well).

Screenshot of an Elementor page with sections and columns

Check out this video from Elementor for an overview of the basics of the Elementor Editor:

Setting Up Elementor

Elementor is installed by default on Sites @ Grinnell WordPress websites. Simply navigate to the plugin page from the left-hand dashboard menu and click Activate under the listing for Elementor to begin using it on your site. Click the blue Edit with Elementor button on a site page or post to begin using Elementor for building out site content.

Elementor can work with any site theme, but site setting customization through Elementor may conflict with certain theme customization and styling, so a lightweight theme is typically recommended. Hello Elementor is one such lightweight theme designed to work with Elementor, though please note that site headers (including the navigation menu) and footers can only be built and customized when using the paid version, Elementor Pro. We recommend testing out Elementor with a theme you like, and then going from there as you make your customizations!

Elementor Walkthrough

Follow these instructions for creating or editing a page using the Elementor plugin: 

    1. Click Pages in the left-hand navigation menu.
    1. Click Add New if you want to create a new page or click the title of an existing page if you want to edit it. Some template pages have been created for you.
    1. Click the blue Edit with Elementor button to edit the page in Elementor (make sure you have activated tje plugin from the Plugins page).
    1. Click the plus button on the page to add a new page section and select your desired column layout.
    1. Click the plus button in the top left (part of the side menu) to add content widgets to the page by dragging and dropping them. You can search for widgets or browse the Basic and General sections of the Widget menu. (Please note that Pro widgets are not available with the basic Elementor plugin.) Some widgets of interest:
      • Heading
      • Text Editor
      • Image
      • Image Gallery
      • HTML (to embed content from elsewhere, such as a video from Vimeo, audio from Soundcloud, a StoryMap…)
    1. After clicking on a widget, you can customize its content and styling from the left-hand menu pane. Navigate using the tabs at the top (Content / Style / Advanced) to make your desired customization.Screenshot of the Elementor widget editing view for an image
    2. When you’re done working on page content, click the Publish button in the top right to make your changes visible on the front-end, or the Save Draft option (in top right carat dropdown) to save your changes but keep the page private for now. Don’t forget to save as you go, so your work is saved if you leave and come back.

Play around with adding widgets to a page, laying them out in different sections and columns, and customizing their contents: this is the best way to learn how to use the Elementor plugin.

Elementor Styling

Using the Elementor plugin, you can also set up global site settings, such as global fonts and colors, for consistency in styling across your website. See walkthroughs on how to set up global colors and how to set up global fonts in Elementor’s own documentation.

Screenshot of Elementor editor with Site Settings button evidenced through a border and an arrow pointing to it
Location of the Elementor Site Settings button for site styling customization.

One example of a setting you can customize through Elementor’s Site Settings area is links: you can customize how links are signaled typographically throughout your site, with a specific color or typography (font, font size, font decoration such as an underline). You can customize both how links appear normally and how they appear when a mouse is hovering over them. You can change how links are styled on your site by clicking the Site Settings button, then clicking Typography (under Theme Style), and then navigating down to the Link section to edit link color and typography (toggle between the Normal and Hover tabs to edit both), as shown in the screenshot on the left.

Elementor Pro

The Elementor Pro plugin is a paid version of Elementor that unlocks additional premium features, such as the ability to set up site templates and site-wide styling (including headers, navigation menus, and footers) and the ability to use premium widget types. See an overview of the differences on this page of the Elementor Help Center, Elementor Benefits – Pro vs Free.

Grinnell College has licenses for Elementor Pro that can be installed upon request for specific projects: Vivero Fellows can check with Tierney Steelberg about getting access to Elementor Pro for their projects.

Additional Resources

Elementor has many how-to videos available on its YouTube channel, as well as robust support documentation in its Help Center.

 

css.php