{"id":9139,"date":"2021-08-10T04:33:00","date_gmt":"2021-08-10T11:33:00","guid":{"rendered":"https:\/\/www.yola.com\/blog\/?p=9139"},"modified":"2022-09-06T06:17:03","modified_gmt":"2022-09-06T13:17:03","slug":"design-automation-background-overlays","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/design-automation-background-overlays\/","title":{"rendered":"Design automation: Background overlays"},"content":{"rendered":"\n<p>When designing new features for Latitude, one of our highest priorities is to give our users the means to easily <a href=\"http:\/\/yola.com\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"create stunning websites\">create stunning websites<\/a> without design or technical knowledge. One of the ways we accomplish this is by crafting <a href=\"http:\/\/yola.com\/features\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"features\">features<\/a> that utilize design automation, helping to ensure our user customizations inherit the properties of the template right out of the box. We&#8217;re excited to announce that our latest release does exactly that \u2013 introducing automated background overlays.<\/p>\n\n\n\n<p><strong>What are automated background overlays?<\/strong><br>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, the 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 <a href=\"https:\/\/www.yola.com\/blog\/ui-ux-updates-in-sitebuilder\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"UI\/UX updates in Sitebuilder+\">adjust the font<\/a> color to ensure user content remains legible.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/blogcontent.yola.com\/uploads\/2022\/09\/Automated-overlay.gif\"><img loading=\"lazy\" width=\"546\" height=\"342\" src=\"https:\/\/blogcontent.yola.com\/uploads\/2022\/09\/Automated-overlay.gif\" alt=\"\" class=\"wp-image-9140\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Once an overlay is added, the user is notified with a toast notification, letting them know the adjustments that have been made. Selecting the\u00a0<em>Undo<\/em>\u00a0button removes the adjustments. If a user would like to re-apply the automated adjustments, they can do so by simply selecting\u00a0<em>Redo<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/blogcontent.yola.com\/uploads\/2022\/09\/undo-redo-2.gif\"><img loading=\"lazy\" width=\"546\" height=\"342\" src=\"https:\/\/blogcontent.yola.com\/uploads\/2022\/09\/undo-redo-2.gif\" alt=\"\" class=\"wp-image-9141\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>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\u00a0<a href=\"https:\/\/www.yola.com\/blog\/design-automation-custom-color-palettes\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"Design automation: Custom color palettes\">color palette<\/a>) through block settings.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/blogcontent.yola.com\/uploads\/2022\/09\/change-appearance.gif\"><img loading=\"lazy\" width=\"546\" height=\"342\" src=\"https:\/\/blogcontent.yola.com\/uploads\/2022\/09\/change-appearance.gif\" alt=\"\" class=\"wp-image-9142\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>And best of all, automated background overlays are live now!\u00a0<\/p>\n\n\n\n<div class=\"wp-container-1 wp-block-buttons\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"http:\/\/editor.yola.com\" target=\"_blank\" rel=\"noreferrer noopener\">Try it yourself<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When designing new features for Latitude, one of our highest priorities is to give our 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 our user customizations inherit the properties of the template&hellip;&nbsp;<a href=\"https:\/\/www.yola.com\/blog\/design-automation-background-overlays\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Design automation: Background overlays<\/span><\/a><\/p>\n","protected":false},"author":24,"featured_media":9143,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false},"categories":[9],"tags":[1112],"_links":{"self":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/9139"}],"collection":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/comments?post=9139"}],"version-history":[{"count":2,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/9139\/revisions"}],"predecessor-version":[{"id":9182,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/9139\/revisions\/9182"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media\/9143"}],"wp:attachment":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media?parent=9139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/categories?post=9139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/tags?post=9139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}