Skip to content

Build an event page

Here you build a page for one event. It has a photo hero with the date and a Register now button, the details beside a map, speaker cards and a sign-up band. Use it for open days, talks and webinars. For a whole site on one scrolling page, follow Create a one-page scrolling website instead.

The video builds the page for a university open day.

Before you start

  • Your role has the Edit with DXPR Builder permission.
  • The media library holds a wide photo for the hero.
  • The page is open in the builder. For a new one, go to Content > Add content > Landing Page (/node/add/landing_page) and click Save.
  • New elements land at the top of their section or column. Add the elements of a section in reverse order, or drag them into place afterwards.

Step 1: add the hero

  1. Click Add Elements on the empty page and pick Section from the Layout tab. Hover it and open More > Settings.
  2. Under HTML classes pick Align text center.
  3. Open the Style panel. Under Background image click Select Image, tick a photo and click Insert selected. Set Background style to Cover.
  4. Pick a dark navy Background and a white Font color, then click Save.
  5. Click + on the section and pick Button. Set Title to "Register now", Link to the registration page, Type to Light and Size to Large, then click Save.
  6. Click + again and pick Text; it lands above the button. Type the event name as Heading 2, then the date and a tagline. Set Font color to white in the Style panel and click Save. The theme prints the page title as the page's Heading 1. To make this heading the Heading 1 instead, see Build SEO-friendly pages.

Step 2: add the details and the map

  1. Hover the hero and click Add Section Below. Click + on the new section and pick Row; its two equal columns are the split you need.
  2. Click + in the left column and pick Text. Type "Event details" as Heading 2, add one line each for date, venue and contact, and click Save.
  3. Click + in the right column and pick Map. Type the venue Address, set Map height to 320 and click Save.

Step 3: add the speakers

  1. Add a third section with Add Section Below. Open its More > Settings, pick a light grey Background in the Style panel and click Save.
  2. Click + on the section and pick Row. Click its grid icon (Column layout), pick the 1/3 + 1/3 + 1/3 preset and click Save.
  3. Click + in each column and pick Card. Open its More > Settings, set the Header to the session and the Title to the speaker's name and role, then click Save.

Step 4: add the registration call to action

  1. Add a fourth section and open its More > Settings. Pick Align text center under HTML classes, then the purple Background and white Font color in the Style panel. Click Save.
  2. Click + on the section and pick Button. Set Title to "Sign up", Link to the registration page, Type to Light and Size to Large, then click Save.
  3. Click + again and pick Text; it lands above the button. Type "Register today" as Heading 2 and add one line. Set Font color to white and click Save.

Step 5: save and preview

  1. Click Save on the builder toolbar.
  2. Open the view menu (the eye icon) and choose Preview.

Go further

Not shown in the video:

  • Speaker photos: click + on a card and add a Text biography, then click + on the card again and add an Image; it lands above the text
  • Darker photo: in the hero's Background effects panel set Background effect to Gradient. Pick the same dark colour at around 60% opacity as Start color and End color
  • Schedule: add a Text element and insert a table with the Table button for time, session and speaker
  • Registration on the page: see Add forms to pages

What you see

The event name, date and Register now button sit centred and white on the photo. Below, the details fill the left half and a map of the venue the right. Three speaker cards stand on a grey band, and a purple band closes the page with Sign up.

If you don't see the page as shown

  • The hero photo does not fill the section. Background style is still on Theme defaults. Open the section's Style panel and set it to Cover.
  • The map shows the wrong place. Google Maps searches for the address as typed. Add the postcode, city and country to Address and save again.
  • A card shows no settings dialog after you add it. Cards open empty, without a dialog. Hover the card and open More > Settings to fill in Header and Title.
  • Your changes are gone after a reload. You left the page before clicking Save on the builder toolbar. If Save shows an error, see Changes do not save.

What's next?

Something wrong or missing on this page? Report it or edit the page.