{"id":209090,"date":"2020-08-16T14:51:34","date_gmt":"2020-08-16T14:51:34","guid":{"rendered":"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/?page_id=209090"},"modified":"2020-08-16T21:38:31","modified_gmt":"2020-08-16T21:38:31","slug":"documents","status":"publish","type":"page","link":"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/documents\/","title":{"rendered":"Document"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Hero&#8221; _builder_version=&#8221;3.22&#8243; background_color=&#8221;#f8fbfe&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_start=&#8221;#53a0fd&#8221; background_color_gradient_end=&#8221;#4161d4&#8243; background_color_gradient_direction=&#8221;135deg&#8221; background_image=&#8221;https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/geometric-bg-overlay-01.jpg&#8221; background_blend=&#8221;overlay&#8221; custom_padding=&#8221;4.3%|0px|2%|0px||&#8221; animation_style=&#8221;zoom&#8221; animation_direction=&#8221;bottom&#8221; animation_intensity_zoom=&#8221;8%&#8221; animation_starting_opacity=&#8221;100%&#8221;][et_pb_row _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;3.27.4&#8243; text_font=&#8221;Nunito Sans||||||||&#8221; text_text_color=&#8221;#ffffff&#8221; text_font_size=&#8221;18px&#8221; text_line_height=&#8221;1.8em&#8221; header_font=&#8221;Nunito Sans|700|||||||&#8221; header_font_size=&#8221;45px&#8221; header_line_height=&#8221;1.3em&#8221; header_2_font=&#8221;||||||||&#8221; text_orientation=&#8221;center&#8221; background_layout=&#8221;dark&#8221; max_width=&#8221;700px&#8221; module_alignment=&#8221;center&#8221;]<\/p>\n<h1>GET STARTED?<\/h1>\n<h2>Convert any Section on your page to a Tabbed Content with just 1-Click.<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Developer Documentation Section&#8221; _builder_version=&#8221;3.22&#8243; background_color=&#8221;#f8fbfe&#8221; min_height=&#8221;2309px&#8221; custom_padding=&#8221;7px|0px|30px|0px||&#8221;][et_pb_row column_structure=&#8221;1_3,2_3&#8243; admin_label=&#8221;Tittle&#8221; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;60px|0px|60px|0px&#8221;][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_image src=&#8221;https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2018\/12\/1X_Hosting_Illustration_04.png&#8221; title_text=&#8221;1X_Hosting_Illustration_04&#8243; _builder_version=&#8221;4.5.6&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;2_3&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.5.6&#8243; text_font=&#8221;Nunito Sans||||||||&#8221; text_text_color=&#8221;#959baf&#8221; text_font_size=&#8221;18px&#8221; text_line_height=&#8221;1.8em&#8221; header_font=&#8221;||||||||&#8221; header_2_font=&#8221;Nunito Sans|700|||||||&#8221; header_2_text_color=&#8221;#535b7c&#8221; header_2_font_size=&#8221;35px&#8221; header_2_line_height=&#8221;1.3em&#8221; max_width=&#8221;700px&#8221; module_alignment=&#8221;left&#8221;]<\/p>\n<h2>This plugin is 100% Visual Builder Compatible.<\/h2>\n<p><span style=\"font-size: medium;\">This plugin is 100% compatible with the Divi Visual builder and really simple to use.\u00a0However, you won\u2019t preview the Section as Tabs in the visual builder. And that\u2019s intentional as you need to view &amp; edit the content of the section as you normally do. So in the visual builder, it will remain as it is now but will have additional options to\u00a0convert the section into Tab. Once enabled all the rows within that section will become tabs on the front-end of your website. Easy huh?<\/span><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_3,2_3&#8243; use_custom_gutter=&#8221;on&#8221; gutter_width=&#8221;2&#8243; _builder_version=&#8221;4.5.6&#8243; custom_padding=&#8221;|||&#8221;][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;3.25&#8243; background_color_gradient_direction=&#8221;243deg&#8221; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_image src=&#8221;https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2018\/12\/1X_Hosting_Illustration_03.png&#8221; title_text=&#8221;1X_Hosting_Illustration_03&#8243; _builder_version=&#8221;4.5.6&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;2_3&#8243; _builder_version=&#8221;3.25&#8243; background_color_gradient_direction=&#8221;243deg&#8221; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;3.27.4&#8243; text_font=&#8221;Nunito Sans||||||||&#8221; text_text_color=&#8221;#959baf&#8221; text_font_size=&#8221;18px&#8221; text_line_height=&#8221;1.8em&#8221; header_font=&#8221;||||||||&#8221; header_2_font=&#8221;Nunito Sans|700|||||||&#8221; header_2_text_color=&#8221;#535b7c&#8221; header_2_font_size=&#8221;35px&#8221; header_2_line_height=&#8221;1.3em&#8221; header_3_font=&#8221;Nunito Sans|700|||||||&#8221; header_3_text_color=&#8221;#535b7c&#8221; header_3_font_size=&#8221;25px&#8221; header_3_line_height=&#8221;1.3em&#8221; max_width=&#8221;700px&#8221; module_alignment=&#8221;center&#8221;]<\/p>\n<h3>How to Get Started?<\/h3>\n<p>[\/et_pb_text][et_pb_accordion open_toggle_background_color=&#8221;#ffffff&#8221; closed_toggle_background_color=&#8221;#ffffff&#8221; icon_color=&#8221;rgba(83,91,124,0.4)&#8221; _builder_version=&#8221;4.5.6&#8243; toggle_text_color=&#8221;#535b7c&#8221; toggle_level=&#8221;h3&#8243; toggle_font=&#8221;Roboto Mono|700|||||||&#8221; toggle_text_align=&#8221;left&#8221; toggle_font_size=&#8221;18px&#8221; body_font=&#8221;Roboto Mono||||||||&#8221; body_text_color=&#8221;#989db0&#8243; body_font_size=&#8221;13px&#8221; custom_margin=&#8221;||100px|&#8221; custom_padding=&#8221;|||&#8221; border_radii=&#8221;on|4px|4px|4px|4px&#8221; border_width_all=&#8221;0px&#8221; border_color_all=&#8221;#d9d9d9&#8243; border_style_all=&#8221;solid&#8221; box_shadow_style=&#8221;preset3&#8243; box_shadow_color=&#8221;rgba(34,56,101,0.12)&#8221; use_border_color=&#8221;on&#8221; border_width=&#8221;0px&#8221;][et_pb_accordion_item title=&#8221;1. Introduction&#8221; open=&#8221;on&#8221; _builder_version=&#8221;3.0.83&#8243;]<\/p>\n<p>Convert any section on your page to a Tabbed Content with just 1-click. This makes each row in the section to a tab content. Make websites with complex tabs in the easiest way now!<\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=&#8221;2. Installation and Activation&#8221; _builder_version=&#8221;3.0.83&#8243; open=&#8221;off&#8221;]<\/p>\n<p><strong>MINIMUM REQUIREMENTS:<\/strong><\/p>\n<ul>\n<li>WordPress 4.5 or greater<\/li>\n<li>PHP version 7.0 or greater<\/li>\n<li>MySQL version 5.0 or greater<\/li>\n<li>Divi Latest Theme or Plugin<\/li>\n<\/ul>\n<p><strong>WE RECOMMEND YOUR HOST SUPPORTS:<\/strong><\/p>\n<ul>\n<li>PHP version 7.0 or greater<\/li>\n<li>MySQL version 5.6 or greater<\/li>\n<li>WP Memory limit of 64 MB or greater (128 MB or higher is preferred)<\/li>\n<\/ul>\n<p><strong>HOW TO INSTALL:<\/strong><\/p>\n<ol>\n<li>Install using the WordPress built-in Plugin installer, or Extract the zip file and drop the contents in the\u00a0wp-content\/plugins\/directory of your WordPress installation.<\/li>\n<li>Activate the plugin through the \u2018Plugins\u2019 menu in WordPress.<\/li>\n<li>Then Go to Plugin &gt; Divi Tab Section<\/li>\n<li>Enter License Key<\/li>\n<li>Activated the Plugin\u00a0<\/li>\n<li>Hurray :).<\/li>\n<\/ol>\n<p><strong><\/strong><\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=&#8221;3. Get Started&#8221; _builder_version=&#8221;4.5.6&#8243; open=&#8221;off&#8221;]<\/p>\n<p>For this simple action to take place of converting all rows of a section into tabs, first go to settings, select section settings and turn on the <strong><u>convert to tabs<\/u><\/strong> option. It is very important to enable this option in the beginning because this will allow your rows to get converted to tabs instantly. Saving these settings is essential and once settings of <strong><u>convert to tab<\/u><\/strong> is saved, the plug-in automatically converts all rows into tabs.<\/p>\n<ul>\n<li>Click the Settings section that you desire to convert into Tabs.<\/li>\n<li>Click Convert into Tab &#8220;<em>Turn On<\/em>&#8220;<\/li>\n<li>Save Setting and here you go.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/convert-divi-section-into-tabs-1-e1597582921200.png\" width=\"858\" height=\"394\" alt=\"convert divi section into tab\" class=\"wp-image-209084 aligncenter size-full\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/convert-divi-section-into-tabs-1-e1597582921200.png 858w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/convert-divi-section-into-tabs-1-e1597582921200-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 858px, 100vw\" \/><\/p>\n<p>Isn&#8217;t so easy?<\/p>\n<p>[\/et_pb_accordion_item][\/et_pb_accordion][et_pb_text _builder_version=&#8221;4.5.6&#8243; text_font=&#8221;Nunito Sans||||||||&#8221; text_text_color=&#8221;#959baf&#8221; text_font_size=&#8221;18px&#8221; text_line_height=&#8221;1.8em&#8221; header_font=&#8221;||||||||&#8221; header_2_font=&#8221;Nunito Sans|700|||||||&#8221; header_2_text_color=&#8221;#535b7c&#8221; header_2_font_size=&#8221;35px&#8221; header_2_line_height=&#8221;1.3em&#8221; header_3_font=&#8221;Nunito Sans|700|||||||&#8221; header_3_text_color=&#8221;#535b7c&#8221; header_3_font_size=&#8221;25px&#8221; header_3_line_height=&#8221;1.3em&#8221; max_width=&#8221;700px&#8221; module_alignment=&#8221;center&#8221;]<\/p>\n<h3>Main Features<\/h3>\n<p>There are bunch of exciting features. See Below &#8220;<strong>How To Use Divi Tab Section<\/strong>&#8220;.<\/p>\n<p>[\/et_pb_text][et_pb_accordion open_toggle_background_color=&#8221;#ffffff&#8221; closed_toggle_background_color=&#8221;#ffffff&#8221; icon_color=&#8221;rgba(83,91,124,0.4)&#8221; _builder_version=&#8221;4.5.6&#8243; toggle_text_color=&#8221;#535b7c&#8221; toggle_level=&#8221;h3&#8243; toggle_font=&#8221;Roboto Mono|700|||||||&#8221; toggle_text_align=&#8221;left&#8221; toggle_font_size=&#8221;18px&#8221; body_font=&#8221;Roboto Mono||||||||&#8221; body_text_color=&#8221;#989db0&#8243; body_font_size=&#8221;13px&#8221; custom_margin=&#8221;||100px|&#8221; custom_padding=&#8221;|||&#8221; hover_enabled=&#8221;0&#8243; border_radii=&#8221;on|4px|4px|4px|4px&#8221; border_width_all=&#8221;0px&#8221; border_color_all=&#8221;#d9d9d9&#8243; border_style_all=&#8221;solid&#8221; box_shadow_style=&#8221;preset3&#8243; box_shadow_color=&#8221;rgba(34,56,101,0.12)&#8221; use_border_color=&#8221;on&#8221; border_width=&#8221;0px&#8221; locked=&#8221;off&#8221;][et_pb_accordion_item title=&#8221;1. Change Tab Name&#8221; _builder_version=&#8221;4.5.6&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; open=&#8221;on&#8221;]<\/p>\n<p>You can change Tab Text Name by Section Setting.<\/p>\n<ol>\n<li>Go to Section Setting<\/li>\n<li>Collapse Admin Label<\/li>\n<li>Write Custom Tab name<\/li>\n<\/ol>\n<p>\u00a0<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Screenshot-2020-08-17-at-2.30.34-AM-570x1024.png\" width=\"570\" height=\"1024\" alt=\"change tab name\" class=\"wp-image-209177 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Screenshot-2020-08-17-at-2.30.34-AM-570x1024.png 570w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Screenshot-2020-08-17-at-2.30.34-AM-480x862.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 570px, 100vw\" \/><\/p>\n<p>Now you can write in RTL Text as well along with Emoji.<\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=&#8221;2. Tab Menu Position&#8221; _builder_version=&#8221;4.5.6&#8243; hover_enabled=&#8221;0&#8243; open=&#8221;off&#8221;]This option in settings allows you to set your menu tab at the top or at the bottom of the page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/convert-divi-section-into-tabs-1-e1597582921200.png\" width=\"858\" height=\"394\" alt=\"tab-menu-position-section-setting\" class=\"wp-image-209084 aligncenter size-full\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/convert-divi-section-into-tabs-1-e1597582921200.png 858w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/convert-divi-section-into-tabs-1-e1597582921200-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 858px, 100vw\" \/><\/p>\n<ul>\n<li>Click the Settings section that you desire to convert into Tabs.<\/li>\n<li>Change Tab Menu Position &#8220;Top&#8221; And &#8220;Bottom&#8221;<\/li>\n<li>Save Setting and here you go.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/change-section-divi-tab-menu-position-e1597583208899-1024x476.png\" width=\"1024\" height=\"476\" alt=\"tab menu position top\" class=\"wp-image-209085 size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/change-section-divi-tab-menu-position-e1597583208899-980x551.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/change-section-divi-tab-menu-position-e1597583208899-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/>[\/et_pb_accordion_item][et_pb_accordion_item title=&#8221;2. Tab Menu Style (New Feature)&#8221; icon_color=&#8221;#0C71C3&#8243; _builder_version=&#8221;4.5.6&#8243; toggle_text_color=&#8221;#0C71C3&#8243; transform_styles__hover_enabled=&#8221;off|desktop&#8221; transform_scale__hover_enabled=&#8221;off|desktop&#8221; transform_translate__hover_enabled=&#8221;off|desktop&#8221; transform_rotate__hover_enabled=&#8221;off|desktop&#8221; transform_skew__hover_enabled=&#8221;off|desktop&#8221; transform_origin__hover_enabled=&#8221;off|desktop&#8221; open=&#8221;off&#8221;]<\/p>\n<p>This setting has two options of Carousel and Text Wrap for you. Carousel setting is set by default and in this particular setting, all tabs in the menu are not visible if they increase in number, thus a scroll left to right button has to be used to check out the entire menu.<\/p>\n<ul>\n<li>Click the Settings section that you desire to convert into Tabs.<\/li>\n<li>Change Tab Menu Style. There are two styles &#8220;Carousel and Wrap&#8221;.\u00a0<\/li>\n<li>Change Table Menu Alignment. (<em>For improved user experience, the tab menu visibility is extended to three options of alignment, so now you can align your tab menu to the left, to the right or in the center. For both Carousel and Wrap settings, this option can simply be enabled by just a click!<\/em>)<\/li>\n<\/ul>\n<h3>Carousel Style<\/h3>\n<p>&nbsp;<\/p>\n<h4>Left<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-left-e1597595524855-1024x471.png\" width=\"1024\" height=\"471\" alt=\"\" class=\"wp-image-209119 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-left-e1597595524855-980x551.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-left-e1597595524855-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h4>Center<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Carousel-Tab-Menu-Style-e1597594714629-1024x450.png\" width=\"1024\" height=\"450\" alt=\"\" class=\"wp-image-209113 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Carousel-Tab-Menu-Style-e1597594714629-980x551.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Carousel-Tab-Menu-Style-e1597594714629-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h4>Right<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-left-e1597595524855-1024x471.png\" width=\"1024\" height=\"471\" alt=\"\" class=\"wp-image-209119 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-left-e1597595524855-980x551.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-left-e1597595524855-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h3>Wrap Style<\/h3>\n<h4>Left<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-wrap-left-e1597596259315-1024x484.png\" width=\"1024\" height=\"484\" alt=\"\" class=\"wp-image-209123 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-wrap-left-e1597596259315-980x551.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-wrap-left-e1597596259315-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h4>\u00a0Center<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-wrap-center-e1597594875653-1024x453.png\" width=\"1024\" height=\"453\" alt=\"\" class=\"wp-image-209115 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-wrap-center-e1597594875653-980x551.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-wrap-center-e1597594875653-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h4>Right<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-wrap-right-e1597596530500-1024x480.png\" width=\"1024\" height=\"480\" alt=\"\" class=\"wp-image-209125 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-wrap-right-e1597596530500-980x551.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/tab-menu-alignment-wrap-right-e1597596530500-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=&#8221;4. Container Width&#8221; _builder_version=&#8221;4.5.6&#8243; _module_preset=&#8221;default&#8221; open=&#8221;off&#8221;]<\/p>\n<p>This option is your section settings enables you to set and keep the width of the container bar that adjusts the menu within it. Starting from 13 as the least value to keep the container width, keeping the smallest value will give you this look:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Container-Width-e1597597877115-1024x485.png\" width=\"1024\" height=\"485\" alt=\"Tab-Menu-Container-Width\" class=\"wp-image-209136 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Container-Width-e1597597877115-980x551.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Container-Width-e1597597877115-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Whereas the more the width, the better in looks as more menu tabs can be adjusted within it. The range can be kept as high as 100 which is the highest value available for this range. At 100 in container width, it gives a look like this:<\/p>\n<p>\u00a0<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Container-Width-2-e1597597875959-1024x457.png\" width=\"1024\" height=\"457\" alt=\"Tab-Menu-Container-Width-2\" class=\"wp-image-209137 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Container-Width-2-e1597597875959-980x551.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Container-Width-2-e1597597875959-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=&#8221;4. Custom Style&#8221; _builder_version=&#8221;4.5.6&#8243; _module_preset=&#8221;default&#8221; open=&#8221;off&#8221;]<\/p>\n<p>if you turn on custom style. You would see amazing new and old features to manage tab menu text and background styling.\u00a0<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>Click the Settings section that you desire to convert into Tabs.<\/li>\n<li>Just Turn On &#8220;Custom Style for Tab Menu&#8221;.<\/li>\n<\/ul>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=&#8221;5. Tab Menu On Mobile Responsive &#8221; _builder_version=&#8221;4.5.6&#8243; _module_preset=&#8221;default&#8221; open=&#8221;off&#8221;]<\/p>\n<p>This update is of another heading in your section\u2019s setting named as \u2018<em><strong>Make Manu tabs full width on mobile<\/strong><\/em>\u2019. This option basically allows the menu tab to adjust itself to full width and length for mobile users to show the entire menu on their screens. Let see here how this works:<\/p>\n<p>\u00a0<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Make-Tab-Menus-Full-width-on-Mobile-870x1024.png\" width=\"870\" height=\"1024\" alt=\"\" class=\"wp-image-209142 aligncenter size-large\" \/><\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=&#8221;6. Tab Menu Background&#8221; _builder_version=&#8221;4.5.6&#8243; _module_preset=&#8221;default&#8221; open=&#8221;off&#8221;]<\/p>\n<p>Tab Menu Background is used to set the background color of tabs as per your choice. If chosen blue, the background of menu tabs will look like this.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Background-e1597598299508-1024x474.png\" width=\"1024\" height=\"474\" alt=\"\" class=\"wp-image-209143 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Background-e1597598299508-980x551.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Background-e1597598299508-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=&#8221;7. Tab Menu Border Style (New Feature)&#8221; _builder_version=&#8221;4.5.6&#8243; _module_preset=&#8221;default&#8221; toggle_text_color=&#8221;#0C71C3&#8243; open=&#8221;off&#8221;]<\/p>\n<h3>Border Width<\/h3>\n<p>The third update is called the \u2018<em><strong>Tab Menu Border Width<\/strong><\/em>\u2019. This feature as the name suggest gives your border the desired width you wish to keep. It is the distance of each border from the next tab border. Once you have set the figures for border width for top &amp; bottom, left to right, just a click and you are good to go!<\/p>\n<p>With 5px from each side set, your front-end tab menu presentation will look something like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Border-Width-e1597608304188-1024x450.png\" width=\"1024\" height=\"450\" alt=\"Tab-Menu-Border-Width\" class=\"wp-image-209148 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Border-Width-e1597608304188-980x551.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Border-Width-e1597608304188-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h3><\/h3>\n<h3>Border Style and Color<\/h3>\n<p>The fourth honorable mention are two different settings of \u2018Tab Menu Border Style\u2019 and \u2018Tab Menu Border Color\u2019 that can change your border styles and color and make them look even more catchy and attractive. With options available from solid, dashed, dotted and double, you can select the border style you wish to keep. A bunch of color are available to choose from. It increases and highlight my borders visibility. Here is how my border looks with dotted border style in red color.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Border-Color-1024x491.png\" width=\"1024\" height=\"491\" alt=\"Tab-Menu-Border-Color\" class=\"wp-image-209150 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Border-Color-980x470.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Border-Color-480x230.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h4>Border Radius<\/h4>\n<p>Keep going further and your tab menu will reach a classic and eye catchy look by the end of the style customization. Next place is taken over by \u2018Tab Menu Border Radius\u2019. This option enables you to set the radius of the border that can make it curves from the end if you choose to keep it that way. For better visibility, I kept it at 40 px each side and here is how it looks:<\/p>\n<p>\u00a0<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Border-Radius-1024x468.png\" width=\"1024\" height=\"468\" alt=\"Tab-Menu-Border-Radius\" class=\"wp-image-209151 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Border-Radius-980x448.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Border-Radius-480x219.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=&#8221;9. Tab Menu Font and Text Style (New Feature)&#8221; _builder_version=&#8221;4.5.6&#8243; _module_preset=&#8221;default&#8221; toggle_text_color=&#8221;#0C71C3&#8243; open=&#8221;off&#8221;]<\/p>\n<h3>Font\/Text Color<\/h3>\n<p>\u2018<strong>Tab Menu Text Color<\/strong>\u2019 allows you to select and change any color of the text used in the menu tabs. Text color in black looks like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-color-1024x476.png\" width=\"1024\" height=\"476\" alt=\"Tab-Menu-Text-color\" class=\"wp-image-209156 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-color-980x455.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-color-480x223.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h3>Font\/Text Family<\/h3>\n<p>\u2018<strong>Tab Menu Text Font<\/strong>\u2019 is another feature that improves and completes the look of the text by making it visible in any font family you desire to select. When selected <strong>Advent Pro<\/strong>, the text in menu tabs look like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Font-1024x486.png\" width=\"1024\" height=\"486\" alt=\"Tab-Menu-Text-Font\" class=\"wp-image-209157 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Font-980x465.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Font-480x228.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h3>Font\/Text Weight<\/h3>\n<p>\u2018<strong>Tab Menu Text Weight<\/strong>\u2019 gives you options like light, semi bold, lighter, regular, bold and ultra-bold to decide from and keep the text weight upon any style option you choose. Regular is set by default and can be changed by just a click. Light and Bold looks may give the following presentations:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Weight-1024x472.png\" width=\"1024\" height=\"472\" alt=\"Tab-Menu-Text-Weight\" class=\"wp-image-209158 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Weight-980x451.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Weight-480x221.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h3>Font\/Text Alignment<\/h3>\n<p>With<strong> \u2018Tab Menu Text Alignment\u2019<\/strong>, now you can not only align the menu tabs but the text can also be aligned from the left, right or in the center.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Alignment-703x1024.png\" width=\"703\" height=\"1024\" alt=\"Tab-Menu-Text-Alignment\" class=\"wp-image-209159 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Alignment-703x1024.png 703w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Alignment-480x699.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 703px, 100vw\" \/><\/p>\n<h3><\/h3>\n<h3>Font\/Text Size<\/h3>\n<p><strong>\u2018Tab Menu Text Size<\/strong>\u2019 gives you the access to change the font or the text size and make it bigger or smaller as per you desire to keep it on the menu tab. With 25px chosen, the text size is visible like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Size-1024x480.png\" width=\"1024\" height=\"480\" alt=\"Tab-Menu-Text-Size\" class=\"wp-image-209160 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Size-980x459.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Size-480x225.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><strong><\/strong><\/h3>\n<h3><strong>Font\/Text Italic<\/strong><\/h3>\n<p><strong>\u2018Tab Menu Text Italic<\/strong>\u2019 is an added feature which converts your tab menu text to Italic and give it a more wonderful look. The preview is here:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Italic-1024x489.png\" width=\"1024\" height=\"489\" alt=\"Tab-Menu-Text-Italic\" class=\"wp-image-209162 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Italic-980x468.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Italic-480x229.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h3>Font\/Text Underline<\/h3>\n<p>You can also use \u2018Tab Menu Text Underline\u2019 to get all the tab menu text turned underlined.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Underline-1024x491.png\" width=\"1024\" height=\"491\" alt=\"Tab-Menu-Text-Underline\" class=\"wp-image-209163 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Underline-980x470.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Underline-480x230.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h3>Font\/Text Transform<\/h3>\n<p>\u2018Tab Menu Text Transform\u2019 is an incredible feature and allows you to completely shift your tab menu text to upper case or lower-case form, so whatever you chose will be used in the tab menu. There are two types of transform (uppercase and capitalize).<br \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Transform-1024x479.png\" width=\"1024\" height=\"479\" alt=\"Tab-Menu-Text-Transform\" class=\"wp-image-209161 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Transform-980x459.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Text-Transform-480x225.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=&#8221;8. Tab Menu Transform (New Feature)&#8221; _builder_version=&#8221;4.5.6&#8243; _module_preset=&#8221;default&#8221; toggle_text_color=&#8221;#0C71C3&#8243; open=&#8221;off&#8221;]<\/p>\n<h3>Rotate<\/h3>\n<p>&nbsp;<\/p>\n<p>Let\u2019s come to the next customized setting option of \u2018<strong>Tab Menu Item Rotate<\/strong>\u2019. This updated feature of Divi Tab Section allows you to set an angle at which you wish to keep the menu bar to get rotated. If not set, it will stay with the default settings of a normal tab menu. Rotating it at an angle gives good visual effects, so trying it to fascinate more viewers is definitely worth it. It looks like this with a 6-degree angle rotate:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Item-Rotate-1024x484.png\" width=\"1024\" height=\"484\" alt=\"Tab-Menu-Item-Rotate\" class=\"wp-image-209154 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Item-Rotate-980x464.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Item-Rotate-480x227.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<h3>Skew<\/h3>\n<p><strong><\/strong><\/p>\n<p>Another worth mentioning 1.3 version update is the \u2018<strong>Tab Menu Item Transform<\/strong>\u2019 for both X axis and Y axis. This visual effect will skew and give more catchy 3D effects to your menu items. Such an impressive look can be created here by selecting a number of degrees you want your items to set and look to. Here is an image of 5 degree transformation for each X and Y axis for all items on the menu bar:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Item-Transform-1024x478.png\" width=\"1024\" height=\"478\" alt=\"Tab-Menu-Item-Transform\" class=\"wp-image-209155 aligncenter size-large\" srcset=\"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Item-Transform-980x457.png 980w, https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/Tab-Menu-Item-Transform-480x224.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/p>\n<p>[\/et_pb_accordion_item][et_pb_accordion_item title=&#8221;11. Hover and Active State (All New Feature)&#8221; open=&#8221;off&#8221; _builder_version=&#8221;4.5.6&#8243; _module_preset=&#8221;default&#8221; toggle_text_color=&#8221;#0C71C3&#8243;]<\/p>\n<p>\u2018Tab Menu Hover\/ Active settings\u2019 allow you to use and set all custom styles and features available for the normal tab menu settings. The list of features available for hover\/ active settings is as follows:<\/p>\n<ol>\n<li>Tab Menu Background Color<\/li>\n<li>Tab Menu Border width<\/li>\n<li>Tab Menu Border Style<\/li>\n<li>Tab Menu Border Color<\/li>\n<li>Tab Menu Border Radius<\/li>\n<li>Tab Menu Item Rotate<\/li>\n<li>Tab Menu Item Transform X<\/li>\n<li>Tab Menu Item Transform y<\/li>\n<li>Tab Menu Text Color<\/li>\n<li>Tab Menu Text Font<\/li>\n<li>Tab Menu Text Weight<\/li>\n<li>Tab Menu Text Alignment<\/li>\n<li>Tab Menu Text size<\/li>\n<li>Tab Menu Text Italic<\/li>\n<li>Tab Menu Text Underline<\/li>\n<li>Tab Menu Text Transform<\/li>\n<\/ol>\n<p>[\/et_pb_accordion_item][\/et_pb_accordion][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Request a Feature&#8221; _builder_version=&#8221;3.22&#8243; custom_padding=&#8221;3px|0px|35px|0px||&#8221; saved_tabs=&#8221;all&#8221;][et_pb_row column_structure=&#8221;1_3,2_3&#8243; admin_label=&#8221;Right Sided Image&#8221; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;60px|0px|60px|0px&#8221; locked=&#8221;off&#8221;][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;3.27.4&#8243; text_font=&#8221;Nunito Sans||||||||&#8221; text_text_color=&#8221;#959baf&#8221; text_font_size=&#8221;18px&#8221; text_line_height=&#8221;1.8em&#8221; header_font=&#8221;||||||||&#8221; header_text_align=&#8221;left&#8221; header_2_font=&#8221;Nunito Sans|700|||||||&#8221; header_2_text_color=&#8221;#535b7c&#8221; header_2_font_size=&#8221;35px&#8221; header_2_line_height=&#8221;1.3em&#8221; max_width=&#8221;700px&#8221; module_alignment=&#8221;center&#8221;]<\/p>\n<h2>Request a Feature or Open a Ticket<\/h2>\n<p>You can ask us a question or Hire us.<\/p>\n<p>[\/et_pb_text][et_pb_button button_url=&#8221;https:\/\/www.mamdaniinc.com\/contactus\/&#8221; button_text=&#8221;Contact Us&#8221; _builder_version=&#8221;4.5.6&#8243; custom_button=&#8221;on&#8221; button_text_size=&#8221;13px&#8221; button_text_color=&#8221;#ffffff&#8221; button_bg_use_color_gradient=&#8221;on&#8221; button_bg_color_gradient_start=&#8221;#3D72E7&#8243; button_bg_color_gradient_end=&#8221;#53a0fe&#8221; button_bg_color_gradient_direction=&#8221;243deg&#8221; button_border_width=&#8221;0px&#8221; button_border_radius=&#8221;26px&#8221; button_letter_spacing=&#8221;1px&#8221; button_font=&#8221;Nunito Sans|800||on|||||&#8221; button_use_icon=&#8221;off&#8221; custom_margin=&#8221;30px|||&#8221; custom_padding=&#8221;15px|30px|15px|30px&#8221; hover_enabled=&#8221;0&#8243; button_text_color_hover=&#8221;#ffffff&#8221; button_border_radius_hover=&#8221;26px&#8221; button_letter_spacing_hover=&#8221;1px&#8221; button_text_size__hover_enabled=&#8221;off&#8221; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_text_color__hover_enabled=&#8221;on&#8221; button_text_color__hover=&#8221;#ffffff&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_border_width__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_border_color__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_border_radius__hover_enabled=&#8221;on&#8221; button_border_radius__hover=&#8221;26px&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_letter_spacing__hover_enabled=&#8221;on&#8221; button_letter_spacing__hover=&#8221;1px&#8221; button_one_letter_spacing__hover_enabled=&#8221;off&#8221; button_two_letter_spacing__hover_enabled=&#8221;off&#8221; button_bg_color__hover_enabled=&#8221;off&#8221; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_button][\/et_pb_column][et_pb_column type=&#8221;2_3&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_image src=&#8221;https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/sass-ui-mocks-o4.jpg&#8221; align_tablet=&#8221;center&#8221; align_phone=&#8221;&#8221; align_last_edited=&#8221;on|desktop&#8221; _builder_version=&#8221;3.23&#8243; animation_style=&#8221;zoom&#8221; animation_direction=&#8221;left&#8221; animation_intensity_zoom=&#8221;5%&#8221; border_radii=&#8221;on|10px|10px|10px|10px&#8221; border_width_all=&#8221;1px&#8221; border_color_all=&#8221;rgba(51,51,51,0.1)&#8221; box_shadow_style=&#8221;preset1&#8243; box_shadow_vertical=&#8221;10px&#8221; box_shadow_blur=&#8221;30px&#8221; box_shadow_color=&#8221;rgba(34,56,101,0.09)&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Get Started CTA&#8221; _builder_version=&#8221;3.22&#8243; background_color=&#8221;#202332&#8243; custom_padding=&#8221;0px|0px|100px|0px&#8221; box_shadow_style=&#8221;preset3&#8243; box_shadow_vertical=&#8221;160px&#8221; box_shadow_blur=&#8221;0px&#8221; box_shadow_spread=&#8221;-80px&#8221; box_shadow_color=&#8221;#ffffff&#8221; box_shadow_position=&#8221;inner&#8221; saved_tabs=&#8221;all&#8221;][et_pb_row column_structure=&#8221;2_3,1_3&#8243; admin_label=&#8221;CTA Row&#8221; _builder_version=&#8221;3.25&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_start=&#8221;#3D72E7&#8243; background_color_gradient_end=&#8221;#53A0FE&#8221; background_color_gradient_direction=&#8221;243deg&#8221; custom_padding=&#8221;32px|40px||40px&#8221; border_radii=&#8221;on|4px|4px|4px|4px&#8221;][et_pb_column type=&#8221;2_3&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;3.27.4&#8243; text_font=&#8221;Nunito Sans||||||||&#8221; text_text_color=&#8221;#ffffff&#8221; text_font_size=&#8221;15px&#8221; header_font=&#8221;Nunito Sans|700|||||||&#8221; header_text_align=&#8221;left&#8221; header_text_color=&#8221;#ffffff&#8221; header_font_size=&#8221;35px&#8221; header_line_height=&#8221;1.4em&#8221; header_2_font=&#8221;Nunito Sans|700|||||||&#8221; header_2_text_align=&#8221;left&#8221; header_2_text_color=&#8221;#ffffff&#8221; header_2_font_size=&#8221;35px&#8221; header_2_line_height=&#8221;1.4em&#8221; header_3_font=&#8221;||||||||&#8221; header_4_font=&#8221;||||||||&#8221; header_5_font=&#8221;||||||||&#8221; header_6_font=&#8221;||||||||&#8221; custom_margin=&#8221;||| &#8220;]<\/p>\n<h2>Ready To Get Started?<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_button button_url=&#8221;https:\/\/elegantmarketplace.com\/downloads\/divi-tab-section\/&#8221; url_new_window=&#8221;on&#8221; button_text=&#8221;Buy Now Today&#8221; button_alignment=&#8221;right&#8221; _builder_version=&#8221;4.5.6&#8243; custom_button=&#8221;on&#8221; button_text_size=&#8221;13px&#8221; button_text_color=&#8221;#3D72E7&#8243; button_bg_color=&#8221;#ffffff&#8221; button_bg_color_gradient_start=&#8221;#3D72E7&#8243; button_bg_color_gradient_end=&#8221;#53a0fe&#8221; button_bg_color_gradient_direction=&#8221;243deg&#8221; button_border_width=&#8221;0px&#8221; button_border_radius=&#8221;26px&#8221; button_letter_spacing=&#8221;1px&#8221; button_font=&#8221;Nunito Sans|800||on|||||&#8221; button_use_icon=&#8221;off&#8221; custom_margin=&#8221;|||&#8221; custom_padding=&#8221;15px|30px|15px|30px&#8221; button_text_color_hover=&#8221;#3D72E7&#8243; button_border_radius_hover=&#8221;26px&#8221; button_letter_spacing_hover=&#8221;1px&#8221; button_bg_color_hover=&#8221;#ffffff&#8221; button_text_size__hover_enabled=&#8221;off&#8221; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_text_color__hover_enabled=&#8221;on&#8221; button_text_color__hover=&#8221;#3D72E7&#8243; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_border_width__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_border_color__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_border_radius__hover_enabled=&#8221;on&#8221; button_border_radius__hover=&#8221;26px&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_letter_spacing__hover_enabled=&#8221;on&#8221; button_letter_spacing__hover=&#8221;1px&#8221; button_one_letter_spacing__hover_enabled=&#8221;off&#8221; button_two_letter_spacing__hover_enabled=&#8221;off&#8221; button_bg_color__hover_enabled=&#8221;on&#8221; button_bg_color__hover=&#8221;#ffffff&#8221; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Hero&#8221; _builder_version=&#8221;3.22&#8243; background_color=&#8221;#f8fbfe&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_start=&#8221;#53a0fd&#8221; background_color_gradient_end=&#8221;#4161d4&#8243; background_color_gradient_direction=&#8221;135deg&#8221; background_image=&#8221;https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-content\/uploads\/sites\/18\/2020\/08\/geometric-bg-overlay-01.jpg&#8221; background_blend=&#8221;overlay&#8221; custom_padding=&#8221;4.3%|0px|2%|0px||&#8221; animation_style=&#8221;zoom&#8221; animation_direction=&#8221;bottom&#8221; animation_intensity_zoom=&#8221;8%&#8221; animation_starting_opacity=&#8221;100%&#8221;][et_pb_row _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;3.27.4&#8243; text_font=&#8221;Nunito Sans||||||||&#8221; text_text_color=&#8221;#ffffff&#8221; text_font_size=&#8221;18px&#8221; text_line_height=&#8221;1.8em&#8221; header_font=&#8221;Nunito Sans|700|||||||&#8221; header_font_size=&#8221;45px&#8221; header_line_height=&#8221;1.3em&#8221; header_2_font=&#8221;||||||||&#8221; text_orientation=&#8221;center&#8221; background_layout=&#8221;dark&#8221; max_width=&#8221;700px&#8221; module_alignment=&#8221;center&#8221;] GET STARTED? Convert any Section on your page to a Tabbed Content with just 1-Click. [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"class_list":["post-209090","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-json\/wp\/v2\/pages\/209090"}],"collection":[{"href":"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-json\/wp\/v2\/comments?post=209090"}],"version-history":[{"count":26,"href":"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-json\/wp\/v2\/pages\/209090\/revisions"}],"predecessor-version":[{"id":209182,"href":"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-json\/wp\/v2\/pages\/209090\/revisions\/209182"}],"wp:attachment":[{"href":"https:\/\/divi.mamdaniinc.com\/divi-section-tab\/wp-json\/wp\/v2\/media?parent=209090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}