
Swipe
Table of Contents
- How to use
- General
- Title
- Blocks
- Colors & Fonts
- Setting Block icons, links, text
Introduction
Ready to start using Swipe?!
It's modern, sleek, and easy to setup! : ]
Here you can learn how to use the Swipe 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
Swipe is a peice of pie to set up!
Simply add the Swipe stack to your site, and then add blocks using the (+) button. All of the main styles such as sizing and layout can be found in the main stack.
By default all block colors are inherited by the main stack.
If you want a particular block to override the default colors simply check one of the "Custom Colors" option in the settings panel of that particular block!
You can also edit icons, text, and links by clicking on individual blocks.
Enjoy! : )
General
Z Index
Here you can set a Z index for the Dive menu. This helps to keep the menu on top of any other fixed stacks that you may have.
Padding (Vertical & Horizontal)
Here you can set the padding around the edges of the stack.
Breakpoints
Here you can set the pixel widths for the tablet and mobile breakpoints. These are the widths at which the tablet and mobile styles will me applied.
Title
Hide Title
Here you can choose to hide the main title
Title Size
Simply changes the font size of the main title
Title Spacing
This controls the amount of spacing between the title and the blocks.
Blocks
Here you will find the majority of options for the styling the blocks.
Cols (Desktop, Tablet, Mobile)
This is where you can determine the number of block columns that will appear on different devices.
Gutter
Here you can set the amount of space that will appear inbetween each block item. This applies to both the slider and the grid.
Height (Desktop, Tablet, Mobile)
This is where you can set the height of the blocks. You can set different heights for different device sizes.
Padding (Desktop, Tablet, Mobile)
Here you can set the inner padding of the blocks. You can set different padding amounts for different devices.
Radius
Here you can set the corner roundness for each of the blocks.
Icon Size
Here you can set the size of block icons.
Text Size
Here you can set the font size of the block text.
Colors & Fonts
Here you can edit the colors & fonts for the entire stack
Fonts
Here you can set the font for the Swipe Stack.
There are 3 options for selecting fonts:
- Preset (choose from a list)
- Custom Google Font (Quick Google Font by name)
- Custom Font (Your own custom font name)
If you choose Custom Google Font all you need to do is type in the name of the google font that you want to add, it will work like magic!
You can find Google Web fonts here: www.fonts.google.com
If you select "custom" you will need set a custom font name of your own. Note, that you must provide your own font library somehow.
Title Color
Here you can set the color of the main title.
Swipe Notice
On Desktop devices, a small notice appears telling the user that they can swipe through items with their mouse.
Here you can set the color of the background and text color of this notice.
Toggle Text (Initial & Hover)
Here you can set the initial & hover colors of the "View All" toggle that appears in the top right corner of the stack.
Block Icon (Initial & Hover)
Sets the color of block icons
Block Text (Initial & Hover)
Sets the color of block text
Block Background
For the backround, you can choose between 5 different options:
- Color
- 2 Color Gradient
- 3 Color Gradient
- Image with a single color overlay
- Image with a gradient overlay
Simply select the background type that you want and the appropriate options will appear. : )
Setting Block Links, Icons, Text
Click on an individual block to edit the item link, icon, and text.
Swipe Changelog
Version 1.0.4
- Added option for opening in new window or same page
Version 1.0.3
- Fixed bug causing title and block fonts not to work
Version 1.0.0
- Initial Release