# Footer

The Footer is a global element that sits at the bottom of every page on your site. Common Footer elements are Logos, Social links, Footer navigation, Acknowledgement of Country, Copyright and Privacy information.

The Footer is created using a series of Blocks. Build your footer using Block types of "Component", "Social Links" and "System".

Some Blocks used in the Footer area available out of the box. You can configure certain settings to suit.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-cd464069ff663876424490b8770394ad658b7a7c%2Ffooter-dark.png?alt=media" alt=""><figcaption></figcaption></figure>

### Create Blocks

Before you can build your Footer you need to create all the blocks that will make up the Footer.

From the list below, follow the steps to create the Blocks you wish to use.

The instructions on how to place the Blocks in the correct region are on each page.

* [Footer logo](https://docs.civictheme.io/content-authoring/site-wide-configuration/footer/footer-logo)
* [Social links](https://docs.civictheme.io/content-authoring/site-wide-configuration/footer/social-links-block)
* [Footer navigation](https://docs.civictheme.io/content-authoring/site-wide-configuration/footer/footer-navigation)
* [Acknowledgement of Country](https://docs.civictheme.io/content-authoring/site-wide-configuration/footer/acknowledgement-of-country)
* [Copyright](https://docs.civictheme.io/content-authoring/site-wide-configuration/footer/copyright)

### Configuring the footer <a href="#updatingthefooter-signupblock" id="updatingthefooter-signupblock"></a>

You will need to be logged in as the "Site Administrator" role.

1. Go to `/admin/appearance/settings/<site-name>` or Appearance in the menu, find your site and select "Settings".
2. Scroll down the page until you see the "Components" section, and select "Footer".

#### Theme

Use the Theme radio buttons to set the footer in Light or Dark theme.

**Note:** the Theme you set here for the global Footer configuration must match the Theme you set on the Blocks you're using to create the Footer. For example, you must set the "Social links" Block to `Dark` if you set your Footer Theme to `Dark`.

#### Background

You can choose to display a background image on your footer. However, keep in mind that a detailed image could create issues with accessibility if the written content in the footer can't be read on top of the image.

1. In the "Footer background image path" section, upload a background image, or paste in the path to the image if it's already in the media library.

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-c018c70847f0d620a7595f03e33ce60b712c7f2c%2Ffooter-config.png?alt=media" alt=""><figcaption><p>Footer configuration</p></figcaption></figure>

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-e067e7f53ed08514b85b2acb49c73e095a69ca13%2Ffooter-background.png?alt=media" alt=""><figcaption><p>Footer with Background image</p></figcaption></figure>

### **Footer examples**

**Note:** The footer column headings are switched off in these examples, further screenshots to come to illustrate the footer column headings.

#### Light theme Default desktop

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-b04fa6e17196acf4a9d36962a5d7c011299d98de%2Ffooter-light-default-dsk.png?alt=media" alt=""><figcaption><p>Light theme desktop Footer with Logo set to Default</p></figcaption></figure>

#### Light theme Default mobile

<div align="left"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-c48dabfe68275a6b22ebde94cd118293cd029cc1%2Ffooter-light-default-mobile.png?alt=media" alt="" width="188"><figcaption><p>Light theme mobile Footer with Logo set to Default</p></figcaption></figure></div>

#### Light theme Stacked desktop

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-780ee938c58d0c74bb31b7c5a5270dd2aa89ed11%2Ffooter-light-stacked-dsk.png?alt=media" alt=""><figcaption><p>Light theme desktop Footer with Logo set to Stacked</p></figcaption></figure>

#### Light theme Stacked mobile

<div align="left"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-f15233b68e3a27b75abd7d33fdae8b7fe2b049b0%2Ffooter-light-stacked-mobile.png?alt=media" alt="" width="188"><figcaption><p>Light theme desktop Footer with Logo set to Stacked</p></figcaption></figure></div>

#### Dark theme Inline desktop

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-cd464069ff663876424490b8770394ad658b7a7c%2Ffooter-dark.png?alt=media" alt=""><figcaption><p>Dark theme desktop Footer with Logo set to Inline</p></figcaption></figure>

#### Dark theme Inline mobile

<div align="left"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-8e4b0b6362d0dba5582eab7e0ba3127772c15fb5%2Ffooter-dark-inline-mobile.png?alt=media" alt="" width="188"><figcaption><p>Dark theme mobile Footer with Logo set to Inline</p></figcaption></figure></div>

#### Dark theme Inline stacked desktop

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-e83001e2085fa348f118818382e7d25b71f858df%2Ffooter-dark-inline-stacked-dsk.png?alt=media" alt=""><figcaption><p>Dark theme desktop Footer with Logo set to Inline stacked</p></figcaption></figure>

#### Dark theme Inline stacked mobile

<div align="left"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-39afcdcc800e7367ffe6640f4962f08be5c1da72%2Ffooter-dark-inline-stacked-mobile.png?alt=media" alt="" width="188"><figcaption><p>Dark theme mobile Footer with Logo set to Inline stacked</p></figcaption></figure></div>