# 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](https://bigstart.gitbook.io/marble-documentation/content-sections/common-settings) 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:
Here are some more details for each hero block type. ### Hero block Fullwidth This is a full width hero slide. Example:
### Hero block 50-50
This is a 2 column slide where you can showcase different content in both columns. ### Hero block 60-40
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: . 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.
#### 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.
### 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:
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:
#### Heading accent elements In case you want to use highlight a text element in the headings you can use the Bold and Italic properties: ![](https://4207195275-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp5czJlcYNU7vFLQkGMwL%2Fuploads%2FJhYLgpTAqqSas4peipl9%2Fimage.png?alt=media\&token=e02d0a1e-fc89-484a-93ac-f0bfd0f08c64). 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:
### Buttons More details about the [buttons here](https://bigstart.gitbook.io/marble-documentation/common-settings#buttons).