Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Slider Module with the Website Page Designer

Slider Module with the Website Page Designer

The Slider module of the page designer makes it really easy to add slides to your pages, using unique layouts. The slides are a fantastic way to showcase the features of a product or service, with a professional touch.

Content settings

Title

Add new slides with the gray plus button and edit each one using its settings.

Inside the individual settings you can edit the content:

  • Text: add a heading, button text, and content.
  • Image and Video: add a slide image or video to the left of your slide text.

You can customize the individual design settings of each slide:

  • Overlay: you can enable a custom overlay above your image background and behind the content and a background color behind the slider text to make it more readable.
  • Navigation: customize the arrows or dot nav color.
  • Alignment: determine the vertical alignment of the slide image.

  • Image: adjust the tone of the slide.
  • Text: customize the title text design options.
  • Title text: customize the title text design options.
  • Body text: customize the title text design options.
  • Button: customize the button’s alignment.
  • Spacing: add custom spacing.
  • Filters: adjust the tone filters.

Elements

Enable the arrows or the dot nav controls.

Link

If you want that the element opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Design settings

Text

Style the slides text design.

Title Text

Customize the title style.

Body Text

Style the body text.

Button

Customize the button text, color, background, and alignment.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color, and width.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.

Use Case

Let’s create a slider now!

We are adding two slides with two different background images, using parallax effect, using text overlay, arrows and dot navigation.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?