Social Links Element
The Social Links Element shows a row of icons that link to your profiles on social networks and other platforms, from Facebook, Instagram, LinkedIn and YouTube to Mastodon, Bluesky, WhatsApp and Xing. It can also show an email icon and a phone icon.
Use it wherever visitors should find you elsewhere: in the footer, on the contact page or next to a team member. The icons can be plain or boxed, in the brand colors of each network or in your own colors, with a tooltip naming the network. For buttons that share the current page, use the Social Sharing Element instead.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Social Links Element
Add the Social Links Element and paste the full address of each profile into the matching field, for example LinkedIn Link. Only networks with an address are shown. Enter an Email Address or Phone Number to add those icons, and set Show Custom Social Icons to Yes to include your own icons from Global Options.
On the Design tab, set the Alignment, Font Size and Tooltip Position. Boxed Style places each icon in a box with its own Box Padding, Box Border Size and Box Border Radius. Color Type uses either the exact brand color of each network or your own Icon Color, Background Color and Border Color.
Links open in a new window when Open Social Icons in a New Window is on in Global Options > Extras, and get nofollow when the social nofollow switch there is on. The email address is written in an encoded form that is harder for spam bots to read, and the phone icon always opens in the same window so the phone app can take over.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Social Links Element. Change them there to style every Social Links at once.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Blogger Link | Insert your custom Blogger link. |
| Bluesky Link | Insert your custom Bluesky link. |
| Deviantart Link | Insert your custom Deviantart link. |
| Discord Link | Insert your custom Discord link. |
| Digg Link | Insert your custom Digg link. |
| Dribbble Link | Insert your custom Dribbble link. |
| Dropbox Link | Insert your custom Dropbox link. |
| Facebook Link | Insert your custom Facebook link. |
| Flickr Link | Insert your custom Flickr link. |
| Forrst Link | Insert your custom Forrst link. |
| GitHub Link | Insert your custom GitHub link. |
| Instagram Link | Insert your custom Instagram link. |
| LinkedIn Link | Insert your custom LinkedIn link. |
| Mastodon Link | Insert your custom Mastodon link. |
| Myspace Link | Insert your custom Myspace link. |
| PayPal Link | Insert your custom PayPal link. |
| Pinterest Link | Insert your custom Pinterest link. |
| Reddit Link | Insert your custom Reddit link. |
| RSS Link | Insert your custom RSS link. |
| Skype Link | Insert your custom Skype link. |
| Snapchat Link | Insert your custom Snapchat link. |
| SoundCloud Link | Insert your custom SoundCloud link. |
| Spotify Link | Insert your custom Spotify link. |
| Telegram Link | Insert your custom Telegram link. |
| Teams Link | Insert your custom Microsoft Teams link. |
| TikTok Link | Insert your custom TikTok link. |
| Threads Link | Insert your custom Threads link. |
| Tumblr Link | Insert your custom Tumblr link. |
| Twitch Link | Insert your custom Twitch link. |
| Vimeo Link | Insert your custom Vimeo link. |
| VK Link | Insert your custom VK link. |
| WeChat Link | Insert your custom WeChat link. |
| WhatsApp Link | Insert your custom WhatsApp link. |
| X Link | Insert your custom X link. |
| Xing Link | Insert your custom Xing link. |
| Yahoo Link | Insert your custom Yahoo link. |
| Yelp Link | Insert your custom Yelp link. |
| YouTube Link | Insert your custom YouTube link. |
| Email Address | Insert an email address to display the email icon. |
| Phone Number | Insert a phone number to display the phone icon. |
| Show Custom Social Icons | Show the custom social icons specified in Global Options. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Alignment | Select the icon’s alignment. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Tooltip Position | Choose the display position for tooltips. |
| Font Size | Controls the font size for the social icons. Enter value including CSS unit (px, em, rem), for example 10px. |
| Boxed Style | Choose to get boxed icons. |
| Box Padding | Controls the padding of boxed icons. |
| Box Border Size | Controls the border size. In pixels or percentage, for example 10px or 10%. |
| Box Border Radius | Choose the border radius of the boxed icons. In pixels (px), for example 1px, or “round”. |
| Color Type | Choose the color type of social icons. Brand colors will use the exact brand color of each network for the icons or boxes. |
| Icon Color | Specify the color of social icons. |
| Background Color | Specify the box background color of social icons. |
| Border Color | Specify the border color of social icons. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Enter the phone number in international format, such as
+49 30 1234567, so the link works from any country. - Link only profiles you keep up to date. An empty or abandoned profile gives a worse impression than no icon.
- Brand colors are recognized at a glance, while one custom color matches your design more quietly. Choose one approach and use it across the site.
- In a footer or header built with the Layout Builder, one Social Links Element serves every page, so you update your profiles in one place.
- Element Sticky Visibility can hide the icons in a sticky header where space is short.