{"id":7361,"date":"2023-11-24T16:11:39","date_gmt":"2023-11-24T16:11:39","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=7361"},"modified":"2026-04-22T16:49:54","modified_gmt":"2026-04-22T16:49:54","password":"","slug":"modal-block-2","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/modal-block-2\/","title":{"rendered":"Modal Block Quick Start Guide"},"content":{"rendered":"\n<p>A Modal allows for a fully editable popup to be added to any page. Place any content you wish within the block for any layout you like. The <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/modal-block\/\" data-type=\"docs\" data-id=\"5399\">Kadence Modal Block<\/a> is only available with <a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/pro\/\">Kadence Blocks Pro<\/a>.<\/p>\n\n\n\n<p>First, select the modal block and add it to your content:<\/p>\n\n\n<style>.kb-image7361_2c64e4-39 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image7361_2c64e4-39 size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/04\/SelectModal-1024x630.jpeg\" alt=\"Select Modal Block\" class=\"kb-img wp-image-1169\" \/><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-7361_e39572-bf .kt-block-spacer{height:50px;}.wp-block-kadence-spacer.kt-block-spacer-7361_e39572-bf .kt-divider{border-top-width:2px;border-top-color:#eee;width:100%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer alignfull kt-block-spacer-7361_e39572-bf\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\" \/><\/div><\/div>\n\n\n\n<p>Customize your modal link text:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/02\/02-Button-Text-min.gif\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/02\/02-Button-Text-min.gif\" alt=\"Modal Link Text\" class=\"wp-image-983\" \/><\/a><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-7361_024a97-dd .kt-block-spacer{height:50px;}.wp-block-kadence-spacer.kt-block-spacer-7361_024a97-dd .kt-divider{border-top-width:2px;border-top-color:#eee;width:100%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer alignfull kt-block-spacer-7361_024a97-dd\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\" \/><\/div><\/div>\n\n\n\n<p>Customize the content within your modal block:<\/p>\n\n\n<style>.kb-image7361_05d8c7-14 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image7361_05d8c7-14 size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/02\/03-Add-Content-min-1-1024x546.jpeg\" alt=\"Modal Content\" class=\"kb-img wp-image-993\" \/><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-7361_b5cb29-7a .kt-block-spacer{height:50px;}.wp-block-kadence-spacer.kt-block-spacer-7361_b5cb29-7a .kt-divider{border-top-width:2px;border-top-color:#eee;width:100%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-7361_b5cb29-7a alignnone\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\" \/><\/div><\/div>\n\n\n\n<p>Edit the appearance of your modal link:<\/p>\n\n\n<style>.kb-image7361_3e2ec6-c5 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image7361_3e2ec6-c5\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/02\/04-Configure-Link-Settings-min-1.gif\" alt=\"Modal Link Styling\" class=\"kb-img wp-image-994\" \/><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-7361_05e177-65 .kt-block-spacer{height:50px;}.wp-block-kadence-spacer.kt-block-spacer-7361_05e177-65 .kt-divider{border-top-width:2px;border-top-color:#eee;width:100%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-7361_05e177-65\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\" \/><\/div><\/div>\n\n\n\n<p>Customize the modal overlay:<\/p>\n\n\n<style>.kb-image7361_f881e7-0f .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image7361_f881e7-0f\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/02\/05-Overlay-color-min-1.gif\" alt=\"Customize Modal Overlay\" class=\"kb-img wp-image-995\" \/><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-7361_b2ade2-b3 .kt-block-spacer{height:50px;}.wp-block-kadence-spacer.kt-block-spacer-7361_b2ade2-b3 .kt-divider{border-top-width:2px;border-top-color:#eee;width:100%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-7361_b2ade2-b3 alignnone\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\" \/><\/div><\/div>\n\n\n\n<p>Configure your modal animation and position:<\/p>\n\n\n<style>.kb-image7361_30630e-ab .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image7361_30630e-ab size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/02\/06-Animation-and-Position-min-1-1024x545.jpeg\" alt=\"Modal Animation and Position\" class=\"kb-img wp-image-996\" \/><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-7361_421235-88 .kt-block-spacer{height:50px;}.wp-block-kadence-spacer.kt-block-spacer-7361_421235-88 .kt-divider{border-top-width:2px;border-top-color:#eee;width:100%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-7361_421235-88 alignnone\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\" \/><\/div><\/div>\n\n\n\n<p>Adjust the width and height of your modal block:<\/p>\n\n\n<style>.kb-image7361_47fcd5-77 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image7361_47fcd5-77\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/02\/07-Modal-Size-min-1.gif\" alt=\"Set Modal Size\" class=\"kb-img wp-image-997\" \/><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-7361_189f9c-ff .kt-block-spacer{height:50px;}.wp-block-kadence-spacer.kt-block-spacer-7361_189f9c-ff .kt-divider{border-top-width:2px;border-top-color:#eee;width:100%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-7361_189f9c-ff alignnone\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\" \/><\/div><\/div>\n\n\n\n<p>Customize the appearance of the modal &#8220;close X.&#8221;<\/p>\n\n\n<style>.kb-image7361_e33721-d0 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image7361_e33721-d0\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/02\/08-X-min-1.gif\" alt=\"Adjust the Closing X\" class=\"kb-img wp-image-998\" \/><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-7361_b9b808-ec .kt-block-spacer{height:50px;}.wp-block-kadence-spacer.kt-block-spacer-7361_b9b808-ec .kt-divider{border-top-width:2px;border-top-color:#eee;width:100%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-7361_b9b808-ec alignnone\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\" \/><\/div><\/div>\n\n\n\n<p>Configure the style of your modal box. Customize backgrounds and add borders:<\/p>\n\n\n<style>.kb-image7361_daa6d6-ce .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image7361_daa6d6-ce\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/02\/09-Modal-Style-min-1.gif\" alt=\"Style Modal Box\" class=\"kb-img wp-image-999\" \/><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-7361_2561d8-25 .kt-block-spacer{height:50px;}.wp-block-kadence-spacer.kt-block-spacer-7361_2561d8-25 .kt-divider{border-top-width:2px;border-top-color:#eee;width:100%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-7361_2561d8-25 alignnone\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\" \/><\/div><\/div>\n\n\n\n<p>Add a box shadow to give your modal added dimension:<\/p>\n\n\n<style>.kb-image7361_22ee0e-35 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image7361_22ee0e-35 size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/02\/10-Box-shadow-min-1-1024x544.jpeg\" alt=\"\" class=\"kb-img wp-image-1000\" \/><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-7361_cd3485-62 .kt-block-spacer{height:50px;}.wp-block-kadence-spacer.kt-block-spacer-7361_cd3485-62 .kt-divider{border-top-width:2px;border-top-color:#eee;width:100%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-7361_cd3485-62 alignnone\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\" \/><\/div><\/div>\n\n\n\n<p>Once you&#8217;re happy with the modal, view it on the front end to ensure it looks as intended:<\/p>\n\n\n<style>.kb-image7361_aef61c-82 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image7361_aef61c-82\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2019\/02\/11-View-Modal-min-1.gif\" alt=\"View Modal\" class=\"kb-img wp-image-1001\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>A Modal allows for a fully editable popup to be added to any page. Place any content you wish within the block for any layout you like. The Kadence Modal Block is only available with Kadence Blocks Pro. First, select the modal block and add it to your content: Customize your modal link text: Customize&#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-7361","docs","type-docs","status-publish","hentry","doc_category-block-tutorials","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":135,"total_views":"5553","reactions":{"happy":"1","normal":"0","sad":"2"},"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\/7361","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=7361"}],"version-history":[{"count":4,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/7361\/revisions"}],"predecessor-version":[{"id":15937,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/7361\/revisions\/15937"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=7361"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=7361"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=7361"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=7361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}