{"id":15662,"date":"2018-09-19T09:29:10","date_gmt":"2018-09-19T13:29:10","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=15662"},"modified":"2023-02-24T10:52:41","modified_gmt":"2023-02-24T15:52:41","slug":"customizing-your-blog-page-with-boldgrid-crio","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-crio-supertheme-product-guide\/customizing-your-blog-page-with-boldgrid-crio\/","title":{"rendered":"Customizing Your Blog Page with BoldGrid Crio"},"content":{"rendered":"\n

BoldGrid Crio<\/a> 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.<\/p>\n

What is the Blog Page?<\/h2>\n
The Blog Page is the page you have selected from Appearance → Customize → Design → Homepage, and shows your recent posts.<\/p>\n
\n
In the Dashboard, navigate to Appearance<\/b> → Customize<\/b><\/li>\n
In the Customizer menu, navigate to Design → Blog → Blog Page → Post List Settings<\/b><\/li>\n<\/ul>\n
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.<\/p>\n
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.<\/a><\/p>\n
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.<\/p>\n
$\"WordPress$ <\/a><\/p>\n
Post List Settings<\/h2>\n
This panel includes controls for some global elements of your Blog Page design.<\/p>\n
\n
Blog Page → Post List Settings<\/b><\/li>\n<\/ul>\n
Columns<\/h3>\n
Set the number of columns you’d like your posts to display in. Two or Three tend to work best, but you can choose up to as many as six columns.<\/p>\n
Blog Posts Per Page<\/h3>\n
How many posts to show on one page, before your visitor has to click on the next page. Keeping this number relatively low is better for page speed, but your user may get frustrated browsing your content if you show too few. Balance this according to the needs of your audience.<\/p>\n
Post Content Display<\/h3>\n
Decide whether to show only an excerpt of your blog posts, or the whole post. If you don’t want to show any post content, you can set the Excerpt length to zero.<\/p>\n
Lazy Load Posts<\/h3>\n
Pro Feature<\/a><\/b><\/i>
\nWith Crio Pro you can enable Lazy Loading for Blog Posts to eliminate pagination on your Blog Page. As you scroll down, the number of posts set in Blog Posts Per Page section will load automatically.<\/p>\n
Container<\/h3>\n
Decide whether your post list should show in a narrower container, or if it should take the full width of the page on larger devices.<\/p>\n
Sidebar<\/h2>\n
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.<\/p>\n
\n
Blog Page → Sidebar<\/b><\/li>\n<\/ul>\n
Background Colors<\/h2>\n
Each post shown on the Blog Page uses 2 Background Colors – one for the Header and one for the Content.<\/p>\n
\n
Blog Page → Background Colors<\/b><\/li>\n<\/ul>\n
The Post Header<\/b> includes the Post Title and Meta, which is the Date and Author information. In the image below, the Post Header background is Black.<\/p>\n
The Post Content<\/b> 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.<\/p>\n
$\"Crio$ <\/a><\/p>\n
Titles<\/h2>\n
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.<\/p>\n
\n
Blog Page → Titles<\/b><\/li>\n<\/ul>\n
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.<\/p>\n
Featured Images<\/h2>\n
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.<\/p>\n
\n
Blog Page → Featured Images<\/b><\/li>\n<\/ul>\n $\"Crio$ <\/a><\/p>\n
Above Header<\/h3>\n
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.<\/p>\n
$\"Featured$ <\/a><\/p>\n
Below Header<\/h3>\n
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.<\/p>\n
$\"Featured$ <\/a><\/p>\n
Header Background<\/h3>\n
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.<\/p>\n
$\"Featured$ <\/a><\/p>\n
You can also have the Featured Image for a Post display as a background behind the Post Title and Meta information when viewing an individual Post. You can locate that setting under Design <\/strong>→ Blog <\/strong>→ Posts <\/strong>→ Featured Images<\/strong>. Select Header Background in the Position settings to use your Featured Image as a background for the Post Title area.<\/p>\n
In Post Content<\/h3>\n
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.<\/p>\n
$\"Featured$ <\/a><\/p>\n
Links & Advanced<\/h2>\n
Since there are so many options available within the Link panel, we have a separate article on customizing your Blog Page Links<\/a>.<\/p>\n
Take your design to the next level by using the Advanced options. Learn how to use the Blog Page Advanced<\/a> options for a truly unique Blog Page design.<\/p>\n
Have any questions about Blog Page customization? Let us know below!<\/p>\n
<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":529,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"Customizing your Blog Page with BoldGrid Crio | BoldGrid Crio","bgseo_description":"BoldGrid Crio allows you fine tune control over your how your Blog or Archive pages are displayed. The following guide will provide you with information on customizing your Blog Page by using controls in the Customizer.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[573],"tags":[],"class_list":["post-15662","post","type-post","status-publish","format-standard","hentry","category-boldgrid-crio-supertheme-product-guide"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/529"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=15662"}],"version-history":[{"count":16,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15662\/revisions"}],"predecessor-version":[{"id":80837,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15662\/revisions\/80837"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=15662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=15662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=15662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Columns<\/h3>\nSet the number of columns you’d like your posts to display in. Two or Three tend to work best, but you can choose up to as many as six columns.<\/p>\n

Post Content Display<\/h3>\nDecide whether to show only an excerpt of your blog posts, or the whole post. If you don’t want to show any post content, you can set the Excerpt length to zero.<\/p>\n

Columns<\/h3>\n
Set the number of columns you’d like your posts to display in. Two or Three tend to work best, but you can choose up to as many as six columns.<\/p>\n

Post Content Display<\/h3>\n
Decide whether to show only an excerpt of your blog posts, or the whole post. If you don’t want to show any post content, you can set the Excerpt length to zero.<\/p>\n