How To Format Blog Grid View
You have the freedom to select your desired Blog Format when you customise your Blog Page Settings. Your chosen format will reflect how your blog posts will be arranged and displayed on your blog page.
One of the available blog format options is the Grid View.
The Grid format allows you to display posts on the blog page in a grid form. This format has two style options:
- Standard Style - This style displays your posts individually in one single row. Information about each post is placed right below its corresponding photo, if any.
- Card Style - All posts appear as thumbnails and are arranged in rows. Information for each post is placed over their corresponding thumbnail with your selected color overlay.
Follow the steps below to apply Grid format to your blog page.
- Log In to access the Website Builder dashboard.
- Under My Sites, click the Edit Site option on the website or project card that you wish to manage.
Note: If you want to edit a new site, you have to unpublish the current website and make your new site as your primary website.
Under My Sites, click the [...] Ellipsis Icon on the top-right corner of the website to unpublish the current site. Click Unpublish Site, and then click Yes, Unpublish to confirm.
Under My Domains, click the [...] Ellipsis Icon of the website that you want to replace as your primary website, then click Replace Primary. In the pop-up window, select the domain of the new website in the New Primary Domain list, then click Replace Primary. You can also click the Domains tab under My Sites to perform the necessary steps mentioned.
You can now edit the new site that you wish to manage. - Click Pages from the left-side menu, hover your mouse pointer over Blog, then click the Gear Icon on its right.
Note: Make sure you have enabled Blog first before proceeding to these steps.
- Under Format, click Grid. The Grid View preview will then be immediately shown on the site editor.
- Set the following Page Settings under Grid:
Posts Per Page Specify the number of posts per page you want to be displayed using the corresponding range slider. Grid Style Click on the corresponding drop-down menu to choose between these two specific styles: Standard or Card. Posts Per Row Specify the number of posts per row you want to be displayed using the corresponding range slider. Aspect Ratio Click on the corresponding drop-down menu to select the photos' aspect ratio. Meta Switch on this button if you want to display the post's cover date. Alignment Each post's alignment is set to the "Left" by default. Click on the corresponding drop-down menu to select your preferred alignment. Navigation Type Click on the corresponding drop-down menu to select whether you want your posts to be continuous or be displayed by page.
If you select the Pagination option, a corresponding drop-down menu will appear where you can further select your preferred pagination style.Title Enter your desired blog page title in the field provided. This will appear on the web browser tab when your blog page is viewed. Description Enter your desired blog page description in the field provided. This outlines the overall content of your blog page. It will be displayed by search engines in a limited number of 160 characters, for Google’s SERP. Additional Settings Style-specific settings will appear depending on which Grid Style you selected:
For Standard:- Thumbnails - Switch on this button if you want to display your post's cover photo.
- Excerpt - Switch on this button if you want to display a 200-character excerpt for each post.
- Read More - Switch on this button if you want to add a "Read More" link at the bottom of each post.
For Card:- Card Spacing - Adjust the spacing in-between your cards using the corresponding range slider.
- Title Position - Click on the corresponding drop-down menu to select your preferred title position. Post titles will be displayed on top of each card.
- Click the Set as Homepage button if you want your blog page to be your default homepage. This means that once visitors access your website, your blog page will serve as the landing page.
Settings preview is automatically shown on the site editor while you customise. Don't forget to click the Publish button to save changes.
You've just successfully managed your blog page's Grid View settings.