Introduction to Elementor Basics

Elementor, a powerful WordPress page builder, empowers users to craft stunning websites without the need for coding expertise. At its core, Elementor revolves around fundamental building blocks that shape the website’s structure and aesthetics. Understanding these basics lays a solid foundation for harnessing Elementor’s capabilities to create captivating and functional web experiences.

Elementor, the free version, contains all the features to create a web page. As you may know, Elementor and Elementor Pro are 2 plugins that must be installed in WordPress. The free version doesn’t include the Header or Footer, or Pro widgets, among other features.
The Elementor’s Cloud Hosting Plan includes Elementor Pro which have all the features to create a complete website, hosted in the cloud.
Do you need a just the license of Elementor Pro to install in your hosting? Purchase the ai4k Web Kit, that includes the license (incredible price!) plus 10 Elementor Kits. Bulk discount also applies.
Do you prefer a one-to-one online course on Elementor Pro? Check it out here.

The Web Editor

When you open Elementor you will see three main parts: the left toolbar, the editor itself (central part), and the right toolbar (navigator).

Key Elements: Sections, Containers, and Widgets

How to change Elementor containers?

Before the Elementor Containers era (the current way to work in Elementor) it was needed the Elementor columns, Elementor sections, and Elementor inner sections configuration, and you needed to adjust them individually. Now, with Elementor Containers, you have containers that include elements named widgets.

You can create a group of containers, that includes widgets, and save the whole set as templates to be re-used in other parts of the web page or website. Most of the time on a web page you’ll have a separate part that has a title and a text, or a title, subtitle, a grid, and so on.
Those functionally separated sets I call web page sections (Elementor calls them blocks). So please don’t confuse the old Elementor sections with the web page sections.

In other words, on a webpage lies several web page sections (blocks), they are the primary functional segments that structure a webpage. Within these sections, containers act as the framework, providing the canvas to organize content with precision. Widgets, the elemental components, furnish the actual content—ranging from text and images to interactive elements like buttons and forms.

How to Change Elementor Grids?

You can nest containers inside containers (old inner sections, if you will) to create grids, however, the latest Elementor update includes the new Grid, another type of container to create grids easily.

Structuring with Sections and Containers

How to change Elementor layout?

Web Page Sections demarcate different parts of a webpage, enabling the arrangement of content vertically. Containers, on the other hand, nest within sections, allowing for more nuanced styling and layout control. These containers serve as the designated spaces to house widgets, facilitating a structured and aesthetically pleasing design.

Harnessing Columns and Widgets

How to change Elementor widgets?

Columns (or internal containers), residing within containers, form the grid system, accommodating various widgets. Widgets, the building blocks of content, offer a wide array of functionalities. From text boxes and image galleries to dynamic elements like sliders and forms, widgets empower the creation of diverse content types with ease.

Responsive Design and Flexibility

How to change the width of Elementor?

Elementor’s design philosophy is rooted in responsiveness. Utilizing flexbox technology, Elementor flex containers afford flexibility in arranging content across different screen sizes. This flexibility ensures that websites crafted with Elementor seamlessly adapt to various devices, offering a consistent and engaging user experience.

In your left panel, at the left of the Update (pink) button, you have the Responsive Mode tab. These mode enables de toolbar on top of your design area with all the available sizes. Define first desktop, then adjust the other device width dimensions to create a responsive website.

Flexbox Containers

What is a flexbox container in Elementor?

A flexbox container in Elementor refers to a layout element that utilizes the CSS Flexbox model to arrange its children (columns or widgets) horizontally or vertically within it. This container type offers enhanced control over alignment, distribution, and order of its contents.

How do I create a flexbox container in Elementor?

To create a flexbox layout, drag and drop column widgets onto the canvas, and they’ll automatically behave as flex containers, allowing for flexible content arrangement. You can create empty containers by hovering any container and click the “+” sign. And, you can copy and paste a container in the web editor (central part), or in the navigator toolbar.

