Elementor is one of the most popular WordPress page builders available, and for good reason. It puts genuine design control in the hands of people who are not developers - letting you build complex, responsive page layouts through a visual drag-and-drop interface without writing a single line of code.
Like any powerful tool, understanding it properly makes the difference between a polished result and a frustrating experience. This guide covers what you need to know to get started effectively.
Elementor Free vs. Elementor Pro
Elementor has a free version available in the WordPress plugin directory and a paid Pro version. Understanding the distinction saves you from discovering limitations after you have already committed to a design approach.
Elementor Free includes a solid set of basic widgets (text, image, button, video, divider, and others), the visual drag-and-drop editor, and access to a library of free templates and blocks. For simple pages and basic site layouts, the free version is genuinely capable.
Elementor Pro adds considerably more: a Theme Builder that lets you design headers, footers, single post templates, and archive pages with the same visual editor; a significantly larger widget set including forms, sliders, countdown timers, and WooCommerce product widgets; and access to Elementor's full template library. For a complete site build where you want visual control over every element including the header and footer, Pro is effectively necessary.
Pro pricing is annual and per-site. It is a legitimate investment for a site you are building seriously, but the free version is worth starting with to understand the interface before committing.
The Elementor Interface
When you open a page in Elementor, the screen splits: the left panel is your widget and settings panel, and the right side is a live preview of your page.
Sections are the outermost containers - they span the full width of the page. Every piece of content sits inside a section. Click the plus button in the canvas to add a new section and choose how many columns it should have.
Columns divide the section horizontally. A two-column section might hold an image on the left and text on the right. You can resize columns by dragging their edges.
Widgets are the actual content elements - text editors, images, buttons, icons, headings, videos, and more. Drag a widget from the left panel into a column in the canvas to add it. Click any element in the canvas to select it and edit its settings in the left panel.
The left panel shows three tabs when an element is selected: Content (what the element says or contains), Style (colours, typography, spacing), and Advanced (margins, padding, motion effects, responsive visibility).
Using Templates and Blocks
Elementor's template library is one of its most time-saving features. Click the folder icon in the top bar of the editor to open it. You will find:
- Pages: complete page designs you can import as a starting point
- Blocks: individual sections (hero areas, feature rows, testimonial sections, pricing tables) that you can drop into an existing page
Importing a template replaces the entire page content, so do this on a new page or one you are comfortable overwriting. Blocks insert into a specific position and are more useful for mixing and matching components.
Responsive Editing
Every layout you build in Elementor can be previewed and adjusted for different screen sizes. At the bottom of the editor, use the device icons to switch between Desktop, Tablet, and Mobile views.
Many settings - font sizes, padding, element visibility - can be set differently for each breakpoint. This means you can hide an element on mobile that looks fine on desktop, or use a smaller font size for narrow screens. Always check your mobile view before publishing; layouts that look great on desktop can break significantly on smaller screens.
When to Use Elementor vs. the WordPress Block Editor
The WordPress block editor (Gutenberg) has improved significantly and is the right tool for content-heavy sites - blogs, news sites, documentation. It is faster, lighter, and works with WordPress's native content model.
Elementor shines when design precision matters more than content volume: landing pages, service pages, portfolio pages, and any page where you want pixel-level control over layout without writing custom CSS. For a primarily editorial site with many posts, the block editor is probably the better foundation. For a brochure site, portfolio, or business site where visual design is central, Elementor earns its place.
