[V6] Social Sharing Element

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 1: From your GemPages Dashboard, select the preferred template and enter the Editor.

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.

Share URL

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.

Share Button

Select a preferred style for your sharing button from the dropdown menu. There’re three options to choose from in this section as below:

• None

• 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).

Alignment

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.

Extra class

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.