Social Media Module

Use the Social module to connect website visitors directly to your social media accounts. Each icon is customizable and they can be placed in multiple places on your landing page.

Adding the Social Media Module to a Landing Page

To add the Social Media Follow module to your Landing Page, click on the grey plus (+) sign in your Landing Page builder. Locate the Social Media Follow module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word "social" and then click enter to automatically find and add the Social Follow module!

Once you add the module you will be prompted to select a social network to add. Each social network will require a specific login, Account URL information, or credentials or order to be an active link.

Each social icon does not need its own module, you can create and edit multiple accounts from one Social Follow Module. Press the back arrow to return to the main settings tab to add more social networks to your page.

Customize the Social Media Module

The Social Media Module allows customization under the content, design, and advanced tabs of the module. These will enable you to ensure the module fits your brand's standards.;

Content

Anything that controls what appears in your module will always be found within this tab. These options apply to your module as a whole.

Icon

Choose whether the icon leads to open your social network in a new tab or the same window and add a follow button next to each network icon.

Background

Define a custom background color for your module, or leave it blank to use the default color. Alternatively, upload an image from your Assets Manager to display as a background. To remove a background image, simply delete the URL from the settings field.

Admin Label

This will change the label of the module in the builder for easy identification.

Content Options for Each Social Network

In addition to your module content options, you can update the links to each network or customize each social network icon by clicking on the settings wheel. This includes changing the icon's background color, which can be used to create uniform-colored icons on your page.

Design

Within the design tab, you will find the module's styling options, such as fonts, colors, sizing, and spacing.

• Alignment: This controls how your icons are aligned (left, center, or right) in the module.

• Text: If you are using the “Follow” button from the Icon Settings, here is where you can change the text from light to dark and add a shadow.

• Sizing: This is the sizing for your entire audio module. If the size goes below 100% on the slider, options for aligning your module left, center, or right will automatically appear.

• Spacing: Add customized margins or padding here.

• Border: Set the border radius, style, width, and color of your audio module.

• Box Shadow: a shadow behind your module.

• Filters: Define your color saturation, and the contrast of light and dark areas, add a sepia filter, or blur your entire module. Lots of options for filters in this section. Blend Mode allows you to modify how your image blends with any other layers beneath it. Choose normal to return to the default option.

• Animation: Pick an animation style to enable animations for your image module. Each animation will allow you to customize it further, controlling duration, direction, and intensity.

• Design options for each social network: Customize the spacing, borders, shadow, and filters for an individual social media icon.

Advanced Options

Within the advanced tab, you will find options such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module's many elements. You can also apply custom CSS classes and IDs to the module.

CSS ID & Classes

Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling or to create links to particular sections of your page. Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated by a space.

Custom CSS

Custom CSS can also be applied to the module and any of the modules internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.

Visibility

This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smartphones, or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.