Slider Module
A slider is a great way to showcase your product, an event, or feature a highlight on your landing page. The Slider combines images and content that can help create a visually appealing highlight on your page.
How to Use a Slider Module
To add a Slider Module to your landing page, click the grey (+) button in the landing page builder. Once the module has been added, you’ll be able to add content for each page in your slider.
Customize your Slider Module
Each page of the sliders can be customized individually by clicking on the settings wheel next to the page slider name.
For each page of the slider, you can edit the Text, add a link for a CTA button, or add a background image, or video.
In addition, the Slider module has three areas to customize your content:
-
Content
-
Design
-
Advanced
Slider Module Content
The content options of your Slider Module will consist of three categories :
-
Elements**:** Choose whether to show the controls and arrows on your slider.
-
Background**:** Set a default color or background image for your module. This default will display if each page of your slider does not use an individual color or image.
-
Admin Label: This will change the label of the module in the builder for easy identification.;
Slider Module Design
The design options will allow you to change the appearance of your slider to match the appearance and tone being used on your landing page.
-
Layout: Toggle on or off the option of a shadow.
-
Text: Set an orientation and add a shadow to your text. Design options here will take effect for all your text.
-
Title Text: Change the font, weight, size, spacing, and more! Changes to the size and spacing will change the size of your slider module.
-
Body Text: Change the font, weight, size, spacing, and more! Changes to the size and spacing will change the size of your slider module.
-
Button: Toggle the option to Use Custom Styles for Button and have a fully customizable button for your pricing table including adding a hover icon, changing the color, and more.;
-
Sizing: This is the sizing for your entire slider 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 slider module.
-
Box Shadow: Add 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.
Advanced Tab
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.
