Panels

Table of Contents

• How to use
• General
• Section Panels
• Colors & Fonts

---

---

Introduction

Here you can learn how to use the Panels 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

Panels is a super easy to get started with!

Simply add the stack to your site, and then add Panel Items using the (+) button. You can edit the information such as titles, icons/images, and background colors by clicking on an individual item, and then going to the stacks settings panel in RapidWeaver.

By default all panel colors are inherited by the main stack EXCEPT FOR THE BACKGROUND. If you want a particular panel to override the default colors simply check one of the "Custom (Style)" toggles!

Enjoy! : )

---

General

Max Width

Simply sets the maximum width of the stack

Min Heights

Here you can set the minimum height for panels on Desktop and Mobile.

Note that on mobile devices the panels revert to vertical mode, therefore you want to pick a min-height that is a bit smaller than you would on Desktop.

Radius

This simply sets the corner roundness of the panel container

Mobile Point

This determines the point at which the panels will revert to vertical mode for mobile devices.

---

Section Panels

Icon BG Size (Initial & Active)

Around each panel icon there is a background area. You can set the size (width/height) of this icon background here.

You can set a different size for initial and active (expanded) mode.

Icon Size (Initial & Active)

Here you can set the font size of the panel icons.

You can set a different size for initial and active (expanded) mode.

Icon Radius (Initial & Active)

This sets the corner roundness of the icon background.

You can set a different size for initial and active (expanded) mode.

Title Size (Initial & Active)

Simply sets the font size of the panel titles for both initial and active mode.

Title Spacing (Initial & Active)

Adjusts the amount of space between the panel icons and panel titles.

Note that in initial mode the space is above the panel title, while in active (expanded) mode, the space is to the left of the panel titles.

Title Weight

Here you can choose whether or not the panel titles should be bold or normal weight.

Content Width

Here you can set a maximum width for the panel content when a panel is expanded.

Content Padding (Vertical & Horizontal)

Here you can adjust the amount of padding around the content area of panels when expanded. You can adjust both the vertical and horizontal padding.

Help Text

When a panel is hovered, a small "View Details" text will appear indicating to the user that if they click on a panel, they can view information.

You can adjust the text content of this area here.

Help Text Size

Here you can adjust the size of the help text.

Hover Stretch (Desktop & Mobile)

When a panel is hovered it will stretch slightly to add a unique looking effect. You can custom the stretch amount here.

---

Colors & Fonts

Here you can edit the colors & fonts for the entire stack

Fonts

Here you can set the font for Title, Content sections of the st ack

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

Icon Colors

Here you can set the color of the icon and icon background

Title Color

Sets the color of panel Titles

Help Text Color

Sets the color of the "View Details" help text.

Content Colors

Here you can set the Header, Text, and Link colors for the content section of the panels when expanded.

Overlays

When a panel is expanded, there are two overlay backgrounds that appear.

One behind the titlebar, and one behind the content section.

You can set the color and opacity of these overlays here.

Details Text (Headers, Text, Links)

Here you can set the text color of Headers, Text, and Links that appear in the details section

Setting Backgrounds

Backgrounds for the Panels stack are meant to be set individually for each panel. Simply click on the panel, and you will find the settings for adjusting the background there.

---

Setting Custom Individual Colors

Note that all colors besides backgrounds are shared by the main stack settings by default.

If you want to set custom colors for titles, icons, help text, etc. Click on the individual panel that you want to customize and check the "Custom (Style)" checkbox. Then you can set the custom color for that particular style. : )