Home / Shortcodes / Tabs

Tabs

[vc_row][vc_column width=”3/4″ el_position=”first”][mk_fancy_title tag_name=”h1″ style=”false” color=”#333333″ size=”32″ font_weight=”300″ margin_top=”0″ margin_bottom=”20″ font_family=”none” align=”left” width=”1/1″ el_position=”first last”]

Introducing News Tabs

[/mk_fancy_title][vc_column_text disable_pattern=”false” align=”left” margin_bottom=”45″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

For the first time you can take advantage of tabs with dynamic contents . It means tabs now can link up to the news section of your website and each tab will update itself once you add news to your website.

[/vc_column_text][mk_news_tab tab_title=”News” width=”1/1″ el_position=”first last”][/vc_column][vc_column width=”1/4″ el_position=”last”][mk_custom_sidebar sidebar=”Shortcodes” width=”1/1″ el_position=”first last”][/vc_column][/vc_row][vc_row fullwidth=”true”][vc_column width=”1/1″][mk_divider style=”thin_solid” divider_width=”page_divider” margin_top=”1″ margin_bottom=”1″ width=”1/1″ el_position=”first last”][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][mk_fancy_title tag_name=”h1″ style=”false” color=”#333333″ size=”18″ font_weight=”bold” margin_top=”0″ margin_bottom=”40″ font_family=”none” align=”left” width=”1/1″ el_position=”first last”]

Horizontal tabs

[/mk_fancy_title][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_tabs orientation=”horizental” tab_location=”left” container_bg_color=”#ffffff”][vc_tab title=”Tab Title 1″ tab_id=”1380532793603-0-5″][vc_row_inner][vc_column_inner width=”1/2″ el_position=”first”][mk_image_slideshow images=”4627,4613,4629″ image_width=”300″ image_height=”200″ effect=”fade” animation_speed=”700″ slideshow_speed=”7000″ pause_on_hover=”false” smooth_height=”true” direction_nav=”true” width=”1/1″ el_position=”first last”][/vc_column_inner][vc_column_inner width=”1/2″ el_position=”last”][vc_column_text title=”Cras at tincidunt eros” disable_pattern=”false” align=”left” margin_bottom=”0″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Praesent ultricies, libero in sagittis egestas, risus mi pretium augue, non consequat neque elit ac odio. In tempor est tellus, non mattis mauris faucibus vitae. Cras at tincidunt eros. Nulla facilisi. Praesent et urna velit. Donec eget posuere ligula, ut mattis lorem. Nam ut augue eget metus laoreet feugiat.Aliquam molestie euismod vestibulum. Nullam dapibus augue id lorem auctor facilisis.

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tab][vc_tab title=”Tab Title 2″ tab_id=”1380532793911-0-9″][vc_column_text title=”Donec eget posuere ligula” disable_pattern=”false” align=”left” margin_bottom=”0″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim eget risus at pharetra. Suspendisse blandit turpis velit, ut pharetra ipsum tincidunt a. Praesent ultricies, libero in sagittis egestas, risus mi pretium augue, non consequat neque elit ac odio. In tempor est tellus, non mattis mauris faucibus vitae. Cras at tincidunt eros. Nulla facilisi. Aliquam molestie euismod vestibulum. Nullam dapibus augue id lorem auctor facilisis. Praesent et urna velit. Donec eget posuere ligula, ut mattis lorem. Nam ut augue eget metus laoreet feugiat. Donec eu metus euismod, euismod metus at, vestibulum ante. Aliquam tempor ultrices tortor, at pulvinar velit faucibus in. Maecenas viverra nulla a volutpat pulvinar. Phasellus semper mi quis porta scelerisque. Proin gravida velit tellus, sempernon mattis mauris faucibus vitae. Cras at tincidunt eros. Nulla facilisi. Aliquam molestie euismod vestibulum. Nullam dapibus augue id lorem auctor facilisis. Praesent et urna velit. Donec eget posuere ligula, ut mattis lorem. Nam ut augue eget metus laoreet feugiat. Donec eu metus euismod, euismod metus at, vestibulum ante.

[/vc_column_text][/vc_tab][vc_tab title=”Tab Title 3″ tab_id=”1380532794003-0-8″][mk_custom_list style=”e328″ icon_color=”#00c8d7″ margin_bottom=”0″ width=”1/1″ el_position=”first last”]
  • Suspendisse blandit
  • Duis vestibulum quis
  • Maecenas pretium lobortis
  • Donec mollis
[/mk_custom_list][/vc_tab][/vc_tabs][/vc_column][vc_column width=”1/3″][vc_tabs orientation=”horizental” tab_location=”left” container_bg_color=”#ffffff”][vc_tab title=”Tab 1″ tab_id=”1380532798907-0-7″][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”20″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Aliquam varius massa vel ante rhoncus eget semper tortor tincidunt. Nunc eu fermentum sem. Etiam semper enim sem, ut gravida tortor nisi consectetur iaculis accumsan. Aliquam varius massa vel ante rhoncus eget.

[/vc_column_text][mk_custom_list style=”e328″ icon_color=”#00c8d7″ margin_bottom=”0″ width=”1/1″ el_position=”first last”]
  • Suspendisse blandit
  • Duis vestibulum quis
  • Maecenas pretium lobortis
  • Donec mollis
[/mk_custom_list][/vc_tab][vc_tab title=”Tab 2″ tab_id=”1380532799060-0-7″][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”0″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Aliquam varius massa vel ante rhoncus eget semper tortor tincidunt. Nunc eu fermentum sem. Etiam semper enim sem, ut gravida tortor nisi consectetur iaculis accumsan.

[/vc_column_text][/vc_tab][/vc_tabs][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][mk_fancy_title tag_name=”h1″ style=”false” color=”#333333″ size=”18″ font_weight=”bold” margin_top=”20″ margin_bottom=”40″ font_family=”none” align=”left” width=”1/1″ el_position=”first last”]

Vertical tabs

[/mk_fancy_title][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_tabs orientation=”vertical” tab_location=”left” container_bg_color=”#ffffff”][vc_tab title=”Tab Title 1″ tab_id=”1380532703373-0-0″ icon=”moon-lamp-2″][vc_row_inner][vc_column_inner width=”1/2″ el_position=”first”][mk_image_slideshow images=”4627,4613,4629″ image_width=”300″ image_height=”200″ effect=”fade” animation_speed=”700″ slideshow_speed=”7000″ pause_on_hover=”false” smooth_height=”true” direction_nav=”true” width=”1/1″ el_position=”first last”][/vc_column_inner][vc_column_inner width=”1/2″ el_position=”last”][vc_column_text title=”Cras at tincidunt eros” disable_pattern=”false” align=”left” margin_bottom=”0″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Praesent ultricies, libero in sagittis egestas, risus mi pretium augue, non consequat neque elit ac odio. In tempor est tellus, non mattis mauris faucibus vitae. Cras at tincidunt eros. Nulla facilisi. Praesent et urna velit. Donec eget posuere ligula, ut mattis lorem. Nam ut augue eget metus laoreet feugiat.Aliquam molestie euismod vestibulum. Nullam dapibus augue id lorem auctor facilisis.

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tab][vc_tab title=”Tab Title 2″ tab_id=”1380532703696-0-1″ icon=”moon-heart-4″][vc_column_text title=”Donec eget posuere ligula” disable_pattern=”false” align=”left” margin_bottom=”0″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim eget risus at pharetra. Suspendisse blandit turpis velit, ut pharetra ipsum tincidunt a. Praesent ultricies, libero in sagittis egestas, risus mi pretium augue, non consequat neque elit ac odio. In tempor est tellus, non mattis mauris faucibus vitae. Cras at tincidunt eros. Nulla facilisi. Aliquam molestie euismod vestibulum. Nullam dapibus augue id lorem auctor facilisis. Praesent et urna velit. Donec eget posuere ligula, ut mattis lorem. Nam ut augue eget metus laoreet feugiat. Donec eu metus euismod, euismod metus at, vestibulum ante. Aliquam tempor ultrices tortor, at pulvinar velit faucibus in. Maecenas viverra nulla a volutpat pulvinar. Phasellus semper mi quis porta scelerisque. Proin gravida velit tellus, sempernon mattis mauris faucibus vitae. Cras at tincidunt eros. Nulla facilisi. Aliquam molestie euismod vestibulum. Nullam dapibus augue id lorem auctor facilisis. Praesent et urna velit. Donec eget posuere ligula, ut mattis lorem. Nam ut augue eget metus laoreet feugiat. Donec eu metus euismod, euismod metus at, vestibulum ante.

[/vc_column_text][/vc_tab][vc_tab title=”Tab Title 3″ tab_id=”1380532703809-0-6″ icon=”moon-file-3″][mk_custom_list style=”e328″ icon_color=”#00c8d7″ margin_bottom=”0″ width=”1/1″ el_position=”first last”]
  • Suspendisse blandit
  • Duis vestibulum quis
  • Maecenas pretium lobortis
  • Donec mollis
[/mk_custom_list][/vc_tab][/vc_tabs][/vc_column][vc_column width=”1/3″][vc_tabs orientation=”vertical” tab_location=”left” container_bg_color=”#ffffff”][vc_tab title=”Tab 1″ tab_id=”1380531424-1-17″][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”20″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Aliquam varius massa vel ante rhoncus eget semper tortor tincidunt. Nunc eu fermentum sem. Etiam semper enim sem, ut gravida tortor nisi consectetur iaculis accumsan. Aliquam varius massa vel ante rhoncus eget.

[/vc_column_text][mk_custom_list style=”e328″ icon_color=”#00c8d7″ margin_bottom=”0″ width=”1/1″ el_position=”first last”]
  • Suspendisse blandit
  • Duis vestibulum quis
  • Maecenas pretium lobortis
  • Donec mollis
[/mk_custom_list][/vc_tab][vc_tab title=”Tab 2″ tab_id=”1380531424-2-66″][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”0″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Aliquam varius massa vel ante rhoncus eget semper tortor tincidunt. Nunc eu fermentum sem. Etiam semper enim sem, ut gravida tortor nisi consectetur iaculis accumsan.

[/vc_column_text][/vc_tab][/vc_tabs][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][mk_fancy_title tag_name=”h1″ style=”false” color=”#333333″ size=”18″ font_weight=”bold” margin_top=”20″ margin_bottom=”40″ font_family=”none” align=”left” width=”1/1″ el_position=”first last”]

Vertical tabs – Right Side

[/mk_fancy_title][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_tabs orientation=”vertical” tab_location=”right” container_bg_color=”#ffffff”][vc_tab title=”Tab Title 1″ tab_id=”1380531424-1-17″][vc_row_inner][vc_column_inner width=”1/2″ el_position=”first”][mk_image_slideshow images=”4627,4613,4629″ image_width=”300″ image_height=”200″ effect=”fade” animation_speed=”700″ slideshow_speed=”7000″ pause_on_hover=”false” smooth_height=”true” direction_nav=”true” width=”1/1″ el_position=”first last”][/vc_column_inner][vc_column_inner width=”1/2″ el_position=”last”][vc_column_text title=”Cras at tincidunt eros” disable_pattern=”false” align=”left” margin_bottom=”0″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Praesent ultricies, libero in sagittis egestas, risus mi pretium augue, non consequat neque elit ac odio. In tempor est tellus, non mattis mauris faucibus vitae. Cras at tincidunt eros. Nulla facilisi. Praesent et urna velit. Donec eget posuere ligula, ut mattis lorem. Nam ut augue eget metus laoreet feugiat.Aliquam molestie euismod vestibulum. Nullam dapibus augue id lorem auctor facilisis.

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tab][vc_tab title=”Tab Title 2″ tab_id=”1380531424-2-66″][vc_column_text title=”Donec eget posuere ligula” disable_pattern=”false” align=”left” margin_bottom=”0″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim eget risus at pharetra. Suspendisse blandit turpis velit, ut pharetra ipsum tincidunt a. Praesent ultricies, libero in sagittis egestas, risus mi pretium augue, non consequat neque elit ac odio. In tempor est tellus, non mattis mauris faucibus vitae. Cras at tincidunt eros. Nulla facilisi. Aliquam molestie euismod vestibulum. Nullam dapibus augue id lorem auctor facilisis. Praesent et urna velit. Donec eget posuere ligula, ut mattis lorem. Nam ut augue eget metus laoreet feugiat. Donec eu metus euismod, euismod metus at, vestibulum ante. Aliquam tempor ultrices tortor, at pulvinar velit faucibus in. Maecenas viverra nulla a volutpat pulvinar. Phasellus semper mi quis porta scelerisque. Proin gravida velit tellus, sempernon mattis mauris faucibus vitae. Cras at tincidunt eros. Nulla facilisi. Aliquam molestie euismod vestibulum. Nullam dapibus augue id lorem auctor facilisis. Praesent et urna velit. Donec eget posuere ligula, ut mattis lorem. Nam ut augue eget metus laoreet feugiat. Donec eu metus euismod, euismod metus at, vestibulum ante.

[/vc_column_text][/vc_tab][vc_tab title=”Tab Title 3″ tab_id=”1380532554343-2-6″][mk_custom_list style=”e328″ icon_color=”#00c8d7″ margin_bottom=”0″ width=”1/1″ el_position=”first last”]
  • Suspendisse blandit
  • Duis vestibulum quis
  • Maecenas pretium lobortis
  • Donec mollis
[/mk_custom_list][/vc_tab][/vc_tabs][/vc_column][vc_column width=”1/3″][vc_tabs orientation=”vertical” tab_location=”right” container_bg_color=”#ffffff”][vc_tab title=”Tab 1″ tab_id=”1380532734974-0-7″][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”20″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Aliquam varius massa vel ante rhoncus eget semper tortor tincidunt. Nunc eu fermentum sem. Etiam semper enim sem, ut gravida tortor nisi consectetur iaculis accumsan. Aliquam varius massa vel ante rhoncus eget.

[/vc_column_text][mk_custom_list style=”e328″ icon_color=”#00c8d7″ margin_bottom=”0″ width=”1/1″ el_position=”first last”]
  • Suspendisse blandit
  • Duis vestibulum quis
  • Maecenas pretium lobortis
  • Donec mollis
[/mk_custom_list][/vc_tab][vc_tab title=”Tab 2″ tab_id=”1380532735128-0-10″][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”0″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Aliquam varius massa vel ante rhoncus eget semper tortor tincidunt. Nunc eu fermentum sem. Etiam semper enim sem, ut gravida tortor nisi consectetur iaculis accumsan.

[/vc_column_text][/vc_tab][/vc_tabs][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][mk_padding_divider size=”30″ width=”1/1″ el_position=”first last”][/vc_column][/vc_row][mk_page_section border_color=”#00c8d7″ bg_color=”#00c8d7″ attachment=”scroll” bg_position=”left top” bg_stretch=”false” enable_3d=”false” speed_factor=”0″ section_layout=”full” sidebar=”Shortcodes” min_height=”100″ padding_top=”50″ padding_bottom=”50″ margin_bottom=”0″ last_page=”true” width=”1/1″ el_position=”first last” bg_repeat=”repeat” bg_video=”no” video_mask=”false” top_shadow=”false” first_page=”false”][vc_column width=”1/2″][mk_icon_box title=”Each tab. An icon.” text_size=”16″ font_weight=”inhert” icon=”icon-rocket” style=”simple_ultimate” icon_size=”medium” icon_location=”left” circled=”false” icon_color=”#46525e” icon_circle_color=”#0bb697″ box_blur=”false” title_color=”#ffffff” txt_color=”#404b57″ margin=”0″ width=”1/1″ el_position=”last”]

Standard tabs now present more interesting titles. It is not just a title anymore but a vector icon added as well. Tab shortcode options allow you to choose among 1600+ icons and assign to each tab title.

[/mk_icon_box][/vc_column][vc_column width=”1/2″][mk_icon_box title=”Dynamic contents” text_size=”16″ font_weight=”inhert” icon=”icon-bolt” style=”simple_ultimate” icon_size=”medium” icon_location=”left” circled=”false” icon_color=”#46525e” icon_circle_color=”#0bb697″ box_blur=”false” title_color=”#ffffff” txt_color=”#404b57″ margin=”0″ width=”1/1″ el_position=”first”]

News tab is a dynamic showcase of your last news and articles. Unlike regular tabs you do not need to insert content inside each tab. They automatically display latest contents of your website.

[/mk_icon_box][/vc_column][/mk_page_section]