Skip to content

Build your first page

Build a page with DXPR Builder: an image beside a headline, a short paragraph and a button. You can also start from a ready-made template and change its words. Either way takes a few minutes, and you end with a saved page that you preview the way visitors will see it. Use this page after installing DXPR Builder.

The video builds the page from scratch: section, row, image, button and text, then save and preview.

Before you start

  • DXPR Builder is installed with your product key (Install DXPR Builder).
  • A content type shows the builder: its text field uses the DXPR Builder formatter, like Drag and drop Page from dxpr_builder_page.
  • Your role has the Edit with DXPR Builder permission.

Create the page

  1. Go to Content > Add content and pick a content type that shows the builder.
  2. Type a Title and click Save.

The saved page opens with an empty builder. DXPR Builder works on this page, not on the edit form.

Option A: Start from a template

The Saved templates tab lists layouts that people on your site saved for reuse. DXPR CMS ships several, such as Colored icon boxes. On other sites the tab can be empty; Choose a template on the empty page then offers the page templates that come with DXPR Builder. Insert a saved template shows these steps in a video.

  1. Click Add Elements to open the element picker.
  2. Switch to the Saved templates tab.
  3. Click a template to insert it. Its sections, rows and elements appear on the page, ready for editing.
  4. Click Save on the toolbar.
  5. Open the eye menu and choose Preview to see the page as visitors will.

Option B: Build from scratch

The video above follows these steps.

  1. Click Add Elements and pick Section on the Layout tab.
  2. Click + on the section's control bar and pick Row.
  3. Click the grid icon on the row, pick a column preset such as 1/3 + 2/3, and click Save.
  4. Click + in the left column, open the Content tab and pick Image.
  5. Click Select Image, search the media browser with Apply filters, tick a photo and click Insert selected.
  6. Open the SEO panel, type the Alt attribute and click Save.
  7. Click + in the right column and pick Button.
  8. Type the Title and Link, choose a Type and click Save.
  9. Click + on the wide column's control bar and pick Text.
  10. Type a headline, set it to Heading 2, type a paragraph below it and click Save.
  11. Click Save on the toolbar.
  12. Open the eye menu and choose Preview to see the page as visitors will. Choose Edit in the same menu to keep working.

Change what you added

  • Text: click a Text element to edit it in place. A toolbar offers bold, italic, headings, links, lists, font colour and more. Your user profile decides which buttons appear.
  • Settings: open More on an element's control bar and choose Settings. An Image has width, height, a link and its alt text; a Button has a Type, a size and a link.
  • Order: drag an element by its control bar to another place.

Click Save on the toolbar when you are done. The browser warns you if you try to leave the page with unsaved changes.

What you see

In Preview, the image sits on the left. The headline, paragraph and button sit on the right, without control bars. Back in Edit, each element shows its control bar when you hover it. DXPR Builder stores the page as HTML in the field it edits, usually Body. Visitors see the page once the content is published.

If you don't see the Add Elements button

  • The empty page shows "Choose a template" and "Or add elements using the +". Enable page creation assistant is off at /admin/dxpr_studio/dxpr_builder/ai_settings. Click + on the builder toolbar to open the element picker instead.
  • The page shows no builder at all. The content type does not use the DXPR Builder formatter, or your role lacks Edit with DXPR Builder. Follow Verify the installation.
  • The Saved templates tab lists no templates. Nobody on the site has saved one yet, or your user profile hides them. Use Choose a template on the empty page, or save your own.
  • Your changes are gone after a reload. The page was not saved. Click Save on the builder toolbar before you leave the page.

What's next?

  • The editing tools: every control, plus keyboard shortcuts.
  • Elements: all 22 content elements and 6 layout elements.
  • Layout: sections, rows and columns that adapt to each screen.
Something wrong or missing on this page? Report it or edit the page.