Overview
The "Social Network Icons" section can be found in the "Misc" category of the page section library:
Use it to show a row of Social, Ecommerce and other icons on your page. Each icon can be linked to a specific URL destination when clicked on.
A new divider element can also be added to any existing section on the page by clicking on the "add element" button above/below an existing element and selecting the "Icon" element:
Adding, Removing and Rearranging Icons
Once the Icons section or element has been added to your page, additional icons can be added and settings can be accessed by clicking directly on the icons section (1) or on the ✏️ button (2) in the element's top-left corner in the page builder:
In the left sidebar of the builder under the Items dropdown (1) you can:
Delete an icon (2) by clicking the 🗑️ button
Change the icon (3) to a different one
Add a URL destination (4) for the icon
Add Alt Text (5) for the icon
Move the icon (6) to a different location via drag and drop
Add a new icon (7) by clicking the "+ Add New Item" button
When the "+ Add New Item" button is clicked, the Choose Icon popup shows where you can browse through the available Social and E-commerce icon options available (1) or use the Search field (2) to find a specific icon:
Icon Styles
Under the Styling tab in the sidebar (1) you can set the Icon Color (2), the Background Style (3) and the Hover State (4) for the icons:
Background Styles include None (1), Outlined (2) and Contained (3) and includes options to set the Icon Shape and Background Color if either outlined or contained is chosen:
Hover State includes None, Change Opacity and Change Color. The effects of the hover state chosen can be seen by hovering over an icon in the builder:
Icon Settings
Settings for the Icons element can be customized on each device type (Desktop / Tablet / Mobile) independently by selecting a device type to edit on. Click here for more details about device edit modes:
Under the Settings dropdown (1) you can set the Icon section's Alignment (2), Size (3), Column Spacing (4) and Row Spacing (5)
Pre-set options (S/M/L/XL) are provided for Size, Column Spacing and Row Spacing as well as a Custom option and slider to set the exact px value for each if desired.
