
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. : )
Panels Changelog
Version 1.0.2
- Fixed bug causing content overlay not to working properly
Version 1.0.1
- Fixed bug with conflicting css styling adding odd margins
- Removed extra divider with a misspelled title in RW settings panel