How to Design Your Blog Homepage

Kayla M.

Updated

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


In this article:


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.

Blog Posts are the basic building blocks of your Blog on Kajabi. Learn more 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

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:

Don't see any content? Create and publish blog posts to display in your Blog Homepage. Learn more

Note:
To add your blog to your main navigation menu follow the instructions here and use the "Link" option to link to your blog.

Customize your Blog with a Header & Footer and design a custom page with Blocks and Sections.

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

Screenshot_7_10_23__11_18_AM.jpg


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 for your Blog and click the section from your sidebar.

Blog listings settings

In your Blog Listings Section, customize the:

Blog Listings Block

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

  • List layout:

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

  • 2-column grid layout:

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

  • 3-column grid layout:

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

  • Media on Left layout:

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

  • Media on Right layout:

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

Select the Blog Listings content to display on your Blog homepage:

  • Show Video - If your blog post includes a video as the media type, selecting this setting will display the video player for the post on your blog homepage.
  • Show Date - Enable to display the publishing date for your blog posts.
  • Show Tags - Enable this setting to display any tags connected to your blog posts. Learn more about categorizing your blog posts
  • Show Content - Enable to display the text content for your blog posts on your blog homepage.

Video Player Color - Click to customize the color of your video player for blog posts with a video uploaded as the media type. 

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..."

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

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. 

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

Pagination Appearance

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

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

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:

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

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":

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

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:

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

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: 

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

  • 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

Menubar.jpg

  • 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 for more details. 

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

  • Custom Block - Create Custom blocks in your Blog Sidebar to include Images, a Call to Action (CTA), and additional text content. For example, advertise your own Offer from your blog sidebar:

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

  • Image - Add an Image to your sidebar to enhance the visual experience of your Blog Homepage and act as an optional button to redirect to your selected page when clicked by configuring the Image Action. Learn more about image blocks

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

  • Recent Posts - List your most recent posts for your Blog visitors to easily access:

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

  • Sidebar Search - Add a search bar to the homepage of your Blog for your visitors to easily search your Blog Posts: 

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

  • Social Links - Include Social Links to connect your Blog visitors to your social networking pages. Simply copy and paste your social networking page to its corresponding text box in the Sidebar Editor:

Kajabi_-__admin_themes_2150415231_settings_edit.jpg


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. 

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

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. 

Kajabi_-__admin_themes_2150415231_settings_edit.jpg

And that’s how you can design your Blog Homepage! Please vote below and let us know if you found this article helpful. We value your feedback.

Thanks for being the best part of Kajabi!

Did you find this article helpful?

Need more help?

Contact Us