| 1234567891011121314151617181920212223242526272829303132333435 |
- Hero Block
- ==========
- A banner block with an image and some text, if desired.
- Field Reference
- ---------------
- Fields and purposes:
- * **Full Width** - If selected, sets whether the hero spans the entire width of the screen
- * **Parallax Effect** - If selected, background images scroll slower than foreground images, creating an illusion of depth.
- * **Background Image** - Image chooser for the background image
- * **Tile Background** - If selected, background image will be repeated in a tile pattern
- * **Background Color** - Sets a background color to display with hexadecimal, RGBA, or CSS color notation (e.g. #ff0011)
- * **Text Color** - Sets the color of the text for the entire hero block
- * **Content** - Additional layout options such as a Responsive Grid Row, Card Grid, or HTML
- .. note::
- If you want to use a hero block in place of the title/cover image on the web page, click on the LAYOUT tab
- in the editor and under Visual Design, choose the "Web page without title and cover image" template.
- In the **Advanced Settings** you can add CSS classes. In our hero below, we added the Bootstrap class ``py-5`` to give
- the hero image more padding and show more of the image. We also selected the focal point in the Image Editor.
- .. figure:: img/hero_block.png
- :alt: Hero block published on the page
- Our published hero block with padding
|
