Sky Addons for Elementor

⌘K
  2. Home
  4. Docs
  6. Sky Addons for Elementor
  8. Widgets
  10. Social Icons

Social Icons

How to use Social Icons Widget of Sky Addons for Elementor

The Social Icons widget for Elementor allows you to display customizable social media icons with links, hover effects, and labels. Easily add and style social media icons to your website with customizable colors, hover effects, and alignment options.

Social Icons for Elementor WordPress

Features:

  1. Add multiple social media icons with links.
  2. Customize icon colors, backgrounds, and borders.
  3. Add hover effects and animations.
  4. Display social media labels with typography controls.
  5. Add separators between icons with customizable styles.

Insert PDF Viewer Widget

  1. Open Elementor Editor. In the Elementor panel, search for “PDF Viewer” under Sky Addons.
  2. Drag and Drop the Widget to the desired location on your page / editor.
Social Icons for Elementor WordPress

Social Icons Section

  1. Social Icons – Add Social Icons via repeater with full customization:
    • Social Icons: Add and manage social media icons with links and optional labels.
    • Enable Social Name: Toggle to display the social media name.
    • Customize Icon: Choose between official colors or custom styles for icons.
    • Icon Color: Set the color of the icon.
    • Background Color: Customize the icon’s background color.
    • Border Color: Set the border color for the icon.
    • Hover Effects: Customize hover colors for icons, backgrounds, and borders.
Social Icons for Elementor WordPress

More Additional Customization

  1. Alignment: Align icons to the left, center, or right.
  2. Hide Social Name: Toggle to hide the social media name.
  3. Show Separator: Add a separator between icons.
  4. Separator Type: Choose between default or custom separators.
  5. Separator Size: Adjust the size of the separator.
  6. Custom Separator: Add custom text as a separator.
Social Icons for Elementor WordPress

Style Customization

Social Icons Section

  1. Spacing: Adjust spacing between icons.
  2. Padding: Add padding around icons.
  3. Border: Customize the border style, width, and color.
  4. Border Radius: Set rounded corners for icons.
  5. Box Shadow: Add shadow effects to icons.
  6. Opacity: Adjust the transparency of icons.
Social Icons for Elementor WordPress

Label Section

  1. Typography: Customize font size, weight, and style for labels.
  2. Spacing: Adjust spacing between icons and labels.
  3. Color: Set the text color for labels.
Social Icons for Elementor WordPress

Separator Section

  1. Color: Customize the color of the separator.
  2. Typography: Adjust the font style and size for custom separators.
Social Icons for Elementor WordPress

Save and Preview

  1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
  2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

  1. Icons Not Displaying: Ensure Font Awesome is loaded and icons are properly configured.
  2. Alignment Issues: Check responsive settings for alignment.
  3. Hover Effects Not Working: Verify hover settings and ensure no conflicting styles.

The Social Icons widget is a powerful tool for adding stylish and functional social media icons to your website. Customize every aspect to match your design.

If you have any questions or queries regarding this please feel free to contact our support team – http://wowdevslive.bdkoder/support/

How can we help?