Roll Your Own Social Media Element

With the addition of Threads and the introduction of X in place of Twitter, several people have been asking when Avada will catch up. I am not holding my breath, and you shouldn’t either (in my opinion). Building your own social media element gives you total control. This can be done manually, as I will do here, or you can create your own manager using ACF custom post types and fields.

This does not address the sharing functionality, just the links to your social media accounts.

This begins with creating your initial layout. In the examples below, I added nest columns with a width set to auto so that they collapse down to the size of the icon. The nice thing is you can manage it the way you want.

• Set the left and right spacing on each nested column to 0 at all break point (sadly these are inline styles that cannot be overridden with a CSS class).
• Add a code block to each of the columns and give the column of social-icon.
• The parent column should have a class of social icons, but it’s unnecessary unless you want to target each icon individually.
• Add your social media link to the column and make sure to add a link description for accessibility
• Lastly, you will need to go to fontawesome.com to get the SVG code for the icons you want to use. The brand icons are part of the free offering.

Now you can save this as a global element and use it wherever you want, and if you need to make an update, you update it in one place, and it updates every instance.