How to create Elementor Vertical Social Icons

Elementor Tutorials

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:

elementor social icons vertical

How to accomplish this:

1. Create new social icons element.

elementor vertical social icons

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

elementor vertical social icons

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

elementor vertical social icons


#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!

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *


Open chat
Powered by