Quick Elements

Documentation / Page Builder

Everything you can do with the Page Builder.

Build pages visually or with AI, reuse pieces across your site, collect leads, and watch how it all performs. This page walks through every feature, in plain English.

Basics

Overview

The Page Builder is how you design and edit the pages on your site. You work on a live preview of the real page: click anything to select it, change the words where they appear, restyle it, move it, or ask the AI assistant to do it for you.

Around the editor sits a full toolkit: reusable components, shared layouts, a form builder, visitor analytics, image and video compression, and SEO tools. Everything on this page ships with every QE site.

Pages

Every page gets its own clean web address, at any path you like: /pricing, /help/faq, or anything else. There is no forced prefix.

Pages can carry tags and a featured image. Together with the loop shortcode, that turns pages into articles: tag a set of pages, then show them anywhere as a grid or list that updates itself.

You can also drop a whole page inside a regular post or widget with the [qebuilder id="123"] shortcode.

The editor

The editor has three panels: the page structure on the left, the live preview in the center, and the inspector on the right. Click anything in the preview and all three stay in sync.

From there you can:

  • Edit text directly on the page, right where it appears.
  • Restyle the selected element in the inspector, or adjust its spacing, colors, and type.
  • Move, duplicate, and delete elements, in the preview or in the structure panel.
  • Insert ready-made sections from the palette. They pick up your site's colors and fonts automatically.
  • Insert images and video from your media library.
  • Switch to source mode to edit the page's HTML in bulk when that is faster.

A built-in tutorial walks you through the editor the first time you open it.

AI assistant

The chat panel builds and edits with you. Describe what you want, like "add a pricing section with three plans", and the assistant writes it. You see the result and apply it with one click. Nothing lands on the page without your say-so.

The assistant knows what you have selected, your site's global styles, and the current page, so "make this narrower" or "match the hero colors" just works.

Connected QE sites are set up automatically. You can see your usage, adjust the assistant's instructions, or point it at a different AI provider in Settings.

Undo, history & backups

Every change can be undone while you work. Saves keep a history, so an earlier version of the page can be brought back.

Unsaved work is also mirrored to a local backup in your browser. If your session expires or the tab crashes before you save, the editor offers to restore where you left off. Restoring is undoable too.

Building blocks

Components

A component is a piece you build once and reuse anywhere: a call to action, a testimonial row, a contact block. Insert it from the editor palette or with [qeb_component id="5"].

Edit the component and every page using it updates. No hunting through pages to fix the same button five times.

Layouts

A layout is the shared frame around your pages, usually the header and footer. Build it once, mark where the page content goes with [qeb_content], and pick the layout on each page.

Change the layout and the whole site follows.

Global styles

Global CSS holds your site-wide look: brand colors, fonts, and any styling you want everywhere. Ready-made sections and the default store styling both follow it, so changing your brand color in one place recolors the site.

Forms

Form builder

Build contact forms, signups, and request forms without leaving the site. Twelve field types are available: single-line text, email, phone, website, number, long text, dropdown, radio buttons, checkboxes, a consent checkbox, date, and hidden values.

Each field has its own label, placeholder, default value, and options. Set the submit button text, then drop the form into any page with its shortcode or straight from the editor palette.

Handling submissions

Choose what happens after someone submits: show a thank-you message or send them to another page. Entries are saved on your site and listed in a Form Entries screen, so nothing gets lost even if an email goes astray.

Forms can be active or kept as drafts that visitors never see.

Email notifications

Each form can send any number of emails when it is submitted. Set the recipients and subject per notification, and write your own message or let it send a summary of the submission. Different teams can get different notifications from the same form.

Spam protection

Two options, per form:

  • A built-in image captcha, on for new forms by default. You choose which characters it may use.
  • Google reCAPTCHA v3, which is invisible to visitors. You set how strict it is.

Growth

Analytics

Built-in, privacy-friendly visitor stats. No cookies, no consent banner needed: visitors are counted with a code that changes every day, so nobody can be tracked over time.

The dashboard shows unique visitors, total pageviews, views per visitor, a views-over-time chart, your top pages, and where visitors came from. View today, the last 7, 30, or 90 days, the last 12 months, all time, or any custom range. You choose how long raw data is kept.

Media optimizer

Convert the images and videos on your pages to modern, lighter formats so pages load faster. Run it across everything at once, on selected files, or automatically on every new upload.

Originals are always kept, so any conversion can be reverted with one click. Quality is adjustable for both images and video.

SEO

Every page has its own search title and description, edited right in the editor. The fields tell you when a title or description is too short or too long for search results, and sensible defaults are filled in for you.

Sitemap & search engines

The sitemap editor controls exactly which addresses appear in your site's sitemap, by type, by pattern, or one by one. Keep utility pages out and the pages you care about in.

Optionally, search engines are pinged automatically whenever a page is published or updated, so changes get noticed sooner.

Store

WooCommerce pages

Design your store pages with the same editor as the rest of the site. When WooCommerce is active, ready-made pages are created for the shop, cart, checkout, account, and product pages. Use them as they are, redesign them, or swap in your own.

Store shortcodes drop the working parts in wherever you want them: the cart, the checkout, product galleries, prices, add-to-cart buttons, product tabs, related products, and more. WooCommerce keeps handling payments, sessions, and stock.

A separate store stylesheet styles the store's forms and tables, and it follows your global colors and fonts out of the box.

Extras

Shortcodes

A few small shortcodes unlock bigger patterns:

  • [qebuilder id="123"] renders a page inside any post, page, or widget.
  • [qeb_component id="5"] inserts a reusable component.
  • [qeb_content] marks where page content goes inside a layout.
  • [qeb_logged_in]...[/qeb_logged_in] shows content only to signed-in visitors, and [qeb_logged_out] does the reverse.
  • [qeb_loop tag="article"]...[/qeb_loop] repeats your markup for every page with a tag. Placeholders like {{title}}, {{permalink}}, {{excerpt}}, and {{featured_image_url}} fill in each page's details. Perfect for article grids and related-content rows.

Custom scripts

Paste analytics tags, tracking pixels, or any other snippets once in Settings and they load on every page, in the head or at the end of the body. The editor preview includes them too, so what you see stays honest.

Was this helpful? Back to all documentation →