Table of Contents
- How to use
- Colors & Fonts
Excited to start using EXG (Expandable Grid)?!
It's simple and awesome! _-
Here you can learn how to use the Expandable Grid 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
EXG is super easy to set up!
Simply add the stack to your site, and then add Grid Items using the (+) button. All of the main styles such as sizing and layout can be found in the main stack.
By default all Grid Item colors are inherited by the main stack EXCEPT for the background. By default Grid Item Backgrounds are set individually, though they can all be shared if that is what you desire.
If you want a particular Grid item to override the default colors simply check one of the "Custom (Style)" toggles in the settings panel of that particular item!
You can also edit icons and text by clicking on individual Grid Items.
Enjoy! : )
EXG is a grid, and as a necessity for all grid stacks, you need to be able to specify how many columns for Desktop, Tablet, and Mobile. You can do so here.
Here you can set a min-height for all columns for Desktop, Tablet, and Mobile.
Here you can choose how much space should be inbetween grid items.
Here you can set the Tablet and Mobile pixel widths at which the reponsive options become applicable.
This is the maximum width of the entire grid.
Here you will find the majority of options for editing grid items.
Hide All Icons
Choose whether or not all icons should be hidden.
Hide All Titles (Show Icons Only)
Choose whether or not all titles should be hidden.
Here you can set the vertical alignment of the Icons/Titles of the grid items. They can be set to:
Here you can set the horizontal alignment of the Icons/Titles of the grid items. They can be set to:
Simply sets the corner roundness of the grid items.
Padding (Vertical & Horizontal)
Controls the amount of inner padding of the grid items.
Sets the font size of all grid item titles
Sets the weight Normal/Bold of the grid item titles
Icon Size (Background & Icon)
Here you can set the size of the grid item icons. Note that icons have both a outer container background and an icon.
Here you can set the corner roundness of the icon backgrounds.
This controls the amount of spacing between the grid item icons and grid item titles.
Sets the amount of padding of the expandable content sections.
Here you can set a max width for the content section, if you want content to be centered nicely.
When an item is selected, all other items become inactive, and become slightly transparent. Here you can specify how transparent the inactive items become.
If desired, Grid Items can scale/grow on hover. Here you can specify how large they will grow. The smallest size is 1 (initial) and the highest is (2) double the size. (1.01 ~ 1.1) are recommended grow sizes.
Grid Items can also shift up or down on hover if desired. Simply set a negative or positive value for the respective hover shift.
Colors & Fonts
Here you can edit the colors & fonts for the entire stack
Here you can set the fonts for the Text and Dividers of the sidebar.
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
Sets the text color of all grid item titles.
Sets the color of the grid item inner icons.
Sets the color of grid item icon backgrounds.
Sets the background color of all content sections.
Content (Headers, Links, Text)
Here you can set the color of text that appears in the content sections. You can set a separate color of Headers, Links, and text.
Item Background (Off, Color, Gradient, Image)
Here you can set a background for the Sidebar. You can set it to:
- Single Color
- 2 Color Gradient
- Background Image (Width Gradient overlay)
Setting Custom Individual Colors
If you want to set custom colors for a grid item, click on the individual item that you want to customize and check one of the the "Custom (Style)" checkboxes. Then you can set the custom color for that particular style. : )
Expandable Grid Changelog
- Made fix for stacks that force overflow an advanced toggle-able option, as it is a rare case
- Added ability to close an expanded grid item by clicking outside of the item
- Added fix for stacks that force overflow on content sections