Article sections

    It is recommended that you add social icons with links to the social accounts for the company, in the pages of your website.

    Usually, the social icons are added to a section in the footer of the website pages. However, you might consider adding them higher in the web pages, for generating more engagement from users who are seeing the content of your pages.

    To add a social icons component to your web pages, open the list of Components, and find the Social Icons Component in the list. Use drag-and-drop to include a social icons component into the page you are customizing.

    Social Icons component added to a web page:

    To customize the social icons component you’ve added to a page, click inside the component on that page and make sure you have the corresponding settings category open in Customizer.

    Content

    Here, you can modify the properties for the icons list.

    Alignment of the icons: the social icons can be aligned to the left, at the center or to the right of the page section.

    List of icons:

    In the social icons component, there are several default social icons representative of the most popular social networks: Facebook, Twitter, YouTube, Vimeo. You can make changes to this list, as follows:

    • Reorder the social icons, using drag-and-drop
    • Remove social icons from the list, by using the x button next to the icon you want to delete
    • Duplicate an icon and then customize it to your wishes
    • Use the Add Icon button at the end of the icons list to place additional icons into the list

    To make changes to social icons individually, click on those icons and expand the options for the respective icons:

    • Change icon: click on Change next to the current icon, to expand the list of available icons in the font Awesome library and choose a different icon to replace the current one
    • Link: fill in the blank space under Link with the URL for the social profile of your company corresponding to the certain network for which you are configuring the settings.

    Style

    In terms of style, you can make customizations for:

    Icons

    Color for the icons

    You can choose to:

    • Give the social icons the official colors of the respective social network logos

    • Give the social icons a custom color

    Color for the icons background – this is the color of the background onto which the social icons are displayed.

    Size of the icons – from here, you can change the dimensions of the social icons.

    Spacing of the icons – adjust the distance between the social icons.

    Padding of the icons – give specific values for the surface the social icons occupy in the page section

    Icon hover colors

    In case you have chosen to give the social icons a certain color, you’ll have additional options for the color of the icons on hover (when users hover their mouse over the icons).

    • Icon color – choose the color of the social icons as they appear when users hover their mouse over the icons
    • Icon Background – choose the color of the background for the social icons, as it appears when users hover their mouse over the icons

    Border

    You can choose to create a visible border for the social icons.

    For this doing, you have to

    • select a border type other than None (solid, dashed, dotted, double, etc.)
    • give values that are greater than 0 for the border thickness

    Color for the social icons border – give a specific color to the border of the social icons, so the chosen color matches the overall design of the section

    Hover color for the social icons border – give a specific color to the border of the social icons on hover (when users hover their mouse over the social icons in the page)

    Border radius – select your values and determine how round the corners of the border will be: the higher the values of the border radius, the rounder the corners of the border will be.

     

    Social icons to which a border has been applied:

    in Advanced Components