[et_pb_section fb_built=”1″ custom_padding_last_edited=”on|phone” disabled_on=”off|off|off” admin_label=”Section – Header” _builder_version=”4.16″ background_color=”rgba(255,255,255,0)” custom_padding=”0px|0px|0px|0px” custom_padding_tablet=”” custom_padding_phone=”” transparent_background=”on” locked=”off” collapsed=”off” global_colors_info=”{}”][et_pb_row padding_mobile=”on” column_padding_mobile=”on” custom_padding_last_edited=”on|phone” module_class=” et_pb_row_fullwidth” _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”89%” width_tablet=”80%” width_phone=”” width_last_edited=”on|desktop” max_width=”89%” max_width_tablet=”80%” max_width_phone=”” max_width_last_edited=”on|desktop” custom_margin=”0px||0px|” custom_padding=”0px|0px|0px|0px” custom_padding_tablet=”” custom_padding_phone=”” make_fullwidth=”on” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_post_title categories=”off” featured_placement=”background” text_color=”light” text_background=”on” text_bg_color=”rgba(247,99,99,0.9)” admin_label=”How To Create A Fullscreen Menu Using Divi MadMenu Header Popup” _builder_version=”4.16″ title_font=”Source Sans Pro||||||||” title_font_size=”80px” title_line_height=”1.3em” meta_font=”||||||||” meta_font_size=”18″ meta_line_height=”1.3em” text_orientation=”center” title_font_size_tablet=”60px” title_font_size_phone=”40px” title_font_size_last_edited=”on|desktop” title_line_height_tablet=”” title_line_height_phone=”” title_line_height_last_edited=”on|phone” meta_line_height_tablet=”” meta_line_height_phone=”” meta_line_height_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_post_title][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Section – Content” _builder_version=”4.16″ custom_margin=”||” custom_margin_tablet=”||” custom_margin_phone=”” custom_margin_last_edited=”on|desktop” custom_padding=”||0px||false|false” locked=”off” collapsed=”off” global_colors_info=”{}”][et_pb_row _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text ul_position=”inside” admin_label=”Text – Introduction” _builder_version=”4.16″ text_font=”Source Sans Pro||||” text_text_color=”#515b69″ text_font_size=”30″ text_line_height=”1.3em” ul_font_size=”26px” ul_line_height=”1.3em” header_font_size=”35px” header_line_height=”1.3em” header_2_font_size=”34px” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|phone” custom_padding=”||0px|” custom_padding_tablet=”” custom_padding_phone=”” custom_padding_last_edited=”on|phone” text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_line_height_tablet=”” text_line_height_phone=”” text_line_height_last_edited=”on|desktop” ul_font_size_tablet=”24px” ul_font_size_phone=”20px” ul_font_size_last_edited=”on|tablet” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height_tablet=”” header_line_height_phone=”” header_line_height_last_edited=”on|phone” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” global_colors_info=”{}”]<\/p>\n
Let’s see how you can create a Fullscreen<\/em> menu using Divi MadMenu header popups<\/em> feature.<\/p>\n Creating a Fullscreen menu is similar to creating a Slide-In menu that we’ve covered in the previous tutorial<\/a>.<\/p>\n The difference is that you need to make the popup cover the entire screen instead of setting it a fixed width.<\/p>\n We also look into how you can create a popup Close Button<\/em> using a Divi MadMenu Button element rather than the available Popup Close Button<\/em> setting.<\/p>\n Using a Button element to create the Close Button allows you to design it any way you want since the Button element is very flexible.<\/p>\n Whereas the Popup Close Button<\/em> setting adds a very basic close<\/em> icon to the popup.<\/p>\n Watch this tutorial to see how it’s done:<\/p>\n [\/et_pb_text][et_pb_video src=”https:\/\/youtu.be\/3U8RDtQ2LEM” play_icon_color=”#ffcc00″ admin_label=”Video – How To Create Slide-In Menus …” _builder_version=”4.16″ border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset1″ box_shadow_blur=”50px” box_shadow_color=”rgba(0,0,0,0.1)” locked=”off” global_colors_info=”{}”][\/et_pb_video][et_pb_button button_url=”https:\/\/divicio.us\/demos\/demo\/divi-madmenu-demo-12\/” url_new_window=”on” button_text=”Live Demo” button_alignment=”center” admin_label=”Button – Live Demo” _builder_version=”4.16″ custom_button=”on” button_text_size=”26″ button_text_color=”#ffffff” button_bg_color=”#ffcc00″ button_border_width=”0″ button_border_radius=”5″ button_font=”|||on|||||” button_use_icon=”off” background_layout=”dark” animation_style=”fade” animation_duration=”400ms” button_text_size_tablet=”24″ button_text_size_phone=”22″ button_text_size_last_edited=”on|phone” box_shadow_style=”preset1″ box_shadow_blur=”32px” box_shadow_color=”rgba(255,204,0,0.46)” locked=”off” global_colors_info=”{}” button_text_size__hover_enabled=”off” button_text_size__hover=”null” button_one_text_size__hover_enabled=”off” button_one_text_size__hover=”null” button_two_text_size__hover_enabled=”off” button_two_text_size__hover=”null” button_text_color__hover_enabled=”on” button_text_color__hover=”#ffffff” button_one_text_color__hover_enabled=”off” button_one_text_color__hover=”null” button_two_text_color__hover_enabled=”off” button_two_text_color__hover=”null” button_border_width__hover_enabled=”off” button_border_width__hover=”null” button_one_border_width__hover_enabled=”off” button_one_border_width__hover=”null” button_two_border_width__hover_enabled=”off” button_two_border_width__hover=”null” button_border_color__hover_enabled=”off” button_border_color__hover=”null” button_one_border_color__hover_enabled=”off” button_one_border_color__hover=”null” button_two_border_color__hover_enabled=”off” button_two_border_color__hover=”null” button_border_radius__hover_enabled=”on” button_border_radius__hover=”5″ button_one_border_radius__hover_enabled=”off” button_one_border_radius__hover=”null” button_two_border_radius__hover_enabled=”off” button_two_border_radius__hover=”null” button_letter_spacing__hover_enabled=”on” button_letter_spacing__hover=”1″ button_one_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover=”null” button_two_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover=”null” button_bg_color__hover_enabled=”on” button_bg_color__hover=”#ffcc00″ button_one_bg_color__hover_enabled=”off” button_one_bg_color__hover=”null” button_two_bg_color__hover_enabled=”off” button_two_bg_color__hover=”null”][\/et_pb_button][et_pb_text disabled_on=”on|on|on” admin_label=”H2 – Horizontal Slide-In menu” _builder_version=”4.16″ text_font=”Source Sans Pro||||” text_text_color=”#515b69″ text_font_size=”30″ text_line_height=”1.3em” header_font_size=”35px” header_line_height=”1.3em” header_2_font_size=”34px” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|phone” custom_padding=”25px||0px|” custom_padding_tablet=”20px||0px|” custom_padding_phone=”” custom_padding_last_edited=”on|desktop” text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_line_height_tablet=”” text_line_height_phone=”” text_line_height_last_edited=”on|desktop” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height_tablet=”” header_line_height_phone=”” header_line_height_last_edited=”on|phone” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop” custom_css_main_element=”font-weight: 300 !important;” disabled=”on” saved_tabs=”advanced,css” locked=”off” global_colors_info=”{}”]<\/p>\n [\/et_pb_text][et_pb_text ul_position=”inside” admin_label=”Text – Hope this tutorial is helpful…” _builder_version=”4.16″ text_font=”Source Sans Pro||||” text_text_color=”#515b69″ text_font_size=”30″ text_line_height=”1.3em” ul_font_size=”26px” ul_line_height=”1.3em” header_font_size=”35px” header_line_height=”1.3em” header_2_font_size=”34px” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|phone” custom_padding=”||0px|” custom_padding_tablet=”” custom_padding_phone=”” custom_padding_last_edited=”on|phone” text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_line_height_tablet=”” text_line_height_phone=”” text_line_height_last_edited=”on|desktop” ul_font_size_tablet=”24px” ul_font_size_phone=”20px” ul_font_size_last_edited=”on|tablet” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height_tablet=”” header_line_height_phone=”” header_line_height_last_edited=”on|phone” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” global_colors_info=”{}”]<\/p>\n So far we have covered how to create simple header popups<\/a>, Slide-In<\/em><\/a> and Fullscreen<\/em> menus.<\/p>\n But that’s not all. We can also display different popups to logged in<\/em> and logged out<\/em> users clicking the same popup toggle button. And we will learn how to do that next.<\/p>\n Hope this tutorial is helpful, let me know if you have any questions or suggestions in the comments section below.<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ custom_padding_last_edited=”on|desktop” disabled_on=”off|off|off” admin_label=”Section – Join Now” _builder_version=”4.16″ custom_padding=”0px|0|0px|0px|true|false” custom_padding_tablet=”” custom_padding_phone=”0px||0px||true” locked=”off” collapsed=”on” global_colors_info=”{}”][et_pb_row _builder_version=”4.16″ global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text admin_label=”Text – View Live Demos & Get Divi MadMenu” _builder_version=”4.16″ header_2_font=”|600|||||||” header_2_text_align=”center” header_2_text_color=”#000991″ header_2_font_size=”40px” header_2_font_size_tablet=”” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n [\/et_pb_text][et_pb_button button_url=”https:\/\/divicio.us\/divi-madmenu\/” button_text=”Live Demos” button_alignment=”center” admin_label=”Button – Live Demos” _builder_version=”4.16″ custom_button=”on” button_text_size=”22px” button_bg_color=”#000991″ button_border_width=”0px” button_border_radius=”5px” button_font=”|||on|||||” button_use_icon=”off” background_layout=”dark” custom_margin=”15px|||” button_text_size_tablet=”” button_text_size_phone=”18px” button_text_size_last_edited=”on|desktop” box_shadow_style=”preset1″ box_shadow_blur=”32px” box_shadow_color=”rgba(18,11,117,0.25)” button_border_radius_hover=”5px” button_letter_spacing_hover=”1px” button_bg_color_hover=”#ffbf00″ locked=”off” global_colors_info=”{}” button_text_size__hover_enabled=”off” button_text_size__hover=”null” button_one_text_size__hover_enabled=”off” button_one_text_size__hover=”null” button_two_text_size__hover_enabled=”off” button_two_text_size__hover=”null” button_text_color__hover_enabled=”off” button_text_color__hover=”null” button_one_text_color__hover_enabled=”off” button_one_text_color__hover=”null” button_two_text_color__hover_enabled=”off” button_two_text_color__hover=”null” button_border_width__hover_enabled=”off” button_border_width__hover=”null” button_one_border_width__hover_enabled=”off” button_one_border_width__hover=”null” button_two_border_width__hover_enabled=”off” button_two_border_width__hover=”null” button_border_color__hover_enabled=”off” button_border_color__hover=”null” button_one_border_color__hover_enabled=”off” button_one_border_color__hover=”null” button_two_border_color__hover_enabled=”off” button_two_border_color__hover=”null” button_border_radius__hover_enabled=”on” button_border_radius__hover=”5px” button_one_border_radius__hover_enabled=”off” button_one_border_radius__hover=”null” button_two_border_radius__hover_enabled=”off” button_two_border_radius__hover=”null” button_letter_spacing__hover_enabled=”on” button_letter_spacing__hover=”1px” button_one_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover=”null” button_two_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover=”null” button_bg_color__hover_enabled=”on” button_bg_color__hover=”#ffbf00″ button_one_bg_color__hover_enabled=”off” button_one_bg_color__hover=”null” button_two_bg_color__hover_enabled=”off” button_two_bg_color__hover=”null”][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ custom_padding_last_edited=”on|desktop” disabled_on=”off|off|off” admin_label=”Section – Download FREE Divi Sections” _builder_version=”4.16″ custom_padding=”0px|0|0px|0px|true|false” custom_padding_tablet=”” custom_padding_phone=”0px||0px||true” locked=”off” collapsed=”on” global_colors_info=”{}”][et_pb_row _builder_version=”4.16″ global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_divider color=”#120b75″ divider_position=”center” divider_weight=”2px” _builder_version=”4.16″ max_width=”40%” max_width_tablet=”50%” max_width_last_edited=”off|desktop” module_alignment=”center” custom_margin=”20px||70px||false” custom_margin_tablet=”0px||50px|” custom_margin_last_edited=”off|desktop” global_colors_info=”{}”][\/et_pb_divider][et_pb_text admin_label=”Text – Download FREE Divi Sections” _builder_version=”4.16″ header_2_font=”|600|||||||” header_2_text_align=”center” header_2_text_color=”#000991″ header_2_font_size=”40px” header_2_font_size_tablet=”” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n [\/et_pb_text][et_pb_button button_url=”https:\/\/divicio.us\/free-divi-resources\/” button_text=”View Divi Freebies” button_alignment=”center” admin_label=”Button – VIEW DIVI FREEBIES” _builder_version=”4.16″ custom_button=”on” button_text_size=”22px” button_bg_color=”#000991″ button_border_width=”0px” button_border_radius=”5px” button_font=”|||on|||||” button_use_icon=”off” background_layout=”dark” custom_margin=”15px|||” button_text_size_tablet=”” button_text_size_phone=”18px” button_text_size_last_edited=”on|desktop” box_shadow_style=”preset1″ box_shadow_blur=”32px” box_shadow_color=”rgba(18,11,117,0.25)” button_border_radius_hover=”5px” button_letter_spacing_hover=”1px” button_bg_color_hover=”#ffbf00″ locked=”off” global_colors_info=”{}” button_text_size__hover_enabled=”off” button_text_size__hover=”null” button_one_text_size__hover_enabled=”off” button_one_text_size__hover=”null” button_two_text_size__hover_enabled=”off” button_two_text_size__hover=”null” button_text_color__hover_enabled=”off” button_text_color__hover=”null” button_one_text_color__hover_enabled=”off” button_one_text_color__hover=”null” button_two_text_color__hover_enabled=”off” button_two_text_color__hover=”null” button_border_width__hover_enabled=”off” button_border_width__hover=”null” button_one_border_width__hover_enabled=”off” button_one_border_width__hover=”null” button_two_border_width__hover_enabled=”off” button_two_border_width__hover=”null” button_border_color__hover_enabled=”off” button_border_color__hover=”null” button_one_border_color__hover_enabled=”off” button_one_border_color__hover=”null” button_two_border_color__hover_enabled=”off” button_two_border_color__hover=”null” button_border_radius__hover_enabled=”on” button_border_radius__hover=”5px” button_one_border_radius__hover_enabled=”off” button_one_border_radius__hover=”null” button_two_border_radius__hover_enabled=”off” button_two_border_radius__hover=”null” button_letter_spacing__hover_enabled=”on” button_letter_spacing__hover=”1px” button_one_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover=”null” button_two_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover=”null” button_bg_color__hover_enabled=”on” button_bg_color__hover=”#ffbf00″ button_one_bg_color__hover_enabled=”off” button_one_bg_color__hover=”null” button_two_bg_color__hover_enabled=”off” button_two_bg_color__hover=”null”][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Section – Opt-In Form” module_id=”subscribe” _builder_version=”4.16″ custom_padding=”0px||||false|false” locked=”off” collapsed=”on” global_colors_info=”{}”][et_pb_row _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text admin_label=”Text – OPT-IN FORM” module_id=”OptinForm” _builder_version=”4.16″ text_font=”Source Sans Pro||||” text_text_color=”#515b69″ text_font_size=”30″ text_line_height=”1.3em” header_font_size=”35px” header_line_height=”1.3em” header_2_font_size=”34px” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|phone” custom_padding=”||0px|” custom_padding_tablet=”” custom_padding_phone=”” custom_padding_last_edited=”on|phone” text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_line_height_tablet=”” text_line_height_phone=”” text_line_height_last_edited=”on|desktop” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height_tablet=”” header_line_height_phone=”” header_line_height_last_edited=”on|phone” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” global_colors_info=”{}”]<\/p>\nHorizontal Slide-In menu<\/h2>\n
View Live Demos & Get Divi MadMenu<\/h2>\n
Download FREE Divi Sections<\/h2>\n