Skip to content

Create a services page

Here you build a page that lists what you offer. It has a header, three services with icons, one service in detail beside a photo, client logos and a call to action. Use it when you sell several services. For a page about one offer, follow Build a marketing landing page instead.

The video builds the services page of a digital agency.

Before you start

  • Your role has the Edit with DXPR Builder permission.
  • The media library holds a photo for the service in detail and four client logos.
  • 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.
  • On DXPR CMS, hide the theme's page title on this page: in its edit form, open DXPR Theme Settings and tick Page Title under DXPR Hide Regions. The Jumbotron Title is then the page's only Heading 1, as Build SEO-friendly pages explains.
  • New elements land at the top of their section or column. Add the elements of a column in reverse order, or drag them into place afterwards.

Step 1: add the header

  1. Click Add Elements on the empty page and pick Section from the Layout tab. Hover it, open More > Settings, pick the navy Background in the Style panel and click Save.
  2. Click + on the section and pick Jumbotron from the Content tab.
  3. Set the Title to "Our services", the Lead to one line about what you offer and the Type to Primary, then click Save.

Step 2: add the services overview

  1. Hover the section and click Add Section Below. Give the new section the Align text center class.
  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 the first column and pick Text. Type "Design" as Heading 3, add one line and click Save.
  4. Click + in the same column and pick Icon; it lands above the text. Choose the Font Awesome Free Solid set, search for palette and click the icon. Set Size to Very Large (3x), open Icon utilities, set Style to Circle and click Save.
  5. Repeat for "Development" with code and "Marketing" with bullhorn.

Step 3: add one service in detail

  1. Add a third section with Add Section Below, then a Row; it arrives with two equal columns.
  2. Click + in the left column and pick Image. Click Select Image, tick a photo and click Insert selected. Type the Alt attribute in the SEO panel and click Save.
  3. Click + in the right column and pick Button. Set Title to "Get a quote", Link to /contact and Type to Primary, then click Save.
  4. Click + in the right column again and pick Text; it lands above the button. Type "Design" as Heading 2, add the description and what is included, and click Save.

Step 4: add the client logos

  1. Add a fourth section and open its More > Settings. Pick Align text center under HTML classes and a light grey Background in the Style panel. Click Save.
  2. Click + on the section and pick Marquee. Remove the three sample images with the × on each. Click Select Image, search for your logos, tick four of them and click Insert selected. Switch on Gray scale and click Save.
  3. Click + on the section again and pick Text; it lands above the marquee. Type "Trusted by leading brands" as Heading 2 and click Save.

Step 5: add the call to action

  1. Add a fifth 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 "Schedule a consultation", Link to /contact, Type to Light and Size to Large, then click Save.
  3. Click + again and pick Text; it lands above the button. Type "Ready to get started?" as Heading 2 and add one line. Set Font color to white and click Save.

Step 6: 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:

  • One detail section per service: repeat Step 3 for Development and Marketing. Switch on Mirror row in every second row's settings, so the photos alternate sides on tablets and desktops.
  • Jump links: set each detail section's HTML ID (design, development, marketing). Add a Button under each overview text with Link #design and so on.
  • Testimonials: add a Block quote per client above the logos.

What you see

A navy band opens the page, with "Our services" in large white type over a one-line summary. Three centred services follow, each a circled icon over its name and line. Design gets its own band with a photo, a description and Get a quote. Grey client logos scroll past on a light band, and a purple band closes the page.

If you don't see the page as shown

  • The marquee still shows the sample logos. The three sample images stay until you remove them. Open the marquee's settings, click the × on each sample image and save.
  • The logos are in colour. Gray scale is off. Open the marquee's settings, switch it on and click Save.
  • The icons have no circle. Style sits in the Icon utilities panel, not in General. Open the icon's settings, open Icon utilities and set Style to Circle.
  • 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.