Skip to content

Create a one-page scrolling website

Here you build a whole website on one page: a full-height hero whose buttons jump to the About, Services and Contact sections below. Each section carries an HTML ID, the target of its button. Use it for a small business, a campaign or a portfolio. For a page around one offer, follow Build a marketing landing page instead.

The video builds the site of a design studio called Studio Nord.

Before you start

  • Your role has the Edit with DXPR Builder permission.
  • The media library holds a wide photo for the hero and a team photo.
  • 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, so the hero buttons go in from the last to the first.

Step 1: build the hero

  1. Click Add Elements on the empty page and pick Section from the Layout tab.
  2. Hover the section and open More > Settings. Set HTML ID to hero and, under HTML classes, pick Align text center.
  3. Switch on 100% height so the section fills the screen, and Vertical centering so the content sits in the middle.
  4. Open the Style panel. Under Background image click Select Image, tick a photo and click Insert selected. Set Background style to Cover, pick the navy Background and white Font color, then click Save.
  5. Click + on the section and pick Button. Set Title to "Contact", Link to #contact and Type to Light, then click Save. Add two more buttons the same way: "Services" with #services, then "About" with #about. Each lands above the last.
  6. Click + again and pick Text; it lands above the buttons. Type "Studio Nord" as Heading 2 and add the 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 About section

  1. Hover the hero and click Add Section Below. Open the new section's More > Settings, set HTML ID to about and click Save.
  2. Click + on the section and pick Row; it arrives with two equal columns.
  3. 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.
  4. Click + in the right column and pick Text. Type "About" as Heading 2, add your story and click Save.

Step 3: add the Services section

  1. Add a third section with Add Section Below and open its More > Settings. Set HTML ID to services, pick Align text center under HTML classes and a light grey Background in the Style panel. Click Save.
  2. Add a 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 "Branding" 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 pen-nib and click the icon. Set Size to Very Large (3x), open Icon utilities, set Style to Circle and click Save.
  5. Repeat for "Websites" with laptop-code and "Analytics" with chart-pie.

Step 4: add the Contact section

  1. Add a fourth section and open its More > Settings. Set HTML ID to contact, pick Align text center under HTML classes and click Save.
  2. Click + on the section and pick Social links. Type linkedin as the brand of the first row and paste the profile URL, then instagram and its URL in the second. Set Style to Circle and Size to 2x, then click Save.
  3. Click + again and pick Button; it lands above the links. Set Title to "Email us", Link to mailto:hello@studionord.example and keep Type at Primary, then click Save.
  4. Click + again and pick Text; it lands above the button. Type "Get in touch" as Heading 2 and your email address and phone number below it, then click Save.

Step 5: save and preview

  1. Click Save on the builder toolbar.
  2. Open the view menu (the eye icon), choose Preview and click a hero button, such as Contact.

Go further

Not shown in the video:

  • Fixed menu: create a menu at Structure > Menus > Add menu with one link per section, such as /studio-nord#about, or <front>#about on the front page. Place it in the header region at Structure > Block layout. In DXPR Theme, switch on Sticky Header at Appearance > Settings > DXPR Theme.
  • Front page: make the page your front page at Configuration > System > Basic site settings.
  • Contact form: insert a form from the Drupal Blocks tab instead of the lead text; see Add forms to pages.

What you see

The photo fills the screen with "Studio Nord", the tagline and three light buttons. A click on a button scrolls the page smoothly down to its section. About shows the team photo beside the story, Services three circled icons on grey, and Contact the "Get in touch" heading and Email us button above two round social icons.

If you don't see the page as shown

  • A button does not jump to its section. Its Link does not match the section's HTML ID. The link is # plus exactly the same ID, such as #about for the ID about.
  • A section lands under your fixed header. The builder does not know the header's height. Under Advanced Settings at DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings), set Scroll offset selector to your header's CSS selector.
  • A social link shows "No matching brand icon found". The brand is not a known icon name. Type it in lower case, such as linkedin or instagram.
  • 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.