> ## 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-search-page",
  "feedback": "Description of the issue"
}
```

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

</AgentInstructions>

# Design a blog search page

> Learn to design the overall appearance of your Blog Search page.

## Overview

Design the overall appearance of your Blog Search page to match your brand and help visitors find content.

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

***

## What is the blog search page?

The blog search page displays when a visitor searches with the search block in a blog sidebar (this can be included your [blog post sidebar](./how-to-design-your-blog-posts#h_01ENAZ4K3GXX89XFQ8XFQYYWZG) or [blog homepage sidebar](./how-to-design-your-blog-homepage#h_01ENAZ4K3GXX89XFQ8XFQYYWZG)):

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

***

## Customizing the blog search page

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

**To begin customizing your blog search page design:**

* Open the **Website** tab from your Dashboard.
* Click the **Pages** tab.
* Select **Blog Search** from your list of website pages to begin customizing:

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

Design your Blog Search page with a [Header](./customizing-your-header) & [Footer](./customizing-your-footer) and further customize the page with [Blocks](./add-blocks-to-your-page) and [Sections](./add-sections-to-your-pages).

Your blog search page includes a Section unique to the blog search page builder, the Search section:

<img src="https://mintcdn.com/kajabi-support/6TFaxWIe5VAJvaKV/articles/images/3e156821_upload_18361241019284532920.png?fit=max&auto=format&n=6TFaxWIe5VAJvaKV&q=85&s=4ab9bace26897d4ec08c5b4c6427900e" alt="Notification_Center.jpg" width="3136" height="1792" data-path="articles/images/3e156821_upload_18361241019284532920.png" />

***

## Designing the search section

The Search section is unique to the blog search page builder and allows you to customize the:

* Language used for the Search Text
* Number of results to display per page
* Appearance of the pagination numbers and icons
* Blocks included in your Blog Search Page Sidebar
* And the overall Section Settings

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.

### Search

#### Language

Customize the language used for the searched, showing, and results text:

<img src="https://mintcdn.com/kajabi-support/NHosPLWrdBkWec8r/articles/images/19a540a4_16965905834523.png?fit=max&auto=format&n=NHosPLWrdBkWec8r&q=85&s=d9af836f72e6be9f2680218683887f80" alt="Screenshot_7_7_23__12_23_PM.jpg" width="1914" height="1073" data-path="articles/images/19a540a4_16965905834523.png" />

#### Results per page

Adjust the slider to customize the number of results that appear in a single search page:

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

### 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/c9qoPwTHAQHxkdRa/articles/images/55a853a4_360097873173.png?fit=max&auto=format&n=c9qoPwTHAQHxkdRa&q=85&s=cdbc99cbf8d3c85b77f4926a41615305" alt="9F4A8B0A-B658-441A-BCC8-2EC04666A79D.png" width="1920" height="1080" data-path="articles/images/55a853a4_360097873173.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/3C7Vui-NnfT9lLL-/articles/images/d2ff21e5_360097873233.png?fit=max&auto=format&n=3C7Vui-NnfT9lLL-&q=85&s=7bc113b34a6e7198658e176e3afaf17a" alt="A23C0773-D6F6-47F2-A229-613F88F06928.png" width="1920" height="1080" data-path="articles/images/d2ff21e5_360097873233.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/ig0P6X_YYqhSgRa-/articles/images/228bc653_360095570354.png?fit=max&auto=format&n=ig0P6X_YYqhSgRa-&q=85&s=718bf84ba27a2ddd3988b5e558d17595" alt="B164FC05-07D2-46A4-9375-44F0BDCCF960.png" width="1920" height="1080" data-path="articles/images/228bc653_360095570354.png" />

### Sidebar

Similar to your Blog Post Sidebar and Blog Homepage Sidebar, you can design a space for your blog search page visitors to easily navigate through your blog with the 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 search page.
* **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)
* **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.
* **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.
* **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](./how-to-add-an-image-to-your-page)
* **Recent Posts** - List your most recent posts for your Blog visitors to easily access.
* **Sidebar Search** - Add a search bar to your sidebar.
