
Category
Table of Contents
- How to use
- Edit Mode
- General
- Navigation
- Category Items
- Colors & Fonts
Introduction
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! : )
Edit Mode
Hide Contents
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.
General
Max Width
Simply sets the maximum width of the stack
Breakpoints
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.
Radius
Sets the corner roundness of the main category container.
Navigation
Button Width
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.
Button Radius
Adjust the corner roundness of the navigation buttons.
Arrow Size
Adjusts the size of the arrow icons in the navigation buttons.
Category Items
Columns
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.
Radius
This option adjusts the corner roundness of the category tabs.
Text Size
Here you can adjust the font size of the category tab text.
Icon Size
This adjusts the size of the category tab icons.
Icon Spacing
This adjusts the amout of space between category tab text and icons.
Content Width
This sets the maximum width for the category content sections.
Content Padding
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
Fonts
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
Main Background
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.
Tab Icon
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:
- None
- Single Color
- Gradient (2 colors)
- Images (with color overlay)
Tab Hover Background
Here you can set the background color of tabs when hovered.
Content Background
Here you can set the background color of the content sections that appear when an item is expanded.
Content Colors
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. : )
Category Changelog
Version 1.0.1
- Added stack icon