Elementor lets you design WordPress pages visually, but getting good results quickly takes more than dragging widgets onto a page. This guide goes past the basics: how the editor is organised, how to build layouts that hold up on phones, how to style a whole site once, what Elementor Pro adds, and how to keep an Elementor site fast and trouble-free on Domain India hosting.
If you haven't built a page yet, read How to use Elementor: quick start first. It covers installing Elementor, opening the editor and publishing your first page. This guide picks up from there.
Build every layout from containers and set spacing on the container, not with spacer widgets. Define colours, fonts, variables and classes once in Site Settings and reuse them everywhere. Check each page at the tablet and mobile breakpoints before publishing. Use Elementor Pro only for what the free plugin can't do: the Theme Builder, popups, forms and dynamic content. On Domain India shared hosting, which runs Apache, cache with WP Super Cache or W3 Total Cache.
1. Know the editor
At the time of writing (September 2026), the current release line is Elementor 4.x. Version 4 introduced the Atomic Editor, with new building blocks, global Variables and Classes, and flexbox and grid containers. Classic widgets still work, so older tutorials mostly apply, but some panel names have moved.
The tools you will use most:
2. Build layouts with containers
Modern Elementor pages are made of containers. A container arranges what is inside it in a row or a column (flexbox), or in a grid.
- Plan the sections.Sketch the page as stacked sections: hero, services, testimonials, contact.
- One container per section.Set its content width (boxed or full width) and its padding.
- Nest for columns.Put two or three child containers inside a section for columns, or switch the parent to grid layout for evenly sized cards.
- Use gap and alignment, not spacers.The container's gap, justify and align settings space the items evenly and adapt on smaller screens.
- Name your containersin the Navigator ("Hero", "Pricing cards"), so the page stays easy to edit later.
Keep nesting shallow: every extra container adds markup, and deep nesting is a common reason an Elementor page feels heavy.
3. Make it work on phones
Most visitors to Indian small-business sites arrive on a phone, so design for mobile from the start:
- Breakpoints. Elementor has desktop, tablet and mobile views by default. Extra breakpoints, such as a wide screen or a large phone, can be added in Site Settings under Layout.
- Per-device values. A setting changed in the mobile view applies only to mobile and smaller. Use this for font sizes, padding and the direction of a row (row on desktop, column on mobile).
- Hide with care. A hidden element still loads, so prefer one layout that adapts over duplicate desktop and mobile sections.
4. Style the whole site once
Define colours and fonts globally instead of on every heading:
- Global colours and fonts in Site Settings. Change your brand colour once and every element that uses it updates.
- Variables (Elementor 4) store a value, such as a colour or a size, that you can reuse across elements.
- Classes (Elementor 4) are named sets of styles, such as "card-title", that you apply to many elements, like CSS classes.
- Theme style in Site Settings sets default typography, buttons, links and form fields for the whole site.
Custom CSS on an individual element is an Elementor Pro feature. In the free version, add site-wide CSS in the WordPress Customizer under Additional CSS.
5. Templates and kits
- Save your own templates. Right-click a container and choose Save as Template to reuse a section on other pages.
- The template library (the folder icon on the canvas) holds ready-made pages and blocks. Replace every placeholder, and switch the design to your global colours.
- Export and import templates and whole website kits to move a design between sites, for example from a staging copy.
6. What Elementor Pro adds
| Feature | Free | Pro |
|---|---|---|
| Containers, basic widgets, responsive editing | Yes | Yes |
| Global colours, fonts and Site Settings | Yes | Yes |
| Entrance animations | Yes | Yes |
| Theme Builder: header, footer, single post, archive, 404 | No | Yes |
| Popup Builder | No | Yes |
| Form widget with actions such as email and webhooks | No | Yes |
| Dynamic content from custom fields | No | Yes |
| WooCommerce Builder for product, cart and checkout pages | No | Yes |
| Scrolling and mouse motion effects | No | Yes |
| Custom CSS per element | No | Yes |
Buy Pro when you need one of these, not before. Download it only from elementor.com: "nulled" copies of Elementor Pro are a common way WordPress sites get hacked.
Dynamic content fills a widget from the current post or a custom field (for example from Advanced Custom Fields), so one Theme Builder template can show every product, property or team member.
7. Keep it fast
Page builders add CSS and JavaScript to every page. These habits keep that under control:
Our cPanel, DirectAdmin and Webuzo servers use the Apache web server, so the LiteSpeed Cache plugin can't do its page caching here. Use WP Super Cache or W3 Total Cache. On cPanel, a server-side cache in front of Apache may also serve the previous copy of a page for up to 120 minutes; add ?t=1 to the URL to see what the server really returns.
For more, see optimizing WordPress and my website is slow.
8. Troubleshooting
- The editor loads forever or shows a grey screen. Usually a plugin conflict or a low PHP memory limit. Turn on Safe Mode (Elementor › Tools) to load the editor without other plugins; if it works, reactivate plugins one by one. For memory, see PHP memory limit.
- The layout looks broken after an update. Go to Elementor › Tools and use Regenerate Files & Data, then clear your caching plugin.
- "Resource Limit Is Reached" while editing. The editor sends many requests at once. See fixing resource limit errors on WordPress.
- Changes don't show to visitors. Clear the page cache, then check the URL with
?t=1. - A large file won't upload. Upload limits are 256 MB on our cPanel servers and 64 MB on DirectAdmin.
9. Running Elementor on Domain India
Elementor runs on every Domain India shared hosting plan with WordPress. Install WordPress with Softaculous (cPanel and DirectAdmin) or WP Toolkit (cPanel), then add Elementor. New cPanel accounts default to PHP 8.3, well above Elementor's minimum. For a complete WordPress walkthrough, see mastering WordPress. If you'd rather not build pages yourself, the AI Website Builder creates a business site from a description.
- 25 GB NVMe SSD Storage
- 50 GB Monthly Bandwidth
- 1 Website
- 10 Email Accounts
The price on the card is a live Domain India list price and excludes 18% GST.
Frequently asked questions
What is the difference between Elementor and Elementor Pro?
The free Elementor plugin includes the drag-and-drop editor, containers, basic widgets, responsive editing and global styles. Elementor Pro adds the Theme Builder for headers, footers and templates, the Popup Builder, the Form widget, dynamic content, the WooCommerce Builder, motion effects and custom CSS per element.
Should I use sections and columns or containers in Elementor?
Use containers. They are the current layout system, based on flexbox and grid, and produce lighter pages than the older sections and columns. Older pages keep working, and you can rebuild them with containers over time.
Which caching plugin should I use with Elementor on Domain India?
Domain India shared hosting runs the Apache web server, so use WP Super Cache or W3 Total Cache rather than LiteSpeed Cache. Clear the cache after you edit a page.
Why does my Elementor layout break after an update?
Usually the generated CSS files are out of date or a cached copy is being served. Go to Elementor › Tools, use Regenerate Files & Data, and clear your caching plugin and browser cache.
Ready to build? Host your site on cPanel hosting or see WordPress hosting, and start with the Elementor quick start if you're new.
WordPress-ready shared hosting with one-click installs, free SSL and weekly backups.
See cPanel plans