[Pro] How to use the Grid Customizer ?

The post grid is a way to present a list of posts or porfolio items on your WordPress website. We've been designing attractive a eye catching designs for your posts lists.

This  Customizr Pro feature lets you choose from 21 beautiful reveal effects for your posts grid, as well as tons of grid design options. You can customize to your hearts content! Or randomize the effects!

Try a live demo here.

Enable the Grid Customizer

1. Login to your WordPress Dashboard
2. In your WordPress Admin Menu. Go to Appearance -> Customize -> Main Content -> Post lists -> Grid Customizer
3. Look for Enable the Grid Customizer. Click the dropdown and select "Enable".
4. Note:the Grid Customizer limits the excerpt's length to ensure an optimal rendering.
5. After making the above selection, the customizer will expand to show you a list of grid settings.

Grid Settings

1. Select the hover effect.
   • Click on the dropdown and select from a choice of 21 effects!
   • You can choose and instantly preview the effect in the preview panel on the right.
   • Hover over any post on your post grid to see the effect!
2. Randomize the effects. Instead of selecting one effect from the above mentioned setting, you can let the grid customizer select it for you! There are 3 options for selection.
   • Random effect disabled (select this if you only want to use a single hover effect)
   • Same random effect to all posts (grid customizer will randomly select one hover effect and apply to all posts)
   • Different random effects to each posts (grid customizer will randomly select hover effect for each posts)
3. Background. Set the background of the hover effect. Select the one that you like, preview it on the right panel. There are 5 options for selection.
   • Dark transparent background on titles only
   • Light transparent background on titles only
   • Dark transparent background
   • Light transparent background
   • No background
4. Title Location. Select the position of the title. 2 options for selection
   • Over the post
   • Below the post
5. Title color. Select the color of the title. There are 3 options for selection.
   • White
   • Skin main color (main color of skin selected in Appearance -> Customize -> Global settings -> Skin)
   • Custom Color (select this option to load a color picker (Title Custom Color) for the title color)
6. Title Custom Color. This option is applicable only if you select Custom Color in the above option. Click on the color picker to select the color that you like.

   

7. Post titles in big caps. Check on this check-box, if you want the post title to be in uppercase.

   

More Grid Design Options

1. Reveal design options. Click on the following image to reveal a group of design options.

   
   

2. What and where to apply? The following list of options are self explanatory, check on options that you want to apply.

   
   

3. Max length for post titles. Select or enter the number of words in the dial.

   

We have finally completed all the settings. You can save and publish your changes by clicking on the “Save and Publish” button found at the top left hand corner of your viewport.

Doc created by: Menaka S.