Portfolio grid view is made by using the WPBakery Page Builder.
To get the same look as the sample above, follow these steps:
Step 1 - In your wordpress dashboard, go to WPBakery Page Builder > Grid Builder, and click the Add New button.
Step 2 - You will be directed to the Add Grid template page.
- Title - The title of the grid template you are making.
- Grid Builder - Area where you can customize the look of your grid template.
Step 3 - To get the same look as the sample, in the Grid Builder, change the drop-down box to Scale in. This will give your grid an overlay of color if hovered.
Step 4 - Set the following information in the Normal tab’s settings.
General tab
- Height mode - Original
- Add link - Post link
- Use featured image on background? - Yes
- Image size - 476x476
Step 5 - Set the following information in the Hover tab’s settings.
General tab
- Add link - Original
Design Options tab
- Background - rgba(0,0,0,0.7)
Step 6 - Add the following elements in the Hover tab.
Icon - The icon that will show in the grid when you hover your mouse pointer.
- Icon library - Font Awesome
- Icon - Choose what you like.
- Icon color - White
- Background shape - Rentica: Outline Circle (Lighter White Border)
- Background color - White
- Size - Mini
- Icon alignment - Center
Post Title - Where the title of the item that is used will show.
- Element tag - h6
- Text align - center
Post taxonomy - The category of the item being shown.
- Taxonomy name - ct-portfolio-taxonomy
- Limit - 1
Step 7 - Once done with all the changes, click Publish to save.