# Footer

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FzhAyPR1WDhHg14UX2Exe%2Fexpress-footer.jpg?alt=media&#x26;token=af39ec4a-7df3-4b51-b742-b5464d696e11" alt=""><figcaption></figcaption></figure>

### Create a bottom footer module

Please go to Dashboard > Site > Modules > Add a new module

* Module name: **Bottom**
* Module type: SP Page Builder
* Module position: bottom-1
* Menu assignment: On all pages
* Look at the sp page builder module below, you can see corresponding add-ons used in the footer.&#x20;

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2F6IJY1bEBFJ7zOCjVSMQo%2Fexpress-footer-module.jpg?alt=media&#x26;token=8d0edff1-33fd-4e8a-b0e6-33992790b4b3" alt=""><figcaption></figcaption></figure>

### Add the module's position to the template layout

Please go to Site Template styles > open your styles > Layout > Assign the module position to the Footer element.&#x20;

{% tabs %}
{% tab title="First Tab" %}
![Edit the footer element](https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FdYoFNZUH2Bh0OVrZ8Ya1%2Ffooter-section-layout.jpg?alt=media\&token=5f5e9037-9ceb-40b6-90a6-3f6ea911bb5b)
{% endtab %}

{% tab title="Second Tab" %}
![Select a module position](https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FnEF1HEVBP2h5qjVzV1Pg%2Ffooter-section-layout2.jpg?alt=media\&token=b0bfad81-0d17-4201-9d7a-411cbe9559d4)
{% endtab %}
{% endtabs %}

### Edit the footer's background image and overlay color

* In the layout, you're supposed to edit the footer section > Design settings tab
* Edit the background image
* Scroll down and you'll see a background color option, link color, and link hover color.

{% tabs %}
{% tab title="Footer section" %}

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FTj5hCmzpWI1C6W13F7jC%2Fedit-footer-section.jpg?alt=media&#x26;token=0caa68c2-d1aa-4a78-a3bb-59d1acdc3825" alt=""><figcaption><p>Edit the footer section</p></figcaption></figure>
{% endtab %}

{% tab title="Background image" %}

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2F5pIGxdOISo0u0D5OOldR%2Ffooter-bg-image.jpg?alt=media&#x26;token=04cbc624-59fa-461d-bb2d-ebc8b372716f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Background color" %}
Below the background image option, you'll see background color options and custom color options. Here you also can change the link color, link hover color, and text color of the footer section.

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2F3ufmvWq87qGiprQjlmhm%2Ffooter-bg-color.jpg?alt=media&#x26;token=3f03f4b0-85ba-41e7-a5ed-a20487df6d61" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}