What advantages does using a flexbox container offer in Elementor’s design?

Flexbox containers provide a more dynamic and responsive layout structure. They enable easy alignment, spacing, and reordering of elements within columns, facilitating the creation of complex and flexible page designs.

Can I control the alignment and spacing of elements within a flexbox container?

Elementor offers various settings to control the alignment, spacing, and distribution of elements within flexbox containers. Adjust settings like justify-content, align-items, align-self, and order to achieve the desired layout and appearance.

There are several settings that can be adjusted to change the container size. As I said in How to use Elementor Containers, I recommend create an external container “boxed” with the paddings for page style, and an internal container “full width” with no paddings.

Are there any limitations or considerations when using flexbox containers in Elementor?

While flexbox containers offer robust layout options, compatibility issues might arise with older browsers. Additionally, understanding the intricacies of flexbox properties is essential for leveraging its full potential in Elementor design.

Reusable Elements

What are reusable elements in Elementor?

Reusable elements in Elementor refer to specific sections, widgets, or designs that can be saved and reused across multiple pages or projects within the website. These elements maintain consistency and allow for easy updates.

Reusable Elements can be divided in Templates and Globals.

How do I create reusable elements in Elementor?

To create a reusable element, design a section, column, or widget, then right-click on it and select “Save as Template.” When prompted, choose a name for the template. Some elements like buttons can be saved as “Global”, which create a link to the original.

Global elements keep the link to all instances of that element across the website, meaning if you change that global element, the change is reflected on all elements where you used that element, from the moment the global element is created, and forward. However, you can unlink one of those instances to create a custom element.

How do I manage and access reusable elements in Elementor?

Reusable elements are managed in the “My Templates” section of Elementor. From here, you can edit, update, or delete reusable elements. Although the easy way to access the template is by clicking the “+” sign and then the folder icon, in any container to show the library window. That window show the “blocks” which are another way to call the lanpage sections, the page (yes you can insert a complete page), and the templates, which shows all your templates.

Templates & Kits

What are Elementor templates and template kits?

Elementor templates are pre-designed layouts or web page sections (they call it blocks) that can be easily imported and used in your projects. Template kits, on the other hand, are collections of templates designed around a specific theme or purpose, providing a cohesive set of designs for a complete website.

How can I access and use Elementor’s template library?

In Elementor, click the folder icon to access the template library. Browse through the available templates or kits, select the desired one, and import it into your project. You can then customize the imported templates to match your requirements.

What role do templates and kits play in the website design process with Elementor?

Templates and kits expedite the design process by providing ready-made designs and sections. They serve as starting points or inspirations, allowing users to customize and build websites more efficiently, saving time and effort.

How do Elementor Pro templates and kits differ from the free version?

Elementor Pro offers additional templates and kits that are more extensive, often tailored for specific businesses or purposes. The Pro version includes premium designs and features, providing users with a wider range of professional-grade templates and kits for more intricate designs.

Global Templates

What are global templates in Elementor?

Global templates in Elementor are reusable design elements or layouts that can be applied across multiple pages of a website. When changes are made to a global template, those alterations automatically reflect on all pages where the template is used.

How do I create global templates in Elementor?

To create a global template, design a section or layout, right-click on it, and select “Save as Template.” While saving, enable the “Save as Global” option. This ensures that any edits made to this template will be universally applied wherever it’s used.

What advantages do global templates offer in website design?

Global templates ensure consistency and efficiency in design. They allow for centralized control over specific design elements or sections across a website, making updates or modifications easier and faster without needing to edit each page individually.

Can I convert an existing Elementor template to a global template?

Unfortunately, Elementor doesn’t provide a direct conversion option from an existing template to a global template. However, you can recreate the design as a global template by saving it with the “Save as Global” option enabled and then applying it to other pages.

How do I manage and update global templates in Elementor?

To manage global templates, navigate to the “My Templates” section within Elementor. From there, you can edit, update, or delete global templates. Any changes made to a global template will automatically reflect on all pages using that template.

