Tutorials stack icon

Expandable Grid

An incredible grid of expandable content panels for RapidWeaver by Weavium

Table of Contents

  • How to use
  • General
  • Items
  • Colors & Fonts


Introduction

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


General

Column

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.

Column Height

Here you can set a min-height for all columns for Desktop, Tablet, and Mobile.

Column Gutter

Here you can choose how much space should be inbetween grid items.

Breakpoints

Here you can set the Tablet and Mobile pixel widths at which the reponsive options become applicable.

Maximum Width

This is the maximum width of the entire grid.


Items

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.

Vertical Align

Here you can set the vertical alignment of the Icons/Titles of the grid items. They can be set to:

  • Top
  • Center
  • Bottom

Horizontal Align

Here you can set the horizontal alignment of the Icons/Titles of the grid items. They can be set to:

  • Left
  • Center
  • Right

Radius

Simply sets the corner roundness of the grid items.

Padding (Vertical & Horizontal)

Controls the amount of inner padding of the grid items.

Title Size

Sets the font size of all grid item titles

Title Weight

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.

Icon Radius

Here you can set the corner roundness of the icon backgrounds.

Icon Spacing

This controls the amount of spacing between the grid item icons and grid item titles.

Content Padding

Sets the amount of padding of the expandable content sections.

Content Width

Here you can set a max width for the content section, if you want content to be centered nicely.

Inactive Opacity

When an item is selected, all other items become inactive, and become slightly transparent. Here you can specify how transparent the inactive items become.

Hover Grow

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.

Hover Move

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

Fonts

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

Titles

Sets the text color of all grid item titles.

Icons

Sets the color of the grid item inner icons.

Icon BGs

Sets the color of grid item icon backgrounds.

Content BG

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

Version 1.0.3

  • Made fix for stacks that force overflow an advanced toggle-able option, as it is a rare case

Version 1.0.2

  • Added ability to close an expanded grid item by clicking outside of the item

Version 1.0.1

  • Added fix for stacks that force overflow on content sections