# Banner Image On Side

<figure><img src="https://import.cdn.thinkific.com/164072/courses/2010960/CaptainBanner01-220924-102200.jpg" alt=""><figcaption></figcaption></figure>

## How to use this section

* [ ] Add [Activation: Build Your Own](https://docs-snap.superpowerups.com/site-page-templates/the-captain-site-page-template-collection/build-your-own-sections/activation-build-your-own-section) section to a Site Page. *This section is required*
* [ ] Add this section to the page below the Activation: Build Your Own section
* [ ] Adjust the section settings for your text and media
* [ ] Optionally adjust the colors in the Style & Colors settings group

## Section Settings

### Headings

<figure><img src="https://624008736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIFV6SWUykqbTK8Nf5KJg%2Fuploads%2FQ3KodqImXXyKI393umty%2FScreen%20Shot%202022-09-28%20at%2010.56.47%20AM.png?alt=media&#x26;token=4d516527-67bc-4f23-80ed-55ff1fd01046" alt=""><figcaption></figcaption></figure>

Use these settings to change the text that appears in the main part of the banner.

* **Sub Heading** - this is the text that appears above the heading
* **Heading** - this is the main part of the text. It allow for special highlghting by wrapping words in brackets ex: `[SINGLEWORD]`
* **Summary** - this is the text that appears below the heading

### Popup

<figure><img src="https://624008736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIFV6SWUykqbTK8Nf5KJg%2Fuploads%2Fagq6qqJYIQSXR6G8TgNK%2FScreen%20Shot%202022-09-28%20at%2010.58.02%20AM.png?alt=media&#x26;token=e7f8488f-9e0b-4574-a428-74d41f01409b" alt=""><figcaption></figcaption></figure>

### Search or Button

<figure><img src="https://624008736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIFV6SWUykqbTK8Nf5KJg%2Fuploads%2F8xSZlwcRDfHuhNQmmgIW%2FScreen%20Shot%202022-09-28%20at%2010.58.51%20AM.png?alt=media&#x26;token=33108d01-e788-470a-8a96-cac7f525b2cd" alt=""><figcaption></figcaption></figure>

This is the settings group that controls the area below the subheading.

* **Below Heading:** Choose a search box or a button
* **Search Text:** The text that goes into the search box (when using Search)
* **Button Text:** The text that will be used for the button (when using a Button)
* **Button Page:** The page that will be used for the button (when using a Button)

### Images

<figure><img src="https://624008736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIFV6SWUykqbTK8Nf5KJg%2Fuploads%2F49jlzyQVaaPk9W0gT4Sv%2FScreen%20Shot%202022-09-28%20at%2011.27.46%20AM.png?alt=media&#x26;token=a155397f-692c-40ca-89b6-5bc693e9db45" alt=""><figcaption></figcaption></figure>

This settings group controls the main image and accent image. Click the trashcan on the accent image to remove.

### Style & Colors

<figure><img src="https://624008736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIFV6SWUykqbTK8Nf5KJg%2Fuploads%2FZYLDpUAfqfwNf0IgAeCZ%2FScreen%20Shot%202022-09-28%20at%2011.29.28%20AM.png?alt=media&#x26;token=806f8873-4da1-4017-8857-c0ecadfdd437" alt=""><figcaption></figcaption></figure>

This settings group controls the colors that are used. By default we attempt to automatically use the colors that are found in your Thinkific Theme Settings. To over-ride the defaults, uncheck the appropriate box and set the color. Some items may bot use the default color scheme and rely on your setting them here.

* **Use page background color?** - when unchecked, choose the color you wish to use for the background color of this section
* **Use primary button color for subheading?** - when unchecked, choose the color you wish to use for the subheading color
* **Use theme settings color for heading?** - when unchecked, choose the color you wish to use for the heading
* **Use theme settings color for summary?**- when unchecked, choose the color you wish to use for the summary
* **Use primary button color for highlight?** - when unchecked, choose the color you wish to use for the highlight
* **Search Background** - set the color for the search area background
* **Search Text** - set the color for the search area text
* **Use primary button color for search icon?** - when unchecked, choose the color you wish to use for the search icon
* **Use primary button color for popup icon?**- when unchecked, choose the color you wish to use for the popup icon background and color
* **Popup Text** - set the color for the popup text
* **Popup Background** - set the color for the popup background
* **Padding Top** - change the slider to adjust the padding from the top of the page (Desktop only)