V4 Elements Social Share Estimated reading: 6 minutes 4 views Add buttons that let visitors share your page on social networks with one click. Each button knows the page it sits on. No code needed. WIDGET Social Share PARTS Buttons with an icon and a label PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons before you start. Note: In the screenshots, the orange boxes and numbers show you where to click or what to check. STEP 1 Enable the Widget The Social Share is on by default. If it is off, turn it on from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under General Widgets, turn on Social Share. Click Save Settings. The Social Share widget in the dashboard (click to zoom) STEP 2 Add the Social Share Add the widget to your page. It comes with three buttons: Facebook, Twitter and LinkedIn. Open your page with the Elementor Editor. Click the + button at the top to open the Elements panel. Under AAE General, find Social Share. Drag it onto your page. The Social Share in the Elements panel (click to zoom) Tip: You do not need to type the page address. Each button shares the page it is on. STEP 3 Pick a Look with a Preset A preset gives the buttons a ready-made design in one click. You can skip this step and use the default look. Select the Social Share. In the General tab, open Presets. Click Apply a preset. Click the design you like. The Apply a preset button (click to zoom) The four presets (click to zoom) Note: A preset replaces your buttons with its own set. Pick a preset first, then adjust the buttons. Social Share – Side Bar Icon buttons stacked in a column. Social Share – Icon Bar A row of icon buttons. Social Share Stat – Horizontal A stat style layout, laid out in a row. Social Share Stat – Vertical A stat style layout, stacked in a column. STEP 4 Add and Manage Buttons Each button is an item. Manage them in the Items section. Open the Items section in the General tab. Click the + button to add a button. Drag a button by its dots to change the order. Click the copy icon to duplicate a button. Click the x to delete it. Add (1), a new button (2), copy and delete (3) (click to zoom) Tip: A new button shows Share and has no network yet. Set it up in Step 5. STEP 5 Choose the Network Click a button on the page, or in the Structure panel. Its settings show in the General tab. Open Social Network and pick a network. Leave Shared Link empty to share the current page. The page address is shown in grey as a hint. Choose where the link opens in Open In: New Window or Same Window. Turn on Add Nofollow if you want the link to have nofollow. Turn on Pulse on Hover for a pulse effect when the mouse is over the button. Network (1), Shared Link (2), Open In (3), Nofollow (4) and Pulse on Hover (5) (click to zoom) The network list (click to zoom) Note: Changing the network does not change the icon or the text. Do that in Step 6. Custom / None For a network that is not in the list. See Add Any Other Network below. Facebook Shares the current page on Facebook. Twitter / X Shares the page address and the page title. LinkedIn Shares the page address and the page title. Pinterest, Reddit, Tumblr, Blogger Share the current page on that network. Instagram Links to Instagram. STEP 6 Change the Icon and the Text Each button has an Icon and a Title. Open the Structure panel to find them. Open the Structure panel and open a button. Click Title. Type the new text in Paragraph. Click Icon. Move your mouse over the picture and click Select SVG, then pick an SVG from your Media Library. Or click Upload to add a new one. The Icon (1) and the Title (2) of a button (click to zoom) Tip: Want only the icon? Delete the Title part, or use a preset with icons. EXTRA Add Any Other Network Your network is not in the list? Use Custom / None and write the link yourself. Select the button. Set Social Network to Custom / None. In URL, type the share link. Use ${u} for the page address and ${t} for the page title. Change the Icon and the Title as in Step 6. Tip: Example: for an email button, type mailto:?subject=${t}&body=${u} in URL. SETTINGS Options Social Network Default: Custom / NoneThe network of the button. Facebook, Twitter / X, LinkedIn, Pinterest, Reddit, Tumblr, Blogger, Instagram or Custom / None. Shared Link Default: emptyOptional. Leave it empty to share the current page. Fill it in to share a specific link instead. URL Default: emptyOnly for Custom / None. Your own link. ${u} is the page address and ${t} is the page title. Open In Default: New WindowOpen the link in a new window or in the same window. Add Nofollow Default: OffAdds nofollow to the link. Pulse on Hover Default: OffA pulse effect when the mouse is over the button. ID Optional CSS ID for the button. RESULT Final Result Two Social Share widgets on a live page. The top one has four buttons: Facebook, Twitter, LinkedIn and a custom Email button. The small one below uses the Icon Bar preset. Social Share on the live page Facebook, Twitter, LinkedIn Each one opens its share window with the address and title of the page the buttons are on. Email A custom button. Social Network is Custom / None and URL is mailto:?subject=${t}&body=${u}. The icon is a mail SVG and the title is Email. Icon Bar The same widget with the Icon Bar preset applied. GOOD TO KNOW More Details Current page The buttons use the page address and title of the page they are on. In the editor you see the address of the page you are editing. Style Select the widget or a button and use its Style tab for colors, spacing and borders. Gap Buttons are 12px apart by default. HELP Troubleshooting I do not see the Social Share in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Social Share. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. I changed the network but the icon is the same The network only sets the link. Open the Structure panel and change the Icon and the Title of the button. My new button does not share anything A new button has no network. Select it and choose a Social Network, or use Custom / None with a URL. I want to share a different page Select the button and type the address in Shared Link. I want the icons only Apply a preset like Icon Bar, or delete the Title part of each button. You Did It Your page now has share buttons. If you face any problem, please contact our support team. We are happy to help.
