Home
Knowledge Base
Divi Areas Pro
Usage
How to create a custom Close Button?

How to create a custom Close Button?

Custom close buttons are available in Divi Areas Pro and also in Popups for Divi.

How it works

Place a button module anywhere inside the Popup or Area.
Set the button link to #.
Add the CSS class close to the button module.

Video

YouTube

Was this article helpful?

.wp-block-audio figcaption{color:#555;font-size:13px;text-align:center;}.is-dark-theme .wp-block-audio figcaption{color:hsla(0,0%,100%,.65);}.wp-block-audio{margin:0 0 1em;}.wp-block-code{border:1px solid #ccc;border-radius:4px;font-family:Menlo,Consolas,monaco,monospace;padding:.8em 1em;}.wp-block-embed figcaption{color:#555;font-size:13px;text-align:center;}.is-dark-theme .wp-block-embed figcaption{color:hsla(0,0%,100%,.65);}.blocks-gallery-caption{color:#555;font-size:13px;text-align:center;}.is-dark-theme .blocks-gallery-caption{color:hsla(0,0%,100%,.65);}.wp-block-image figcaption{color:#555;font-size:13px;text-align:center;}.is-dark-theme .wp-block-image figcaption{color:hsla(0,0%,100%,.65);}.wp-block-image{margin:0 0 1em;}.wp-block-pullquote{border-bottom:4px solid;border-top:4px solid;color:currentColor;margin-bottom:1.75em;}.wp-block-pullquote cite,.wp-block-pullquote footer,.wp-block-pullquote__citation{color:currentColor;font-size:.8125em;font-style:normal;text-transform:uppercase;}.wp-block-quote{border-left:.25em solid;margin:0 0 1.75em;padding-left:1em;}.wp-block-quote cite,.wp-block-quote footer{color:currentColor;font-size:.8125em;font-style:normal;position:relative;}.wp-block-quote.has-text-align-right{border-left:none;border-right:.25em solid;padding-left:0;padding-right:1em;}.wp-block-quote.has-text-align-center{border:none;padding-left:0;}.wp-block-quote.is-large,.wp-block-quote.is-style-large,.wp-block-quote.is-style-plain{border:none;}.wp-block-search .wp-block-search__label{font-weight:700;}.wp-block-search__button{border:1px solid #ccc;padding:.375em .625em;}.wp-block-separator.has-css-opacity{opacity:.4;}.wp-block-separator{border:none;border-bottom:2px solid;margin-left:auto;margin-right:auto;}.wp-block-separator.has-alpha-channel-opacity{opacity:1;}.wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px;}.wp-block-separator.has-background:not(.is-style-dots){border-bottom:none;height:1px;}.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots){height:2px;}.wp-block-table{margin:0 0 1em;}.wp-block-table td,.wp-block-table th{word-break:normal;}.wp-block-table figcaption{color:#555;font-size:13px;text-align:center;}.is-dark-theme .wp-block-table figcaption{color:hsla(0,0%,100%,.65);}.wp-block-video figcaption{color:#555;font-size:13px;text-align:center;}.is-dark-theme .wp-block-video figcaption{color:hsla(0,0%,100%,.65);}.wp-block-video{margin:0 0 1em;}.wp-block-template-part.has-background{margin-bottom:0;margin-top:0;padding:1.25em 2.375em;}.wp-site-blocks > .alignleft{float:left;margin-right:2em;}.wp-site-blocks > .alignright{float:right;margin-left:2em;}.wp-site-blocks > .aligncenter{justify-content:center;margin-left:auto;margin-right:auto;}body .is-layout-flow > .alignleft{float:left;margin-inline-start:0;margin-inline-end:2em;}body .is-layout-flow > .alignright{float:right;margin-inline-start:2em;margin-inline-end:0;}body .is-layout-flow > .aligncenter{margin-left:auto !important;margin-right:auto !important;}body .is-layout-constrained > .alignleft{float:left;margin-inline-start:0;margin-inline-end:2em;}body .is-layout-constrained > .alignright{float:right;margin-inline-start:2em;margin-inline-end:0;}body .is-layout-constrained > .aligncenter{margin-left:auto !important;margin-right:auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:var(--wp--style--global--content-size);margin-left:auto !important;margin-right:auto !important;}body .is-layout-constrained > .alignwide{max-width:var(--wp--style--global--wide-size);}body .is-layout-flex{display:flex;}body .is-layout-flex{flex-wrap:wrap;align-items:center;}body .is-layout-flex > *{margin:0;}body .is-layout-grid{display:grid;}body .is-layout-grid > *{margin:0;}.wp-element-button,.wp-block-button__link{background-color:#32373c;border-width:0;color:#fff;font-family:inherit;font-size:inherit;line-height:inherit;padding:calc(.667em + 2px) calc(1.333em + 2px);text-decoration:none;}.has-black-color{color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color:var(--wp--preset--color--white) !important;}.has-pale-pink-color{color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color:var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color:var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color:var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color:var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color:var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background:var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background:var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background:var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background:var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background:var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background:var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background:var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size:var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size:var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size:var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large) !important;}.wp-block-navigation a:where(:not(.wp-element-button)){color:inherit;}.wp-block-pullquote{font-size:1.5em;line-height:1.6;}.et_pb_section.popup{display:none;}.only-sale{display:none !important;}.et_pb_column_1_2 .et_quote_content blockquote cite,.et_pb_column_1_2 .et_link_content a.et_link_main_url,.et_pb_column_1_3 .et_quote_content blockquote cite,.et_pb_column_3_8 .et_quote_content blockquote cite,.et_pb_column_1_4 .et_quote_content blockquote cite,.et_pb_blog_grid .et_quote_content blockquote cite,.et_pb_column_1_3 .et_link_content a.et_link_main_url,.et_pb_column_3_8 .et_link_content a.et_link_main_url,.et_pb_column_1_4 .et_link_content a.et_link_main_url,.et_pb_blog_grid .et_link_content a.et_link_main_url,body .et_pb_bg_layout_light .et_pb_post p,body .et_pb_bg_layout_dark .et_pb_post p{font-size:18px;}.et_pb_slide_content,.et_pb_best_value{font-size:20px;}#et_search_icon:hover,.et_toggle_slide_menu:after,.et-social-icon a:hover,.et_pb_sum,.et_pb_pricing li a,.et_pb_pricing_table_button,.et_overlay:before,.entry-summary p.price ins,.et_pb_member_social_links a:hover,.et_pb_widget li a:hover,.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active,.et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.active,.et_pb_gallery .et_pb_gallery_pagination ul li a.active,.wp-pagenavi span.current,.wp-pagenavi a:hover,.nav-single a,.tagged_as a,.posted_in a{color:#2b87da;}.et_pb_contact_submit,.et_password_protected_form .et_submit_button,.et_pb_bg_layout_light .et_pb_newsletter_button,.comment-reply-link,.form-submit .et_pb_button,.et_pb_bg_layout_light .et_pb_promo_button,.et_pb_bg_layout_light .et_pb_more_button,.et_pb_contact p input[type="checkbox"]:checked+label i:before,.et_pb_bg_layout_light.et_pb_module.et_pb_button{color:#2b87da;}.footer-widget h4{color:#2b87da;}.et-search-form,.et_mobile_menu,.footer-widget li:before,.et_pb_pricing li:before,blockquote{border-color:#2b87da;}.et_pb_counter_amount,.et_pb_featured_table .et_pb_pricing_heading,.et_quote_content,.et_link_content,.et_audio_content,.et_pb_post_slider.et_pb_bg_layout_dark,.et_slide_in_menu_container,.et_pb_contact p input[type="radio"]:checked+label i:before{background-color:#2b87da;}.et_pb_slider .et_pb_container,.et_pb_fullwidth_section .et_pb_title_container,.et_pb_fullwidth_section .et_pb_title_featured_container,.et_pb_fullwidth_header:not(.et_pb_fullscreen) .et_pb_fullwidth_header_container{max-width:1200px;}.et_boxed_layout #page-container,.et_boxed_layout.et_non_fixed_nav.et_transparent_nav #page-container #top-header,.et_boxed_layout.et_non_fixed_nav.et_transparent_nav #page-container #main-header,.et_fixed_nav.et_boxed_layout #page-container #top-header,.et_fixed_nav.et_boxed_layout #page-container #main-header,.et_boxed_layout #page-container .container,.et_boxed_layout #page-container .et_pb_row{max-width:1360px;}.et_secondary_nav_enabled #page-container #top-header{background-color:#00b0ff !important;}#et-secondary-nav li ul{background-color:#00b0ff;}#top-menu li.current-menu-ancestor>a,#top-menu li.current-menu-item>a,#top-menu li.current_page_item>a{}#main-footer .footer-widget h4,#main-footer .widget_block h1,#main-footer .widget_block h2,#main-footer .widget_block h3,#main-footer .widget_block h4,#main-footer .widget_block h5,#main-footer .widget_block h6{color:#00b0ff;}.footer-widget li:before{border-color:#00b0ff;}.footer-widget,.footer-widget li,.footer-widget li a,#footer-info{font-size:14px;}.footer-widget .et_pb_widget div,.footer-widget .et_pb_widget ul,.footer-widget .et_pb_widget ol,.footer-widget .et_pb_widget label{line-height:1.7em;}#et-footer-nav .bottom-nav li.current-menu-item a{color:#00b0ff;}body .et_pb_button{font-size:18px;background-color:rgba(38,53,71,.9);border-width:0px !important;border-radius:10px;}body.et_pb_button_helper_class .et_pb_button,body.et_pb_button_helper_class .et_pb_module.et_pb_button{color:#f8f8f8;}body .et_pb_button:after{content:"$";font-size:18px;color:rgba(255,255,255,.75);}body .et_pb_bg_layout_light.et_pb_button:hover,body .et_pb_bg_layout_light .et_pb_button:hover,body .et_pb_button:hover{color:#fffffe !important;background-color:#263547;border-radius:10px;}h4,h5,h6,.et_quote_content blockquote p,.et_pb_slide_description .et_pb_slide_title{letter-spacing:-1px;}@media only screen and (min-width:981px){#main-footer .footer-widget h4,#main-footer .widget_block h1,#main-footer .widget_block h2,#main-footer .widget_block h3,#main-footer .widget_block h4,#main-footer .widget_block h5,#main-footer .widget_block h6{font-size:26px;}.et_header_style_split #et-top-navigation{padding:29px 0 0 0;}.et_header_style_split #et-top-navigation nav>ul>li>a{padding-bottom:29px;}.et_header_style_split .centered-inline-logo-wrap{width:58px;margin:-58px 0;}.et_header_style_split .centered-inline-logo-wrap #logo{max-height:58px;}.et_pb_svg_logo.et_header_style_split .centered-inline-logo-wrap #logo{height:58px;}.et_header_style_centered #top-menu>li>a{padding-bottom:10px;}.et_header_style_slide #et-top-navigation,.et_header_style_fullscreen #et-top-navigation{padding:20px 0 20px 0 !important;}.et_header_style_centered #main-header .logo_container{height:58px;}.et_header_style_centered.et_hide_primary_logo #main-header:not(.et-fixed-header) .logo_container,.et_header_style_centered.et_hide_fixed_logo #main-header.et-fixed-header .logo_container{height:10.44px;}.et_header_style_left .et-fixed-header #et-top-navigation,.et_header_style_split .et-fixed-header #et-top-navigation{padding:30px 0 0 0;}.et_header_style_left .et-fixed-header #et-top-navigation nav>ul>li>a,.et_header_style_split .et-fixed-header #et-top-navigation nav>ul>li>a{padding-bottom:30px;}.et_header_style_centered header#main-header.et-fixed-header .logo_container{height:60px;}.et_header_style_split #main-header.et-fixed-header .centered-inline-logo-wrap{width:60px;margin:-60px 0;}.et_header_style_split .et-fixed-header .centered-inline-logo-wrap #logo{max-height:60px;}.et_pb_svg_logo.et_header_style_split .et-fixed-header .centered-inline-logo-wrap #logo{height:60px;}.et_header_style_slide .et-fixed-header #et-top-navigation,.et_header_style_fullscreen .et-fixed-header #et-top-navigation{padding:21px 0 21px 0 !important;}.et-fixed-header #top-menu li.current-menu-ancestor>a,.et-fixed-header #top-menu li.current-menu-item>a,.et-fixed-header #top-menu li.current_page_item>a{}}@media only screen and (min-width:1500px){.single.et_pb_pagebuilder_layout.et_full_width_page .et_post_meta_wrapper{padding-top:90px;}.et_pb_fullwidth_section{padding:0;}}h1.et_pb_contact_main_title,.et_pb_title_container h1{font-size:48px;}.product .related h2,.et_pb_column_1_2 .et_quote_content blockquote p{font-size:41px;}h4,.et_pb_circle_counter h3,.et_pb_number_counter h3,.et_pb_column_1_3 .et_pb_post h2,.et_pb_column_1_4 .et_pb_post h2,.et_pb_blog_grid h2,.et_pb_column_1_3 .et_quote_content blockquote p,.et_pb_column_3_8 .et_quote_content blockquote p,.et_pb_column_1_4 .et_quote_content blockquote p,.et_pb_blog_grid .et_quote_content blockquote p,.et_pb_column_1_3 .et_link_content h2,.et_pb_column_3_8 .et_link_content h2,.et_pb_column_1_4 .et_link_content h2,.et_pb_blog_grid .et_link_content h2,.et_pb_column_1_3 .et_audio_content h2,.et_pb_column_3_8 .et_audio_content h2,.et_pb_column_1_4 .et_audio_content h2,.et_pb_blog_grid .et_audio_content h2,.et_pb_column_3_8 .et_pb_audio_module_content h2,.et_pb_column_1_3 .et_pb_audio_module_content h2,.et_pb_gallery_grid .et_pb_gallery_item h3,.et_pb_portfolio_grid .et_pb_portfolio_item h2,.et_pb_filterable_portfolio_grid .et_pb_portfolio_item h2{font-size:28px;}h5{font-size:25px;}h6{font-size:22px;}.et_pb_slide_description .et_pb_slide_title{font-size:73px;}.et_pb_gallery_grid .et_pb_gallery_item h3,.et_pb_portfolio_grid .et_pb_portfolio_item h2,.et_pb_filterable_portfolio_grid .et_pb_portfolio_item h2,.et_pb_column_1_4 .et_pb_audio_module_content h2{font-size:25px;}h4,h5,h6{font-family:"Raleway",Helvetica,Arial,Lucida,sans-serif;}textarea,select{font-family:"AcherusGrotesque",Helvetica,Arial,Lucida,sans-serif;}.edd-js-none .edd-has-js,.edd-js .edd-no-js,body.edd-js input.edd-no-js{display:none;}div.et_pb_section.et_pb_section_0_tb_footer{background-image:linear-gradient(180deg,#2a006d 0%,#1b1b1b 100%) !important;}.et_pb_section_0_tb_footer.et_pb_section{padding-top:120px;margin-top:120px;background-color:#1b1b1b !important;}.et_pb_section_0_tb_footer.section_has_divider.et_pb_top_divider .et_pb_top_inside_divider{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI1MHB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTk3OC44MSAxMjIuMjVMMCAwaDEyODBsLTI2Mi4xIDExNi4yNmE3My4yOSA3My4yOSAwIDAgMS0zOS4wOSA1Ljk5eiIvPjwvZz48L3N2Zz4=");background-size:100% 50px;top:0;height:50px;z-index:1;transform:scale(-1,1);background-color:transparent;}.et_pb_section_0_tb_footer.section_has_divider.et_pb_top_divider .et_pb_top_inside_divider.nitro-lazy{background-image:none !important;}.et_pb_section_1_tb_footer.et_pb_section{padding-top:0px;background-color:#1b1b1b !important;}.et_pb_text_3_tb_footer.et_pb_text{color:rgba(248,248,248,.5) !important;}.et_pb_social_media_follow_network_0_tb_footer a.icon{background-color:#3b5998 !important;}.et_pb_social_media_follow_network_1_tb_footer a.icon{background-color:#007bb6 !important;}.et_pb_social_media_follow_network_2_tb_footer a.icon{background-color:#00aced !important;}.et_pb_social_media_follow_network_3_tb_footer a.icon{background-color:#ea2c59 !important;}.et_pb_social_media_follow_network_4_tb_footer a.icon{background-color:#333 !important;}.et-db #et-boc .et-l .et_pb_section_dap_98569_0.et_pb_section{padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;}.et-db #et-boc .et-l .et_pb_row_dap_98569_1.et_pb_row{padding-top:25px !important;padding-top:25px;padding-right:25px !important;padding-right:25px;padding-bottom:25px !important;padding-bottom:25px;padding-left:25px !important;padding-left:25px;}.et-db #et-boc .et-l .et_pb_row_dap_98569_1,body.et-db #page-container .et-db #et-boc .et-l #et-boc .et-l .et_pb_row_dap_98569_1.et_pb_row,body.et_pb_pagebuilder_layout.single.et-db #page-container #et-boc .et-l #et-boc .et-l .et_pb_row_dap_98569_1.et_pb_row,body.et_pb_pagebuilder_layout.single.et_full_width_page.et-db #page-container #et-boc .et-l .et_pb_row_dap_98569_1.et_pb_row{width:100%;max-width:none;}.et-db #et-boc .et-l .et_pb_text_dap_98569_3 h2{font-size:28px;text-align:center;}.et-db #et-boc .et-l .area-outer-wrap[data-da-area='divi-area-98569']{max-width:480px;}.et-db #et-boc .et-l .area-outer-wrap[data-da-area='divi-area-98569'] .et_pb_section{width:100%;max-width:none;}