Table of Contents
- How to use
- Edit Mode
- Category Items
- Colors & Fonts
Excited to start using Category?!
I sure hope so _-
Here you can learn how to use the Category 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
Category is a super easy to get started with!
Simply add the stack to your site, and then add Category Items using the (+) button. All of the main styles such as sizing and layout can be found in the main stack.
By default all Category Item colors are inherited by the main stack. If you want a particular Category item to override the default colors simply check one of the "Custom (Style)" toggles in the settings panel of that particular item!
Enjoy! : )
If you check this option the contents of each item will be hidden in edit mode. This is create when you find that your content is taking up lots of space.
Simply sets the maximum width of the stack
With Category you can set custom column numbers for Desktop, Tablet, and Mobile Devices. Here you can set the specific breakpoints and which these column numbers will be adjusted.
Sets the corner roundness of the main category container.
Here you can set the width of the navigation arrows that appear on each side of the category slider. Note that the height is set automatically.
Adjust the corner roundness of the navigation buttons.
Adjusts the size of the arrow icons in the navigation buttons.
With Category, you can set separate column numbers for Desktop, Tablet, and Mobile devices. Here you can set the column numbers.
Padding (Vertical & Horizontal)
Here you can adjust the padding on the inside of the category tabs.
Spacing (Vertical & Horizontal)
This option adjusts the amount of space around category tabs.
This option adjusts the corner roundness of the category tabs.
Here you can adjust the font size of the category tab text.
This adjusts the size of the category tab icons.
This adjusts the amout of space between category tab text and icons.
This sets the maximum width for the category content sections.
This adjusts the amount of padding on the inside of the category content sections.
Colors & Fonts
Here you can edit the colors & fonts for the entire stack
Here you can set the font for Tab Titles, and Content section of the category items.
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
Here you can set a background for the Category Slider. You can set it to a gradient background by clicking on the (+) button
Nav Button Background (Initial & Hover)
Here you can set the background color of the navigation buttons.
Nav Button Icon (Initial & Hover)
Here you can set the color of the navigation button arrow icons.
Tab Text (Initial & Hover)
Here you can set the color and Category tab text.
Here you can set the color and Category tab icons.
Tab Background (None, Color, Gradient, Image)
Here you can set the background of category tabs. You can set it to:
- Single Color
- Gradient (2 colors)
- Images (with color overlay)
Tab Hover Background
Here you can set the background color of tabs when hovered.
Here you can set the background color of the content sections that appear when an item is expanded.
Here you can set the Header, Text, and Link colors for the content sections.
Setting Custom Individual Colors
If you want to set custom colors for category tabs, click on the individual category item that you want to customize and check the "Custom (Style)" checkbox. Then you can set the custom color for that particular style. : )
- Added stack icon