Design automation: Background overlays


When designing new features for Latitude, one of our highest priorities is to give end-users the means to easily create stunning websites without design or technical knowledge. One of the ways we accomplish this is by crafting features that utilize design automation, helping to ensure end-user customizations inherit the properties of the template right out of the box. We're excited to announce that our latest release does exactly that – introducing automated background overlays.

What are automated background overlays?
Have you ever created a website or presentation and changed the background image, only to find that the text on top is now lost within the photo? With automated background overlays, end-users can make adjustments to background images with ease. When an image has been uploaded as a background, we use design automation to analyze the color of the image and the placement of the text. We then automatically add a background overlay and adjust the font color to ensure user content remains legible.  

Automated background overlays

Once an overlay is added, the user is notified with a toast notification, letting them know the adjustments that have been made. Selecting the Undo button removes the adjustments. If a user would like to re-apply the automated adjustments, they can do so by simply selecting Redo.

Undoing and redoing automated adjustments

Additional customizations can be made to the styling of the background overlay including the opacity and the color properties (colors displayed are designated by the selected color palette) through block settings.

Customizing the styling of a background overlay

And best of all, automated background overlays are live now! Want to give them a test drive? Feel free to check them out on our demo site. Feel free to reach out with any questions or feedback!

Was this article helpful?
0 out of 0 found this helpful