PVII Quick Grid User Guide

Number of Rows

Enter the number of rows you would like for the grid. Each row will contain the Column Layout selected. You can change the number of rows at any time to either increase or decrease the number of rows contained in the grid. The height of each row will be determined by the tallest column in that row.

Column Layouts

Select one of the column layouts in this listing. This can be though of as the template for how each column in a row will display. Every row will render with this same Column Layout method. You can change this selection at any time.

Default Content for New Items

You can select the type of default content that appears in each column so make it easier to edit with your content:

• Text: This will create a paragraph containing the word Column and the column number. Choose this is you are going to enter text into the columns.
• Number: This will create a simply column number. Choose this if you are going to insert images or content other than text.

Column Gap

Enable this box if you wish to have a gap between the columns and rows. The default gap size is 10px. Note that the outer edges of the grid are not affected by this setting, the gap will only appear in between columns and in between rows.

Center Vertically

This option will center the content of each column vertically.

Center Horizontally

Enable this option to center the content of each column horizontally.

Column Auto Wrap

Enabling Column Auto Wrap will disregard the Number of Rows and Column Layout selection and instead render as many columns in one row as possible, allowing the remaining columns to wrap to a new row. Each column is set with a minimum width of 150px and allowed to stretch. The columns will stretch to a point where all of the columns fill the container in one row.

Overflow Hidden

By their nature, CSS Grid and elements do not report element width to the DOM in the same manner as other elements. Some widgets require that the Grid container they are placed inside of have overflow set to hidden. When this need arises, simply enable the Overflow Hidden option.

PVII widgets that need this setting include Tab Panel Magic 3, Headline Scroller, and Image Gallery Magic 2.

Min Height

In cases where you would like the columns to render with a longer height than needed, especially when centering content vertically, you can choose to use a minimum height. All of the columns in the grid will be rendered with this minimum height. Choose from:

• None -No minimum height will be used.
• 50px -Each column height will be at least 50px.
• 100px -Each Column height will be at least 100px.
• 200px -Each Column height will be at least 200px.
• 300px -Each Column height will be at least 300px.
• 25vh -Each column will be at least 25% of the height of the browser viewport.
• 50vh -Each column will be at least 50% of the height of the browser viewport.
• 75vh -Each column will be at least 75% of the height of the browser viewport.
• 100vh -Each column will be at least 100% of the height of the browser viewport.

Borders

Select one of the border configurations to assign borders to each column.

Tip: Border color is determined by the text color set for the column.

Rounded

Enabled this box to show rounded corners for all of the columns.

Padding

This controls the padding inside each column. Disable this option if you want your column content to completely fill the box.

Color Scheme

Select one of the 30 preset background colors. Each column will be rendered with the selected background color, the text color will be appropriate to the chosen scheme. The complete color palette of our Harmony Page Builder system is inlcuded for full compatibility, plus 10 new color choices are available.

Transparency

Enable this option if you want your column color scheme's background to be semi-transparent.

Shadow

Enable this option to show a drop shadow around each column.

Borders

Select one of the border configurations to assign borders to the outer edges of the grid.

Rounded

Enabled this box to show rounded corners for the outer edges of the grid.

Padding

This controls the padding between the outer edges of the grid and the column edges. Disable this option if you want your columns to completely fill the box.

Max-Width

Be default the grid will stretch to fill the html element which contains it. You can limit the width amount by selecting one of the defined maximum widths.

Align

This options controls the horizontal alignment of the grid box with respect to its parent element: left aligned, centered, or right aligned.

Color Scheme

Select one of the 30 preset background colors, the same as the Column Color Scheme. The grid box will be rendered with the selected background color, the text color will be appropriate to the chosen scheme.

Transparency

Enable this option if you want the container color scheme's background to be semi-transparent.

Shadow

Enable this option to show a drop shadow around the container.

User Class

You can assign an optional User Class to the container. You can also add multiple classes . To do so, enter each class name separated by a space. The User class is a powerful features in Quick Grid. It allows you full freedom to customize styling beyond the options in the UI.

Assign Column IDs

With this option enabled the QGM system will assign a unique element id to every column (cell).

#qgm-2-5 {
     background-color: rgba(0 128 128, 0.9);
     color: #fff;
}

Responsive Conversion

Quick Grid Magic provides a flexible approach to how the grid converts for narrow screens. This choice should be made based on the content you have in the columns and your general design goals:

• None (No Conversion)
• 1 Column per Row
• 2 Columns per Row
• 3 Columns per Row
• 4 Columns per Row

From

Select the QGM construct that you wish to import from.

Include Column Content

Enable this box if you wish to also import the content in each of the columns.

Import

Click this button to start the Import process. A message box will appear when the import is finished.

OK

When you are done setting your desired options, click the OK button to build the menu. The system will verify your selections and alert you to any problems that need your attention. If there are no problems, the interface will apply the changes to your page.

Remove

Available only when the interface is in Modify mode. Removes the entire QGM construct from your page.

Cancel

Click the Cancel button to completely abort the current operation. This will close the interface and no changes will be made to your page.

Help

Click the Help button to open the User Guide in your browser. This page can remain open for easy reference while you continue working in the interface.