Home
Knowledge Base
Thrive Architect
How to Use the Social Elements in Thrive Architect

How to Use the Social Elements in Thrive Architect

In this article, you’ll learn how to use the Social Follow and Social Share elements in Thrive Architect. The Social Follow element displays linked icons that direct visitors to your social media profiles, while the Social Share element adds sharing buttons that let visitors share your content on their preferred platforms.

Both elements offer extensive customization options including multiple style presets, custom branding, orientation controls, size and alignment settings, and sortable network lists. This article also covers how to add a TikTok icon to your Social Follow element using the custom network feature.

The Social Follow element displays a row of social media icons that link to your profiles on platforms like Facebook, Instagram, Twitter/X, YouTube, LinkedIn, and more. Visitors click an icon to visit your profile on that platform.

Key characteristics of the Social Follow element:

Includes an Edit design button that opens a visual design editor
Custom branding switch for toggling between default platform colors and your own color scheme
8 style presets for different icon appearances
Orientation options: Horizontal or Vertical
Size slider (1–60px) and Alignment options (Left, Center, Right, or Full Width)
Social Networks picker with a sortable preview list and individual settings for each network
Create New button for adding custom social networks (such as TikTok)
Group editing support for Grouped Social Buttons
Shadow, Typography, and Animation options are hidden

Follow these steps to add a Social Follow element to your page:

Open your page or post in the Thrive Architect editor.
Click the green plus (+) icon in the right sidebar to open the element panel.
Type Social Follow in the search field at the top of the panel.
Alternatively, scroll down to the Building Blocks section in the element list to find the Social Follow element.
Drag the element from the panel and drop it onto your page canvas.

A row of default social follow icons will appear on the canvas. You can immediately customize which networks are shown, their style, and their linked URLs using the left sidebar options.

After selecting the Social Follow element, the left sidebar displays the following options:

Edit Design

A button that opens the visual design editor, where you can make detailed adjustments to the overall appearance of the social follow icons, including spacing, border radius, and icon container styling.

Custom Branding

A switch that toggles between two color modes:

Off (default) — Each icon uses its platform’s official brand color (Facebook blue, Instagram gradient, YouTube red, and so on)
On — All icons use a unified color that you specify, overriding the default brand colors

Tip: Enable Custom branding when you want the social icons to blend seamlessly with your page design rather than introducing multiple brand colors.

Color Palettes

A palette selector (Social Follow Palettes) that applies a coordinated color scheme to the icons. This provides a quick way to style all icons with a cohesive look.

Style

A selector with 8 style presets (Style 1 through Style 8) that control the visual frame around each icon. Styles range from simple flat circles to outlined squares, rounded containers, and more. Click through the styles to preview each one.

Orientation

A toggle that switches the icon layout direction:

Horizontal — Icons appear in a single row from left to right
Vertical — Icons stack in a single column from top to bottom

Size and Alignment

Two controls that work together:

Size — A slider that adjusts icon dimensions from 1px to 60px
Alignment — Choose from Left, Center, Right, or Full Width

When Full Width is selected, the icons spread evenly across the full width of their container.

A network picker and sortable preview list that lets you choose which social platforms to display. Click the network picker to browse available platforms and add them to your list.

Each network in the preview list has a settings icon where you can configure:

The URL that the icon links to (your profile URL on that platform)
Whether the link opens in a new tab

You can drag and drop networks in the list to reorder them.

Adding a TikTok Icon with the Custom Network Feature

TikTok is not included in the default social network list, but you can add it using the Create New custom network feature.

Before creating the custom TikTok network, you need a TikTok icon. If you don’t already have one:

Go to IcoMoon or a similar icon library and download a TikTok icon pack.
In your WordPress admin, go to Thrive Dashboard > Icon Manager.
Click Import and upload the downloaded icon pack (ZIP file).
The TikTok icon will now be available in the icon picker.

Warning: Icon pack generation in the Icon Manager does not work in Safari. Use Chrome or Firefox instead.

Follow these steps to add a TikTok icon:

Select the Social Follow element on the canvas.
In the left sidebar, scroll to the Social Networks section.
Click the Create New button at the bottom of the network list.
Enter TikTok as the network name.
Upload or select a TikTok icon image (SVG or PNG).
Set the brand color for the icon (TikTok’s brand color is #000000 or a custom color of your choice).
Enter your TikTok profile URL.
Click Save to add the custom network to your list.

The TikTok icon will now appear alongside your other social follow icons and can be reordered, resized, and styled just like any built-in network.

Tip: You can use the Create New feature to add any social platform that is not included by default—such as Threads, Mastodon, Discord, or Telegram.

The Social Follow element supports group editing through Grouped Social Buttons. When you select a single social button within the element, you can switch to group editing mode to apply changes to all buttons at once.

This is useful for:

Applying a consistent border radius to all icons
Changing the spacing between all icons simultaneously
Adjusting padding uniformly across all buttons

The Social Share element adds sharing buttons to your page that allow visitors to share your content on social media platforms. Unlike the Social Follow element (which links to your profiles), the Social Share element shares the current page URL to the visitor’s chosen platform.

Key characteristics of the Social Share element:

Includes an Edit design button for detailed visual customization
Custom branding switch for unified or platform-specific colors
Colors control (CSS variable changer for the master color)
Three Type modes: Icon only, Icon + text, and Counter
18 style presets for different button appearances
Orientation options: Horizontal or Vertical
Size slider (1–60px) and Alignment options (Left, Center, Right, or Full Width)
Common Button Width switch for making all buttons the same width
Social Networks picker with sortable preview list
Custom share URL option for sharing a different page than the current one
Show share count with configurable minimum threshold and display position
Group editing support for Grouped Social Labels and Grouped Social Icons

Follow these steps to add a Social Share element to your page:

Open your page or post in the Thrive Architect editor.
Click the green plus (+) icon in the right sidebar to open the element panel.
Type Social Share in the search field at the top of the panel.
Alternatively, scroll down to the Building Blocks section in the element list to find the Social Share element.
Drag the element from the panel and drop it onto your page canvas.

A row of default social share buttons will appear on the canvas. You can immediately customize which networks are shown, their type, style, and behavior using the left sidebar options.

After selecting the Social Share element, the left sidebar displays the following options: