The Social Icons Component - Neve Header / Footer Builder

📝Note: This component is part of the Neve Header / Footer Builder.

If you wish to add your social media buttons (Facebook, Twitter, and many others) to your website, you can do so through the Social Icons component of the header / footer builder. No coding skills are required.

🧰Using the Component

1
Start by adding the component into the rows, by clicking on the ➕ button and selecting the component.

2
Open the component's  settings to customize it, by clicking on the ⚙️icon.

🔮Customizing the Component

There are three panels with customizing options for this component, which allow you to create the desired header / footer:

⚙️General Panel

The general tab allows you to configure the desired icons: add a title, an icon, and a link, select an icon and a background color, remove the icon, change its visibility by clicking on the 👁️ icon.

📝 Note: In order to see the social icons in the header / footer builder, you have to insert the link to the desired social app.

Other options available in the General tab:

  • reorder the elements, add a new item
  • open in a new tab - when clicking on a certain icon


 📐Layout Panel

In the Layout tab, you also have access to advanced positioning options like:

  • Padding - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions  ( Desktop | Tablet | Mobile ).
  • Margin - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions  ( Desktop | Tablet | Mobile ).


🖌️ Style Panel

The style tab includes the options that help you to create a suitable appearance for your social icons:

  • Icon Size - sets the size of the social icon.
    • it has a reset button, to undo the changes
  • Icon Spacing - the space between the icons.
    • it has a reset button, to undo the changes
  • Border Radius - rounds the corners of the icon (in PX).
  • Icon Padding - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions.


🗂Useful Resources

🎥 Video - how to create a PRO Custom Header

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.