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. : )