Hero
Displays an image with text overlay on the page.
Last updated
Displays an image with text overlay on the page.
Last updated
Want big, styled images that you can overlay with Lava content? You're in the right place. Hero images are a great way to attractively display a picture with text overlay.
This is an example of a display created using this block. The Background Image was set to a stock photo, and to render the title, the block setting was set to {{ CurrentPerson.FirstName }}.
In order to use Lava in this block, please make sure to enable the 'Process Lava on Server' under the 'Block Settings > Mobile Settings'. If you are struggling to find or enable this setting, is a good example.
If you are unfamiliar with Lava, please check out our .
The main title that overlays the Background Image. Lava enabled.
The text that overlays the image, underneath the title. Lava enabled.
Phone: The image to display on a phone. Recommended to be at least 1024px wide, and at least double the height of the Height - Phone setting.
Tablet: The image to display on a tablet. Recommended to be at least 2048 pixels wide, and at least double the height of the Height - Tablet setting.
Phone: The height of the rendered image on a phone.
Tablet: The height of the rendered image on a tablet.
This setting allows you to align the overlayed text to the left, center or right side of the image.
Padding
Sets the color of the .
Sets the color of the .
The padding around the inside of the .
