> For the complete documentation index, see [llms.txt](https://docs-snap.superpowerups.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-snap.superpowerups.com/site-page-templates/the-captain-site-page-template-collection/build-your-own-sections/banner-image-on-side.md).

# 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](/site-page-templates/the-captain-site-page-template-collection/build-your-own-sections/activation-build-your-own-section.md) 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="/files/1dj056K39Wy7iti3JlvP" 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="/files/bupEvWGrguK9swvalhxO" alt=""><figcaption></figcaption></figure>

### Search or Button

<figure><img src="/files/ouYJgPZDjWL2yZZpZdqR" 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="/files/seEyW6NIMp2qQWizxrUI" 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="/files/rh5eqrPfwmZezSjkunaW" 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)