Add A Sticky Social Media Menu For Elementor And WordPress
It’s extremely easy to do. I’ve done all the hard work for you so all you need to do is copy and paste. So sit back relax hit that like And subscribe button and let’s get into the Tutorial.
Okay so we’re going to start off by adding our floating social media menu to the side of our Elementor page. In the Search widget box on the top left hand side.
Type in HTML now drag the widget onto your page and paste in your HTML code. Which can be found in the bottom of this Tutorial. If you’ve copied and pasted it correctly you should have all your social media icons down the left hand side in a floating menu.
If you change your social media icons and they don’t fit inside this box. You can make it wider all you need to do is go into your HTML code at the top. In the second line of your code it says width 100 pixels. If you increase this or decrease it it will change the width of your menu.
The next thing I’m going to show you is how to change its position height on the page. As you can see it currently sits just above the middle of a page. If we look at the fourth line of our code it says top 300 pixels. Any number above 300 will move it down the page and any below will move it towards the top of the page.
If you’d like to add your own icons to your menu. All you need to do is look in the code for your URL for your icon. This can be found in your code by looking for IMG SRC. The URL that follows that is your image location highlight this and copy and paste in your new URL for your icon.
Upload your icons to your media library and copy and paste their URL to change our Target location. Once our icon is clicked all we need to do is look in our code for where it says href the URL that follows.
This is where your visitors will be redirected to. If we want to change the colour of our backgrounds of the icons. All we need to do is look in our code and look for background colour. The hashtag number that follows this can be changed and I’m going to do that.
Now and add a red background to our icons. All I’m going to do is highlight the colour and paste in a new one. Each icon has its own background colour and you have to change those individually.
If you want to add more icons to our menu all we have to do is highlight the href to another href. Copy that and paste it back into our code. As you can see another icon has been added to our menu. All you have to do is add your new icon and where it redirects your visitors.
To as you can see it’s extremely easy to use and you can also use it within WordPress. All you need to do is browse your widgets and you’re looking for HTML. So that’s what we’re going to type in our search bar. Once it’s been found select HTML and paste in your code.
You don’t need Elementor Pro for this feature. But if you are looking to sign up to Elementor Pro there is a link in the below. It is an affiliate link it doesn’t cost you any more to use but it does give me a very small percentage of elementor’s profits if you choose to sign up.
If you have found this video useful please do hit that like And subscribe button and notifications Bell for my next Tutorials.
Thanks for reading and I’ll see you in the next one.
