DiviMenus Sharing

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.

For the sake of this demo page, we are going to change the buttons shape from square to rounded corners.

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.

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.

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.

Let’s now show image sharing buttons horizontally.

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.

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.