In this WPDesigns article, we will discuss how to Set up Social Share Buttons in Elementor. Easy access to social share buttons will increase the chances of your article being shared and spread around social media. Having an article be shared on social media tells Google that is interesting content and sends social signals for them to promote the content further in the search engines.
Table of Contents
If you want to use the social media platform to promote your blog or business then you should concentrate on getting your content shared on social media. In recent years, it has evolved into a big marketing technique. It can also be used to promote any brands or blogs via social sharing. As a result, it has a major impact on the website’s conversion rate.
If you have Elementor, you can easily implement this by using the Social Sharing Buttons, which will help WordPress web users improve their social media presence, increase interaction, and increase the conversation rate.
By choosing specific sites from the site list and customizing the social share button to suit your needs, you can quickly reach out to your target audience on specific sites. This is the simplest task in Elementor to complete without difficulty.
How to Add Social Share Buttons in Elementor
To add a social share button go to your dashboard and then open your post with Elementor. Then search for share button from the widget search bar at the left hand site. And then drag and drop the widget into the post. You will see three tab to edit the share button content, style and advanced.
Content
Share Buttons
- Cick on add item button to add any social media. Under the Network dropdown > Choose a social network. Here you can see Facebook, Twitter, Google+, Linkedin, Pinterest, Reddit, VK, OK, Tumblr, Digg, Skype, StumbleUpon, Mix, Telegram, Pocket, Xing, Whatsapp, Email and Print.
- View: You can change the view to Icon & text, Icon only, and Text only.
- Label: You have the option here to show and hide the label of buttons.
- Skin: Here you have the option to choose the skin of buttons. You can see Gradient, Minimal, Framed, Boxed Icon and flat skin.
- Shape: Here you can choose your Social Buttons Shape from square, rounded and circle.
- Columns: Here you can choose the number of columns for the buttons.
- Alignment: Set the Social Buttons Alignment
- Target URL: You can sets the Social Buttons URL here.
Style
Share Buttons
- Columns Gap: Here you can set the space between each button’s column.
- Rows Gap: You can set here the row gap of the share buttons.
- Button Size: Here you can control the size of the buttons.
- Icon Size: Here you can control the size of the icon.
- Button Height: Here you can set the height of the buttons.
- Color: Choose either the Official button color combination or specify a custom color combination, with Primary Color for the background color of the buttons, and Secondary Color for the button text. Custom Colors can be set for both the Normal and Hover states.
- Typography: Her you can set the button text typography like font-size, font-family, font-weight, tranform, style etc.
Advanced
The Advanced tab is full of useful features:
- Advanced – Options include; margin, padding, z-index, CCS ID and CSS Class.
- Motion Effects – There are a range of scrolling effects, mouse effects, and you can also choose how the selected element enters the screen, the delay and if it is sticky.
- Background – You can select the background for standard and also for hover. You can choose from a solid background and a gradient.
- Border – This allows you to add a border to the element when standard and hover along with the border-radius. You can also add a box-shadow.
- Positioning – You can change how the element is positioned on the page. For the page width, you have default, inline, and custom. For the page position, you have default, absolute, and fixed. Check out this article for a deep look into the positioning properties in Elementor.
- Responsive – The responsive options will allow you to hide certain sections or elements on different screen sizes. This can be useful when redesigning a page for mobile. On certain elements, you can reverse the columns.
- Attributes – (Pro Feature) You can add custom attributes to the element; you can find a full list here.
- Custom CSS – (Pro Feature) You can add CSS to the site or the element through this box. It is best to add the CSS for the element and add the CSS for the global setting site. You can use “selector” to target the specific element you have open.
