Table of Contents
- How to use
- Colors & Fonts
- Setting Block icons, links, text
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! : )
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.
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.
Here you can choose to hide the main title
Simply changes the font size of the main title
This controls the amount of spacing between the title and the 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.
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.
Here you can set the corner roundness for each of the blocks.
Here you can set the size of block icons.
Here you can set the font size of the block text.
Colors & Fonts
Here you can edit the colors & fonts for the entire stack
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.
Here you can set the color of the main title.
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
For the backround, you can choose between 5 different options:
- 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.
- Initial Release