Get More Engagement With Elementor Pro: New Share Buttons Widget

I am sure you want to get more shares to your site. (Who doesn’t?)

Today Elementor Pro introduces a new way to add share buttons to WordPress, one that is both faster and more flexible than ever before.

True, social sharing buttons are yesterday’s news, with articles on the subject published as early as 2012. That said, Facebook alone has grown from 955 million users in 2012, to 1.86 billion in 2016. If you consider that 20% of total time spent online is done on social platforms, it is apparent that social buttons play a crucial role when it comes to getting more traffic to your website.

This release has also evolved from many requests we have gotten from users. With this release, we knock off another plugin from your website plugin list. This speeds up your website performance, and conveniently allows you to control another feature from within the Elementor Editor.

The Best Solution for Social Sharing

The current version we are releasing offers sharing buttons for the following networks:

elementor share buttons

We managed to build a social sharing feature that surpassed the alternatives in two key areas: fast performance and advanced design customization.

Button Designs Customization

To fit-in nicely in an existing website design, Share buttons includes advanced customization options for every style setting of the button. You can set skins, alignments, responsive display and much more.

Let’s go over some of the options to design the share buttons.

Share buttons skin

Skin design

Skins are a set of pre-made styles you can choose from, including:

Minimal: Display the share button in the default and basic skin

Framed: Display the icon, text & counter inside a frame

Boxed icon: Display the icon inside a box

Flat: Display all elements in a flat design

Gradient: Display icon in a different shade than text & counter

Design of Share Buttons

Icon / Text Display

You can choose to display the icon, text or both. This gives you the option to take full use of the space available to you on desktop and mobile devices.

Share buttons columns

Columns / Inline layouts

The Columns setting Lets you choose the number of columns the buttons will appear in. Setting columns to auto will display the buttons inline. If you set it to 1, every button will appear in a separate row. 2 columns will display the buttons on two columns and so on.

custom colors and fonts

Color & Typography Customization

Share buttons get the default colors of each social network. You can also customize a color of your own, so the buttons’ color corresponds with your site’s color scheme.

share button size

Spacing & Size

Besides customizing the color and typography, you can also change the structure of the share buttons, including:

  • Setting the space between buttons
  • Changing the button & icon size
  • Changing the button height
share buttons mobile editing

Responsive Editing

A large portion of your users browse your site on mobile devices. With Elementor’s Share Buttons you can make it easy for them to share your content on social media, by customizing the design of the share buttons with Elementor’s mobile editing toolset. 

custom label for share buttons

Custom Label ("Share the word" instead of "Facebook")

The CTA (Call To Action) of a button has a large influence on getting the user to click. Luckily, with our Share Buttons you don’t have to make do with the standard name of the social network. You can specify any text you’d like, and add a unique message to each and every button.

Mail and print share buttons

Print & Email

In addition to sharing to social networks, your visitors might like to send it to a specific person through email. This is useful when you want to share a helpful piece of content with a colleague.

Counter

By displaying a share counter you can instantly deliver social proof to your visitors, letting them know your content is loved and appreciated by other people.

Share counters are a great addition to blog posts, but also do wonders to other pages, including sales pages. Just think about how much more inclined your visitors will be to buy your product if they see dozens or hundreds of people have shared it.

In our research we found the current social sharing plugins were sluggish, slow and resource consuming, especially when it comes to displaying share counters.

One of the ways we managed to keep our social counters fast performing was by using an API script from Donreach. This is an optimized open source share count API that allows you to display all your social share counters.

* Note – You can have the Share Buttons in multiple pages by either using the Global widget feature or by embedding an Elementor Shortcode in a page template.

How to Add Share Buttons on WordPress

  1. First, search the panel for “Share Buttons”, in the Elementor Editor, and drag & drop the widget onto the page.

  2. In the Content tab, add the social networks you want appearing in your sites. You can also set share buttons attributes such as the View, Skin, alignment and more.

  3. To show the share counter, switch on the ‘Counter’ setting.

  4. If you want to change the style of the buttons, go to the Style tab, where you can set the space between tabs, the button size, typography and more.

Other Improvements

Masonry for the Portfolio widget

Back in February, we wrote about adding the masonry grid to the Posts widget. Now, the Portfolio widget also gets masonry layouts. For those aren’t familiar with Masonry, this layout consists of posts that vary in height, creating the sort of layout best known in Pinterest.

