--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/product-page' title: 'Build a product page | 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: 'Features, pricing, screenshots, CTA' 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: 'Build a product page' description: 'Features, pricing, screenshots, CTA' 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/product-page' articleSection: 'Follow a tutorial' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/product-page' description: 'Features, pricing, screenshots, CTA' 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) # Build a product page. Features, pricing, screenshots, CTA Learn DXPR BuilderBuild pagesFollow a tutorial ## In this guide Related guides - [Pricing table](/hc/documentation/learn-dxpr-builder/tutorials/pricing-table) - [Icon](/hc/documentation/learn-dxpr-builder/elements/icon) - [Landing page](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) Here you build a page for one product. A photo sits next to the name, price and **Buy now** button, followed by three features, a list of specifications and a sales call to action. Use it for anything you sell. To compare several plans, add a [pricing table](/hc/documentation/learn-dxpr-builder/tutorials/pricing-table) to it. The video builds the page of a hardware product called Insight Hub. ## Before you start - Your role has the **Edit with DXPR Builder** permission. - The media library holds a photo of the product. - 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 column. That is why the right column is built from the button up. ## Step 1: add the product 1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab. 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 the product photo and click **Insert selected**. Type the **Alt attribute** in the **SEO** panel and click **Save**. 4. Click **+** in the right column and pick **Button**. Set **Title** to "Buy now", **Link** to your shop, **Type** to **Primary** and **Size** to **Large**, then click **Save**. 5. Click **+** in the right column again and pick **Text**; it lands above the button. Type the price as **Heading 2** and click **Save**. 6. Click **+** once more and pick **Text**; it lands at the top. Type the product name as **Heading 2**, add one line of description 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 features 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 the feature name 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 `plug` and click the icon. Set **Size** to **Very Large (3x)**, open **Icon utilities**, set **Style** to **Circle** and click **Save**. 5. Repeat for the second column with `cloud` and the third with `battery-full`. ## Step 3: add the specifications 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 **Text**. Type "Specifications" as **Heading 2**, then one specification per line, and click **Save**. ## Step 4: add the 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 "Talk to sales", **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 "Insight Hub from 249 euro" 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: - **Specification table**: insert a table with the **Table** button on the text toolbar instead of one line per specification. - **Gallery**: replace the single photo with an **Image carousel** of product shots. - **Plans**: link the price to a [pricing table](/hc/documentation/learn-dxpr-builder/tutorials/pricing-table). ## What you see The product photo fills the left half, with the name, price and **Buy now** button on the right. Three centred features follow, each a circled icon over its name and line. The specifications stand on a grey band, and a purple band closes the page with **Talk to sales**. ## If you don't see the page as shown - **The name, price and button are in the wrong order.** They went in from the top down, and new elements land at the top of their column. Drag them into place by the drag handle on their control bar. - **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**. - **The heading stays dark on purple.** The Text element has no **Font color** of its own. Open its **Style** panel and set **Font color** to white. - **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? - [Pricing table](/hc/documentation/learn-dxpr-builder/tutorials/pricing-table) for a multi-tier pricing section - [Icon element](/hc/documentation/learn-dxpr-builder/elements/icon) for icon sizes and styles - [Marketing landing page](/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) for a campaign page around the product