Page Designer Modules

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

Full Width Slider Module with the Website Page Designer

Avoori lets you build a beautiful full-width slider module to showcase your pictures or videos and engage your visitors.

Jump to the page designer, to start editing the page where you wish to locate the full-width slider module.

This module can be added inside a full-width section. You can add a new module by clicking on the gray plus sign. Choose the fullwidth slider module from the list. If you prefer to find the module automatically, it’s also possible to type its name in the search bar on top.

Next, let’s customize it!

Define contents

In the contents tab, you will be able to customize all the slides you want to include within the module.

Insert as many slides as you wish by clicking on Add new slide. Click on the individual settings of the slide to customize each one. You can also duplicate the slides if you want to keep the majority of the settings, and then inside each one change the content you want to remain unique.

Inside the individual settings you can change the following content options:

  • Text: include the heading, button, and content text.
  • Image and video: add a slide image or video that will appear to the left of the slide.
  • Link: choose the link the button and the module will redirect to.
  • Background: choose a color, image or video as the slide background.
  • Admin label: define a label.

Inside the design tab, customize:

  • Overlay: define a background or text overlay.
  • Navigation: adjust the color of the arrows or dot nav.
  • Alignment: determine the vertical alignment of your slide image.
  • Image: adjust the color tone of the image.
  • Text: here you can select the text orientation and shadow, and pick between dark or light color.
  • Title text: change the color, font, size, and spacing setting of the title.
  • Body text: change the color, font, size, and spacing setting of the body text.
  • Button: configure the style of the button and its alignment.
  • Spacing: define the module’s padding.
  • Filters: adjust the module’s color tone.

You can also customize your slide with CSS code using the advanced options.

Elements

You can enable arrows and controls to show on your module.

Link

If you want that the module 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.

Customize the design

With these settings, you can customize your design.

Text

Control how your text is displayed in terms of alignment and text shadow.

Title Text

Define the font, color, alignment, line height, and other settings for the title.

Body Text

You can also adjust the font settings for the body text.

Button

Style your button and pick its alignment on the slide.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

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

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 the buttons rel attributes, choose device visibility, and manage transitions. Check this guide to know more about how to use these settings.

Use Case

Let’s create a simple two-slide module to see how it works.

Firstly, we add a slide with the title “Winter Sports addict?” and a nice wintery background image.

For the design options, we are picking a background overlay so that the text becomes more readable.

Then, we replicate the first slide and simply change the text and image to a Summer vibe.

And this is the result!

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

How can we help?