DiviMenus Sharing
This demo page will show you some social sharing buttons that you will be able to create with DiviMenus Sharing.
DiviMenus Sharing is a DiviMenus add-on that was released on August 2020. It converts DiviMenus into the very first social sharing module for Divi.
In this demo page, we are covering here some designs that we think that you might like. We hope these demos help you to use DiviMenus to easily create unique responsive designs that will blow your visitors away.
So if you are using DiviMenus, it’s definitely worth a try!
ICON and TEXT share buttons
In the following examples, we are going to show you some designs with icon and text buttons.
We are going to display the buttons horizontally for desktop devices. For mobile devices, on the other hand, we’ll change the orientation to vertical.
Now, the orientation will be vertical for both desktop and mobile devices. Also, we will show different alignments.
The orientation will be horizontal for desktop devices and vertical for mobile ones. Also, the DiviMenu will be closed on desktop and open on mobile. In addition to that, we will show the Menu Button in desktop only.
We won’t change the orientation for this example, but the DiviMenu will be closed and will show only Facebook. When opened the remaining social networks will be displayed.
Here we are showing a Share Text for both desktop and mobile devices. Similarly, the orientation will also be horizontal for desktop and vertical for mobile devices.
Here we are removing the text on mobile devices. About the orientation, it will be horizontal now on mobile too.
In this case, and also for mobile devices, we are removing the icon (rather than the text).
Let’s now place the social icon on top.
You may want to use custom text on desktop only and hide them on mobile.
You may want to use custom text for some social networks on desktop only and hide them on mobile.
You may also want the buttons to take up all the available space (fullwidth buttons) on desktop devices.
Or even display different buttons on each device. For example, 4 sharing buttons on desktop and 2 buttons on mobile.
Customizing the buttons
Please, notice that we are using the DiviMenus default settings for all this demo page buttons (we have just added the social brand colors, that you can customize too).
You can change the buttons settings to customize them: buttons style, spacing, size, borders, fonts or hovers, just to name a few.
For the sake of this demo page, we are going to change the buttons shape from square to rounded corners.
IMAGE and TEXT share buttons
In the following examples, we are going to show you some designs with image and text buttons.
As we did earlier for icons and text. We are going to display the buttons horizontally for desktop and mobile devices.
Here, the orientation will be horizontal for desktop devices and vertical for mobile. Also, the DiviMenu will be closed on desktop and open on mobile. In addition to that, we will show the Menu Button in desktop only.
Same as before, but with fullwidth buttons.
Again, let’s show always the Facebook share button, no matter whether the DiviMenu is open or not. When opened, the remaining share buttons will be displayed.
Here, we will remove the text on mobile.
And here, on mobile too, we will remove the image instead.
Let’s now place the social image to the top (remember that you can place the image to the left, right and bottom positions as well).
For text and image, you may want custom texts and fullwidth buttons as well.
TEXT share buttons
In the following examples, we are going to show you some designs with text.
Let’s show the share buttons in a horitonzal bar for desktop. For mobile, we’ll use a vertical bar. Remember that you can achieve that by changing the DiviMenu orientation.
ICON share buttons
In the following examples, we are going to show you some designs with icon buttons.
Let’s try now a completely different thing. In this example we will show a single sharing button. When clicked, a popup with all social networks will appear.
Let’s now use fullwidth share buttons on desktop devices only.
Here, the orientation will be horizontal for desktop devices and vertical for mobile. Also, the DiviMenu will be closed on desktop and open on mobile. In addition to that, we will show the Menu Button in desktop only.
IMAGE share buttons
In the following examples, we are going to show you some designs with image buttons.
Let’s now show image sharing buttons horizontally.
ICON & TITLE share buttons
In the following examples, we are going to show you some designs with icon and title (Menu Item Title) buttons.
In this example will show sharing buttons with titles (Menu Item Titles).
Here, we are going to remove the titles on mobile.
Now, we are going to use a circular menu to show the buttons.
And now, a top semicircular menu. Also, we will remove the titles.
IMAGE & TITLE share buttons
In the following examples, we are going to show you some designs with image and title (Menu Item Title) buttons.
In this example, we will display the buttons horizontally on both desktop and mobile devices. In addition to that, we will remove the titles on mobile.
Same as before, but showing the buttons in a top semicircular Menu. We will remove the titles on both desktop and mobile devices.
DiviMenus Sharing allows you to create the best looking social sharing buttons from the Divi Builder. Beautifully. Check out the plugin demo page: Your visitors will love them!
Did you like them? Get DiviMenus Sharing now!
Disclaimer: The DiviMenus extension is required.