# Step by step

### Step 1: In the Add slice view, find the slice called "Banner"

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRyhea99kv7PaJ1szTH%2F-MRyr1m2TevGc9vrudyV%2FScreenshot%202021-01-26%20at%2014.22.03.png?alt=media\&token=aef6fe32-89b1-4ee1-98d6-9f4244d89ff8)

### Step 2: Getting started

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRxkGUB8TOlGW47wwkO%2F-MRy6abv79U_HqdlEZ-N%2FScreenshot%202021-01-26%20at%2010.54.57.png?alt=media\&token=85d97150-983d-4b8d-a31f-bca5f7c660e8)

{% tabs %}
{% tab title="Title" %}
![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRysJKHOOysNncBoQqp%2F-MRyuQ1-dogiYRY0WQGK%2FScreenshot%202021-01-26%20at%2011.35.11.png?alt=media\&token=590f8aac-ea36-4805-ba80-59e9c404f368)

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRxkGUB8TOlGW47wwkO%2F-MRy80B2_yKJZxybTlTE%2FScreenshot%202021-01-26%20at%2010.50.23.png?alt=media\&token=33c606f4-21fe-474e-a02b-09b119589dca)
{% endtab %}

{% tab title="Text" %}
![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRysJKHOOysNncBoQqp%2F-MRyuTwUJ1TaOYueXrpQ%2FScreenshot%202021-01-26%20at%2011.34.39.png?alt=media\&token=e65c8314-16c5-4722-9917-7495aadab621)

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRxkGUB8TOlGW47wwkO%2F-MRy7yzQqRV7Jn0iIqqx%2FScreenshot%202021-01-26%20at%2010.50.44.png?alt=media\&token=c1f3471c-09e6-43aa-8f20-ebb420a58989)
{% endtab %}

{% tab title="Text Color" %}
Text color is an optional feature to give you the possibility to choose a text color that will be a good match to your banner background, if no color is selected the color will be **black** by default.

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRxkGUB8TOlGW47wwkO%2F-MRy7enYPPGqR61m78Mp%2FScreenshot%202021-01-26%20at%2010.51.06.png?alt=media\&token=53b53288-06a5-4760-8bfd-6d6dbb0cec35)
{% endtab %}

{% tab title="Background image for banner" %}
The background image for the banner.

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRysJKHOOysNncBoQqp%2F-MRyuZZqU-4bEQ3EImXd%2FScreenshot%202021-01-26%20at%2011.34.30.png?alt=media\&token=637c7ce7-0309-47d5-9162-7fa408c8991c)

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRxkGUB8TOlGW47wwkO%2F-MRy7XOo2nv5_Wm71foE%2FScreenshot%202021-01-26%20at%2010.51.30.png?alt=media\&token=506c31e7-eb0a-4522-835d-3a5bc1701fe1)
{% endtab %}

{% tab title="Background color for banner" %}
The background color for the banner.

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRysJKHOOysNncBoQqp%2F-MRyv29ZI6d7mmtaq-RC%2FScreenshot%202021-01-26%20at%2014.39.56.png?alt=media\&token=27be487e-2d81-4a79-889b-5ed9f0381242)

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRxkGUB8TOlGW47wwkO%2F-MRy7QrPfX56-37FJDE-%2FScreenshot%202021-01-26%20at%2010.51.54.png?alt=media\&token=36458080-3f96-4813-8d24-247d7c2ca827)
{% endtab %}
{% endtabs %}

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRyhea99kv7PaJ1szTH%2F-MRyrjQqijnm-TtuvUhv%2FScreenshot%202021-01-26%20at%2014.23.50.png?alt=media\&token=d0a97421-16ef-46ad-98fb-e7c479a6bae3)

{% tabs %}
{% tab title="Button link" %}
Choose a link that you want the user to be redirected to when they click on the button.

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRyhea99kv7PaJ1szTH%2F-MRys2MAhdx_ecv21z_e%2FScreenshot%202021-01-26%20at%2014.23.53.png?alt=media\&token=06851fb8-9e07-4ecb-aa43-7440a3dfb705)
{% endtab %}

