How to use the 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 multiple places on your landing page.

Adding the Social Media Follow module

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

Content options

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 wether 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 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 individual social network icon by clicking on the settings wheel. This includes changing the background color of the icon which can be used to create uniform colored icons on your page.

Design options

Within the design tab, you will find all of the modules 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.

Boder

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

Box Shadow

a shadow behind your module.

Filters

Define your color saturation, 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 modules many elements. You can also apply custom CSS classes and IDs to the module.

CSS ID and 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 with 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.

Visability

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.