Skip to content

Adding a Social Links element

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.

Social links element showing LinkedIn, GitHub, and Drupal icons in circle style with brand colours

Open your page while logged in: the builder controls appear when you hover the content area. Your 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.

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.
  • 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 to change spacing and background for your social links.

Something wrong or missing on this page? Report it or edit the page.