How To Use The Social Links Element

Published On: September 24th, 2020Categories: Avada, Video Training642 words3.3 min read

Avada Website BuilderIn this series of videos, we are looking at how to use the Avada Builder Elements. This video looks at how to use the Social Links Element in Avada 7.0

Purchase your next copy of Avada –

Avada Documentation –

Useful Links: Avada Layouts –

Avada Quick Start Guide –

Avada Builder Documentation –

Need support? –

How To Use The Social Links Element – Transcribed

The social links element is a great little social element that allows you to add social links anywhere in your content. 

Let’s look at an example of it here on the contact page of the Avada Church website. 

When we edit the element, we can see it has two tabs, a general tab and a design tab. 

On the general tab, are all the available social links. If you add a link to one of the fields, the icon will show on the page and the link will open in a new tab. 

There are currently 32 social networks that can be added with new ones being added regularly. 

I’ll just add a quick dummy link for LinkedIn. 

And You Tube to show how they appear as soon as they edit. 

At the bottom of the list that also options for email and a phone number. 

Under these options is 1 for show custom social icon. 

If you set this to yes, it will show any custom social icons specified in the global options. You can find this in the global options under social media, social media icons. 

Under this is the usual element visibility option, which allows you to show or hide the element on various screen sizes. 

And if the container it is in is set to sticky, you will also have the element sticky visibility option as well. 

Then there are the CSS class and CSS ID options for further customization with custom CSS. 

Then we have the design tab. This starts with the social icons’ font size. The default on this size is 30 pixels, but you can make them any size you want. 

The next option is boxed social icons and here yes has been selected. Overriding the site default of No. 

The option below this the social icon box radius then controls these boxes and it is empty and so is pulling the default value, which in this case has been set to 50%. 

This gives us a circular background. You can use any pixel value here like 0, which would make them square or something like 20, which would give us nice rounded edges. 

Social icons color type is next and here you can choose from custom or brand colors. 

This is set to brain colors. 

If you select custom colors instead, another two options appear. 

Where you can override the default icon on box colors. 

The next option is all about where the tooltip is placed and you have the usual options of top, bottom, left and right plus an option for none. The default is set to the top here. 

Finally, there is the alignment option, which offers the selections of text flow, left, center and right. 

With this easy to use element, you can quickly make sure your social links are exactly where you want them on your site in an easy to customize format. 

OK, this concludes our video on how to use the social links element. 

Make sure you subscribe to our YouTube channel to keep up with all the latest videos and if you have any questions or need assistance, please create a support ticket and our team will gladly assist you. 

As always, we want to thank you for choosing Avada. 

Transcribed by ZAAAX Design.

If you need audio transcribed, contact us here.

Don’t miss this ...

We don’t spam! Read our privacy policy for more info.

Table of Content

Recent Posts

Don’t miss this

We don’t spam! Read our privacy policy for more info.