Social Icons Element in Funnel and Website Builder
The social icons element allows you to quickly add links to your social media sites.
In This Article:
To add the Social Icons element, click on the plus sign in the upper left hand corner and select elements from the left side of the panel that opens. Find the Social section, select the Social Icons element and drag it to the desired location on the page.
Looking for icons that are all one color? Add a pre-styled social media icon section by clicking Add Element and then from the left side menu of the panel, select Social Media Icons. This will allow you to pick icons of one color and then refine them following the directions below.
Social Icons Options
- By default, six social icons will be added and be visible under slides in the right hand options panel.
- You can move the order of the icons around around by clicking the two horizontal lines to the left of the icon and name and dragging the icon to the location you want it in the list.
- You can delete an icon by clicking the trash can to the right of the icon name.
- Add social media accounts by clicking on "Add Social", selecting an icon, entering the URL, and choosing to open in the current or a new window.
Edit existing icons by clicking on the pencil icon and adding in your specific social link and choosing to open in the current or a new window.
Adjusting Display Options
- Choose to display icons with text, just icons, or just text.
- Align the icons within the box and change their size.
Advanced Options
- You can use the Advanced tab of the right hand options panel to edit font family, font size, font weight, font color for the text with your icons for both desktop and mobile.
- You can also add margin and padding.
- Margin will add spacing outside of the element, so outside of the orange outline, whereas padding adds space inside the element or inside the orange outline.
- Turn on or off visibility on mobile or desktop. Blue icons means that it is visible on that device, whereas gray icons means that it is hidden on that device.
- Custom class and CSS selector allow you to make CSS adjustments that target this element.