Customizing your Blog Page with BoldGrid Crio | BoldGrid Crio
Last updated on

BoldGrid Crio allows you fine tune control over your Blog Page design from the Customizer. The following guide will teach you what each control means, and how to use them.

What is the Blog Page?

The Blog Page is the page you have selected from Appearance → Customize → Design → Homepage, and shows your recent posts.

  • In the Dashboard, navigate to AppearanceCustomize
  • In the Customizer menu, navigate to Design → Blog → Blog Page → Post List Settings

Here you will see all the elements you can control. While it may look overwhelming, keep in mind it is not necessary to use each panel.

While working in this panel, if you want to use a color you do not see, you will need to change a color in the color palette.

All changes are shown in the Live Preview, so it’s easy to try multiple layouts. Once you are happy with the design, click the blue Publish button to make your changes public.

WordPress Blog Page Design

Post List Settings

This panel includes controls for some global elements of your Blog Pate design.

  • Blog Page → Post List Settings

Here you can change the number of Columns and number of Blog Posts that appear before pagination. Each post can show the Excerpt, set to an exact length, or the Full Content of each post.

Finally you can decide whether the Blog Page should be contained or full width across the screen. Keep in mind widescreen monitors are growing in popularity so be sure to test your design on multiple screen sizes.

Sidebar

The Blog Page can have a Sidebar on the left or right, or not use one. If a Sidebar is set to show here and on Blog Posts, it will be the same Sidebar with the same content, but can show on different sides if desired.

  • Blog Page → Sidebar

Background Colors

Each post shown on the Blog Page uses 2 Background Colors – one for the Header and one for the Content.

  • Blog Page → Background Colors

The Post Header includes the Post Title and Meta, which is the Date and Author information. In the image below, the Post Header background is Black.

The Post Content includes either the Excerpt or Full Post Content depending on setting at Blog Page → Post List Settings, as well as Read More link, Categories, Tags, and Comments if displayed. In this example the Post Content background is gray.

Crio Blog Page Background Colors

Titles

If you would like to hide each Post Title you can do so from here. You can also select the Color, Font Size, and Position.

  • Blog Page → Titles

Even though the Font Sizes shown are Heading sizes, they are paragraphs so the selection will not affect your SEO. The H1 for the Blog Page is the Page Title entered in the WordPress dashboard.

Featured Images

There are multiple options for how the Featured Image can display, or set to hidden if desired. Each option is shown here for easy comparison.

  • Blog Page → Featured Images

Crio Featured Image Display Options

Above Header

This is the default selection. The Featured Image is shown above the Post Header, which includes the Post Title and Meta. You can set a width and height to easily customize this starting design.

Featured Image Above Header

Below Header

Moving the Featured Image above the Post Header will give separation between the text. Once again you can adjust the width and height if desired.

Featured Image Below Header

Header Background

When the Featured Image shows in the Header Background, an overlay is added to increase contrast for the Post Header text. The color of the overlay can be changed at Blog Page → Background Colors → Post Header.

Featured Image Header Background

In Post Content

If you want the background color of the Post Content, which includes the Read More button, Post Excerpt or Summary,  Categories, Tags, and Comments, to show around the image, select In Post Content.

Featured Image In Post Content

Links & Advanced

Since there are so many options available within the Link panel, we have a separate article on customizing your Blog Page Links.

Take your design to the next level by using the Advanced options. Learn how to use the Blog Page Advanced options for a truly unique Blog Page design.

Have any questions about Blog Page customization? Let us know below!

 

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

2 thoughts on “Customizing Your Blog Page with BoldGrid Crio

  1. How do I hide post excerpts in the “post content display”? I only want the featured image and the title to show. I’m in: Design> Blog>Blog Page and see that I can adjust the number of words to display. I don’t want any to display. When I put in “0” I still get one word.

    • Hi Grace-

      Thanks for the feedback! You’re right that setting it to 0 doesn’t work as expected. I’ve created a feature request for our developers to address this for you.

      In the meantime, you can hide your excerpts on your Blog Page with a little Custom CSS. Navigate to Customize > CSS/JS Editor and paste this line into your CSS Code field:

      body.blog .entry-content { display: none !important; }
      

Leave a Reply

Your email address will not be published. Required fields are marked *