How to create Elementor Vertical Social Icons

Ever wonder how to make a vertical aligned social icons list using Elementor Page Builder? Here’s how to do it with few lines of codes.

In this tutorial, we’re going to accomplish the following:

1. Make the social icons aligned vertical direction (default is horizontal).
2. Make the social icons floating on top of other elements (Hero sliders in this case).
3. Position the social icons elements responsively based on screen size.
4. Able to make it sticky or scroll with page.

The results:

How to accomplish this:

1. Create new social icons element.

2. Switch to Advanced tab and make the element class ID as “vert-social”

3. Go to the Custom CSS section and place to following CSS code.


#vert-social {
position: absolute;
display: flex;
z-index: 999;
top: 15vh;
left: 5vw;
width: 50px;
}
#vert-social.elementor-shape-circle .elementor-icon.elementor-social-icon {
margin-top: 5px;}


You can customize the CSS to your liking such as:

• position: absolute (scroll with page) | fixed (sticky when scrolled)
• you can change “left” to “right” if you want it to float on the right side.
• margin-top: 5px (is for spacing between icons)
• elementor-shape-circle replace the ‘circle’ with ‘square’ or ’rounded’ based on type of social icons used.

Update your page and preview it! Good luck!