About the Social sharing element
The Social Sharing element enables site visitors to share your content using their social accounts.
Add the Social Sharing element to GemPages Editor
Before we start, you may need to add the Social Sharing element from the library to your Editor. Kindly follow the steps below.
Step 2: After that, access the Library on the left side of the top bar.
Step 3: Next, go to the Element tab and search for Social Share.
Step 4: Click on the Social Share element, then hit “Add element’’.
After that, the Social Share element is located on the left sidebar of the Editor, under the Booster section. Drag & drop it to your chosen position.
Click on the element to view its configurations in the left sidebar, including the Settings and Design tabs.
Configure the Settings Tab
There are five social platforms for you to choose from: Facebook, Twitter, Pinterest, Email and Linked In. Click on the arrow to open the corresponding section. Toggle on the Display switch to enable the platform sharing button on your page.
Share text: Enter the text for the sharing button label into the field.
Share In: Determine how your page will be shared – In a new tab, a pop-up or the current tab.
Color: Enter the hex color code or select a color for the text.
Background: Enter the hex color code or select a background colour for the button.
Select “Custom” and enter the link to the “Custom URL” field. If you leave it blank or select the option “Auto”, the share URL will be the current page URL.
Pick link: The link picker window will appear for you to select the link to add.
Select a preferred style for your sharing button from the dropdown menu. There’re three options to choose from in this section as below:
- Call to action
- Share Counts
Font size: Use the slider or input your preferred size in pixels.
Spacing: Use the slider to adjust the spacing between the sharing buttons.
Button width/ height: Input your preferred width/ height for the sharing button (in pixel or percentage).
This section allows you to determine how the element is positioned on your page. There are three options to choose including left-aligned, centered, and right-aligned.
If you wish to customize the content element with code, please use this field to add a class name and then refer to it in the CSS file.
Configure the Design tab
To style how the element looks, please navigate to the Design tab and follow the instructions in this article.