Elementor Tutorial: Design WordPress Pages Visually

Elementor is the most popular visual page builder for WordPress, empowering users to design professional-grade web pages without writing a single line of code. This Elementor tutorial covers everything you need to create stunning pages, from understanding the interface to building complete website templates.

For Singapore businesses investing in their online presence, Elementor eliminates the traditional barrier between design vision and technical execution. Instead of describing what you want to a developer and waiting days for revisions, you can drag, drop and see changes in real time. Our web design team uses Elementor extensively for client projects, and in this guide we share the workflow and techniques that produce the best results.

This tutorial covers Elementor installation, a thorough interface overview, working with widgets and templates, responsive editing for mobile-first Singapore audiences, the Theme Builder for headers and footers, the Popup Builder for lead generation and performance optimisation tips to keep your site fast.

Installing Elementor

Elementor comes in two versions: a free version with essential features and Elementor Pro with advanced capabilities like the Theme Builder, Popup Builder, custom forms and WooCommerce widgets.

Installing Elementor Free:

Log in to your WordPress dashboard
Navigate to Plugins → Add New
Search for “Elementor” in the plugin search bar
Click Install Now on the Elementor Website Builder plugin by Elementor.com
Click Activate once installation completes

Installing Elementor Pro:

Purchase a licence from elementor.com (plans start from USD 59 per year)
Download the Pro plugin file from your Elementor account
Go to Plugins → Add New → Upload Plugin
Upload the ZIP file and click Install Now
Activate the plugin and enter your licence key under Elementor → Licence

Recommended theme pairing: Elementor works with any WordPress theme, but pairing it with a lightweight, Elementor-optimised theme delivers the best performance. Hello Elementor (Elementor’s own theme), Astra, GeneratePress and Kadence are all excellent choices. If you need a full guide on setting up WordPress first, check our WordPress tutorial.

Initial settings: After activation, go to Elementor → Settings. Under the General tab, choose which post types Elementor can edit (typically Pages and Posts). Under the Style tab, set default fonts and colours that align with your brand guidelines.

Understanding the Interface

The Elementor editor is where all the design work happens. Understanding its layout accelerates your workflow significantly.

Opening the editor: Create a new page or edit an existing one, then click the “Edit with Elementor” button. The editor loads with a live preview of your page on the right and a control panel on the left.

Key interface elements:

Left panel — contains the widget library, page settings, navigator and global settings
Canvas area — the live preview where you drag, drop and arrange elements
Sections — the largest structural unit, spanning the full width of the page
Columns — subdivisions within sections that hold widgets side by side
Widgets — individual content elements like headings, images, buttons and forms

The page structure: Every Elementor page is built using a hierarchy: Sections contain Columns, and Columns contain Widgets. Click the plus icon in the canvas to add a new section, choose a column structure (full width, two columns, three columns, etc.) and then drag widgets into the columns.

The Navigator: Click the Navigator icon (layer stack) in the bottom-left corner to see a tree view of your entire page structure. This is invaluable for complex pages with many nested elements. You can rename, reorder, hide and find elements quickly through the Navigator.

Right-click context menu: Right-clicking any element reveals options to copy, paste, duplicate, delete, save as a template or copy and paste styles between elements. The “Paste Style” feature is particularly useful for maintaining design consistency across your pages.

Working with Widgets

Widgets are the building blocks of your Elementor pages. The free version includes around 40 widgets, while Pro adds over 50 more.

Essential widgets for business websites:

Heading and Text Editor — for titles, paragraphs and formatted content
Image and Image Gallery — display single images or visual grids
Button — call-to-action buttons with customisable text, colours and links
Icon Box and Image Box — feature highlights combining icons or images with text
Testimonial and Reviews — showcase customer feedback
Google Maps — embed a map showing your Singapore business location
Form (Pro) — create contact forms, enquiry forms and lead capture forms
Slides and Carousel — rotating content for hero sections or product showcases

Customising a widget: When you click on any widget, the left panel displays three tabs:

Kandungan — the widget’s content settings (text, images, links)
Style — visual styling (colours, typography, spacing, borders, shadows)
Advanced — layout controls (margin, padding, motion effects, responsive visibility, custom CSS)

