Shortcode “Tabs” (with scrolling)
Shortcode text for example below:
<div class="sc_tabs sc_tabs_style_1 height_style_1" data-active="0"> <ul class="sc_tabs_titles"> <li class="tab_names first"> <a href="#sc_tabs_1_1" class="theme_button" id="sc_tabs_1_1_tab">Tab images 1</a> </li> <li class="tab_names last"> <a href="#sc_tabs_1_2" class="theme_button" id="sc_tabs_1_2_tab">Tab images 2</a> </li> </ul> <div id="sc_tabs_1_1" class="sc_tabs_content odd first"> <div id="sc_tabs_1_1_scroll" class="sc_scroll sc_scroll_vertical"> <div class="sc_scroll_wrapper swiper-wrapper"> <div class="sc_scroll_slide swiper-slide"> <figure class="sc_image sc_image_align_left sc_image_shape_square margin_right_small"> <img src="images/kaboompics.com_Wooden-decorations-160x106.jpg" alt="" /> </figure> <h4 class="sc_title sc_title_regular"> Lorem ipsum dolor sit amet, consectetur</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis <div class="sc_line sc_line_style_solid margin_top_mini"> </div> <figure class="sc_image sc_image_align_left sc_image_shape_square margin_right_small"> <img src="images/Depositphotos_30042823_original-160x120.jpg" alt="" /> </figure> <h4 class="sc_title sc_title_regular"> Lorem ipsum dolor sit amet, consectetur</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis <div class="sc_line sc_line_style_solid margin_top_mini"> </div> <figure class="sc_image sc_image_align_left sc_image_shape_square margin_right_small"> <img src="images/Depositphotos_10321051_original-160x106.jpg" alt="" /> </figure> <h4 class="sc_title sc_title_regular"> Lorem ipsum dolor sit amet, consectetur</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis <div class="sc_line sc_line_style_solid margin_top_mini"> </div> <figure class="sc_image sc_image_align_left sc_image_shape_square margin_right_small"> <img src="images/Depositphotos_4641223_original-160x107.jpg" alt="" /> </figure> <h4 class="sc_title sc_title_regular"> Lorem ipsum dolor sit amet, consectetur</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis <div class="sc_line sc_line_style_solid margin_top_mini"> </div> <figure class="sc_image sc_image_align_left sc_image_shape_square margin_right_small"> <img src="images/kaboompics.com_Words-on-the-wall-160x146.jpg" alt="" /> </figure> <h4 class="sc_title sc_title_regular"> Lorem ipsum dolor sit amet, consectetur</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis </div> </div> <div id="sc_tabs_1_1_scroll_bar" class="sc_scroll_bar sc_scroll_bar_vertical sc_tabs_1_1_scroll_bar"> </div> </div> </div> <div id="sc_tabs_1_2" class="sc_tabs_content even"> <div id="sc_tabs_1_2_scroll" class="sc_scroll sc_scroll_vertical"> <div class="sc_scroll_wrapper swiper-wrapper"> <div class="sc_scroll_slide swiper-slide"> <figure class="sc_image sc_image_align_left sc_image_shape_square margin_right_small"> <img src="images/Depositphotos_22252685_original-160x106.jpg" alt="" /> </figure> <h4 class="sc_title sc_title_regular"> Lorem ipsum dolor sit amet, consectetur</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis <div class="sc_line sc_line_style_solid margin_top_mini"> </div> <figure class="sc_image sc_image_align_left sc_image_shape_square margin_right_small"> <img src="images/Depositphotos_4641223_original-160x107.jpg" alt="" /> </figure> <h4 class="sc_title sc_title_regular"> Lorem ipsum dolor sit amet, consectetur</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis <div class="sc_line sc_line_style_solid margin_top_mini"> </div> <figure class="sc_image sc_image_align_left sc_image_shape_square margin_right_small"> <img src="images/kaboompics.com_Old-building-160x106.jpg" alt="" /> </figure> <h4 class="sc_title sc_title_regular"> Lorem ipsum dolor sit amet, consectetur</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis <div class="sc_line sc_line_style_solid margin_top_mini"> </div> <figure class="sc_image sc_image_align_left sc_image_shape_square margin_right_small"> <img src="images/kaboompics.com_Great-architects-book-wooden-shelf-160x106.jpg" alt="" /> </figure> <h4 class="sc_title sc_title_regular"> Lorem ipsum dolor sit amet, consectetur</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis <div class="sc_line sc_line_style_solid margin_top_mini"> </div> <figure class="sc_image sc_image_align_left sc_image_shape_square margin_right_small"> <img src="images/projects-5-160x106.jpg" alt="" /> </figure> <h4 class="sc_title sc_title_regular"> Lorem ipsum dolor sit amet, consectetur</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis </div> </div> <div id="sc_tabs_1_2_scroll_bar" class="sc_scroll_bar sc_scroll_bar_vertical sc_tabs_1_2_scroll_bar"> </div> </div> </div> </div>
Tabs
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, a, illo est consequatur quam minus repudiandae. Labore minima maxime consequatur quidem beatae vero hic sequi! Maiores, voluptate, optio, architecto neque iure assumenda obcaecati quam repellendus amet rem iusto dolore harum maxime aspernatur cupiditate eius magni cumque ratione nisi placeat sequi. Quisquam vitae aspernatur corporis dolore dolores voluptatem numquam natus sed ea laborum! At, officia, aliquam quis nemo alias id atque dolore eveniet dicta optio eligendi iusto. Suscipit, quaerat ab laborum modi incidunt saepe molestias quas amet.
Exercitationem, impedit id repudiandae modi aut nulla veritatis praesentium qui sit perferendis ab doloremque laborum reprehenderit corrupti ut. Ducimus, cumque quia reprehenderit harum cupiditate fuga non quibusdam ullam provident ex! Ad, aliquid, corporis accusamus repellat autem maxime nihil voluptas iusto quia repudiandae consequatur provident inventore fuga ipsam molestias facere similique nemo non repellendus nam ab amet dolores atque iure porro obcaecati velit dolorem delectus cumque! Possimus, ipsa, consequuntur, sequi, voluptas non corrupti ut quia quod quo nam blanditiis sint libero est dolor aperiam laudantium molestiae ad earum sapiente id animi accusamus consectetur! Rerum, tenetur eligendi impedit corporis eveniet sunt sed id minus fugiat ducimus dolor consequatur deleniti odit sint reiciendis nesciunt harum quo magnam mollitia accusamus ipsum error fuga libero facere quaerat laboriosam dolorum!
Tabs (style 2)
Title 1 with icon left
Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.Title 1 with icon left
Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.Title 1 with icon left
Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.Title 1 with icon left
Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.Shortcode “Tabs” (without scrolling)
Shortcode text for example below:
<div class="sc_tabs sc_tabs_style_2" data-active="0"> <ul class="sc_tabs_titles"> <li class="tab_names first"> <a href="#sc_tabs_2_1" class="theme_button" id="sc_tabs_2_1_tab">Tab 1</a> </li> <li class="tab_names last"> <a href="#sc_tabs_2_2" class="theme_button" id="sc_tabs_2_2_tab">Tab 2</a> </li> </ul> <div id="sc_tabs_2_1" class="sc_tabs_content odd first"> <div class="sc_title_icon sc_title_left sc_size_medium icon-twitter sc_title_bg sc_bg_circle"> </div> <h4 class="sc_title sc_title_iconed">Title 1 with icon left</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor. <div class="sc_line sc_line_style_solid"> </div> <div class="sc_title_icon sc_title_left sc_size_medium icon-chart-pie"> </div> <h4 class="sc_title sc_title_iconed">Title 1 with icon left</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor. </div> <div id="sc_tabs_2_2" class="sc_tabs_content even"> <div class="sc_title_icon sc_title_left sc_size_medium icon-diamond"> </div> <h4 class="sc_title sc_title_iconed">Title 1 with icon left</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor. <div class="sc_line sc_line_style_solid"> </div> <div class="sc_title_icon sc_title_left sc_size_medium icon-skype-1 sc_title_bg sc_bg_circle"> </div> <h4 class="sc_title sc_title_iconed">Title 1 with icon left</h4> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor. </div> </div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, beatae, velit, mollitia debitis vel magni minus itaque numquam laborum eligendi repellat incidunt ad dolor laudantium nobis cumque quaerat vitae recusandae excepturi reprehenderit eaque in quia odit consectetur quasi doloremque omnis officia nisi aperiam maiores ipsa maxime nemo ipsam ea explicabo rerum illum dolorem! Quas, aliquid reprehenderit magnam neque minus dolore perferendis eius quo deserunt. Explicabo, fugit, cupiditate vel asperiores assumenda in a quis reprehenderit quo aut harum optio ad voluptatum omnis pariatur error dolore incidunt ducimus libero expedita voluptate saepe praesentium doloremque quisquam accusantium ipsa possimus quidem architecto eius odio dolor dolorem quod iusto. Dicta, suscipit, necessitatibus, placeat, rerum officia quia mollitia quos nisi
Similique laboriosam facere perferendis rem nemo illo itaque non ut voluptas tempore amet minus nostrum modi reprehenderit in magni quasi cumque possimus a autem repellat. Tempora, itaque, possimus laboriosam ipsa vitae recusandae eos cum quasi laborum dolores rerum velit asperiores qui. Odit, dolorum, itaque laudantium quam sed unde saepe consequatur eligendi nesciunt in provident aperiam sit quas ipsa accusamus voluptatum deleniti soluta cupiditate facere dolor veritatis quo ut dolores quos eaque temporibus accusantium officia vero voluptates quae. Maxime, perspiciatis, saepe. Ex, vitae, dolorum, eligendi atque necessitatibus animi similique maxime cupiditate obcaecati porro in libero fuga nisi at exercitationem vel officia! Dolor doloremque illo vel est unde.