Tutorials stack icon

Multistep Modal

A one-of-a kind modal stack with multiple steps and expandable details for each slide

Table of Contents

  • How to use
  • General
  • Modals
  • Toggle
  • Colors & Fonts


Introduction

Here you can learn how to use the Multistep Modal stack from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. _-


How to Use

Multistep Modal is actually really simple to get up and running!

Simply add the stack to your site, and then add Modal Slides using the (+) button. You can edit the information such as titles, text, and images, by clicking on an individual item, and then going to the stacks settings panel in RapidWeaver.

By default all modal slide colors are inherited by the main stack, though if you want a particular slide to override the default colors simply check one of the "Custom (Style)" toggles!

Have fun. : )


Display

Display Type

Here you can determine if the modal should be displayed on:

  • Toggle click
  • On Scroll to
  • On a set timer

Note: If you select the timer option, an input will appear for adjusting the time delay before the modal is displayed.


General

Alignment Vertical

Allows you to set the vertical alignment of the modal

Alignment Horizontal

Allows you to set the horizontal alignment of the modal

Z-index

Because modals are fixed to the page, they may conflict with other fixed items, increase/decrease this option if you find any overlapping on your site.

Radius

Simply sets the corner roundness of the modal

Width

Sets the max width of the modal

Height

Sets the max height of the modal

Margin

Sets the space around the edges of the modal, especially relevant on mobile devices

Padding

Sets the amount of padding on the inside of the modal


Modals

Here you will find the options for editing the modal slides themselves

Hide Images (Checkbox)

This will remove images from each of the modal slides

Hide Titles (Checkbox)

This will remove titles from each of the modal slides

Hide Text (Checkbox)

This will remove the short description text from each of the modal slides

Hide Details (Checkbox)

This will remove the detail icon and details section from each of the modal slides. Leaving you with a basic modal without expandable info.

Image Dimensions (Width & Height)

Here you can specify the specific width and height dimensions for the modal slide images

Image Radius

Sets the corner roundness of the modal slide images

Image Spacing

Sets the amount of space below the slide images

Title Size

The font size of the modal slide titles

Title Spacing

Sets the amount of space below the modal slide titles

Text Size

The font size of the modal slide description text

Text Spacing

Sets the amount of space below the modal slide description texts

Info Icon Size

The size of the ? icon that reveals more information

Nav Text (Size)

Sets the font size of the "PREV" & "NEXT" buttons in the bottom navigation

Nav Text (Dots & Spacing)

Here you can specificy the size of the navigation dots and the amount of space between them

Nav Padding (Vertical & Horizontal)

Here you can specificy the amount of padding in the bottom navigation section.

Nav Content (Previous text & Next text)

Here you can set the text content for the "PREV" & "NEXT" Buttons

Nav Complete Text

On the last slide the "NEXT" button changes to a "DONE" button, to indicate the end of the modal, you can change the text for this here.


Toggle

Here you can find the settings for the toggle trigger (If you choose to use this option)

Toggle Text

Sets the actual text content within the toggle button

Font Size

Sets the font-size of the text within the toggle button

Radius

Sets the corner roundness of the toggle button

Padding (Vertical & Horizontal)

Sets the amount of padding within the toggle button


Colors & Fonts

Here you can edit the colors & fonts for the entire stack

Fonts

Here you can set the font for Toggle, Titles, and Text of the stack

Simply select the font that you want to use from the list, or select custom and provide the name of a Google Web font that you would like to use.

You can find Google Web fonts here: www.fonts.google.com

Title Color

Sets the color of modal slide Titles

Text Color

Sets the color of modal slide description Text

Info Icon (Initial & Hover)

Here you can set the color of the "?" icon at the bottom of each modal slide

Details BG

Here you can set the background color of the details section of each modal slide

Details Text (Headers, Text, Links)

Here you can set the text color of Headers, Text, and Links that appear in the details section

Nav Dots (Initial & Active)

Here you can set the color of the navigation dots, both in there initial state and the active dot.

Nav Text (Initial & Hover)

Here you can set the text color of the "PREV" & "NEXT" buttons on both initial and hover state

Nav Complete

This sets the text color of the "DONE" button that appears on the last slide

Toggle BG (Color or Gradient)

Here you can set the background color of the modal toggle, If you click the + button, you will be able to set a gradient.

Toggle Text

Simply sets the color of the text within the modal toggle

Modal BG

Here you can set the background color of the modal slides, If you click the + button, you will be able to set a gradient.

Modal Shadow

Here you can set a box-shadow for the modal slides

Multistep Modal Changelog