Skip to content
English
Contact Us
  • There are no suggestions because the search field is empty.

What are the basics of using Elementor on my WordPress website?

A beginner's guide to using Elementor in WordPress

Elementor is a drag-and-drop page builder for WordPress. It lets you edit your pages visually: you see exactly how each change will look as you make it, without needing any code.

Before you start:

  • Your editor may look different. Elementor released a major update, Elementor 4.0, in 2026. Depending on when your site was built and how it's set up, your editor may use the newer Atomic Editor or the classic layout. The basics below work in both.
  • Some features need Elementor Pro, such as the pop-up builder, theme builder and WooCommerce templates.
  • Check with Gate 39 before editing headers, footers or site-wide templates. These affect every page on your site.

Open a page in Elementor

  1. Log in to WordPress and go to Pages.
  2. Hover over the page you want to edit and click Edit with Elementor. Or open the page in WordPress and click the Edit with Elementor button.
  3. Elementor opens with your page in the main area and the Elements panel on the left.

How pages are built

Elementor pages are made of layers:

  • Containers (called sections on older sites): the layout boxes that hold content. Containers can sit side by side or inside each other to create columns and rows.
  • Elements (or widgets): the content, such as headings, text, images, buttons, videos and forms.

To add content:

  1. Find the element you want in the left panel, or search for it.
  2. Drag it onto the page. A blue highlight shows where it will go.
  3. Click the element to edit its content and style in the left panel.

Tip: press Ctrl + E (Windows) or Cmd + E (Mac) to open Elementor's Finder, which lets you quickly search for and jump to any page, template or setting.

Edit, move and style content

  • Edit text by clicking it on the page or in the left panel.
  • Move elements by dragging them to a new spot.
  • Duplicate, copy or delete an element by right-clicking it.
  • Change styles using the panel's tabs, typically Content, Style and Advanced.

Use your site's global styles. Your site's brand colors and fonts are set in Site Settings. Choose from these, rather than custom colors, so your pages stay consistent with your brand.

Check mobile and tablet views

Most visitors use phones, so always check how your page looks on smaller screens. Use the device icons in the top bar to switch between desktop, tablet and mobile views. You can adjust settings, like font size or spacing, separately for each device.

Preview and publish

  1. Click the Preview icon (an eye) to see the page as visitors will.
  2. Click Publish, or Update for a page that's already live, to save your changes.

You can also save your work as a draft from the menu next to the Publish button.

Undo mistakes

Elementor keeps a History of your changes:

  • Actions: step back through recent edits made in your current session.
  • Revisions: restore an earlier saved version of the page.

You can also use Ctrl + Z (Windows) or Cmd + Z (Mac) to undo.

Use templates

Elementor includes pre-designed page and section templates you can insert and customize:

  1. Click the template library icon in the empty area at the bottom of the page.
  2. Browse or search for a template, and click it to preview.
  3. Click Insert. If prompted, connect your Elementor account.

Tip: if your site has templates saved by Gate 39, such as branded sections, use those first so new content matches your design.

Advanced features (Elementor Pro)

  • Pop-ups: create pop-up forms and announcements under Templates > Popups.
  • Theme Builder: design site-wide headers, footers, blog layouts and product pages.
  • WooCommerce templates: customize your store's product and shop pages.

These features affect many pages at once. We recommend contacting Gate 39 before creating or changing them.

Keep your site fast and healthy

  • Optimize images before uploading. See How do I upload images to my media library?
  • Avoid adding lots of extra plugins or Elementor add-ons, which can slow your site.
  • Don't update Elementor yourself unless your site is backed up. Gate 39 handles plugin updates as part of site maintenance.

Need help? Contact the Gate 39 team through the Customer portal.

 

 References
[1] To Elementor – Elementor 4.0: The Atomic Editor Explained
[2] Elementor Developers – Elementor Editor 4.0 Developers Update
[3] Suki Marketing – Elementor V3 vs V4: What's Changed
[4] WPKoi – Bring Back the Classic Elementor Workflow
[5] Elementor Help – Get started with the Elementor Editor V4 (updated Sep 2, 2026)