The Social Sharing element will help your site visitors be able to share your content on their social media accounts. This can help you get more traffic, leads, and conversions. Watch the video below or read our step by step guide here to learn how to use this element.
To add the social sharing element, you would simply click the "+" icon in the row/column you want to add the element, or click the "+" or "+Element" link on the top left of the OptimizeBuilder editor. You can also search for the element to find it quicker.
Just drag the Social Sharing element directly to the spot you want to display it in like you see here:
You can also click the wand icon in the inline element toolbar to view and select from one of the element presets
Once you add the Social Sharing element, there are some customization options you'll want to know about.
When you add the Social Sharing element to your page, you'll see the inline element toolbar where you can choose customization options for the overall element design. We will dive into the individual items in this element later. This is what you'll see when you add the element, or click on it.
Currently this element supports Facebook, Twitter, Pinterest, and LinkedIn. We may add more options in the future. This is also why you will notice the + icon is grayed out, since there are only 4 services so far in this element. If you only need 2 or 3 of these to start with, once you delete one then you'll see that you can add another.
Clicking the next icon (share icon) you'll find some options such as whether to stack the icons vertically, or display them horizontally, Whether to show share counts and/or total shares. You can also change the share URL, which is the URL that your site visitors would be sharing when they click one of the share icons. So if this was on a membership lesson page, you could put a URL to your landing page or sales page there which can help you get more leads or sales.
Next up we have the alignment options. As long as the element is not as wide as the column it is placed in, you'll be able to choose to align it to the left, right, or center. E
If you need to move the element to another location on your page you can click and hold the cross arrows icon. Just release the mouse when you get it to the spot you want.
Cloning the element is also possible in case you want to copy the element and add it somewhere else in your page
You can also delete the element if you no longer need it
Clicking the gear icon will also open up additional settings where you can adjust the Item Spacing, Space above, and space below the element.
The advanced options can be accessed through the gear icon and clicking on the "Advanced Options" button
Clicking the "Advanced Options button will open the left sidebar where you'll find further customization options for the Social Sharing Element.
Positioning - You can adjust the Margin & Padding for the element to help get that perfect spacing you want.
Responsive - You can show or hide the element based on the device viewing the page, and if you happen to turn this off for desktop, you can click the "show all hidden items" to see it again.
Animation & Delay - You can delay the element, and/or animate it.
Advanced - This is where we put other settings that are less used and more advanced. Usually for developers or for those who need to customize things more deeply than our standard settings.
Each item within this element can also be clicked on individually to either edit settings specific to that item, or all items at once. Just click on one of the Social Sharing icons to open the items inline toolbar. You can tell by looking at the title in the toolbar what it is for.
You can also click the ^ icon next to the x icon on the right side of the inline toolbar to focus the toolbar on the main element rather than just the items in case you want to go back, or click on "Social Sharing" in the breadcrumb trail at the top of the editor:
To edit settings ONLY for a specific item, you can click the padlock icon which unlocks it from the rest of the items.
Click the star icon to open up the settings for the icon. You can change the icon, the icon properties, and icon size. Clicking the icon background tab will also let you change the background frame, shape, padding, and border width.
You may also change the text settings such as Font, Size, and Styling which work similar to all other text elements.
The color settings may also be changed for the item Background, Text, and Icon. The background color can also be a gradient which can make the element look more unique.
If you want to add Borders and/or Shadows, you may do that by clicking on the border icon in the item toolbar
To re-order the icons you can use the cross arrows to do so.
You may also clone the item which will add more than the default of 4 items (if you have 4 already). We suggest being careful with this option as you would then have duplicate icons which may not be desired (unless we add more than 4 social networks in the future).
Of course, once you realize you don't need one of the items you can delete it as well.
You can adjust the spacing above and below the item by clicking on the gear icon
To open the Advanced Options for the Social Sharing Item(s) just click the gear icon and then "Advanced Options button
Positioning - You can adjust the margin and padding for the item
Responsive - You can change settings for specific devices
Advanced - Similar to the main element advanced options
You can also adjust hover properties for the Social Sharing Items as well:
General - Here you can change the hover transition duration, text color, and icon color
Background - You can change the hover background color as well
Borders & Corners - You can change the hover setting for the borders and corners to really take things to the next level.
In conclusion, you can see we have a lot of options for the Social Sharing element in OptimizePress. If you have any questions about using this element or need any help, please reach out to our support team and we'll be happy to guide you.
