latest version

Create Portfolio Grid View

Portfolio grid view is made by using the WPBakery Page Builder.

../_images/grid1.png

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.

    ../_images/grid.png
  • Step 2 - You will be directed to the Add Grid template page.

    ../_images/grid2.png
    1. Title - The title of the grid template you are making.
    2. 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.

    ../_images/grid3.png
  • Step 4 - Set the following information in the Normal tab’s settings.

    ../_images/grid4.png
    • 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.

    ../_images/grid5.png
    • 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.

    ../_images/grid6.png
    • Icon - The icon that will show in the grid when you hover your mouse pointer.

      ../_images/grid7.png
      • 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.

      ../_images/grid8.png
      • Element tag - h6
      • Text align - center
    • Post taxonomy - The category of the item being shown.

      ../_images/grid9.png
      • Taxonomy name - ct-portfolio-taxonomy
      • Limit - 1
  • Step 7 - Once done with all the changes, click Publish to save.