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.
Anything that controls what appears in your module will always be found within this tab. These options apply to your module as a whole.
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.
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.
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.
Within the design tab, you will find all of the module’s styling options, such as fonts, colors, sizing and spacing.
This controls how your icons are aligned (left, center or right) in the module.
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.
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.
Add customized margins or padding here.
Set the border radius, style, width and color of your audio module.
a shadow behind your module.
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.
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.
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 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 can also be applied to the module and any of the module’s 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.
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.