Container vs Section

What is the difference between an Elementor container and a web page section?

How to change Elementor web page section?

A web page section is the primary building block that holds content vertically on a webpage. A section can be a container itself, let’s say the most external container. Working with containers can be complicated if you don’t follow some rules, please visit Working with Elementor Containers for more information.

In essence a web page section is a functional part of the landpage more than an Elementor thing. It represents larger segments and can contain multiple containers, while a container is a part of a web page section that holds individual pieces of content (text, images), providing additional styling options within the external container.

When would you use each component?

Use a web page sections when structuring the overall layout of your webpage. Sections help divide content into distinct segments, for example the “testimonials section”. In this section you may have 2 internal containers: one for the title, and another for a carousel.

Web page sections establish the broader structure, while containers refine the layout within those sections. Web page sections can be saved as single templates (or Elementor Blocks as Elementor calls it). At the end you will have a big collection of sections that will help you build landing pages quickly.

How do I change an Elementor container to a section or vice versa?

Elementor doesn’t have a direct option to convert a container into a section or vice versa. However, you can recreate the structure by copying content from one to another, ensuring you maintain the layout and styles.

Can I nest Elementor containers inside each other?

Yes, Elementor allows nesting containers within each other. This can be useful for creating complex layouts and precisely controlling the styling of individual content blocks within a section.

How can I control the layout within containers and sections?

Elementor provides various layout and styling options within containers. Use the (new) column and row settings to adjust widths, alignments, padding, and margins to achieve the desired layout within these elements. Flexbox and other display settings can also influence the layout behavior.

Nested Containers

What are nested containers in Elementor?

Nested containers refer to the placement of one container inside another within Elementor’s page structure. This technique allows for intricate layout designs by nesting smaller containers within larger ones, providing granular control over content placement and styling.

You can use as well the feature Grid to easily create a container grids layout.

When you hover any container and click the “+” sign, then the “+” again, a window like the following shows up. Flexbox and Grid are the same type of containers, but the latter keeps a restriction on the symmetry in rows and columns.

How do I create nested containers in Elementor?

To create nested containers, first, design the primary container. Then, drag a new container widget into an existing container. You’ll see it placed inside, allowing you to style it independently within the parent container.

What benefits do nested containers offer in Elementor?

Nested containers enable the creation of intricate and detailed layouts. They provide a hierarchical structure for content organization, allowing for more precise styling, layout control, and the creation of visually appealing designs with diverse content blocks.

Can I nest multiple levels of containers within Elementor?

Elementor allows for multiple levels of nesting. You can create containers inside containers, forming multi-tiered structures to meticulously arrange content and design complex layouts.

Are there any limitations or considerations when using nested containers?

While nested containers offer versatility, excessive nesting might complicate the design process. Additionally, excessive nesting could potentially impact page loading times if not optimized correctly. It’s essential to strike a balance between design complexity and performance optimization.

The landpage Section can be created without the use of an external container, by correctly adjusting the adjacent containers, in vertical order.

Elements & Containers

What are elements in Elementor? How do they relate to containers?

Elements in Elementor refer to individual content widgets like text, images, buttons, etc. They are placed inside containers. Containers provide the structural framework, while elements are the actual content within these structures.

How do I add elements like text or images inside an Elementor container?

To add elements inside a container, open Elementor, drag and drop the desired element widget from the left panel into the container area where you want it placed. You can then customize and style these elements individually.

Can I control the size and dimensions of elements within containers?

Elementor allows precise control over element size and dimensions within containers. Use the widget’s settings or the column and row settings to adjust widths, heights, padding, and margins to achieve the desired appearance.

What role do containers play in managing elements on a webpage?

Containers serve as organizational units that hold elements together. They provide layout control, allowing for the structuring and styling of elements, ensuring a cohesive and visually appealing design.

How do I make an entire Elementor container clickable or tappable?

To make a container clickable, add a link to any element within the container, like text or a button, or to the container itself.

How to Change Elementor