03. Homepage Grid

Prerequisites:

  • The Homepage grid is built using our exclusive Explora Homepage Layout Builder plugin. You need to have installed and activated this plugin before attempting to create the Homepage grid. If you haven’t yet, please refer to the Theme Installation section before continuing.
  • Since the Homepage grid is mainly populated with portfolio items and blog posts, it is recommended (although not mandatory), that you have added some portfolio items and/or blog posts already. See how to create portfolio items and how to create blog posts.

Building the Homepage grid

Now that you have the plugin installed and activated, we can start building the grid. Navigate to Appearance -> Home Layout Builder. You should see this:

empty-homepage-grid

This is the Homepage Grid’s backend. Only that it is empty. You can see that there is a “New Page” button. That will add a page to the grid, which, on the frontend, will render the VIEW MORE button which you can see at the very bottom of our Demo Homepage.

To start populating the grid, click the Add block button.

Adding a block

Block Size

The first thing you want to do when creating a new block is to set its size. You can choose between four different sizes: 1×1, 1×2, 2×1 and 2×2.

Figure 1
Figure 1
Block Type

There are five different types of blocks:

  • PORTFOLIO ITEM: Adds a block that links to a portfolio item. It shows the portfolio featured image, and the work’s description when the block is hovered. To add a portfolio item block, simply click the corresponding button on the Block Type section, and then select a work on the portfolio items dropdown. The Block Title and Block Text will be automatically populated with the contents of the work, but you can edit these fields.
  • BLOG ITEM: Adds a block that links to a blog post. It shows the post’s title and excerpt. To add a blog item block, click the corresponding button on the Block Type section, and then select a post in the blog item dropdown. The Block Title and Block Text will be automatically populated with the contents of the post, but you can edit these fields.
  • TEXT: Adds a block that contains text. To add a text block, simply click on the corresponding button on the Block Type section, and then fill the fields on the Block Content section. For this type of block, you can also set a background image, background color, and make the block link to a specific URL.
  • QUOTE: Adds a block that contains a quote. This block type just as the text block type, only that instead of title and content, this block has a Quote Text and Quote Author fields. Same as with the text block type, you can set its background and link.
  • IMAGE: Adds a block that contains an image. You can set the image, background color and link of this block.
Figure 2
Figure 2

 

Controlling the cropping of the Portfolio Items photos.
Figure 1
Figure 3

You’ll be happy to know that you can have absolute control over what portion of the image is shown on the portfolio item blocks. To control this, just navigate to the portfolio item’s backend, locate the Featured Image box (Figure 3) and click on Crop featured image.

Now you should see the Manual Image Crop window, where you can select the image size you want to edit, and just drag and drop to select the portion of the image you want to display on the Homepage Grid.

You will see there are several tabs: block_1x1, block_1x2, block_2x1 and block 2×2. Just pick the one that corresponds to the block size you have selected for this work and edit that one.

Now click on Crop it! and that’s it!