Multistep Modal
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