> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://help.kajabi.com/feedback

```json
{
  "path": "/articles/website/pages/how-to-design-your-blog-homepage",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Design a blog homepage

> Learn to customize the look and feel of your Blog homepage with the newest editing capabilities available with Kajabi's Website Builder.

## Overview

Customize the look and feel of your Blog homepage with the editing capabilities available with [Kajabi's Website Builder](./how-to-make-the-switch-to-the-new-website-builder).

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/11mxwwipnv" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Building your blog

Before we get started, you are going to need to build your Blog. If you haven't built your blog yet, [click here to get started](./creating-your-website#learnabout).

Blog Posts are the basic building blocks of your Blog on Kajabi. [Learn more](../blog/how-to-create-a-blog-post#h_6ea6cc1c-941b-43d4-9f91-4925e38f5e94) about how to create Blog Posts to build your blog.

Blogging in Kajabi offers you a way to connect with your audience, showcase credibility and, deliver additional value through your website. Learn to design your Blog Homepage.

***

## Customize the design of your blog

With the Website Builder, design the look and feel of your blog homepage to represent your brand. [Learn more about the Website Builder](./customizing-your-website-pages-with-the-website-builder)

**To begin customizing your blog design:**

* Open the **Website** tab from your Dashboard.
* Select the **Pages** tab.
* Locate **Blog** from your list of Website pages.
* Click **Customize**:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/9y1fsp8nmt" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

Don't see any content? Create and publish blog posts to display in your Blog Homepage. [Learn more](../blog/how-to-create-a-blog-post)

<Note>
  **Note:** To add your blog to your main navigation menu follow the instructions [here](https://help.kajabi.com/hc/en-us/articles/360037080193) and use the "Link" option to link to your blog.
</Note>

Customize your Blog with a [Header](./customizing-your-header) & [Footer](./customizing-your-footer) and design a custom page with [Blocks](./add-blocks-to-your-page) and [Sections](./add-sections-to-your-pages).

Your blog homepage includes a Section unique to the blog builder, the Blog Listings Section:

<img src="https://mintcdn.com/kajabi-support/ErhhF8cXbpvObQwR/articles/images/e5b5ad77_upload_10325910016315594569.png?fit=max&auto=format&n=ErhhF8cXbpvObQwR&q=85&s=969646b8032da48b916e4a8db623dde5" alt="Screenshot_7_10_23__11_18_AM.jpg" width="3112" height="1768" data-path="articles/images/e5b5ad77_upload_10325910016315594569.png" />

***

## Customizing the blog listings section

The Blog Listings Section is unique to the blog builder to customize the overall look and feel of your Blog.

The Blog Listings Section allows you to customize:

* How your blog posts are displayed
* The blocks included in your blog sidebar
* And the background and layout of the section as a whole

To edit the Blog Listings section, open the [page editor](./how-to-get-to-the-page-editor) for your Blog and click the section from your sidebar.

### Blog listings settings

In your Blog Listings Section, customize the:

* Blog Listings Block
* Pagination Appearance
* Sidebar
* Section Settings

#### Blog listings block

**Layout Style** - Select your desired layout style to customize the layout of your blog posts on your blog homepage:

* List layout:

<img src="https://mintcdn.com/kajabi-support/PGtO8PCuc_NzdaFE/articles/images/d39353bf_upload_6663365793229569467.png?fit=max&auto=format&n=PGtO8PCuc_NzdaFE&q=85&s=67df464d64af5ef09cc86ef49937c8bd" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="3136" height="1792" data-path="articles/images/d39353bf_upload_6663365793229569467.png" />

* 2-column grid layout:

<img src="https://mintcdn.com/kajabi-support/O5ZsKXCFiDIup7FH/articles/images/bee20c31_upload_3719486201682708338.png?fit=max&auto=format&n=O5ZsKXCFiDIup7FH&q=85&s=75a4465daae6ac22c759d85fd4742165" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="3136" height="1792" data-path="articles/images/bee20c31_upload_3719486201682708338.png" />

* 3-column grid layout:

<img src="https://mintcdn.com/kajabi-support/lefKgrGSYkn2ROfG/articles/images/4c3abddb_upload_6372713312377948962.png?fit=max&auto=format&n=lefKgrGSYkn2ROfG&q=85&s=8bef731f79c971522183f8e3da424f9d" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="3136" height="1792" data-path="articles/images/4c3abddb_upload_6372713312377948962.png" />

* Media on Left layout:

<img src="https://mintcdn.com/kajabi-support/qzToDq-sR9DK0LoF/articles/images/6c46294a_upload_11969259613734673815.png?fit=max&auto=format&n=qzToDq-sR9DK0LoF&q=85&s=3e04989bad887c6e543bce9ceae92f0c" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="3136" height="1792" data-path="articles/images/6c46294a_upload_11969259613734673815.png" />

* Media on Right layout:

<img src="https://mintcdn.com/kajabi-support/ulOk3PjSKir43Xg0/articles/images/1175fdec_upload_1769475792092618194.png?fit=max&auto=format&n=ulOk3PjSKir43Xg0&q=85&s=d4a6860ac6fca15cbb08b165d95fba89" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="3136" height="1792" data-path="articles/images/1175fdec_upload_1769475792092618194.png" />

If you prefer to use a custom color, click the color wheel and then either enter your RGB color code or use the sliders to choose your color.

* The **vertical bar** allows you to select the hue.
* The **square box** allows you to select the brightness and saturation.
* The **horizontal bar** allows you to select the opacity of your color.

**Truncate At** - Insert a custom number to override the default 300 character truncation. This setting applies to the body text content for your blog posts.

**Language Read More** - Customize the language used to display the message encouraging your blog visitors to continue reading. By default, the text displays "Continue Reading..."

<img src="https://mintcdn.com/kajabi-support/c9qoPwTHAQHxkdRa/articles/images/52fda48c_17022071953179.png?fit=max&auto=format&n=c9qoPwTHAQHxkdRa&q=85&s=a15870824b7ed95cac605670394b8740" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="1914" height="1078" data-path="articles/images/52fda48c_17022071953179.png" />

**Listings Per Page** - Use the slider or the number field to adjust the number of blog posts listed on a page of your blog homepage.

<img src="https://mintcdn.com/kajabi-support/DB7yAogdPbid1BoD/articles/images/21bb3d6e_upload_18445273320238992058.png?fit=max&auto=format&n=DB7yAogdPbid1BoD&q=85&s=c3250c8a83bbf3f59b65e1afe604223b" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="3136" height="1792" data-path="articles/images/21bb3d6e_upload_18445273320238992058.png" />

#### Pagination appearance

Customize the color of your pagination buttons if your blog post listings take up multiple pages:

<img src="https://mintcdn.com/kajabi-support/PGtO8PCuc_NzdaFE/articles/images/d7cf5435_upload_10236634759113891036.png?fit=max&auto=format&n=PGtO8PCuc_NzdaFE&q=85&s=336ddd386a0b7f5fc96fca6a4b6e79c5" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="3136" height="1792" data-path="articles/images/d7cf5435_upload_10236634759113891036.png" />

Click the color icon next to each pagination appearance setting to customize the color.

If you prefer to use a custom color, click the color wheel and then either enter your RGB color code or use the sliders to choose your color.

* The **vertical bar** allows you to select the hue.
* The **square box** allows you to select the brightness and saturation.
* The **horizontal bar** allows you to select the opacity of your color.

**Pagination Default Color** - Select a color to override all default colors for your pagination appearance:

<img src="https://mintcdn.com/kajabi-support/p8xUcPoEbYtv-GgI/articles/images/aa41932f_upload_2184721828942836987.png?fit=max&auto=format&n=p8xUcPoEbYtv-GgI&q=85&s=22cd2daae487f01b753e1e722131af2e" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="3136" height="1792" data-path="articles/images/aa41932f_upload_2184721828942836987.png" />

**Pagination Selected Color** - The "pagination selected" uses color to signal to your visitors the page number they are viewing. Select a color to change the color for the "pagination selected":

<img src="https://mintcdn.com/kajabi-support/km6s0kSe4aDFzY4R/articles/images/a792a442_upload_16933828232115690776.png?fit=max&auto=format&n=km6s0kSe4aDFzY4R&q=85&s=59b3523cd1fccec9652fdf7fc277e83a" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="3136" height="1792" data-path="articles/images/a792a442_upload_16933828232115690776.png" />

**Pagination Disabled Color** - The "pagination disabled" uses color to signal to your visitors that the number of pages for your blog posts do not continue. This changes the arrow color for going backward or forward depending on the page your visitor is viewing:

<img src="https://mintcdn.com/kajabi-support/ErhhF8cXbpvObQwR/articles/images/e645d27f_upload_13400811741951534485.png?fit=max&auto=format&n=ErhhF8cXbpvObQwR&q=85&s=d77777ab932b0fcc6fd116f3da56f9de" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="3136" height="1792" data-path="articles/images/e645d27f_upload_13400811741951534485.png" />

#### Sidebar

Design a space for your blog visitors to easily navigate through your blog with the blog sidebar.

Customize your blog sidebar by adding, removing, and arranging sidebar blocks:

* **Author** - Add and customize your author information to display in the sidebar of your blog homepage:

<img src="https://mintcdn.com/kajabi-support/PSl7XzyvfgSe-sdv/articles/images/37d74a85_17023799133083.png?fit=max&auto=format&n=PSl7XzyvfgSe-sdv&q=85&s=88b099329e2f428257b7a3c5229267f8" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="1917" height="1082" data-path="articles/images/37d74a85_17023799133083.png" />

* **Call to Action** - Encourage an immediate response from your visitors to subscribe to your marketing emails, view a landing page, purchase an Offer, and more. [Learn to use a Call to Action](./how-to-add-a-call-to-action-block-to-your-website-page-and-landing-page)

<img src="https://mintcdn.com/kajabi-support/ADlD5UQgkduQhvui/articles/images/aa912d3f_17023799139739.png?fit=max&auto=format&n=ADlD5UQgkduQhvui&q=85&s=6ade95a36a9ef80fa126e6d29a20deb8" alt="Menubar.jpg" width="1920" height="1080" data-path="articles/images/aa912d3f_17023799139739.png" />

* **Categories** - Use Categories to easily filter through your Blog Posts when visitors view your Blog. Customize the language and appearance for your Categories block in the blog homepage sidebar. Read [How to Categorize your Blog Posts](../blog/how-to-categorize-your-blog-posts) for more details.

<img src="https://mintcdn.com/kajabi-support/uLQkDauIHZty6r-X/articles/images/eaa11784_17023777200667.png?fit=max&auto=format&n=uLQkDauIHZty6r-X&q=85&s=db3b49a0df2eb401469b9c1758e10b5c" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="1915" height="1075" data-path="articles/images/eaa11784_17023777200667.png" />

* **Custom Block** - Create Custom blocks in your Blog Sidebar to include Images, a [Call to Action](./how-to-add-a-call-to-action-block-to-your-website-page-and-landing-page) (CTA), and additional text content. For example, advertise your own Offer from your blog sidebar:

<img src="https://mintcdn.com/kajabi-support/c9qoPwTHAQHxkdRa/articles/images/5403ec6b_17023799146523.png?fit=max&auto=format&n=c9qoPwTHAQHxkdRa&q=85&s=eb6cf0f4c0edbf3610b7ea6beb37fb81" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="1915" height="1076" data-path="articles/images/5403ec6b_17023799146523.png" />

***

## Section Settings

### Blog post container

Put your Blog Post into a container to visually separate your post from other sections on your Blog Post. In this section, you can customize the container background color, border type, border width, border, and container box shadow.

<img src="https://mintcdn.com/kajabi-support/0dktLU6n0E_nSYxP/articles/images/869c98f6_upload_6274209985104579632.png?fit=max&auto=format&n=0dktLU6n0E_nSYxP&q=85&s=9042634867d3b6c0a503ae4515fcb687" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="3112" height="1768" data-path="articles/images/869c98f6_upload_6274209985104579632.png" />

### Blog sidebar container

Put your Blog Sidebar into a container to visually separate and highlight your sidebar from other sections on your Blog Post. In this section, you can customize the container background color, border type, border width, border, and container box shadow.

<img src="https://mintcdn.com/kajabi-support/ErhhF8cXbpvObQwR/articles/images/f290ed79_upload_4373595414105785363.png?fit=max&auto=format&n=ErhhF8cXbpvObQwR&q=85&s=9b8bc504134a70b9eda03b89a613e39e" alt="Kajabi_-__admin_themes_2150415231_settings_edit.jpg" width="3112" height="1768" data-path="articles/images/f290ed79_upload_4373595414105785363.png" />

* [Background](./customizing-block-background-settings)
* [Desktop and Mobile Layout](./customizing-block-layout-settings)
