Tabs module - Event Engine

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Tabs module - Event Engine</title> <meta name="viewport" content="width=device-width, maximum-scale=1"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="format-detection" content="telephone=no"> <meta name="description" content="The tab module allows you to create sections within your content rather than showing it in the default format. Simply drag the tab module from the modules tray "/> <meta name="author" content="Event Engine CMS Ltd"/> <link rel="canonical" href="https://help.eventengine.tv/article/27-tabs-module"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:title" content="Tabs module" /> <meta name="twitter:description" content="The tab module allows you to create sections within your content rather than showing it in the default format. Simply drag the tab module from the modules tray "/> <link rel="stylesheet" href="//d3eto7onm69fcz.cloudfront.net/assets/stylesheets/launch-1739325674032.css"> <style> body { background: #ffffff; } .navbar .navbar-inner { background: #4169ea; } .navbar .nav li a, .navbar .icon-private-w { color: #ffffff; } .navbar .brand, .navbar .nav li a:hover, .navbar .nav li a:focus, .navbar .nav .active a, .navbar .nav .active a:hover, .navbar .nav .active a:focus { color: #ffffff; } .navbar a:hover .icon-private-w, .navbar a:focus .icon-private-w, .navbar .active a .icon-private-w, .navbar .active a:hover .icon-private-w, .navbar .active a:focus .icon-private-w { color: #ffffff; } #serp-dd .result a:hover, #serp-dd .result > li.active, #fullArticle strong a, #fullArticle a strong, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count { color: #4169ea; } #fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table { color:#151c32; } </style> <link rel="apple-touch-icon-precomposed" href="//d3eto7onm69fcz.cloudfront.net/assets/ico/touch-152.png"> <link rel="shortcut icon" type="image/png" href="//d3eto7onm69fcz.cloudfront.net/assets/ico/favicon.ico">  <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebSite","url":"https://help.eventengine.tv","potentialAction":{"@type":"SearchAction","target":"https://help.eventengine.tv/search?query={query}","query-input":"required name=query"}} </script> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Event Engine","item":"https://help.eventengine.tv"},{"@type":"ListItem","position":2,"name":"Event Engine","item":"https://help.eventengine.tv/collection/1-event-engine"},{"@type":"ListItem","position":3,"name":"Tabs module","item":"https://help.eventengine.tv/article/27-tabs-module"}]} </script> <style> @import url('https://fonts.googleapis.com/css?family=Poppins:400,600'); body { font-family: 'Poppins', sans-serif; } .navbar-inner { background: #151c32 !important; padding-top: 5px; padding-bottom:5px; } a.brand span { font-weight: 600; font-size: 34px; } h1,h2,h3,h4,h5,h6,h1.title { font-weight:600; } #searchBar button { background: #4169ea; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; </style> </head> <body> <header id="mainNav" class="navbar"> <div class="navbar-inner"> <div class="container-fluid"> <a class="brand" href="https://eventengine.tv"> <span>Event Engine</span> </a> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="nav-collapse collapse"> <nav role="navigation"> <ul class="nav"> <li id="home"><a href="/">Knowledgebase <b class="caret"></b></a></li> <li id="contact"><a href="#" class="contactUs" onclick="window.Beacon('open')">Contact</a></li> <li id="contactMobile"><a href="#" class="contactUs" onclick="window.Beacon('open')">Contact</a></li> </ul> </nav> </div> </div> </div> </header> <section id="contentArea" class="container-fluid"> <div class="row-fluid"> <section id="main-content" class="span9"> <div class="contentWrapper"> <article id="fullArticle"> <h1 class="title">Tabs module</h1> <a href="javascript:window.print()" class="printArticle" title="Print this article" aria-label="Print this Article"><i class="icon-print"></i></a> <p>The tab module allows you to create sections within your content rather than showing it in the default format.</p> <p>Simply drag the tab module from the modules tray into the page where you want it to appear.</p> <h2>General configuration</h2> <p>Use the popup configuration panel that appears which allows you to add your tabs and the content for each one that you would like to show. To edit the styling of your tabs you can do so via the 'Style' tab mentioned below.</p> <p><img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5cb097e80428631d263c1114/file-6VG0oh3jnL.png"></p> <p>When selecting the add item option you will be asked to enter a label for that tab and then input your content.</p> <h2>Styling the tabs</h2> <p>Within the module there is the option for global styling of the whole module which is under the ‘Style’ tab which allows you to control:</p> <ul> <li>border styling</li> <li>layout</li> </ul> <p><img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5cb097f62c7d3a392f9cfa83/file-9juH7dme4p.png"></p> <p>Finally the advanced tab allows for responsive settings, entry animations and more.</p> <p>Press “Save” to lock in your changes.</p> </article> <section class="articleFoot"> <i class="icon-contact"></i> <p class="help">Still need help? <a id="sbContact" href="#" class="contactUs" onclick="window.Beacon('open')">Contact Us</a> <a id="sbContactMobile" href="#" class="contactUs" onclick="window.Beacon('open')">Contact Us</a> </p> <time class="lu" datetime=2019-04-12 >Last updated on April 12, 2019</time> </section> </div> </section> <aside id="sidebar" class="span3"> <form action="/search" method="GET" id="searchBar" class="sm" autocomplete="off"> <input type="hidden" name="collectionId" value="5cace8c80428631d263beccd"/> <input type="text" name="query" title="search-query" class="search-query" placeholder="Search" value="" aria-label="Search" /> <button type="submit"> <span class="sr-only">Toggle Search</span> <i class="icon-search"></i> </button> <div id="serp-dd" style="display: none;" class="sb"> <ul class="result"> </ul> </div> </form> <h3>Categories</h3> <ul class="nav nav-list"> <li ><a href="/category/4-getting-started">Getting started <i class="icon-arrow"></i></a></li> <li ><a href="/category/64-responsive-design">Responsive Design <i class="icon-arrow"></i></a></li> <li ><a href="/category/98-troubleshooting">Troubleshooting <i class="icon-arrow"></i></a></li> <li class="active" ><a href="/category/5-page-builder">Page Builder <i class="icon-arrow"></i></a></li> <li ><a href="/category/6-customization">Customization <i class="icon-arrow"></i></a></li> <li ><a href="/category/7-design">Design <i class="icon-arrow"></i></a></li> <li ><a href="/category/8-blogging">Blogging <i class="icon-arrow"></i></a></li> <li ><a href="/category/15-forms">Forms <i class="icon-arrow"></i></a></li> </ul> </aside> </div> <div id="noResults" style="display:none;">No results found</div> <footer> <p>© <a href="https://eventengine.tv">Event Engine CMS Ltd</a> 2025. <span>Powered by <a rel="nofollow noopener noreferrer" href="https://www.helpscout.com/docs-refer/?co=Event+Engine+CMS+Ltd&utm_source=docs&utm_medium=footerlink&utm_campaign=Docs+Branding" target="_blank">Help Scout</a></span> </p> </footer> </section> <script id="beaconLoader" type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script> <script type="text/javascript">window.Beacon('init', '25503943-ccaa-4154-8c3c-1ad11629d331')</script> <script type="text/javascript"> function hashChanged() { var hash = window.location.hash.substring(1); if (hash === 'contact') { window.Beacon('open') } } if (window.location.hash) { hashChanged() } window.onhashchange = function () { hashChanged() } window.addEventListener('hashchange', hashChanged, false); </script> <script src="//d3eto7onm69fcz.cloudfront.net/assets/javascripts/app3.min.js"></script> <script> // keep iOS links from opening safari if(("standalone" in window.navigator) && window.navigator.standalone){ // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true var noddy, remotes = false; document.addEventListener('click', function(event) { noddy = event.target; while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") { noddy = noddy.parentNode; } if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)){ event.preventDefault(); document.location.href = noddy.href; } },false); } </script> </body> </html>

CINXE.COM

Tabs module - Event Engine