Social Icon Element

Social Icon element lets you add icons related to social media from where you can link all your social media profiles. This element does adding social media icons in a very easy way. You can add as much as you want, color each of them, control the size and much more.

To add this element in a section, follow these steps.

• Select Add New Element from column to open elements list modal
• From there select Social Icon element

A popup will appear showing three tabs - General, Styles ,& Advanced. These tabs will help you to modify the icons in your own way. You can add new fields, change the color, set the way of layout etc. The details are given below.

General Tab

The general tab holds the basic setting of social icon element. You’ll find the following editing options here. Fields Group - Fields group holds icon related settings.

One field given to show how other additional icons settings will look like.

You can duplicate an existed field using this square icon.

You can delete an unnecessary field by clicking the basket icon.

You can add a new field under existing field using this red + plus button.

You’ll find a few settings of each field inside the fields group. These settings are described below.

• Title - A title option to keep track which icons you’ve inserted and will be inserting later. This will not appear in the frontend side meaning your viewer will not see the title. It’s for your own record.
• Link - Link field will help you to insert the link in this field. You can set your sites twitter page link or facebook page link through it.
• Image - Image field will allow you to set the image of the icon through this field. There are thousands of icons provided in the icon list. Search the one you’re looking for and insert it by double clicking on the image.
• Layout - In the layout field there are two options provided- list and inline. List will show the icons in the form of list. And inline will show the icons in a single line.
• Position - Position will set the positions of icons. You can display the icons in the left side, center or right side of the column.

Styles Tab

Styles tab will help you style up the element. Here you’ll find three editing fields: Spacing, Border & Color. The editing options are provided according to each field.

• Item Spacing - With this slide bar you can control the space between the icons. You can add a huge gap you want or just keep it as it is.
• Item Padding - Item padding will help you to insert space within the border of individual icon. You can create a gap between icon and its border.
• Border Width - Set the width of border. You can set a fine thin line or just a fat line. It’s your choice.
• Border Type - Border type will allow you to choose what type of border you want for icons. There are few options available - solid, double, dotted and dashed.
• Border Radius - There is a border radius available. You can control the radius of border by it. If you want a round shaped border then set the value of border radius more than 50.
• Color - A few color picker is provided for different operations. You’ll find color setting options for border, background, hover color etc.

Advanced Tab

The advanced tab has the advanced level of settings. You can edit them if you find it necessary or just leave it just the way it is. Here you’ll find six fields : Element styles, Background, Border & Box Shadow, Animation, Custom CSS, and Identifier. These fields are described below in details.

• Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
• Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
• Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
• Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
• Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
• Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.