The Beginner’s Guide to Using Elementor in WordPress

Elementor page builder design

Elementor is a page builder plugin that replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode.

Installing Elementor

elementor page builder plugin

 

Make sure you have your WordPress installation ready, along with the Elementor page builder installed. In the WordPress dashboard, go to ‘Plugins’ > ‘Add new’, and enter ‘Elementor’ in the search bar. Then click the ‘Install’ button, and then the ‘activate’ button.

 

Elementor website design

Elementor Settings

Elementor has a handful of top-level settings you can find directly in the plugin. This allows you to do things like check which types of posts Elementor works with, set default font and spacing, and adjust responsiveness settings. 

Elementor Settings web site design kenya

Widgets

Elementor is based on a drag-and-drop editor that accommodates sections, columns, and widgets. The system is broken down as follows:

  • Section
  • Column
  • Heading
  • Image
  • Text Editor
  • Video
  • Button
  • Divider
  • Icon
  • Spacer
  • Google Maps

How To Create a Single Post Template in Elementor

The Elementor WordPress Page Builder offers limitless design possibilities. What you do and can accomplish will be based on the limits of your imagination.

When you use a theme for your website, you get your theme’s “Single Post Template.” It is made out of different elements which include:

  • Post Title
  • Post Content
  • Featured Image
  • Metadata
  • Comments
  • Etc.

With Elementor you can control the layout & design of the Single Post Template – on any theme you are working with.

Create a Single Post Template in Elementor Page Builder

To accomplish this go to Templates > Theme Builder > Single > Add New. Then select “Single” from the dropdown.

elementor_templates

Under Select Post Type, choose post type you wish to create e.g post, page, services or even products e.t.c, and click Create Template.

Now choose a post block and insert. You can also design your own if you want. After you have finished designing, click “Publish” and choose a condition.

Note: Only posts that use Default Template will have the Single Post Template applied to them, even if they otherwise meet the Display Conditions criteria. Posts that use Canvas or Full-Width template (or any template other than Default) will not have the Single Post Template applied to them.

How to Use Advanced Features in Elementor

Elementor’s pro version offers advanced features to take your WordPress website to the next level. You get access to more widgets, a theme builder, a pop-up builder, and custom field capabilities.

How to Create a Popup in Elementor

Pop-up forms help you capture email addresses from leads. Elementor makes creating these forms easier with its pop-up builder. Follow these instructions to create your own popup.

  • In your WordPress dashboard, go to Templates > Popups > Add New.
  • Name your template and click Create Template.
  • Choose a template from the Library or create your own design.
  • Click Publish, then Save and Close.
  • Open a new page in Elementor (CTRL + E for PC users; Command + E for Mac users).
  • Drag in a button widget.
  • Under Layout, choose Link > Dynamic > Actions > Popup.
  • Go to Popup > Open Popup and select the popup you created.
  • Go to the live page.
  • Then, click on the button and see the popup appear.
  • Here’s how it might look:

elementor pro page

 

Frequently Asked Questions About Elementor Page Builder

Do you still have questions about Elementor? No problem. Here are a few frequently asked questions about the plugin along with the answers.

  • How much does Elementor cost?

Elementor is a free plugin for WordPress users. If you want to unlock additional features, you can get the pro version. You can find the prices here.

  • Does Elementor work with all themes?

Yes, it works with all themes that follow WordPress’ coding standards.

  • Does Elementor slow down your website?

Social Media

New From Animag

Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.