---
title: "How to Add Social Share Toggle Button in Elementor?"
url: https://theplusaddons.com/docs/add-social-share-toggle-button-in-elementor/
date: 2024-07-03
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "A row of share buttons takes up space whether anyone uses it or not. The Toggle layout hides them behind a single button and reveals them when the reader asks..."
image: https://theplusaddons.com/wp-content/uploads/2024/07/How-to-Add-Animated-Headings-In-Elementor-2-4-1024x565.jpg
word_count: 668
---

# How to Add Social Share Toggle Button in Elementor?

## 

- The Plus Addons for Elementor Social Sharing widget uses the Toggle layout to hide share buttons behind one button and reveal them on click, not hover.
- Toggle Style 1 keeps the Text field, with the button shipping as share in capitals, while Toggle Style 2 hides Text and shows only the icon.
- Display Counter, View Type, and Column disappear in the Toggle layout, so no total share figure or Horizontal layout column appears.
- Hover Direction appears only on Toggle Style 2 and ships on Top, with Left, Right, Top, and Bottom as the four direction options.

A row of share buttons takes up space whether anyone uses it or not. The **Toggle** layout hides them behind a single button and reveals them when the reader asks for them.

This page covers the Toggle layout of the **Social Sharing** widget in The Plus Addons for Elementor: which controls it adds, which ones it takes away, and exactly what opens it. For the rest of the widget, see the [full Social Sharing settings overview](https://theplusaddons.com/docs/add-social-share-in-elementor/).

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/social-sharing-buttons/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro**. With Pro switched off the widget renders nothing at all.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Social Sharing** and turn its toggle on.

## Steps

- Add the **Social Sharing** widget to the page or template.- In the **Content** tab, open **Social Sharing** and set **Layout** to **Toggle**.- Pick a **Toggle Style**. There are two, shown as pictures.- Add your networks in the **Social Sharing** repeater, as you would for any other layout.- Open the **Toggle Button** section and set the button itself: **Text** and **Select Icon**.

![Screenshot: Open the Toggle Button section and set the button itself: Text and Select Icon](https://theplusaddons.com/wp-content/uploads/2024/07/social-sharing-toggle-new.gif)

## What the Toggle layout changes

- **View Type disappears.** The six icon-and-text combinations are not offered for this layout.- **Display Counter disappears** too, so there is no total share figure here.- **Column disappears** - that one belongs to the Horizontal layout.- **A Toggle Button section appears** in the Content tab, holding **Text** and **Select Icon**. The Text field only applies to **Toggle Style 1**; it ships reading *share* and the widget draws it in capitals.- **A Toggle section appears** in the Style tab, with the toggle button's own width, icon size and colours for the normal and hover states.- **Hover Direction appears, but only on Toggle Style 2.** It picks which way the buttons fan out: Left, Right, Top or Bottom, and it ships on Top.

## What you get on the page

On load only the toggle button is drawn; the buttons behind it have no width or height and are fully transparent.

![The Toggle layout on page load: only the SHARE button is visible.](https://theplusaddons.com/wp-content/uploads/2026/09/socialsharing-result-toggle-closed.webp)

One click on the toggle and the panel opens - we measured it going from nothing to a 1,120 by 51 pixel row at full opacity. A second click closes it again.

![The same toggle after one click: the four social buttons appear below the SHARE button.](https://theplusaddons.com/wp-content/uploads/2026/09/socialsharing-result-toggle-open.webp)

![Screenshot: One click on the toggle and the panel opens - we measured it going from nothing to a 1,120 by 51 pixel row at full opacity. A se](https://theplusaddons.com/wp-content/uploads/2024/07/social-sharing-toggle-demo.gif)

## Settings used here

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Layout** | Set to Toggle for this page | Horizontal |
| **Toggle Style** | Which of the two toggle looks to use | Style 1 |
| **Hover Direction** | Which way the buttons open; Toggle Style 2 only | Top |
| **Text** | The word on the toggle button; Toggle Style 1 only | share |
| **Select Icon** | The icon on the toggle button | share icon |

## How It Behaves

- **It opens on a click, not on hover.** The control is named **Hover Direction**, but hovering the toggle changed nothing in our test - the panel only appeared after a click, and a second click closed it. The setting picks the direction; the click is the trigger.- The panel is hidden by width, height and opacity rather than removed from the page, so it is present in the markup before anyone clicks.- **Each button still shares the post it sits on**, exactly as in the other layouts.

## Limitations

- No counters in this layout: both **Display Counter** and **View Type** are unavailable.- **Hover Direction** is only offered on **Toggle Style 2**. We tested Toggle Style 1, so what the four directions look like is read from the settings, not observed.- **Icons can come out blank** on a page that loads nothing else from Font Awesome.- We did not test this layout on a mobile viewport.

## Troubleshooting

### Nothing renders at all

The Pro plugin is not active. Social Sharing is Pro-only.

### Hovering the button does nothing

That is expected. Despite the **Hover Direction** name, the panel opens on a click.

### I cannot find Hover Direction

Set **Toggle Style** to **Style 2**. The control is hidden on Style 1.

### The word on the button will not change

**Text** only applies to **Toggle Style 1**. On Style 2 the button is the icon alone.

## Related Docs

- [How to Add Social Share in Elementor?](https://theplusaddons.com/docs/add-social-share-in-elementor/)- [How to Add Sticky Social Icons in Elementor?](https://theplusaddons.com/docs/add-sticky-social-icons-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before the Social Sharing toggle layout will render in Elementor?**
A: The widget needs The Plus Addons for Elementor Pro active, because this Social Sharing layout is Pro-only. Elementor free also has to be installed and active, and the Social Sharing widget must be turned on under The Plus Addons > Widgets. If Pro is switched off, the widget renders nothing at all, so a blank result usually points to activation, not a layout mistake.

**Q: Why does hovering over the social share toggle do nothing?**
A: Hovering does nothing because the toggle opens on click, not on hover. The control is named Hover Direction, but that setting only chooses which way the panel fans out: Left, Right, Top, or Bottom. In the test on this page, a click opened the panel and a second click closed it. That naming trips people up because the trigger and the direction setting are separate things.

**Q: How do I make the share buttons open to a specific direction?**
A: Use Toggle Style 2 if you want to control the opening direction. Hover Direction only appears on that style, and it ships set to Top. The available directions are Left, Right, Top, and Bottom. On Toggle Style 1, that control is hidden entirely, so style choice decides whether direction control exists at all.

**Q: Why is there no share counter in the toggle layout?**
A: The toggle layout removes both Display Counter and View Type, so there is no total share figure here and none of the six icon-and-text combinations are offered. That keeps the toggle version compact because only one button shows on load. If you need counters or those other display modes, this layout is the wrong fit.

**Q: What happens on the page when I use the toggle layout?**
A: Only the toggle button appears at first load. The share buttons behind it start with no width or height and are fully transparent, then open into a row when clicked. In this page’s test they expanded to 1,120 by 51 pixels at full opacity. That means the content is present in markup before interaction, which matters if you are debugging visibility versus rendering.

**Q: Should I use Toggle Style 1 or Toggle Style 2 for social sharing buttons?**
A: Toggle Style 1 is better when you want text on the button, because its Text field applies there and ships as share in capitals. Toggle Style 2 is better when you want directional control through Hover Direction, since that setting only exists there. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH splits those controls between styles instead of giving every option to both.