# How to customize your site’s layout

GitBook gives you full control over the layout of your docs site, letting you fine-tune navigation, headers, footers, and page flow.

This video and guide will take you through editing your site’s layout, covering:

* Where to find [layout settings](/docs/docs-site/customization/layout-and-structure.md)
* [Customizing your header](/docs/docs-site/customization/layout-and-structure.md#header) with primary buttons, secondary buttons, and links
* [Adding announcement banners](/docs/docs-site/customization/layout-and-structure.md#announcement-premium-and-ultimate)
* [Configuring page navigation](/docs/docs-site/customization/layout-and-structure.md#pagination)
* [Adding and customizing a footer](/docs/docs-site/customization/layout-and-structure.md#footer-premium-and-ultimate) for your site

{% hint style="info" %}
To add more content to your site, like different versions, translations, or different products, use [site sections](/docs/docs-site/site-structure/site-sections.md) or [variants](/docs/docs-site/site-structure/variants.md).
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=1zcPK3uW3H0>" %}

{% stepper %}
{% step %}

### Open layout settings

In the sidebar, click into your docs site to open its overview. Then select **Layout**.
{% endstep %}

{% step %}

### Customize the header

Use the header settings to control what shows at the top of every page.

You can enable or disable the **header**, and adjust the **search bar size**.

You can also add **header links**, like a homepage link. Pick how each link renders:

* Text link
* Primary button
* Secondary button

Header buttons automatically use your **primary color**.
{% endstep %}

{% step %}

### Add announcements

Add **announcement banners** when you need to highlight updates. They appear at the top of the site.

You can set the message, the link/CTA, and the banner style (info, warning, danger, and more).
{% endstep %}

{% step %}

### Control page navigation

Toggle **Next page** to control bottom-of-page navigation. When it’s off, readers won’t see next/previous links.
{% endstep %}

{% step %}

### Customize the footer

You can also set a site-wide footer. It’s useful for persistent links and legal text.

Add an **icon** and optional **copyright text**.

Then add **footer links** for things like resources and your homepage. Footer links work the same way as header links.
{% endstep %}

{% step %}

### Save and publish

Review your layout changes in the preview. Then click **Save** to make them live.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Make sure you hit **Save** before you navigate away from the Customization screen. Your changes won’t appear on your docs site until you save them.
{% endhint %}

### Related documentation

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref">Link</th></tr></thead><tbody><tr><td><strong>Customize your docs site</strong></td><td><a href="/spaces/NkEGS7hzeqa35sMXQZ4X/pages/d9NivHBiVedTIKopEvBl">/spaces/NkEGS7hzeqa35sMXQZ4X/pages/d9NivHBiVedTIKopEvBl</a></td></tr><tr><td><strong>Site sections</strong></td><td><a href="/spaces/NkEGS7hzeqa35sMXQZ4X/pages/BhYaMwXvRKZYVdHgZM5T">/spaces/NkEGS7hzeqa35sMXQZ4X/pages/BhYaMwXvRKZYVdHgZM5T</a></td></tr><tr><td><strong>Variants</strong></td><td><a href="/spaces/NkEGS7hzeqa35sMXQZ4X/pages/VYD1uYVNjSTqX4nw00s3">/spaces/NkEGS7hzeqa35sMXQZ4X/pages/VYD1uYVNjSTqX4nw00s3</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gitbook.com/docs/guides/customizing-your-site/how-to-customize-your-sites-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.