Select to view content in your preferred language

Tips: Adding an Opaque Content Block

03-02-2017 12:05 PM

Tips: Adding an Opaque Content Block

Here's how to achieve an opaque content block on your banner or row using the layout builder and text cards.

1. Apply a background image to a row.

2. Drag two text cards onto that row.

3. Delete the contents of one of the cards and if desired, set a minimum height.

<div style="min-height: 420px"></div>

This provides an invisible block that will keep your row and background image from shrinking to only fit your written content. Background images are responsive, so they resize proportionately from top center (unless you change the Focal Point in the image options) depending on your current browser screen size. Adding empty text cards with a min-height is a good way to mimic a spacer card if you have a desired height for your banner and what to keep it from resizing.

4. To create the opaque text block, you can use the following snippet in the other card:

<div style="background: rgba(43,43,43,0.9); color: #fff; padding: 20px; height: 400px;">
<h2 style="font-size: 30px; line-height: 32px;">Improve River Recreation Safety</h2>
<p style="font-size: 16px; margin-top: 40px;">Understand the conditions fully before kayaking, canoeing, or enjoying then nation’s river system. This initiative strives to decrease deaths caused in rivers from flooding and rapid conditions through smart tools.</p>

Tags (1)
Version history
Last update:
‎12-12-2021 03:49 AM
Updated by: