2.02 QUICK START - BUILD A GRID
In this section we will explain how to build your first grid with The Grid Wordpress plugin.
At first, go in The Grid admin panel through the left dashboard menu area.
You will find 3 sub-menus available:
- The Grid, where you can create and manage your grids
- Import/Export, where you can export and import your grids
- Global Settings, to set up all global options like color scheme, lightbox, image sizes...
To get started, click on the sub-menu The Grid > The Grid. If there isn't any grid then you will have 2 options: create a new grid or import the demo data.
Import the demo data will create the 20 grid examples which you can find on The Grid live demo
Create a new grid
At first, click on create a new grid.
You will be redirected on the grid generator page.
Here are the main steps you should follow to create a new grid:
- Enter your grid name
- Select a post type
- Choose the post formats allowed in your grid
- Set the style of grid and the number of columns
- Choose a skin
- Save a grid
- Insert a grid
N.B. : All these steps are optional and a grid will be automatically generated with the default post type of Wordpress without any settings.
So, if you want, you can directly preview the grid and save it.
1. Enter your grid name
At first, under the General tab, you will find a field where you can enter your grid name
This field must be not empty and it should not contain a grid name which already existing.
While entering your grid name inside this field, you will see that it will also generated the shortcode on the field below.
You can copy/paste this shortcode everywhere you want in order to display the current grid (in an page/post text editor for example).
2. Select a post type
Under the tab Source, you can set the number of items to display inside the grid.
For example, if you set number to 6, then it will display 6 elements inside the grid (at first load).
you can select the post type(s) you want to display inside the grid.
Several post types can be selected as a source content.
N.B. : You will find more details under Source/Content Tab documentation
3. Choose the post formats allowed in your grid
Under the tab Media, you can select the post formats you want to allow inside the grid.
For example, if you select video and audio formats, then the grid will retrieve any video/audio media content available in your post type source.
If video or audio are found, then it will be display inside the grid.
N.B. : You will find more details under Media Tab documentation
4. Set the style of grid and the number of columns
Under the tab Grid you can choose the style of grid:
- Masonry (preserve natural aspect ratio of images and content)
- Grid (each item are proportionnal to each other's)
- Justified (each items have the same height in a row)
You can also set the number of columns in the grid for different device sizes (browser widths):
N.B. : You will find more details under Main Grid settings Tab documentation
5. Choose a skin
Under the tab Skins you can choose the skin of the items display inside the grid.
Just click on the skin you want for this grid to select it.
Depending of the grid style which was set under Grid tab section, available skins will be different for Masonry and Grid style.
N.B. : You will find more details under Skin settings Tab documentation
6. Save a grid
Now, you have configured the main settings of the grid, you can save it:
7. Insert a grid
To insert a grid in a page or a post, you just need to copy paste the shortcode where you want to make it appear.
To easily insert a grid in a page (for example), you can also use the shortcode interface or Visual composer.