# Footer

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2F5Cwux5CLoNr52YRmWXrs%2Fprobike-footer.jpg?alt=media&#x26;token=de0c9c56-57df-4bb9-adb3-bf84b484c09a" 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%2FM7KnmVlbKSQiFXEBfK3p%2Fprobike-bottom-module-sppb.jpg?alt=media&#x26;token=0b5ec6b7-2a24-4d83-bed9-2634cdb9f06e" alt=""><figcaption><p>Bottom module of the footer section</p></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;

<div><figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FQvZSaSdNJh9ZKErpOC4s%2Fbottom1-layout.jpg?alt=media&#x26;token=2bed08ba-7ecd-4d2f-9d9f-0430d1726835" alt=""><figcaption><p>Edit the bottom element</p></figcaption></figure> <figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2F23sj3T9dUPw9lG3IzFwq%2Fchoose-bottom-module-layout.jpg?alt=media&#x26;token=78c497d9-d687-4136-8623-9ef96cca9d81" alt=""><figcaption><p>Choose a module position </p></figcaption></figure></div>

### 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 color
* If you're interested in having a background image for the section, you should choose the background image type, then upload an image.&#x20;
* Scroll down and you'll see the overlay color, 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%2F23dq8UQSs9yoS4ulOi1h%2Fedit-bottom-section.jpg?alt=media&#x26;token=7414007c-ab52-4ed7-9699-f22520b49263" alt=""><figcaption><p>Edit the bottom section and change the background color</p></figcaption></figure>
{% endtab %}

{% tab title="Background color" %}

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FlxDlnbpCfcc1W4KtF2uU%2Fchange-footer-background-color.jpg?alt=media&#x26;token=a6d589b0-26aa-43cd-9bd1-2da0bb639179" alt=""><figcaption><p>Change the background color of the bottom section</p></figcaption></figure>
{% endtab %}

{% tab title="Background image" %}
If you're interested in having a background image for the section, you should edit the section > design settings > choose the background type (Image) > and upload an image.

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FIIq0dt5X5ojO3z3MQdAz%2Fbottom-footer-background-image.jpg?alt=media&#x26;token=bd901d56-ea2f-4bc6-aef3-d96873f74790" alt=""><figcaption><p>Choose background image type and upload an image</p></figcaption></figure>
{% endtab %}
{% endtabs %}
