--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/social-links' title: 'Adding a Social Links element | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:35:56+00:00' updated: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Social media icon links' tags: - Marketing 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: 'Adding a Social Links element' description: 'Social media icon links' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:35:56+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/elements/social-links' articleSection: Marketing - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/social-links' description: 'Social media icon links' 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) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Marketing](/hc/documentation/learn-dxpr-builder/elements/marketing) # Adding a Social Links element. Social media icon links Learn DXPR BuilderBuild pagesAdd contentMarketing ## In this guide Related guides - [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) You get a row of brand icons that link to your social media profiles. Use it in a footer, a sidebar or a contact section so visitors can find and follow you. ## Add a social links element Open your page while logged in: the builder controls appear when you hover the content area. [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page) shows the basics. 1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **Social links**. It lands at the top of the column and its settings dialog opens. 2. Under **Social links**, replace the two sample rows with your accounts. Click **Add link** for each extra account. Start typing the brand, pick it from the suggestions, and enter the URL, such as `https://github.com/dxpr`. 3. Choose a **Style** for the icon shape. This is the field near the top of the dialog, not the Style panel further down. Here it is **Circle**. 4. Choose a **Size** for the icons. Here it is **3x**. 5. Click the **Icon colors** heading to expand it, and set **Background color** to **Brand color**. 6. Under **Color**, pick a swatch from the palette. The palette shows because **Color** is set to **Custom** by default. Here it is near-white. 7. Click **Save** in the dialog. Then click **Save** in the toolbar at the top of the content area to store the page. ## What you see The accounts you added appear as a row of icons, and each icon opens its profile. In the video, LinkedIn, GitHub and Drupal show as large circles in their brand colours with white logos. Visitors see it once you save the page and it is published. ## Set up your social links Hover the element and open **More > Settings** in its control bar. Options: - **Social links:** one row per icon, with a brand name and the profile URL. Click Add link for another row, and use the arrows to change the order. - **Layout:** Inline puts the icons in a row. Stacked puts each icon on its own line. - **Style:** the icon shape: None, Rounded, Circle or Square. - **Size:** Small, Large, or 2x up to 5x. - **CSS3 hover effects:** None, Disc or Pulse. Any effect turns the icon into a circle. - **Color:** the logo colour: Brand color, Custom or Inherit. Custom shows a palette, and Inherit uses the colour of the text around it. - **Background color:** the fill of the shape, with the same three choices. **Color** and **Background color** are under the **Icon colors** heading. Click it to open them. ## If you don't see it - **Social links is not in the Content tab.** Your user profile hides it. Ask an administrator to enable it in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin). - **It is gone after you reload.** The page was not saved. Add it again and click **Save** in the toolbar at the top of the content area. - **An icon is missing.** Its row has no brand or no URL, so the element skips it. Fill in both fields of that row. - **A shape shows without a logo.** The brand name has no matching icon, and the row says "No matching brand icon found". Pick the brand from the suggestions as you type. - **An icon opens the wrong page.** The URL in that row is wrong or incomplete. Hover the element and open **More > Settings**, then check that each URL starts with `https://`. ## What's next? [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change spacing and background for your social links.