{"id":7180,"date":"2023-10-13T15:07:07","date_gmt":"2023-10-13T15:07:07","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=7180"},"modified":"2023-12-01T15:34:50","modified_gmt":"2023-12-01T15:34:50","password":"","slug":"image-overlay-quick-start-guide","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/image-overlay-quick-start-guide\/","title":{"rendered":"Image Overlay Quick Start Guide"},"content":{"rendered":"\n<p>To get started setting up the image overlay on your site, follow the below tutorial. The Image Overlay block is only available with <a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/pro\/\">Kadence Blocks Pro<\/a>.<\/p>\n\n\n\n<p>Select the Image Overlay Block from the blocks list:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/04\/Image-Overlay.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/04\/Image-Overlay-1024x630.jpeg\" alt=\"Select Block\" class=\"wp-image-1175\" \/><\/a><\/figure>\n\n\n\n<p>Select your background image:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/03Select-Image-min.gif\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/03Select-Image-min.gif\" alt=\"Select Image\" class=\"wp-image-266\" \/><\/a><\/figure>\n\n\n\n<p>Set the link and hover effect for your overlay block:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/02-start-Editing-copy-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/02-start-Editing-copy-min-1024x678.jpeg\" alt=\"Image Overlay Settings\" class=\"wp-image-267\" \/><\/a><\/figure>\n\n\n\n<p>Set your image overlay titles:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/04-Titles-min.gif\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/04-Titles-min.gif\" alt=\"Add Title\" class=\"wp-image-268\" \/><\/a><\/figure>\n\n\n\n<p>Adjust your hover overlay settings:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/05-Hover-Overlay-min.gif\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/05-Hover-Overlay-min.gif\" alt=\"Hover Overlay Settings\" class=\"wp-image-269\" \/><\/a><\/figure>\n\n\n\n<p>Adjust your border settings:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/06-Border-min.gif\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/06-Border-min.gif\" alt=\"Border Settings\" class=\"wp-image-270\" \/><\/a><\/figure>\n\n\n\n<p>Set the alignment of your titles:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/07-Text-Alignment-min.gif\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/07-Text-Alignment-min.gif\" alt=\"Text Alignment Settings\" class=\"wp-image-271\" \/><\/a><\/figure>\n\n\n\n<p>Customize your title font:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/08-Title-Text-min.gif\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/08-Title-Text-min.gif\" alt=\"Title Text Settings\" class=\"wp-image-272\" \/><\/a><\/figure>\n\n\n\n<p>Configure a divider between your title and subtitle:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/09-Title-Divider-min-1.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/09-Title-Divider-min-1-1024x506.jpeg\" alt=\"Divider Title\" class=\"wp-image-275\" \/><\/a><\/figure>\n\n\n<style>.kb-row-layout-id7180_ed2b21-30 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id7180_ed2b21-30 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id7180_ed2b21-30 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id7180_ed2b21-30 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id7180_ed2b21-30 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id7180_ed2b21-30 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id7180_ed2b21-30 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column7180_9363b8-a3 > .kt-inside-inner-col,.kadence-column7180_9363b8-a3 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column7180_9363b8-a3 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column7180_9363b8-a3 > .kt-inside-inner-col{flex-direction:column;}.kadence-column7180_9363b8-a3 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column7180_9363b8-a3 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column7180_9363b8-a3{position:relative;}@media all and (max-width: 1024px){.kadence-column7180_9363b8-a3 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column7180_9363b8-a3 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column7180_9363b8-a3 inner-column-1\"><div class=\"kt-inside-inner-col\">\n<h4 class=\"wp-block-heading\">Linked Controls<\/h4>\n\n\n\n<p>Linked controls sets the padding for each side of the block to be equal.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/Linked-Controls-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/Linked-Controls-min.jpeg\" alt=\"\" class=\"wp-image-273\" \/><\/a><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column7180_a75c77-fe > .kt-inside-inner-col,.kadence-column7180_a75c77-fe > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column7180_a75c77-fe > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column7180_a75c77-fe > .kt-inside-inner-col{flex-direction:column;}.kadence-column7180_a75c77-fe > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column7180_a75c77-fe > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column7180_a75c77-fe{position:relative;}@media all and (max-width: 1024px){.kadence-column7180_a75c77-fe > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column7180_a75c77-fe > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column7180_a75c77-fe inner-column-2\"><div class=\"kt-inside-inner-col\">\n<h4 class=\"wp-block-heading\">Individual Controls<\/h4>\n\n\n\n<p>Individual controls allow you to set padding for each side of the block separately.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/Individual-Contros-min.jpeg\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/01\/Individual-Contros-min.jpeg\" alt=\"\" class=\"wp-image-274\" \/><\/a><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To get started setting up the image overlay on your site, follow the below tutorial. The Image Overlay block is only available with Kadence Blocks Pro. Select the Image Overlay Block from the blocks list: Select your background image: Set the link and hover effect for your overlay block: Set your image overlay titles: Adjust&#8230;<\/p>\n","protected":false},"author":143301,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[417],"doc_tag":[],"knowledge_base":[7],"class_list":["post-7180","docs","type-docs","status-publish","hentry","doc_category-block-tutorials","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":113,"total_views":"5345","reactions":{"happy":"1","normal":"0","sad":"0"},"author_info":{"display_name":"gilberthernandez","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/gilberthernandez\/"},"doc_category_info":[{"term_name":"Block Tutorials","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/block-tutorials\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Blocks","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/","term_slug":"kadence-blocks"}],"knowledge_base_slug":["kadence-blocks"],"taxonomy_info":{"doc_category":[{"value":417,"label":"Block Tutorials"}],"knowledge_base":[{"value":7,"label":"Kadence Blocks"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/7180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/143301"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=7180"}],"version-history":[{"count":3,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/7180\/revisions"}],"predecessor-version":[{"id":7386,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/7180\/revisions\/7386"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=7180"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=7180"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=7180"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=7180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}