# Hero Banner

[Dealership One](https://motors.stylemixthemes.com/), [Dealership Two](https://motors.stylemixthemes.com/dealer-two/), and [Classified Four](https://motors.stylemixthemes.com/classified-four/) demo layouts include a Slide in the hero section of the homepage in both Elementor and WPBakery page builders. The Slides were created with the Slider Revolution plugin and a new Hero Banner widget is added to the theme as alternative solution to optimize the performance of these demos. The widget is available for both Elementor and WPBakery page builders.

### Hero Banner WPBakery

To use Static Hero Banner, while editing the page the "**STM Hero Banner Widget**" can be added:

<figure><img src="/files/Ztg2sbndx5AdRSvz3onu" alt=""><figcaption></figcaption></figure>

The STM Hero Banner Widget has three styles:

* Style 1 - Info Block inside Round shape.&#x20;
* Style 2 - Info Block with the Call to action button.&#x20;
* Style 3 - Info Block with Background overlay and button.

Depending on the selected styles widget has different options:

{% tabs %}
{% tab title="Style 1" %}

<figure><img src="/files/6XdN8C3xRGYTzxVBFQcD" alt=""><figcaption></figcaption></figure>

The STM Hero Banner Widget has following settings for Style 1:

<figure><img src="/files/5M6QOJVN1F7tmk4DGayu" alt=""><figcaption></figcaption></figure>

* **Image** - Background image for Hero Banner section.
* **Info Block Style** - Option to select one of the available three styles.
* **Info Block Position** - Option to change the position of the info block to the right or the left.
* **Title** - Info Block title:

<figure><img src="/files/5CgKa7XbYqMLKxdWqIOr" alt=""><figcaption></figcaption></figure>

* **Price** - Price of the item that is displayed in Info Block:

<figure><img src="/files/FA5B6eDTqA7q8SYR7ayQ" alt=""><figcaption></figcaption></figure>

* **Per Month Title** - Specifies the period unit for which the payment will be made for the vehicle.

<figure><img src="/files/qQxGph6h5ovdIVO7XQYq" alt=""><figcaption></figcaption></figure>

* **Period** - Shows for how many months the car payment will be paid:

<figure><img src="/files/WxA59vAREVpMV24wiqYI" alt=""><figcaption></figcaption></figure>

* **Description** - Text block that displays additional information about the vehicle. The editor supports HTML tags which are useful for structuring and creating description.

<figure><img src="/files/O09C9x7EbHDkeTelKCFt" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Style 2" %}

<figure><img src="/files/boSR2KgmmufhaVwD8tX4" alt=""><figcaption></figcaption></figure>

The STM Hero Banner Widget has following settings for Style 2:

<figure><img src="/files/Lnm6X0Ip9e512Qw5CFaJ" alt=""><figcaption></figcaption></figure>

* **Image** - Background image for Hero Banner section.
* **Info Block Styl**e - Option to select one of the available three styles.
* **Info Block Position** - Option to change the position of the info block to the right or the left.
* **Title** - Info Block title:

<figure><img src="/files/tzX0pmGjg75igs88n2ns" alt=""><figcaption></figcaption></figure>

* **Price** - Price of the item that is displayed in Info Block:

<figure><img src="/files/rDWb4ne1otAmttFNikm5" alt=""><figcaption></figcaption></figure>

* **Per Month Title** - Specifies the period unit for which the payment will be made for the vehicle.

<figure><img src="/files/wtVjErfaLSHYjkfyNM8G" alt=""><figcaption></figcaption></figure>

* **Period** - Shows for how many months the car payment will be paid:

<figure><img src="/files/mg55MFMP6o07ZL5FVh9s" alt=""><figcaption></figcaption></figure>

* **Description** - Text block that displays additional information about the vehicle. The editor supports HTML tags which are useful for structuring and creating description:

<figure><img src="/files/zo1jZkagOLJs27PLzL15" alt=""><figcaption></figcaption></figure>

* **Button Link** - Custom link for a button that can redirect users to a certain page or post.
* **Button Title** - The title for the Info Box button.

<figure><img src="/files/LVKHEpYzKjhB052xvSAC" alt=""><figcaption></figcaption></figure>

* **Button Icon** - The Icon that appears behind the Button title.
  {% endtab %}

{% tab title="Style 3" %}

<figure><img src="/files/mU8EdPjnReGXBTGdMCPl" alt=""><figcaption></figcaption></figure>

The STM Hero Banner Widget has following settings for Style 3:

<figure><img src="/files/1niJIe52CUgSMZVo8nHj" alt=""><figcaption></figcaption></figure>

* **Image** - Background image for Hero Banner section.
* **Info Block Style** - Option to select one of the available three styles.
* **Info Block Position** - Option to change the position of the info block to the right or the left.
* **Title** - Info Block title:

<figure><img src="/files/NEszGdRgXHQTbQaE0U3c" alt=""><figcaption></figcaption></figure>

* **Price** - Price of the item that is displayed in Info Block:

<figure><img src="/files/pKWAL1srxXBRcG4sclWf" alt=""><figcaption></figcaption></figure>

* **Per Month Title** - Specifies the period unit for which the payment will be made for the vehicle.

<figure><img src="/files/bMC1mX3u3E1DtDU8Ta15" alt=""><figcaption></figcaption></figure>

* **Period** - Shows for how many months the car payment will be paid:

<figure><img src="/files/0E2v2x5BsVcsHeoASO1y" alt=""><figcaption></figcaption></figure>

* **Description** - Text block that displays additional information about the vehicle. The editor supports HTML tags which are useful for structuring and creating description.

<figure><img src="/files/pZZkUdM1DzwNfmAS8cRH" alt=""><figcaption></figcaption></figure>

* **Button Link** - Custom link for a button that can redirect users to a certain page or post.
* **Button Title** - The title for the Info Box button.

<figure><img src="/files/x63eVTxHJupybnksnBIh" alt=""><figcaption></figcaption></figure>

* **Button Icon** - The Icon that appears behind the Button title.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stylemixthemes.com/motors-theme-documentation/hero-banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.