Building the post grid/carousel

The theme has built-in capabilities for creating highly customizable post grids.

You can generate beautiful grid for your blog post, product showcase, team member showcase, portfolio, gallery, archive post display, category post display, tags post display, custom taxonomy and terms post. All of this can be displayed via Post grid component.

You can also display all this as a carousel.

All the post grid items have the same layout.
With SmartKit theme you can create grid layout using WPBakery Page Builder with maximum flexibility.

Before creating a grid layout, enable the page builder for the grid_post post type
How to enable page builder for custom post types

You can import pre-made grid layouts from demo data or create them manually.

1. Navigate to KSF SmartKit > Grid layouts tab in your WordPress admin sidebar and click Add new grid layout.
2. Enter the slide title (e.g. “My grid layout”) into the title field.
3. Add a content to your grid layout using WPBakery Page Builder (see more on how to use the page builder here).
   Typically, a grid layout contains a featured image, post title, and metadata elements: category, tag, author, post views counter etc.
4. Click on the Publish button.

Post grid items usually have images. To set the featured image, navigate to the post editing screen and go to Featured Image metabox in the right sidebar.

1. Click on the + button in the WPBakery Page Builder frame.
2. Search for Image in the add element pop-up window and click on it to add it to the grid layout.
3. Set Featured image in Source dropdown.  Set Image size and Aspect ratio.
4. Activate Custom width, set Width to 100%. Set Object fit to Cover and Shape to Squared.
5. Set On click action to Open post link and Hover effect if necessary.
6. Go to Box model tab in settings window and set Margin bottom to 0.
7. Click on the Save changes button.

For best performance, the image size should be equal to or slightly larger than the size of the occupied area in the grid item.
You can create unlimited custom image sizes using Simple Image Sizes plugin or similar.

1. Click on the + button inside the column, into which you want to add the menu.
2. Search for Heading in the add element pop-up window and click on it to add it to the grid layout.
3. Set Element tag to H3-H6 and Text source to Post grid article title.
4. Set other options in settings window, if necessary.
5. Click on the Save changes button.

You can add groups of metadata elements: category, tag, author, post views counter etc.

1. Click on the + button in the WPBakery Page Builder frame.
2. Search for Metadata in the add element pop-up window and click on it to add it to the grid layout.
3. Click to te + button in the settings window to add metadata elements. Choose a type of elements and an icons if necessary.
4. Set other options in settings window.
5. Click to the Save changes button.

1. Navigate to the editing screen, where you want to show the post grid.
2. Click on the + button in the WPBakery Page Builder frame.
3. Search for Post grid in the add element pop-up window and click on it to add it.
4. Choose grid layout name (“My grid layout”) from the list and adjust Pagination elements, Order and Item quantity.
5. Filter the categoties in Filter by taxonomies tab if necessary.
6. Go to Buttons settings tab and customize the buttons style.
7. Click on the Save changes button.

In order to show custom post type grid (e.g. portfolio), choose required post type from the Post type list.

You can show carousel with posts in the same way using Post grid component. Just choose Carousel in Type dropdown in the post grid settings window.