Hero
Displays an image with text overlay on the page.
Last updated
Displays an image with text overlay on the page.
Last updated
⚙️ Powered by Rock RMS
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, here is a good example.
If you are unfamiliar with Lava, please check out our Lava Reference.
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.
Sets the color of the Title.
Sets the color of the Subtitle.
Padding
The padding around the inside of the Background Image.
