{"id":88605,"date":"2021-10-14T10:01:49","date_gmt":"2021-10-14T14:01:49","guid":{"rendered":"https:\/\/optinmonster.com\/?post_type=optinmonster_docs&#038;p=88605"},"modified":"2025-08-14T09:51:44","modified_gmt":"2025-08-14T13:51:44","slug":"how-to-change-the-optin-overlay-transparency-or-color","status":"publish","type":"optinmonster_docs","link":"https:\/\/optinmonster.com\/docs\/how-to-change-the-optin-overlay-transparency-or-color\/","title":{"rendered":"How to Change the Campaign Overlay Transparency or Color"},"content":{"rendered":"\n<p>You can easily customize the appearance of your OptinMonster campaign including the overlay transparency or color.<\/p>\n\n\n\n<p>In this article, you&#8217;ll learn how to change the campaign overlay transparency or color.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Before You Start<\/h2>\n\n\n\n<p>Here are some things to know before you begin:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This guide assumes you&#8217;ve already created a <a href=\"https:\/\/optinmonster.com\/docs\/how-to-create-a-full-screen-welcome-gate-optin\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Fullscreen<\/a> or <a href=\"https:\/\/optinmonster.com\/docs\/how-to-create-a-lightbox-popup-optin\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Lightbox<\/a> type campaign.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"transparent-overlay\">Change Overlay<\/h2>\n\n\n\n<p>To change the overlay transparency or color, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the campaign builder, select the&nbsp;<strong>Settings<\/strong> icon.<br><img decoding=\"async\" width=\"800\" height=\"455\" class=\"alignnone size-large wp-image-170634\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/click-settings-gear-OptinMonster.png\" alt=\"click settings gear\"><\/li>\n\n\n\n<li>Next, select the&nbsp;<strong>Advanced<\/strong> tab and expand the&nbsp;<strong>Popup Settings&nbsp;<\/strong>option.<br><img decoding=\"async\" width=\"800\" height=\"464\" class=\"alignnone size-large wp-image-170909\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/advanced-settings-tab-background-overlay-color-1024x594.png\" alt=\"\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/advanced-settings-tab-background-overlay-color-1024x594.png 1024w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/advanced-settings-tab-background-overlay-color-300x174.png 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/advanced-settings-tab-background-overlay-color-768x445.png 768w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/advanced-settings-tab-background-overlay-color.png 1095w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/li>\n\n\n\n<li>Select the&nbsp;<strong>Background Overlay Color<\/strong> swatch to open the color editor. Here you can select a color and change the transparency.<br><img decoding=\"async\" width=\"1206\" height=\"828\" class=\"alignnone size-full wp-image-164901\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/09\/change-background-overlay-color.gif\" alt=\"Change the campaign background overlay color.\"><\/li>\n\n\n\n<li>When you&#8217;re finished, click&nbsp;<strong>Save<\/strong>.<\/li>\n<\/ol>\n\n\n","protected":false},"excerpt":{"rendered":"<p>You can easily customize the appearance of your OptinMonster campaign including the overlay transparency or color. In this article, you&#8217;ll learn how to change the campaign overlay transparency or color. Before You Start Here are some things to know before you begin: Change Overlay To change the overlay transparency or color, follow these steps:<\/p>\n","protected":false},"author":4657,"comment_status":"open","ping_status":"closed","template":"","documentation\/categories":[11],"documentation\/tags":[31399,31409,31411],"class_list":["post-88605","optinmonster_docs","type-optinmonster_docs","status-publish","hentry","categories-functionality"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/88605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/types\/optinmonster_docs"}],"author":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/users\/4657"}],"replies":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/comments?post=88605"}],"version-history":[{"count":10,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/88605\/revisions"}],"predecessor-version":[{"id":202810,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/88605\/revisions\/202810"}],"wp:attachment":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/media?parent=88605"}],"wp:term":[{"taxonomy":"categories","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/categories?post=88605"},{"taxonomy":"internal_tags","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/tags?post=88605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}