{"id":825714,"date":"2018-01-12T16:00:29","date_gmt":"2018-01-12T16:00:29","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/how-to-make-your-written-content-readable-on-image-backgrounds-with-divi\/"},"modified":"2022-12-10T13:49:30","modified_gmt":"2022-12-10T13:49:30","slug":"how-to-make-your-written-content-readable-on-image-backgrounds-with-divi-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/how-to-make-your-written-content-readable-on-image-backgrounds-with-divi\/","title":{"rendered":"How to Make Your Written Content Readable on Image Backgrounds with Divi"},"content":{"rendered":"\n<div id=\"post-67947\">\n<p>Making sure the content or copy for your website is readable is equally as important as making sure you\u2019re choosing the right words. Of course, getting the overall right look and feel for your website is important as well. But without readable and valuable content, the purpose of a site\u00a0will most likely get lost.<\/p>\n<p>When you\u2019re creating your website with Divi, you have different design options that allow you to make sure that the copy you\u2019re sharing is readable on whatever kind of image background you\u2019re using. That\u2019s what this post is going to be all about. We\u2019re going to share some tips and tricks and Divi options that will make sure the written content you share on image backgrounds is readable and easily understood.<\/p>\n<p>Let\u2019s take a look!<\/p>\n<h2>How to Make Your Written Content Readable on Image Backgrounds with Divi<\/h2>\n<p><iframe loading=\"lazy\" title=\"How to Make Your Written Content Readable on Image Backgrounds with Divi 2018\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/-pYiK_BD7Lw?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><a class=\"button primary-button inline-button accent-red\" href=\"https:\/\/www.youtube.com\/c\/elegantthemes?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">Subscribe To Our Youtube Channel<\/a><\/p>\n<h2>1. Contrast is King but\u00a0Avoid Extreme Contrasts (Black &amp; White)<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-68045 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt1.png\" alt=\"content\" width=\"880\" height=\"355\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt1.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt1-300x121.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt1-768x310.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt1-610x246.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>The first bullet point and essential aspect of creating readable content is making sure there is enough contrast between the written content you\u2019re providing and the image background you use. If you\u2019re using a background image that leans too much towards the color of your font, the content you\u2019re sharing can easily go lost. Choose between:<\/p>\n<ul>\n<li>Using a light font color in combination with a darker background image<\/li>\n<li>Using a dark font color in combination with a lighter background image<\/li>\n<\/ul>\n<p>The most obvious contrasting colors are black and white. However, using them in combination can be heavy on the eyes. Therefore, rather opt for two contrasting colors that aren\u2019t as heavy on the eyes as black and white are. Instead of choosing a black color for your background, choose a dark gray color or any other type of dark color. Same counts for a light font color; choose a light gray color or any type of light color that leans close towards white.<\/p>\n<h2>2. Use Neutral Colors &amp; Sober Font Families<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-68046 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt2.png\" alt=\"content\" width=\"880\" height=\"354\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt2.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt2-300x121.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt2-768x309.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt2-610x245.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>The next thing that\u2019ll determine whether or not your content is readable is the color and font family you choose. Sure, using bright and notable colors draw attention. But if you\u2019re sharing too much copy in that particular color, it will likely cause people to skip reading the content you\u2019re providing because of how disturbing it is on the eyes.<\/p>\n<p>That\u2019s why it\u2019s recommendable to use neutral colors that don\u2019t bother the eyes and allow visitors to focus on the message you\u2019re trying to bring. You can never go wrong by choosing a sober font family for most of the copy you share as well. However, that doesn\u2019t mean you should always go with default fonts, like Arial, only. You can also opt for something that is a bit more sophisticated for your titles\u2013as long as the readability is there.<\/p>\n<h2>3. Use Bright Colors to Highlight CTAs<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-68047 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt3.png\" alt=\"content\" width=\"880\" height=\"365\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt3.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt3-300x124.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt3-768x319.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt3-610x253.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>As mentioned in the previous bullet point, a good website mostly uses neutral colors and sober font families. By doing so, you allow visitors to pay special attention to your calls to action.<\/p>\n<p>To make sure your CTAs stand out from the other written content you\u2019re providing, you\u2019ll have to a find a color that contrasts with both the background image and the font color. Visitors are used to this kind of website structure and will automatically recognize your calls to action if you make sure they\u2019re the first thing that catches the eye.<\/p>\n<h2>4. Add a Background Color Overlay to Your Background Image<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-68048 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt4.png\" alt=\"content\" width=\"880\" height=\"358\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt4.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt4-300x122.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt4-768x312.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt4-610x248.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>In many cases, the background image you want to use is a combination of light, dark and bright colors. That makes it hard to find a readable font color. Luckily, you can add color overlays to your background images within the Divi builder itself.\u00a0 These overlays are available for any row, column, module or section that you\u2019re using and can be found in the Background subcategory of the Content tab. You could add overlays to images with photo editing software as well, but using Divi built-in options in combination with the Visual Builder allows you to see changes happen in real time and makes using photo editing software hardly necessary.<\/p>\n<p>You can change the overlay color up to the point where you feel like the written content is readable. By doing so, some of the colors of your images will go lost, that\u2019s a fact. But that\u2019s something you\u2019ll have to sacrifice willingly. If you want to keep a colorful image within its original form, using it in a two-column structure with no text overlap is the way to go.<\/p>\n<p>Once you add a background color overlay to your Divi settings, you\u2019ll have to choose the type of Image Blend you want as marked on the print screen below.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-68051 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt7.png\" alt=\"content\" width=\"880\" height=\"380\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt7.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt7-300x130.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt7-768x332.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt7-610x263.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>5. Or Use a Gradient Background Overlay Instead<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-68049 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt5.png\" alt=\"content\" width=\"880\" height=\"349\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt5.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt5-300x119.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt5-768x305.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt5-610x242.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Another option you have is using a gradient background overlay. This gives you the same possibilities as the color overlay does, but allows you to add a gradient of two colors instead. Once you add a gradient background, you will, again, have the option to choose your Image Blend as marked on the print screen below.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-68052 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt8.png\" alt=\"content\" width=\"880\" height=\"388\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt8.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt8-300x132.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt8-768x339.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt8-610x269.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>6. Use Text Shadow<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-68050 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt6.png\" alt=\"content\" width=\"880\" height=\"358\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt6.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt6-300x122.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt6-768x312.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/tt6-610x248.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>If, however, you want to use the same color for your font and background image at the same time; there\u2019s an alternative. You can use the Text Shadow built-in option of Divi. For this option, you will need to use a shadow color that is the opposite of your font color and background image or overlay color. Not only will you be able to maintain the same color for your font and background image at the same time, but the Text Shadow option also allows you to create some depth which is a helpful contribution to the look and feel of your website.<\/p>\n<h2>Final Thoughts<\/h2>\n<p>In this post, we\u2019ve shown you several ways on how to make your written content or copy readable when using image backgrounds. Of course, you don\u2019t have to apply all of these methods at the same time, but it\u2019s great to keep them in the back of your mind while designing your next website. If you have any questions or suggestions; make sure you leave a comment in the comment section below!<\/p>\n<p><em>Featured Image by FernPat\u00a0\/ shutterstock.com<\/em><\/p>\n<\/div>\n<blockquote class=\"wp-embedded-content\" data-secret=\"S0W05kkrnq\"><p><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-make-your-written-content-readable-on-image-backgrounds-with-divi\">How to Make Your Written Content Readable on Image Backgrounds with Divi<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;How to Make Your Written Content Readable on Image Backgrounds with Divi&#8221; &#8212; Elegant Themes Blog\" src=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-make-your-written-content-readable-on-image-backgrounds-with-divi\/embed#?secret=fvOY7y3kc8#?secret=S0W05kkrnq\" data-secret=\"S0W05kkrnq\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Making sure the content or copy for your website is readable is equally as important as making sure you\u2019re choosing the right words. Of course, getting the overall right look and feel for your website is important as well. But without readable and valuable content, the purpose of a site\u00a0will most likely get lost. When [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":825715,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1522],"tags":[],"class_list":["post-825714","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-en"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/825714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/comments?post=825714"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/825714\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media\/825715"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=825714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=825714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=825714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}