Widgets

Social Icon

Step-by-Step Tutorial on Using the Social Icon Widget of Zyre Addon

The Social Icon widget of Zyre addon allows you to add and customize social media icons with links to your profiles. With flexible styling options, hover effects, and multiple layouts, it helps you connect your website visitors to your social channels in a clean and visually appealing way.

Learn How To Use Social Icon Widget:

Exploring the Features of Social Icon Widget

Step 1: Drag the widget

From the left panel, search or choose the Social Icon of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

Social Icons:

  • Social Icons Style : You can choose a predefined style from here
  • Social Icons : Create and manage multiple feature items.
    • Icon : Upload the social media icon.
    • Link : Set URL for the social list item.
    • Enable text (when Toggle Enable)
      • Social Name : Set the name of each social media.
    • Want To Customize? (when Toggle Enable)
      For both normal and hover state:
      • Color : Set icon color.
      • Background color : Set background color.
      • Border color : Set border color of each icon.
      • Separator color : Set the separator color.
    • Icon size : Set icon size of the social icons.
  • Columns : Set how many items will show per row.
  • Alignment : Set items alignment.
  • Enable Separator : Enable toggle for showing separator ( Separator Between Icon & Social Name)
  • Class : Add a CSS class for custom styling.

Step 3: Style tab

In the Style section, you can customize the General, Icon, Social Name — but make sure you have added them first.

General:

  • For both normal and hover states:
    • Color : Set icon color.
    • Background color : Set background color. Explore full background settings here.
    • Border color : Set border color of each icon.
  • Space Between : Control spacing between each icon horizontally.
  • Rows Gap : Control spacing between icons vertically.
  • Border Type : Define border style, width and color of icons.
  • Border Radius : Control corner roundness.
  • Box Shadow : Apply drop shadow.
  • Padding : Add inner spacing of each icon.

Icon:

  • Size : Adjust the size of the icon.
  • Hover Animation : Choose an animation style when the icon is hovered.
  • Padding : Set spacing inside each icon.

Social Name:

  • Typography : Adjust font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
  • Padding : Set spacing inside each social name.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning Social Icon come to life on your webpage!

You’re all set!

Share: