Social Icons
All your social profile links can be added in Appearance -> Customize -> General -> Social Icons
More than 40 known social profile links are supported but you can also add your own as well.
Adding a Social Icon
To add a link click the ➕ Add and select the social profile you want to add:
If the icon does not exist, you can always add your own by going to the end of list and clicking Custom Icon
Then a new dialog will open where you can add your social profile details:
Label (optional)
Link (required)
Color (optional) - All brands have their official color assigned
You can add as many social icons of the same icon as you want. Dragging them by mouse will allow you to change the order of display.
Displaying Social Icons
Now that you have created the social networks, you can add them whenever you want, and that is possible in 2 ways:
1. Header Element
In the Header Builder you can add Social Icons element, which provides its set of attributes to change the look of social networks:
After you add this header element it will display its own options in a new popup dialog where you can change:
Display Structure - Show both icon and label or any of them.
Spacing - Between the social icons.
Size - The size the social icons.
Shape - The surrounding shape of the icon.
Responsive Visibility - Choose the viewport where the element will be visible.
Colors - Set colors for the icon, label and shape.
2. Shortcode
The shortcode can be used for places where you are not able to add social icons using standard user interface for inserting Social Icons. Here is the definition of the shortcode and all its available attributues:
label Allowed values: yes, no
icon Allowed values: yes, no
spacing Allowed values: numeric, numeric with unit example 1.5em
size Allowed values: numeric, numeric with unit example 1.5em
radius Allowed values: rounded, square, numeric, numeric with unit example 1.5em
outline Allowed values: yes, no (only set when you add radius attribute)
new_tab Allowed values: yes, no
no_follow Allowed values: yes, no
color Allowed values: brand (the official color of the brand), #ffffff (any hexadecimal color)
color_hover Allowed values: brand, any hexadecimal color
label_color Allowed values: brand, any hexadecimal color
label_color_hover Allowed values: brand, any hexadecimal color
background Allowed values: brand, any hexadecimal color (applied in combination with radius attribute)
background_hover Allowed values: brand, any hexadecimal color (applied in combination with radius attribute)
Here is a fully featred example that combines all of these shortcode attributes:
Last updated