{% tab title="Button text" %}
The text for the button, *Read more*, *Find out more* etc.

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRysJKHOOysNncBoQqp%2F-MRywYpYRm5Ksfl3ejLw%2FScreenshot%202021-01-26%20at%2011.35.37.png?alt=media\&token=a22ea7da-7813-473f-bf40-f07c42967154)

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRyhea99kv7PaJ1szTH%2F-MRys-DXydL2WOdhYz7h%2FScreenshot%202021-01-26%20at%2014.24.18.png?alt=media\&token=5f44ccfb-9a09-4420-bcf0-7b1a7b69db6e)
{% endtab %}

{% tab title="Button color" %}
Button color is an **optional** feature to give you the possibility to choose a button color that will be a good match to your banner background, if no color is selected the default color will be your primary color that you have selected in settings under themes.

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRysJKHOOysNncBoQqp%2F-MRywYpYRm5Ksfl3ejLw%2FScreenshot%202021-01-26%20at%2011.35.37.png?alt=media\&token=a22ea7da-7813-473f-bf40-f07c42967154)

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRyhea99kv7PaJ1szTH%2F-MRyrwBBq2qB4kzXvOUS%2FScreenshot%202021-01-26%20at%2014.24.33.png?alt=media\&token=76662dc8-f693-490b-8140-07a7055d4fe8)
{% endtab %}

{% tab title="Logotype on banner" %}
We recommended that you use logotypes with a transparent background and with good resolution.

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRysJKHOOysNncBoQqp%2F-MRywofap-7QGOXD98Px%2FScreenshot%202021-01-26%20at%2011.35.59.png?alt=media\&token=a611c870-fe90-4ca6-b5ef-09acc27d27d6)

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRyhea99kv7PaJ1szTH%2F-MRyrnAOHotaeFa_e53U%2FScreenshot%202021-01-26%20at%2014.24.49.png?alt=media\&token=9108ecda-e6c4-4499-a063-d86f2263133e)
{% endtab %}

{% tab title="Layout" %}
This is where you can decide in which order you want the banner content to be placed. There is two options for this, **row-ordered** and **row-reverse,** the default selected option is **row-ordered.**

* **row-ordered:** 
  * **Desktop:** The text, title and button will be placed on the left, and the image will be placed on the right. 
  * **Mobile:** The text, title and button will be placed on the top of the column, while the image/logotype will be on the bottom.

![row-ordered Desktop](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRxkGUB8TOlGW47wwkO%2F-MRyGiaN_6I3ca3GVnYz%2FScreenshot%202021-01-26%20at%2011.34.30.png?alt=media\&token=f000a841-d343-47bb-9351-2b69d1110b39)

![row-ordered Mobile](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRxkGUB8TOlGW47wwkO%2F-MRyETeJb3atLj_z5fJ8%2FScreenshot%202021-01-26%20at%2011.29.14.png?alt=media\&token=8564ec26-a960-4e5f-a686-f7aecb0d4c70)

* **row-reverse:** 
  * **Desktop**: The text and title will be placed on the right, and the image will be placed on the left.
  * **Mobile:** The text, title and button will be placed on the bottom of the column, while the image/logotype will be on the top.

![row-reverse Desktop](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRxkGUB8TOlGW47wwkO%2F-MRyGmx7ovsT82H7-pxK%2FScreenshot%202021-01-26%20at%2011.36.43.png?alt=media\&token=135e1d8a-dece-44c1-ba37-0279ca82543c)

![row-reverse Mobile](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRxkGUB8TOlGW47wwkO%2F-MRyEDogtYN0uuSwPQF-%2FScreenshot%202021-01-26%20at%2011.26.29.png?alt=media\&token=0705fcc9-6e85-45e7-9aa5-59cc7a02eb39)

![](https://3716057888-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LanxjKSg2QEmCJWyhjn%2F-MRyhea99kv7PaJ1szTH%2F-MRyrs95GMGO1Iq1gLGn%2FScreenshot%202021-01-26%20at%2014.25.07.png?alt=media\&token=b623c102-1f20-425c-833d-c12493a5c814)
{% endtab %}
{% endtabs %}