Global widgets: If you use the same widget across multiple pages (e.g., a call-to-action banner), save it as a Global Widget. Any changes you make to the global widget update everywhere it appears — a massive time-saver for maintaining consistency.

Using Templates and Blocks

Elementor’s template system lets you start with pre-designed layouts and customise them to suit your brand, dramatically reducing design time.

Accessing the template library: Click the folder icon in the Elementor editor to open the template library. You will find two categories:

Pages — complete page layouts for home pages, about pages, service pages, landing pages and more
Blocks — individual sections like hero banners, feature grids, pricing tables, team sections and footers

Inserting a template: Browse the library, preview templates and click Insert to add one to your page. You can insert multiple blocks to build a page section by section, mixing and matching different design styles.

Customising templates: After inserting a template, replace placeholder content with your own text, images and links. Adjust colours, fonts and spacing to match your brand identity. Templates are starting points, not finished products — always tailor them to your specific business and audience.

Saving your own templates: Once you have designed a section or page you are happy with, right-click and select “Save as Template”. Your saved templates appear under My Templates for reuse across your site. This is particularly useful for maintaining consistent layouts across service pages, blog posts or landing pages used in digital marketing campaigns.

Importing and exporting: Elementor templates can be exported as JSON files and imported into other WordPress sites. This makes it easy to replicate designs across multiple projects or share templates with team members.

Responsive Editing for Mobile

With over 70 per cent of web traffic in Singapore coming from mobile devices, responsive design is not optional — it is fundamental. Elementor provides granular control over how your pages appear on different screen sizes.

Switching between views: At the bottom of the Elementor panel, click the responsive mode icon to toggle between Desktop, Tablet and Mobile views. Each view shows exactly how your page will look on that device type.

Device-specific adjustments: Many widget settings display a small device icon next to them. Click this icon to set different values for desktop, tablet and mobile. Common adjustments include:

Font sizes — reduce heading sizes on mobile for readability
Padding and margins — tighten spacing on smaller screens
Column order — reverse column stacking so the most important content appears first on mobile
Keterlihatan — hide certain elements on mobile if they do not add value on small screens

Mobile-first design tips for Singapore audiences:

Ensure tap targets (buttons, links) are at least 44 by 44 pixels
Use single-column layouts on mobile for most content sections
Keep forms short — mobile users abandon lengthy forms
Test your pages on actual devices, not just the Elementor preview
Optimise images for mobile to reduce data usage on mobile networks

Breakpoint customisation (Pro): Elementor Pro lets you add custom breakpoints beyond the default desktop, tablet and mobile. This is useful if your analytics show significant traffic from specific device sizes, such as the iPad Mini or large Android phones popular in the Singapore market.

Theme Builder: Headers, Footers and More

Elementor Pro’s Theme Builder lets you design every part of your WordPress theme visually — headers, footers, single post templates, archive pages and even 404 error pages.

Accessing the Theme Builder: Go to Templates → Theme Builder in your WordPress dashboard. You will see a visual map of all the template types you can create.

Building a custom header:

Click Header → Add New
Choose a pre-designed header template or start from scratch
Add your logo using the Site Logo widget
Add navigation using the Nav Menu widget
Include a call-to-action button (e.g., “Get a Free Quote”)
Style the header with your brand colours and set a sticky header effect so it remains visible as users scroll
Set display conditions — typically “Entire Site” to apply the header globally

Building a custom footer:

Click Footer → Add New
Design a footer with columns for contact information, quick links, social media icons and a copyright notice
Include your Singapore business address, phone number and email
Add links to legal pages (Privacy Policy, Terms of Service)
Set display conditions to “Entire Site”

Single post templates: Design custom layouts for blog posts that include the post title, featured image, content area, author bio, related posts and social sharing buttons. A well-designed blog template supports your content marketing strategy by improving readability and engagement.

Elementor Pro’s Popup Builder creates high-converting popups without additional plugins. This is a powerful tool for lead generation and customer engagement.

Creating a popup:

