Social Network Icons [Zipify Pages]

The "Icons" section and element allows you to display a row of social, ecommerce and other icons!

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over a week ago

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.

Did this answer your question?