A common design pattern for many websites is to display an image, carousel, or video in the "hero" spot at the top of the page, and then float text, buttons, or other elements on top of it. In order to ensure the text is readable, you may want to darken the underlying media a bit, resulting in a design that might look something like this:
This is fairly simple to achieve in Brandcast in just a minute or two, but it's important to make sure that your page elements are arranged the right way.
- You can begin by placing both the floating text, and the media, within a parent container. They should be siblings within this container (the text should not be inside of the media element.) So when you look at your Page Structure panel, the structure should look something like this:
2. Add your images, or video, to the media element. (In this example, we are using an automated carousel, but depending on your design it could just as easily be a background video, or a static image.)
3. To allow the text overlay to sit directly on top of the media element, use the Position Panel to change its positioning to "Fix to Parent Element":
4. All the elements should now be correctly in place. You may need to do some additional styling -- make sure the text is centered, use the Dimensions Panel to place it in the correct position relative to the media, create your button style, and so forth.
5. In order to make the text readable, you may want to darken the media. (Or, if your design is inverted and your text is dark, you may want to brighten the media!) Select the media element and, using the Filters Panel, adjust its Brightness:
A percentage less than 100% will darken the media element; a percentage greater than 100% will brighten it.
This general approach can be used to float any kind content above any kind of element on your page.