How to use Elementor: containers, global styles, responsive design, and performance

Elementor is a page builder plugin that lets you design WordPress pages without writing code, using drag and drop while seeing changes immediately. The essence of how to use Elementor comes down to four steps: first define global colors and fonts in Site Settings, build the page with containers, check every section separately in tablet and mobile modes, and finally enable Elementor’s own performance settings.

This guide was prepared for beginners; every setting and menu name described is based on documentation in Elementor’s official help center. Menu names may vary slightly by version, but the underlying logic is the same.

What is Elementor, and how does it work?

Elementor is a visual editor running within WordPress: elements (widgets) from the left panel are dragged onto the page, their settings are changed through the panel, and the result is visible on the same screen. The free version of the plugin provides basic layout and content elements; Elementor Pro adds extra tools such as a theme builder, forms, and popups. Which version is sufficient depends on the website’s needs.

Two generations of editors coexist in Elementor. In the long-established 3.x editor, each element has Content, Style, and Advanced tabs. According to Elementor’s help documentation, the V4 editor manages styles through classes, uses two tabs for each element, General and Style, and has V4 elements enabled by default in Elementor 4.x releases. V4 elements fit inside existing 3.x containers and work alongside older pages.

A page builder is not mandatory for every website. WordPress’s own block editor may be enough for simple pages; for visually distinctive corporate and campaign pages containing many different section layouts, a tool such as Elementor speeds up editing. The general framework for the platform decision is addressed in the WordPress or a website builder comparison.

Before you begin: installation and initial settings

Organizing the plugin’s and website’s basic settings before starting page design with Elementor prevents the need for page-by-page corrections later. Elementor is installed through the Plugins section in the WordPress dashboard; choosing a lightweight theme compatible with Elementor reduces conflicts with the theme’s own styles.

The server must also meet the plugin’s requirements. According to Elementor’s system requirements page, the plugin works on WordPress 6.5 and above with a minimum of PHP 7.4, although PHP 8.x is recommended; a WordPress memory limit of at least 256 MB is required, with 512 MB recommended. If the editor panel does not load or errors occur while saving, this memory limit is often the first place to look.

The Settings screen under the Elementor menu in the WordPress dashboard lets you determine which content types will use Elementor and choose whether default colors and fonts are managed by the theme or Elementor. The option on the same screen allowing unfiltered file uploads, such as SVG and JSON, should be enabled only when truly necessary because, according to Elementor’s own warning, it poses a security risk.

Understanding containers: what replaced sections and columns?

In Elementor, pages are now built with containers instead of sections, columns, and inner sections. According to Elementor’s container documentation , flexbox-based containers allow the width, height, and order of their elements to adapt to the available space; they offer better page loading and more responsive controls. The container is the default layout element on new Elementor websites.

A container arranges its elements horizontally (row) or vertically (column); this direction can be set separately for each device size. Three cards placed side by side on desktop are stacked on mobile by changing the same container’s direction. There is also a separate grid container for regular grids consisting of rows and columns.

Pages built with older sections and columns can be converted using the “Convert to container” option. Elementor states that this is a one-way process and that a page converted to containers cannot be returned to the section-and-column structure; the page should be backed up before conversion.

Building your first page with containers step by step

When a new page is built as blocks, each serving a single purpose, both editing and mobile adaptation become easier. For a simple service page, the workflow is as follows:

1. Create a new page in WordPress and press the “Edit with Elementor” button.
2. Add a container using the plus icon on the canvas; each main section of the page, such as introduction, services, process, and contact, becomes a separate top-level container.
3. Add heading, short text, and button elements to the introductory section; choose the heading element’s HTML tag so that H1 is used once on the page.
4. Create a container for service cards, set its direction to row, and use an inner container for each card.
5. Set spacing and alignment through the container’s gap and alignment settings rather than on individual elements.
6. Save sections that will be reused, such as a contact call to action, as templates.
7. Publish the page after checking it in tablet and mobile modes.

Using more nested containers than necessary needlessly enlarges the page’s HTML structure. Elementor’s container and performance documentation demonstrates with an example that building the same design with fewer containers reduces the page’s load.