Custom CSS for the entire page

Adding Custom CSS rules is now possible at the page level. This means that if you want to control classes and IDs of the entire page, you can do it right from the page settings menu, without having to go searching for the style.css file or set it for each section.

Conclusion

Let’s recap all the useful featured bundled up in our new Social Share widget:

  • Design, Design, Design. Avoid ugly social share buttons that stick out like a sore thumb. Implement the power of Elementor design on Share Buttons.
  • Fast and resource saving. Reduce the number of installed plugins and enjoy lightweight Share buttons.
  • Mobile responsive, with editing. Stop relying on default mobile settings, and start visually editing your sharing buttons.
  • Many pre-set variations to explore. Play around with the counters, skins, views and other settings available on this feature.

We recommend you take this feature for a spin, and see how many more likes and shares you get once you implement Elementor’s Share Buttons.

If you still haven’t upgraded to Elementor Pro, this is a great chance to do so, and explore the new features we’ve just added to the plugin.

Liked This Article?

We have a lot more where that came from! Join 512,871 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

82 Responses

  1. It’s like you’re psychic! We were just looking to add social sharing to our blog this week. You just saved me a whole bunch of time!

  2. Many thanks for this update. I just wanted to implement these now.. Do you think it is better to put these on every page instead of just in the footer widget ? ( I am only using Pages for far, no postings yet on my WP site)….

  3. By the way, SEO analysis software like Onpage or thehoth with seo-audit-tool criticises the use of Inline CSS… So maybe you will better concentrate on teaching the users how to use a Child Theme and then use the standard style.css methods there ? Or does this not apply, if you want high rankings in the Google index ?

  4. @Ben Pines & Team – Thank you so much for the new share buttons and my favorite addition being the page-specific custom css. This is awesome!

    @Stefan Hartmann – You should inspect the front end code and you will see that only when using the editor the css is inline so the real time preview actually works (this is because one cannot change a rule in an external stylesheet on the fly real-time) but on the front end actual external style sheets are indeed being used.

    Also tools like Google Page Speed should be taken with a grain of salt because it still fails miserably in discerning a real user experience. I’ve had sites with really low scores in the 60-70 range because the tool is strictly grading by a narrow set of rules that don’t always apply to that site but the actual real-world user experience was phenomenal with near instant page loads yet the tool reported longer page loads because it doesn’t have “human eyes” to see whats really going on, i.e. lazy load, embedded content hidden behind modals, etc. This is why I use multiple page grading tools and not just one. GPS almost always gives the poorest grade out of all the page testing tools, at least in my experience. The biggest complaint I have with GPS is that if the same algorithms are used to grade websites that the big G crawls, is it inaccurately diagnosing a website and ranking it lower because it has a false narrow perception? If so, we as a community should demand that the big G fixes it’s logic so as to not unfairly labeling a website poor when it is indeed not the case.

    1. Amen. Positive GTMetrix scores are inversely proportional to GPS. Most of the browser cache leveraging issues stem from Google’s own font API with no way to fix. One thing I am having trouble with is SEO tools not seeing my content in Elementor templates which are placed as shortcode. How to get around this issue? Any thoughts?

  5. Hello, Ben Pines, yesterday I spent 4 hours configuring a new site and just at this point of sharing social networks q I stayed longer and in the end I did not like the result, I even had to adapt to the model ready … I went to sleep , I confess that very sad for not having the power to change this … so now in the morning, because here in Brazil is 06:50 local time I see this execelente news … yes, yesterday I started to write my first post in my first Blog and also like to share in a powerful way and you again surprise with this incredible news … Congratulations, success and thank you very much for Elementor Pro, I am more than proud to have this plugin.

    Sorry, I do not speak English, so I use google translator.

  6. Love it – Love Elementor! I’m the same as Peter, I started looking around for share buttons plugins – I shall know stop looking!

    It’ll be great to see more features with the form element. It’s killing my site at the moment, I’ve got plugins and jotform all (sort of) working together at the moment – Its a bit of a mess though!

    Just wondering if there are any plans to fully integrate the form element with emaill service providers like mailchimp? Also an on click of a button/link triggers a lightbox popup for the form?

    From one very happy elementor user!

  7. I’m curious as to why Instagram isn’t included in this, seems like a huge oversight… or am I just not understanding how social media sharing works when it comes to IG?

  8. Pretty cool widget! So happy with the Elementor so far.

    I would like to use this widget in my posts. To achieve this, I have one question:

    How can we create a template page that we can use it for each post? Every time I post, new Elementor template should be used. I would like to redesign entire post page.

    This way, I can use this new widget to add into my post template page so everyone can share my posts with cool design.

  9. Ben, are these social share buttons able to be globally automatically added to blog posts? Meaning, it’s added to the blogs design/template? So that the Elementor social share buttons will be automatically in place when writing/publishing a new blog post? Thanks and a great update as well.

  10. Hi Ben,

    Another great achievement ! I’m a WordPress newbie so sorry if the questions are a bit silly.

    1. I see there are Sharing buttons but what about “Follow us” buttons ?
    2. How to you actually embed them as a shortcode in a template ?

    Many thanks for this wondrous Elementor Builder

  11. Ben This is exactly what I needed and wanted! Made a Pro buyer out of me! Keep up the good work… modernizing and streamlining the WP process.

  12. Will this social sharing plugin work on our sites if we have pages/posts that are not elementor designed. I have some Elementor pages and some non-elementor pages. Thank you.

    1. We will release an update soon that will let you do that without coding. In the meantime, you can save the section as a template and embed it in your single.php file.

  13. Thanks for your reply Ben. Yes, I understand that I can make any page an Elementor page, however, if I install your sharing plugin, will it also work on other pages/posts on my site that aren’t Elementor designed?

  14. I am elementor pro user, my elementor no article is talking about the function only simple facebook icon function.

    1. It seems like you did an auto translate and it didn’t quite do the job. Any way you can repeat the question more clearly? If you need a simple Facebook icon you can also use our Social Icons widget.

  15. HI Ben. Just come to you guys across from another famous visual builder. I would like to suggest adding Weibo & WeChat icons as share options. It is estimated that between these two social platforms there are about 150 million Chinese expats around the world who still use these as their primary social networks whilst overseas. It would really be another coup for Elementor to offer this. No one else – that I can find at least – does. For many businesses it would be an outstanding feature to be able to have this market share to their peers on their native and preferred social platform. Any thoughts? Cheers

  16. Hello Ben
    I recently began using the free version of elementor page builder on my website http://www.adovat.com/quiz. But I have a little problem with linking to external pages like my Facebook and Twitter profile.
    After adding my Facebook Link facebook.com/askingquiz, on previewing the link, it shows a 404 error with a link http://adovat.com/quiz/facebook.com/askingquiz.
    This also happened to any external link I added. Please I need your help

  17. Hi, I’m trying to set up the social share but there is no way to link to my respective pages. Tried to look at the tutorial you have on the subject and for some reason my version doesn’t have a way to link as the version in the tutorial. I have the pro version.

  18. Hello
    IS it possible to change the page that we share?
    When I try to share, It work but the image that I share is not the one that I want.
    Try to share my site http://www.ditys.immo and you will see a house that I never choose.
    I ll prefer tho share the landing page with its own images.
    Sorry for my english
    I have pro license!

  19. a new user here, is there any way to customize what shows up when users choose to share my post on Pinterest? Its showing a picture but not populating any text. I was hoping to force some text into their pin as well. Overall love the elementor tools so much!

    1. Same problem here! I need that post title appears before link but haven’t found how to make it. Not a BIG problem but I think that’d be a bit better since that’s the most usual (=it’s expected to visitors of my web). Thanks & keep up the good work!

  20. Help! I’ve read this and troubleshooted the best I can. I cannot figure out how to integrate the “count” into the social buttons. Is it just me?! Help!

        1. I’m sorry, it was a misunderstanding and you are correct. You can offer this feature on our Githubc. The integration with Viber I referred to was the Action Links.

  21. Could it be possible there is a bug with Elementor’s Pro Share Buttons widget – especially I have trouble with
    the Email item, when I choose Custom at Target URL, I only get &body= in the subject field, instead of the link being placed as link in the body of the mail. When I mail it nevertheless, the link is suddenly though found in the subject. It would make more logic to me if it was in the body of the mail, but like I said, perhaps it’s a bug, because first (before sending) you can’t see the link in the subject at all.

Leave a Reply