# 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](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization/layout-and-structure)
* [Customizing your header](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization/layout-and-structure#header) with primary buttons, secondary buttons, and links
* [Adding announcement banners](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization/layout-and-structure#announcement-premium-and-ultimate)
* [Configuring page navigation](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization/layout-and-structure#pagination)
* [Adding and customizing a footer](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization/layout-and-structure#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](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/site-structure/site-sections) or [variants](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/site-structure/variants).
{% 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="https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/customization">Site customization</a></td></tr><tr><td><strong>Site sections</strong></td><td><a href="https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/site-structure/site-sections">Site sections</a></td></tr><tr><td><strong>Variants</strong></td><td><a href="https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/publishing-documentation/site-structure/variants">Content variants</a></td></tr></tbody></table>