> For the complete documentation index, see [llms.txt](https://bigstart.gitbook.io/marble-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bigstart.gitbook.io/marble-documentation/content-sections/hero.md).

# Hero

This is the main slideshow section where you can add images, videos, promo content, etc.

The main settings in the section are the ones listed [here](/marble-documentation/content-sections/common-settings.md) and additional settings for:

* height -- 3 predefined options for: large, medium and viewport height. These are applicable for desktop only. Viewport height means that the hero section will be as tall as the device screen.
* enable carousel autoplay
* autoplay interval (in case the autoplay is turned on)

## Blocks

The hero slider supports 3 different block types:

* Hero block Fullwidth
* Hero block 50-50
* Hero block 60-40

These blocks/slides can be added through here: 

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

Here are some more details for each hero block type.

### Hero block Fullwidth

This is a full width hero slide. Example:

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

### Hero block 50-50

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

This is a 2 column slide where you can showcase different content in both columns.

### Hero block 60-40

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

This block supports 2 columns where the first one takes around 60% of the width, and the second one takes the other part. The aside section holds 2 elements inside.

## Blocks settings

### Video

This is only supported in the `Fullwidth` block type. There are options to choose the video from an external resource like YouTube or Vimeo, and an option to use a Shopify hosted video. More information about the video files in Shopify can be found here: <https://help.shopify.com/en/manual/products/product-media/product-media-types#videos>.

The video will be autoplaying muted by default. There is a setting to turn the autoplay off on mobile in order to lower the mobile data usage.

**Note:** please be aware that adding one or more autoplaying videos might impact your page speed results.

### Images

#### Image fields

For each of the elements there are separate options for picking a desktop and mobile image. If only desktop image is picked - this image will be also shown on mobile.

For mobile we suggest using more portrait oriented images.

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

#### Overlay

In case you have white text over white background and the content is not very readable - you can easily add an overlay by adjusting its opacity and picking the overlay color.

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

### Text Content

Along with the fields for Heading, Subheading and Paragraph, there are also settings for: content alignment and additional background.

The subheading, heading and paragraph items are marked in the screenshot below:

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

With the alignment settings you can move the content wherever you want like: top left, top right, bottom right, center, etc.

Here is an example with horizontally and vertically centered content:

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

#### Heading accent elements

In case you want to use highlight a text element in the headings you can use the Bold and Italic properties: ![](/files/yQcOkrAMhcIIXaHCJeJZ). You can mark a word or a phrase and click one of these.

The BOLD property will make the text to be shown in a different color which you can set through: `Theme settings > The color style you used for the section > Typography > Headings accent color`.

Here is an example result:

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

### Buttons

More details about the [buttons here](/marble-documentation/content-sections/common-settings.md#buttons).