--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/one-page-website' title: 'Create a one-page scrolling website | DXPR' author: name: docs-sync url: 'https://dxpr.com/users/docs-sync' date: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Single scrolling page with anchor navigation' tags: - 'Follow a tutorial' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Create a one-page scrolling website' description: 'Single scrolling page with anchor navigation' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T14:31:17+0000' dateModified: '2026-10-23T14:31:17+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/one-page-website' articleSection: 'Follow a tutorial' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/one-page-website' description: 'Single scrolling page with anchor navigation' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Follow a tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Create a one-page scrolling website. Single scrolling page with anchor navigation Learn DXPR BuilderBuild pagesFollow a tutorial ## In this guide Related guides - [Hero section](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) - [Landing page](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) - [Custom CSS classes](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) 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](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) 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](/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2). ## 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 `#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](/hc/documentation/learn-dxpr-builder/tutorials/add-forms). ## 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](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails). ## What's next? - [Hero section](/hc/documentation/learn-dxpr-builder/tutorials/hero-section) for overlay and parallax options - [Landing page](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) for a campaign page - [Link to sections and reuse styles with classes](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) for more on HTML IDs