The new tabs style :




1. The Shortcode for the Tabs  (in text mode):


  

<p>[tabs style="" theme=] [tab title="Explore" icon=""]</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>TAUGHT BY HIGHLY <strong><span style="color: #ff6600;">EXPERIENCED</span> INSTRUCTOR&nbsp;</strong><br /> &amp; LOVED BY <strong><span style="color: #ff6600;">THOUSANDS</span> OF&nbsp;STUDENTS.</strong></h2>
<p style="text-align: center;">[one_third first=first]</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-43" src="http://vibethemes.com/envato/wplms/skins/onecourse/wp-content/uploads/2015/04/jobs.jpg" alt="jobs" width="460" height="460" /></p>
<h3 style="text-align: center;">Lupin Remus</h3>
<p style="text-align: center;"><span style="color: #999999;"><em>Michigan University</em></span></p>
<p style="text-align: center;">[/one_third] [one_third first=]</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-44" src="http://vibethemes.com/envato/wplms/skins/onecourse/wp-content/uploads/2015/04/col.jpg" alt="col" width="460" height="460" /></p>
<h3 style="text-align: center;">Angelina Thomas</h3>
<p style="text-align: center;"><span style="color: #999999;"><em>Chicago&nbsp;University</em></span></p>
<p style="text-align: center;">[/one_third] [one_third first=]</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-45" src="http://vibethemes.com/envato/wplms/skins/onecourse/wp-content/uploads/2015/04/steve.jpg" alt="steve" width="460" height="460" /></p>
<h3 style="text-align: center;">William Jones</h3>
<p style="text-align: center;"><span style="color: #999999;"><em>London University</em></span></p>
<p style="text-align: center;">[/one_third]</p>
<p>[/tab] [tab title="Recognition" icon=""][one_half]</p>
<p>&nbsp;</p>
<p><a href="http://vibethemes.com/envato/wplms/skins/oneinstructor/wp-content/uploads/2015/04/studying.png"><img class="alignnone size-full wp-image-40" src="http://vibethemes.com/envato/wplms/skins/oneinstructor/wp-content/uploads/2015/04/studying.png" alt="studying" width="446" height="356" /></a></p>
<p>[/one_half][one_half]</p>
<h2>&nbsp;</h2>
<p>&nbsp;</p>
<h2>GET MORE FROM <span style="color: #ff6600;">TEACHING</span><br /> BY INSTRUCTING MORE STUDENTS&nbsp;<strong><span style="color: #ff6600;">ONLINE.</span>&nbsp;</strong></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>[button url="#pricing"]Get started now[/button]</p>
<p>[/one_half][/tab] [tab title="Satisfaction" icon=""]</p>
<h2>&nbsp;</h2>
<p>&nbsp;</p>
<h2>ONLINE EDUCATION WITH <span style="color: #ff6600;">BEST RESULTS</span><br /> AND&nbsp;GUARENTEED&nbsp;<strong><span style="color: #ff6600;">SATISFACTION.</span></strong></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>[button url="#pricing"]Get started now[/button]</p>
<p>[/tab] [/tabs]</p>

 


2.  Add custom Class on block : moderntabs and add custom CSS :




3.  Add this css in Theme customiser - Custom CSS or in Child theme - style.css or in wplms customiser - customiser.css


 

.moderntabs{text-align:center;}
.moderntabs .tabs{display:inline-block;border:none;}.moderntabs .tabs .nav.nav-tabs{display:inline-block;}
.moderntabs .nav.nav-tabs > li > a {  padding: 10px 24px;  border: 2px solid #222;  border-right: none;  border-radius: 0;}
.moderntabs .nav.nav-tabs > li:last-child > a{border-right:2px solid #222;}
.moderntabs .nav-tabs > li.active > a,.moderntabs .nav-tabs > li> a:hover, .moderntabs .nav-tabs > li.active > a:hover,.moderntabs  .nav-tabs > li.active > a:focus{background:#222;color:#fff;border-color:#222;}