Elementor Guide: Install, Site Settings, Pages, Templates and Speed

This article is a localized edition of the Japanese original. Read the Japanese original

Elementor is a WordPress page builder plugin that lets you lay out pages by dragging and dropping. This article walks through everything from installation to your first page, plus the settings that start to matter once the site is running (templates, revisions and performance).

Screen names and menu locations match Elementor 4.4 (free version) as of November 2026. In Elementor 4.x the admin menu was reorganized, and items such as "Settings", "Tools" and "Element Manager" are grouped under "Elementor" → "Editor" in the admin screen. In older versions they sit directly under the "Elementor" menu.

Free vs. Pro

The free version already covers page building, the main widgets (Heading, Text Editor, Image, Button and so on), Site Settings, and saving and exporting templates. Elementor Pro is a separate paid plugin that you add on top of the free version. Pro adds features such as:

• Theme Builder: build the parts your theme outputs, such as the header, footer and single post pages, with Elementor
• Form widget: build contact forms inside Elementor
• Popups and other widgets and templates that the free version lacks

Pricing and license types can change, so check the official Elementor website before you buy.

Requirements (as of November 2026)

According to the system requirements in Elementor's official help center (updated October 16, 2026):

You can check the memory limit under "Tools" → "Site Health" → "Info" tab, in the "WordPress Constants" and "Server" sections. If it is too low, see how to fix the WordPress PHP memory error.

Step 1: Install and activate

In the admin screen, go to "Plugins" → "Add New Plugin", search for "Elementor", then click "Install Now" and "Activate". If you can use WP-CLI, these commands do the same:

# Free version (the wordpress.org plugin slug is elementor)
wp plugin install elementor --activate

# For Elementor Pro, download the zip from your account on the official site first
wp plugin install ./elementor-pro.zip --activate

Elementor Pro does not work unless the free Elementor plugin is active. After installing Pro, activate your Pro license.

Step 2: Set colors, fonts and width in Site Settings

Before you start building pages, decide the site-wide colors, fonts and width in "Site Settings". That way you can change them all at once later.

1. Open any page with "Edit with Elementor" (see Step 3).
2. In the bar at the top of the editor, click the Elementor logo at the far left and open "Site Settings" from the menu.
3. Configure the items below and click "Save Changes".

If you pick these global colors and global fonts when styling widgets, changing Site Settings updates every page that uses them. Colors typed directly as color codes in individual widgets are not linked this way.

If you want to keep the theme's own colors and fonts, go to Elementor's "Settings" → "General" tab in the admin screen and check "Disable Default Colors" and "Disable Default Fonts".

For how container width and spacing work, see Elementor layout settings.

Step 3: Build a page

1. Go to "Pages" → "Add New Page", enter a title and click "Edit with Elementor" at the top. For an existing page, hover over it in the page list and an "Edit with Elementor" link appears.
2. In the editor canvas, click "+" to add a container and choose its structure (one column, two columns and so on). The template icon also lets you load ready-made designs.
3. Drag widgets from the left panel into the container, then set their content and style in the panel.
4. Click "Publish" at the top right. To stop partway, choose "Save Draft" from the arrow next to the Publish button.

Commonly used widgets:

• Heading: set the heading text and its HTML tag (H1 to H6 and so on). Choose the tag that fits the page's heading structure
• Text Editor: add paragraphs, lists and other text
• Image: show an image from the Media Library. The alt text set in the Media Library is used
• Button: place a button that links to a URL

To undo an action while editing, use Ctrl + Z (Cmd + Z on a Mac). To go back to a saved state, see how to restore an earlier state with Elementor revisions.

Step 4: Save as a template and move it to another site

Save a page you built as a template so you can reuse it on other pages.

1. In the editor, click the arrow next to the Publish button and choose "Save as Template".
2. Enter a name for the template and save it.

Saved templates are listed under Elementor's "Templates" → "Saved Templates" in the admin screen. To move one to another site:

1. On the source site, hover over the template in the "Saved Templates" list and click "Export Template". A JSON file is downloaded.
2. Install Elementor on the destination site, click "Import Templates" on the same list screen and choose the JSON file.

The JSON contains the layout and settings, and images are stored as URLs. During import, the destination site downloads the images from those URLs into its Media Library, so images cannot be imported if the source site is not reachable from outside (for example, a staging site behind Basic authentication). Templates that use Pro widgets also need Elementor Pro on the destination site.

Step 5: Keep revisions under control

Every time you save in Elementor, WordPress creates a revision, and Elementor's layout data (the _elementor_data post meta) is stored with each revision too. Repeated edits make the database grow, so limit the number of revisions kept in wp-config.php.

<?php
// Keep only the latest 10 revisions per post
define( 'WP_POST_REVISIONS', 10 );

If you want to delete old revisions that have already piled up, back up the database first and check how many there are before deleting.

wp db export before-revision-cleanup.sql
wp post list --post_type=revision --format=count

The deletion steps and caveats are covered in how to delete WordPress revisions from the database. Deleted revisions cannot be restored.

Step 6: Review the performance settings

Elementor's "Settings" → "Performance" tab in the admin screen groups the settings that affect page speed.

Caching plugins also offer image lazy loading and CSS optimization. Enabling the same feature in both can break the layout, so enable it in only one of them and check the live page after each change.

Turn off widgets you do not use

You can disable unused widgets in Elementor's "Element Manager" in the admin screen. Disabled widgets no longer appear in the editing panel and are no longer registered.

To do it in code, call unregister() on the elementor/widgets/register hook. The example below turns off the Counter, Progress Bar and Testimonial widgets. Put it in your child theme's functions.php or in your own plugin.

<?php
add_action( 'elementor/widgets/register', function ( $widgets_manager ) {
	$widgets_manager->unregister( 'counter' );
	$widgets_manager->unregister( 'progress' );
	$widgets_manager->unregister( 'testimonial' );
}, 100 );

With either method, pages that already use that widget will stop showing it. Before turning a widget off, check that no page uses it.

Notes

• Elementor writes each page's CSS to wp-content/uploads/elementor/css/. If this folder is not writable, the live page's design breaks. As WordPress recommends, use 755 for directories and 644 for files as the baseline.
• If you edit a theme directly, a theme update wipes out your changes. Use a child theme when you change theme files.
• If only one of Elementor and Elementor Pro is out of date, things may not work correctly. Keep both on the latest version.
• If the editor will not open, you cannot save, or only the live page looks broken, see how to fix Elementor errors and what to do when Elementor widgets do not show up.

Summary

• First set global colors, global fonts and content width in Site Settings, and pick them when styling widgets
• Build pages from "Edit with Elementor" by adding containers and dragging in widgets
• Save layouts you reuse as templates, and move them to other sites by exporting and importing JSON
• Limit revisions with WP_POST_REVISIONS, and back up the database before deleting any
• Use the Performance tab and Element Manager to cut down what gets loaded

Questions about WordPress? The publisher of this site is based in Japan and replies in Japanese. Contact (Japanese)