Websites and Tech

Page Builder

Also called drag-and-drop builder, Elementor, Divi

A visual tool, such as Elementor or Divi, that lets you design web pages by dragging and arranging blocks instead of editing code.

Quick facts: Page Builder

Category
Websites and Tech
Also called
drag-and-drop builder, Elementor, Divi
Level
Beginner
Affects
Page speed and Core Web Vitals, heading structure, editing workflow, cost of future redesigns
Where to see it
Elementor, Divi, Beaver Builder, WPBakery, the WordPress block editor, PageSpeed Insights
In this article4
  1. How a page builder works
  2. Why it matters
  3. Common mistakes
  4. How to act on it

A page builder is a visual editing tool that lets you design web pages by dragging, dropping and arranging blocks such as headings, images, buttons and columns, and seeing the result as you go. Elementor, Divi, Beaver Builder and WPBakery are the best known for WordPress; Wix and Squarespace work on the same principle as complete platforms.

How a page builder works

A standard theme controls layout through templates written in code. A page builder adds a layer on top. You build a page from sections, rows, columns and widgets, set spacing, fonts and backgrounds through menus, and the builder turns your choices into HTML, CSS and JavaScript when the page is shown.

WordPress also has its own native editor, the block editor, which has grown into a capable layout tool with patterns and full-site editing. It is not usually called a page builder, but it does much of the same job with less extra code.

Builders store layouts differently. Elementor keeps its own data alongside the post. Divi and WPBakery have traditionally saved content as shortcodes, bracketed tags inside the page content, which means that if the builder is switched off, those pages fill with code instead of a layout.

Why it matters

Page builders made it possible for small UK businesses to change their own websites without paying a developer for every edit, and that is a real benefit. A sole trader who can update an offer page on a Sunday evening will keep the site more current than one who has to wait for a quote.

The cost is weight. Builders load their own styles, scripts, icon sets and animation libraries, often on every page, and wrap each element in several layers of HTML. That can slow first load and make pages feel sluggish to tap on a phone, which shows up in Core Web Vitals. Recent versions of the main builders have cut much of this, so how a site is built matters as much as which tool is used.

Builders also make it easy to get structure wrong. When headings are chosen for their size rather than their meaning, a page ends up with three H1s and no H2s, or with every section title as an H4, which makes it harder for search engines and screen readers to follow.

Common mistakes

  • Building separate desktop and mobile versions of a section and hiding one, so the same content loads twice.
  • Heading levels picked for looks, not for the outline of the page.
  • Loading every font weight, icon pack and animation whether the page uses them or not.
  • Installing a second builder for one feature, doubling the code on every page.
  • Choosing a builder that leaves shortcodes behind, making a later redesign far more expensive.
  • Unlicensed or out-of-date builder add-ons, a common security weakness.

How to act on it

If you already use a builder, check one important page in PageSpeed Insights and look at how much unused CSS and JavaScript it reports. Turn on the builder’s own performance settings, such as loading only the assets each page needs, and remove add-ons you do not use. Review headings on your main pages so that each has one H1 and a logical order beneath it.

If you are planning a new site, decide whether the block editor and a good theme can do what you need before adding a builder. Weighing those choices against your content, your budget and who will edit the site is part of a website redesign project.

Do and do not

Do

  • Set heading levels by meaning, then style them separately
  • Turn off widgets, fonts and animations you do not use
  • Build reusable templates for repeated page types

Do not

  • Duplicate sections for mobile and desktop and hide one
  • Mix two page builders on the same site
  • Pick a builder that leaves shortcodes behind if you might switch later

Questions people ask about this

Is Elementor bad for SEO?

Not in itself. Elementor sites can rank well, and search engines do not penalise a site for using it. Problems come from heavy pages, poor heading structure and duplicated mobile content, which careful building and the tool's performance settings largely avoid.

Should I use the block editor instead of a page builder?

For many small business sites, yes. The WordPress block editor now handles columns, patterns and reusable sections, and it produces lighter pages with no extra plugin to maintain. A builder still makes sense if the person editing the site needs fine visual control and is already comfortable with one.

What happens if I stop using my page builder?

It depends on how the builder stores content. Some leave the text readable but lose the layout, while shortcode-based builders leave pages full of bracketed code. Either way, pages usually need rebuilding, so plan any switch as a small redesign rather than a quick change.

Related terms

Found this useful?

Share it, or ask an AI to summarise it

Back to the glossary

Knowing the term is the easy part

Applying it to your own site and budget is the work. Book a call and I will tell you what actually applies to you.