Skip to content

Build pages

Create and edit pages on the page itself. This section covers the editing controls, every element, styling, templates, AI and complete tutorials. Find your goal in the table below.

I want to ... Use Needs
learn the controls: picker, drag and drop, inline text, preview and save Edit your pages The Edit with DXPR Builder permission
add text, images, buttons, sections and other elements Content elements Nothing extra
change colours, spacing, borders and fonts Style your elements Nothing extra
reuse a layout on other pages Reuse layouts and sections Nothing extra
draft pages, text and images with AI AI The AI module and the DXPR AI Provider
follow a complete example, such as a landing page Build a page step by step Nothing extra

Which should I use

First time in the editor? Start with the editing controls; every other page assumes you know them. Looking for one element, such as a button or a map? Go to the elements.

Building the same kind of page again and again? Save it as a template. AI gets you a first draft fast, but it needs the AI modules and AI credits.

What's next?

Elements you can add to pages to continue exploring DXPR Builder.

In this section

  • Edit a page: Edit pages on the live site: add, move, copy, undo, preview and save
    • Drag and drop: Drag elements, rows and sections to a new place on the page
    • Element picker: Open the element picker, find an element in its five tabs and add it
    • Selecting elements: Reach an element, its column, row or section by hovering, or pick any level from the Layers panel
    • Inline text editing: Type and format text right on the page, without opening a dialog
    • Context menus: Clone, copy, paste, move and delete from the More menu on any element
    • Copy and paste: Copy, cut and paste elements with the keyboard or the More menu
    • Clone: Duplicate a section, row or element right after the original, then change what differs
    • Undo and redo: Step back and forward through your edits, or jump to an earlier state in the Editing History panel
    • Preview mode: Hide the control bars and see your page as visitors will, unsaved changes included
    • Save and publish: Store your changes with Save, publish the page from its edit form, and work with revisions and content locks
    • Mobile editing: Make quick edits on a phone or tablet, and what changes in the editor on a touch screen
  • Add content: 22 content elements and 6 layout elements
  • Style your elements: Find the setting for colour, photos, borders, spacing, text, hover, animation and anchor links, and learn how the settings dialog keeps or undoes your changes
    • Style tab: What the Style and Hover style panels change, what Theme defaults means, how hover and opacity behave, and why the theme sometimes wins
    • Background: Put a colour, photo, gradient or video behind content, keep a heading readable on a photo, and choose how the photo fills the space
    • Borders and shadows: Frame a card, round corners and add depth: the three settings a border needs, what each Drop shadow level is, and how to make a circle
    • Spacing: Add room inside and around an element with the box model: ranges, units and locks, and how your values meet the theme's spacing and a section's own padding
    • Typography: Change text size and colour for one element, see why some headings and links keep the theme's style, and meet the WCAG contrast targets
    • Custom CSS classes: Give an element an HTML ID for anchor links, and use HTML classes to hide it on phones, set spacing per screen size or reuse a look your theme defines
    • Design guides: Colours, buttons, cards, backgrounds, animation, hover effects and layout widths: pick the design page for your goal
  • Reuse layouts: Page and user templates, import and export
    • Page templates: Start a new page from a ready-made layout, then make it your own
    • User templates: Save a section once and insert it on any page from the Saved templates tab
    • Saved templates tab: Find, filter, insert and delete saved templates in the element picker
    • Importing and exporting: Move page templates and user templates from one Drupal site to another
  • Write and design with AI: Set up AI, rewrite text, draft pages, generate and edit images, write alt text
    • AI setup: Connect your DXPR API key, choose the default model and switch the AI tools on for your editors
    • Configuration: Every setting on the DXPR Builder AI page: credits, feature switches, tones, commands and output filtering
    • Models and providers: The three Kavya models, where they run and how to restrict providers
    • Page creation: Describe the page you need and let the AI build its sections, text and buttons
    • Section editing: Ask the AI to add to, rewrite or rebuild one section or element of a page
    • Image generation: Create a photo or illustration from a description, in an Image element or as a background
    • Image editing: Change the light, background or style of a photo on your page with a written instruction
    • Image alt text: Let AI describe a photo as you upload it, and see where DXPR Builder keeps alt text
    • Text commands: Rewrite, shorten, lengthen or change the tone of a paragraph from the text toolbar
    • Use cases: Worked examples for marketers, webmasters and developers
  • Follow a tutorial: Step-by-step guides for landing pages, hero sections, galleries and more
Something wrong or missing on this page? Report it or edit the page.