Go to Templates → Popups → Add New
Name your popup and choose a pre-designed template or start from a blank canvas
Design the popup using Elementor widgets — typically a heading, text, image and a form
Configure popup settings: size, position, animation and overlay options
Set trigger conditions: on page load (with delay), on scroll, on click or exit intent
Set display conditions: specific pages, post types, logged-in status, etc.
Set frequency rules: show once per session, once per day or custom intervals

Effective popup types for Singapore businesses:

Email signup — offer a discount code or free resource in exchange for an email address
Exit intent — display a last-chance offer when users are about to leave
Announcement bar — promote sales events, new products or free delivery thresholds
Cookie consent — comply with PDPA requirements by notifying visitors about data collection
WhatsApp chat — trigger a WhatsApp conversation for immediate customer support

Best practices: Do not overwhelm visitors with multiple popups. Limit yourself to one or two per page, use appropriate timing (do not trigger immediately on page load) and always provide a clear close button. Test different designs and triggers to find what converts best for your audience.

Performance Optimisation Tips

Elementor adds JavaScript and CSS to your pages, which can impact load times if not managed properly. Here are proven strategies to keep your Elementor-built site fast.

Built-in optimisation features: Go to Elementor → Settings → Performance and enable:

Improved Asset Loading — loads only the CSS and JavaScript needed for each page
Optimised DOM Output — reduces unnecessary HTML wrapper elements
Google Fonts loading — set to “Swap” for better perceived performance

Image optimisation: Compress and resize images before uploading. Use a plugin like ShortPixel or Smush to automatically optimise images. Serve images in WebP format where possible. Avoid uploading images larger than the maximum display size on your site.

Minimise widget usage: Every widget adds code to your page. Use the most efficient widget for the job — for example, use a single Text Editor widget with formatted HTML instead of multiple separate Heading and Text widgets when they appear sequentially.

Caching: Install a caching plugin such as LiteSpeed Cache, WP Super Cache or W3 Total Cache. Caching stores static versions of your pages, reducing server processing time. If your host provides built-in caching (common with managed WordPress hosts), use that instead of a third-party plugin.

Lazy loading: Enable lazy loading for images and videos so they only load when they enter the viewport. Elementor includes a built-in lazy load option for images.

Regular performance testing: Use Google PageSpeed Insights to test your pages and identify issues. Aim for a performance score above 80 on both mobile and desktop. Monitor Core Web Vitals — Largest Contentful Paint, Cumulative Layout Shift and Interaction to Next Paint — as these directly affect your SEO rankings.

Soalan Lazim

Is Elementor Free enough for a business website?

Elementor Free is capable enough for simple business websites. However, if you need custom headers and footers, forms, popup builders, WooCommerce integration or advanced widgets like pricing tables and countdown timers, Elementor Pro is worth the investment.

Will Elementor slow down my website?

Elementor can add extra code to your pages, but with proper optimisation — enabling improved asset loading, using a caching plugin, optimising images and choosing a lightweight theme — you can maintain excellent load times. The performance tips in this tutorial address the most common speed issues.

Can I use Elementor with WooCommerce?

Yes. Elementor Pro includes dedicated WooCommerce widgets for product grids, product pages, cart, checkout and my account pages. You can design every aspect of your online store visually. See our WooCommerce tutorial for setting up the e-commerce foundation.

What happens to my content if I stop using Elementor?

If you deactivate Elementor, your content remains on your site but loses its visual formatting. Text and images revert to basic WordPress styling. You can use a migration tool to convert Elementor content to standard WordPress blocks, though some design complexity may be lost.

How do I create a landing page with Elementor?

Create a new page, edit it with Elementor, and set the page layout to “Elementor Canvas” (removes the header and footer) or “Elementor Full Width” (keeps header and footer but removes sidebars). Use the template library to insert a landing page template, then customise it for your campaign. Landing pages are essential for Iklan Google and paid social media campaigns.

Can multiple team members work on Elementor pages simultaneously?

WordPress does not support simultaneous editing of the same page. However, different team members can work on different pages at the same time. Elementor Pro includes role management settings that let you control which team members can access the editor and which features they can use.

Elementor Tutorial: Design WordPress Pages Visually