{"id":16614,"date":"2020-11-28T17:00:17","date_gmt":"2020-11-28T16:00:17","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=16614"},"modified":"2023-01-19T11:32:47","modified_gmt":"2023-01-19T10:32:47","slug":"how-to-create-tabbed-content-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-tabbed-content-wordpress\/","title":{"rendered":"How to Create Tabbed Content in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]While indispensible in transferring information, large chunks of text have a tendency of looking scary and\/or boring \u2013 not good UX, in either case. Readers prefer short sentences and smaller blocks of text. But what if there were a way to make your text appear smaller, though it is only broken down into more \u201cdigestible\u201d units, without a need to sacrifice any of the important details?<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Tabs <strong>save space<\/strong> and make your text <strong>better organized and more manageable<\/strong>, making them especially useful for user instructions and similar text. It is also a great way to make very long text seem <strong>shorter and more friendly to the reader<\/strong>. If you feel like your WordPress website could use tabbed content, you are in the right place.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]WordPress does not offer this functionality by default, unfortunately. However, plenty of <a href=\"https:\/\/qodeinteractive.com\/theme-shortcode\/tabs-wordpress-themes\/\">themes with the Tabs functionality<\/a> exist already, and these are always our first choice. If you don\u2019t have the budget for a theme which has an in-build tab functionality, if you have already built a website using a theme you are loath to change, or prefer working from the ground up, there is an easy way to sort and organize your content into tabs using the <strong>Elementor<\/strong> page editor, or using a plugin. We will show you both.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But firstly, we would like to discuss tabs and why they are useful to you and attractive to your users. If you have already decided you want to use tabs to display your content, you can just jump down to the tab creation methods you prefer.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-are-tabs-useful\">Why Are Tabs Useful?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#horizontal-tabs-with-qi-addons-for-elementor\">How to Create Horizontal Tabs Using Qi Addons For Elementor <\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#vertical-tabs-with-qi-addons-for-elementor\">How to Use Qi Addons For Elementor to Create Vertical Tabs<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-tabbed-content-in-block-editor\">How to Add Tabbed Content in WordPress Block Editor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-create-tabs-using-the-wp-tabs-plugin\">How to Create Tabs Using the WP Tabs Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-are-tabs-useful\"><\/a>Why Are Tabs Useful?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Firstly, tabs allow you to <strong>organize your content into logical wholes<\/strong>. Your visitors do not need to navigate to different pages to maintain access to your content, and can easily find the bit of it they need by clicking on the tab heading. Think of it as having multiple tabs open in your browser, except all the tabs are related to each other and all concern what you came for in the first place: a bulk of content is instantly easily legible. This, of course, goes only for information which does not need to be compared or accessed simultaneously.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Secondly, the <strong>order of the tabs<\/strong> is content in itself. Think of your tab headings as chapter titles. They should correspond to a logical order of steps (in an instruction text, for instance), or levels of complexity or difficulty, allowing your users to know at a glance which parts of your content are immediately relevant to their interests.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And thirdly, <strong>tabs mean interactivity<\/strong>. They contribute to user engagement, which makes for an overall better experience, as the user gets better control of the content they want to see. Also, for users with shorter attention spans, more interactivity means easier getting around. Of course, this means it is up to you to create a logical and intuitive system of tabs in the first place. Otherwise, the users will be easily frustrated and give up.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now, if you think your content can benefit from being organized into tabs, let\u2019s get down to the brass tacks.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"horizontal-tabs-with-qi-addons-for-elementor\"><\/a>How to Create Horizontal Tabs Using Qi Addons For Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]Elementor is one of the most popular page builders out there, and for good reason. It&#8217;s fast, has an intuitive drag-and-drop interface, and even its free version offers lots of useful widgets, including tabs. However, the basic tabs widget for Elementor is, well, basic. Fortunately, <strong>our proprietary set of advanced elements<\/strong>, <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons For Elementor<\/a>, has you covered. Our (completely free) plugin contains <strong>a selection of 60 widgets<\/strong> which greatly expand Elementor\u2019s original capabilities and each one is designed with versatility in mind.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And among them you shouldn\u2019t be surprised to find <strong>beautiful and functional solutions<\/strong> for both <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/horizontal-tabs\/\">horizontal tabs<\/a> and <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/vertical-tabs\/\">vertical tabs<\/a>. In this section, we will show you how to create a set of horizontal tabs, while the vertical tabs will be demonstrated in the section below. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first thing you need to do is to <strong>install and activate the Qi Addons For Elementor plugin<\/strong>. Just make sure you also have the latest version (free or premium) of Elementor installed beforehand. Once you have done that, you will have 60 brand-new elements to choose from.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We have a video tutorial to show you how you can use Qi Addons to create horizontal tabs. If you prefer a text tutorial, just scroll right down: [\/vc_column_text][vc_empty_space height=&#8221;41px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/MVQxWywDFWo\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]Adding a Qi widget works just the same as it does with other Elementor widgets: simply drag it from the left-hand side menu to the desired widget area.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Drag-and-Drop-Horizontal-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Drag and Drop Horizontal Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Drag-and-Drop-Horizontal-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Drag-and-Drop-Horizontal-Tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Drag-and-Drop-Horizontal-Tab-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Drag-and-Drop-Horizontal-Tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]It will come with two placeholder tabs filled out with <a href=\"https:\/\/qodeinteractive.com\/magazine\/lorem-ipsum\/\">Lorem ipsum<\/a> text. Now, while the element is selected, you will see the <strong>General<\/strong> tab opened by default. You can use the <strong>+ Add Item<\/strong> button to add a tab, or<strong> Item<\/strong>. And you can use each <strong>Item<\/strong> section to change the title and contents of each tab. We have shortened the placeholder text, added an item (a third tab), and changed the tab titles.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"873\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Edit-Items-General-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Edit Items General Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Edit-Items-General-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Edit-Items-General-Tab-300x270.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Edit-Items-General-Tab-768x692.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Edit-Items-General-Tab-620x559.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, to really make our tabs stand out, we need to take a look at the styling options. They are located in the main (<strong>Style<\/strong>) section of the <strong>Style<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first option is the <strong>Individual Tab Alignment<\/strong>. This option is only relevant if you choose to change the title spacing, which we will explain later. Keeping it <em>centered<\/em>, as we have, will snap the title to the center of the protruding bit of the tab.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next down, we have some tab title options. You can change the <em>Heading<\/em> tag, but we will leave it as is. Clicking on the <strong>pencil<\/strong> icon will uncover some additional typography options. They are all more or less self-explanatory. We will only slide our <strong>Size<\/strong> slider to change the font size to 21 pixels.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the drop-down menus you can find the options for font <strong>Weight<\/strong> (boldness), case (under <strong>Transform<\/strong>), italics and other typography styles (under <strong>Style<\/strong>), and underlining, strikethroughs and similar effects (under <strong>Decoration<\/strong>).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"744\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Horizontal Tabs Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Style-Tab-300x230.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Style-Tab-768x590.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Style-Tab-620x476.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next down is the <strong>Normal &#8211; Active\/Hover<\/strong> toggle. You can use this toggle to select which tabs\u2019 settings you mean to change. While the toggle is set at the default <strong>Normal<\/strong>, every option we modify will affect the inactive tabs. If we switch it to <strong>Active\/Hover<\/strong>, we will get a new set of options that affects the look of the tabs when they are active or hovered on.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To make the inactive tabs stand out a little better, we\u2019ll need the next option down: <strong>Title Color<\/strong>. Clicking the icon on the right-hand side, we can pick or enter the <a href=\"https:\/\/htmlcolorcodes.com\/\" target=\"_blank\" rel=\"noopener\">hex code<\/a> value. We went with #000000 for black.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"697\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Normal-Hover.jpg\" class=\"attachment-full size-full\" alt=\"Horizontal Tabs Normal Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Normal-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Normal-Hover-300x216.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Normal-Hover-768x552.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Normal-Hover-620x446.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But now we don\u2019t know which of the tabs is currently active. That\u2019s not a problem: all we have to do is switch the toggle to <strong>Active\/Hover<\/strong> and find the colour option again. This time, we have gone with #EE5151 for a brick red. It goes without saying that you can use whichever colours fit your website\u2019s overall style.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"689\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Active-Hover.jpg\" class=\"attachment-full size-full\" alt=\"Horizontal Tabs Active Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Active-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Active-Hover-300x213.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Active-Hover-768x546.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Active-Hover-620x441.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We will select the same colour for the<strong> Title Active\/Hover Underline Color<\/strong> below, to make it stand out even more.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Simply selecting the colour will not show the underline, though. We will also need to give it a thickness and position it. We will set the <strong>Title Active\/Hover Underline Height<\/strong> slider to 3 pixels, giving our underline some heft. The <strong>Title Active\/Hover Underline Offset<\/strong> governs the position of the underline in relation to the tab title. We will set it at -2 pixels, a little bit away from the title, so it doesn\u2019t touch the tail of the Y. The<strong> Title Active\/Hover Underline Draw<\/strong> menu is left at its default setting, which is <em>From Left<\/em>. This is the direction of the on-hover animation.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can also change the<strong> Background Type<\/strong> of your tab section. We like our tabs neat as they are, so we won\u2019t use a background for this demonstration, but you have the choice between a background image and a gradient.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Style-Options.jpg\" class=\"attachment-full size-full\" alt=\"Horizontal Tabs Style Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Style-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Style-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Style-Options-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Style-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We will use the <strong>Border Type<\/strong> control to add an underline to our tabs and outline them a little bit better. We will set the <strong>Border Type<\/strong> to solid, but we don\u2019t want it to go all the way around our content box. We want to only set the <em>top<\/em> width to 1 pixel, and leave the others at 0. This way, only the top border will be visible. To do this, we first need to unlink the values by clicking on the link button. This lets us change each border (top, right, bottom, left) separately, instead of setting a single value that will apply to all four borders. We will also set the <strong>Color<\/strong> to #CCCCCC (a pale grey).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Border-Style.jpg\" class=\"attachment-full size-full\" alt=\"Horizontal Tabs Border Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Border-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Border-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Border-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tabs-Border-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The remainder of the options in the main section of the <strong>Style<\/strong> tab are to do with the look of the textual content in your tabs. We will leave them as they are.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The next section in the <strong>Style<\/strong> tab is<strong> Spacing Style<\/strong>. Here you can set up the paddings and margins of your tab titles and content.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you want to set different values for different sides, click your <strong>link<\/strong> button to the right of the value fields, as we have done with the<strong> Border Type<\/strong> in the previous step..[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To achieve the effect you see below, we have added extra padding to the <strong>Title<\/strong>: 15 pixels each to the <em>right<\/em> and <em>left<\/em>, and 14 for the <em>bottom<\/em>. We have also added 26 pixels to the <em>top<\/em> of the <strong>Content<\/strong>, and 35 pixels to the <em>right<\/em> title margin. This makes the titles more easily clickable.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tab-Spacing-Style.jpg\" class=\"attachment-full size-full\" alt=\"Horizontal Tab Spacing Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tab-Spacing-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tab-Spacing-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tab-Spacing-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Horizontal-Tab-Spacing-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, this is just one of an infinite number of ways you can use Qi Addons to set up your horizontal tabs. As you can see, the horizontal tabs widget offers a myriad of options that let you create any type of tab you can think of and customize its style to perfectly fit your vision.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"vertical-tabs-with-qi-addons-for-elementor\"><\/a>How to Use Qi Addons For Elementor to Create Vertical Tabs<\/h2>\n<p>[\/vc_column_text][vc_column_text]Another popular way of displaying tabbed content is using <strong>vertical tabs<\/strong>. And, as we have mentioned before, <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/vertical-tabs\/\">vertical tabs<\/a> are one of <strong>sixty elegant, versatile, expertly designed widgets<\/strong> Qi Addons For Elementor has to offer. We will show you how to set up one of literally countless versions of the widget.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We have a video tutorial on this widget too, so if this format suits you better, give it a peek:[\/vc_column_text][vc_empty_space height=&#8221;41px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/4Aw9qk05M3w\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]If you prefer textual guides, though, we will take you step by step through the process.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After having installed and activated <strong>Elementor<\/strong> and <strong>Qi Addons For Elementor<\/strong>, begin as you would with any Elementor element: find the <strong>Vertical Tabs<\/strong> widget in the left-hand side menu either by scrolling or by searching, and drag it to where you want it on the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/1-Qi-addons-Vertical-Tabs.jpg\" class=\"attachment-full size-full\" alt=\"Qi addons Vertical Tabs\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/1-Qi-addons-Vertical-Tabs.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/1-Qi-addons-Vertical-Tabs-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/1-Qi-addons-Vertical-Tabs-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/1-Qi-addons-Vertical-Tabs-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The widget will start off with two tabs and some placeholder text. In the widget\u2019s <strong>Content<\/strong> tab, you can see that there are two items. Clicking on each of them will reveal that it\u2019s in fact a tab. It contains a <strong>Title<\/strong> field, for your tab title, and a Content field, set up as a text editor, for its content. You can click <strong>+Add Item<\/strong> to add any number of items.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/2-Qi-addons-Vertical-Tabs-Add-items.jpg\" class=\"attachment-full size-full\" alt=\"Qi addons Vertical Tabs Add items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/2-Qi-addons-Vertical-Tabs-Add-items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/2-Qi-addons-Vertical-Tabs-Add-items-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/2-Qi-addons-Vertical-Tabs-Add-items-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/2-Qi-addons-Vertical-Tabs-Add-items-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We will add two items and replace the default lorem ipsum text with some of our own copy.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/3-Replace-the-default-lorem-ipsum-text.jpg\" class=\"attachment-full size-full\" alt=\"Replace the default lorem ipsum text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/3-Replace-the-default-lorem-ipsum-text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/3-Replace-the-default-lorem-ipsum-text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/3-Replace-the-default-lorem-ipsum-text-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/3-Replace-the-default-lorem-ipsum-text-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to the <strong>Style<\/strong> tab and its main <strong>Style<\/strong> section, you will see a veritable slew of options. Up top, we find the title settings. The <strong>Title Alignment<\/strong> can be set to left, right, or center (we went with center), the Title Tag can be set to any <em>heading<\/em> value (H1 to H6), or to <em>paragraph<\/em> (P). We will leave it at the default H5. Finally, in the <strong>Title Typography<\/strong> settings you will find the usual suspects: <strong>Font Family<\/strong>, <strong>Size, Weight<\/strong>, and so on, similar to the settings described in the section above. We will leave these alone and only set the <strong>Size<\/strong> to 21 pixels.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/4-Qi-addons-Vertical-Tabs-Typography-settings.jpg\" class=\"attachment-full size-full\" alt=\"Qi addons Vertical Tabs Typography settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/4-Qi-addons-Vertical-Tabs-Typography-settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/4-Qi-addons-Vertical-Tabs-Typography-settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/4-Qi-addons-Vertical-Tabs-Typography-settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/4-Qi-addons-Vertical-Tabs-Typography-settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next down, we find the <strong>Normal-Active\/Hover<\/strong> switch. These settings govern the behaviour of the tabs in their two possible states. The <strong>Normal<\/strong> section is the behaviour of a tab which is not selected or hovered over. You can set the <strong>Title Color<\/strong> to whatever you like, but we went with #1E1E1E. Next down, you can choose between the <em>Classic<\/em> and <em>Gradient<\/em> <strong>Background Types<\/strong>. The options for each vary, but we will be using the <strong>Classic<\/strong> background for this demonstration. We will set it to a solid colour: #F9F9F9.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the options below you can set a background <strong>Image<\/strong> and a <strong>Border Type<\/strong> for your tabs. We will not be using these settings. Further down, you can find the text settings: <strong>Text Color<\/strong>, <strong>Text Typography<\/strong>, and <strong>Text Background Color<\/strong>, as well as <strong>Border<\/strong> settings for the text. We will not be fiddling with these, either: we like our text box nice and clean.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/5-Qi-addons-Image-and-a-Border-Type.jpg\" class=\"attachment-full size-full\" alt=\"Qi addons Image and a Border Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/5-Qi-addons-Image-and-a-Border-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/5-Qi-addons-Image-and-a-Border-Type-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/5-Qi-addons-Image-and-a-Border-Type-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/5-Qi-addons-Image-and-a-Border-Type-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to the <strong>Active\/Hover<\/strong> side of things, we will find more or less the same exact controls as we have for the <strong>Norma<\/strong>l. We will set the <strong>Title Active\/Hover Color<\/strong> to #1E1E1E to match the colour of our <strong>Normal<\/strong> titles, but for the background, we\u2019ll choose an <strong>Image<\/strong> from our media library. You can see that it changes in the preview section immediately.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The image\u2019s <strong>Position<\/strong> controls are important if your image is smaller or larger than the space it is supposed to occupy: you can choose which bit is visible. The <strong>Attachment<\/strong> control governs the behaviour of the image when the user scrolls. A <em>Scroll<\/em> setting will show the image as it is, while a <em>Fixed<\/em> setting will fix it to the background, moving as the user scrolls. The <strong>Repeat<\/strong> control is there in case your image is smaller than the space it occupies: you can choose whether and how to repeat the image. Finally, the <strong>Size<\/strong> control is there in case you wish to stretch the image. We will select <em>No Repeat<\/em> from our <strong>Repeat<\/strong> menu and not touch the others.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Further down, we find the <strong>Sideline<\/strong> controls. These settings are used to set up the line separating the tab from the text, but we will not be using them in this particular design. The same goes for <strong>Text<\/strong> and <strong>Border<\/strong> settings in the <strong>Active\/Hover<\/strong> view.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/6-Qi-addons-active-hover-settings.jpg\" class=\"attachment-full size-full\" alt=\"Qi addons active hover settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/6-Qi-addons-active-hover-settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/6-Qi-addons-active-hover-settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/6-Qi-addons-active-hover-settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/6-Qi-addons-active-hover-settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, we arrive to the <strong>Spacing Style<\/strong> section of the <strong>Style<\/strong> tab. Here we can set up the <strong>Title Padding<\/strong>, or the space between the walls of the title box and the title text. We will click to <strong>Unlink<\/strong> the values and enter 27 pixels for our Top padding, 40 for <em>Right<\/em>, 23 for <em>Bottom<\/em> and 44 for <em>Left<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Similarly, we will <strong>Unlink<\/strong> the <strong>Content Padding<\/strong> controls (the space between the main text and the edges of its box), and set the Top to 4% \u2013 not pixels! Finally, the <strong>Items Space<\/strong> slider is the control for the space between the tabs. We will set it to 3 pixels.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And there you have it, our vertical tab widget is done![\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/7-Qi-addons-Content-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Qi addons Content Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/7-Qi-addons-Content-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/7-Qi-addons-Content-Padding-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/7-Qi-addons-Content-Padding-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/7-Qi-addons-Content-Padding-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-tabbed-content-in-block-editor\"><\/a>How to Add Tabbed Content in WordPress Block Editor<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you\u2019re using the Block Editor, you can consider using the <a href=\"https:\/\/ultimateblocks.com\" target=\"_blank\" rel=\"noopener\">Ultimate Blocks<\/a> plugin to add tabbed content to your WordPress posts or pages. The \u2018Tabbed Content\u2019 block lets you add content in both horizontal or vertical ways.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s install the plugin. Just go to your WordPress Dashboard and navigate to Plugins &gt; Add New. Then search for \u2018Ultimate Blocks\u2019 and install the plugin.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"501\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Installing-Ultimate-Blocks-Plugin.jpg\" class=\"attachment-full size-full\" alt=\"Installing Ultimate Blocks Plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Installing-Ultimate-Blocks-Plugin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Installing-Ultimate-Blocks-Plugin-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Installing-Ultimate-Blocks-Plugin-768x397.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Installing-Ultimate-Blocks-Plugin-620x321.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019ve activated the plugin, go to the page or post where you want to add tabbed content. Then click on the \u2018+\u2019 sign and search for \u2018Tabbed Content\u2019. Click on the block to insert it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"570\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Adding-Tabbed-Content-Block.jpg\" class=\"attachment-full size-full\" alt=\"Adding Tabbed Content Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Adding-Tabbed-Content-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Adding-Tabbed-Content-Block-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Adding-Tabbed-Content-Block-768x452.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Adding-Tabbed-Content-Block-620x365.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]By default, it will show only one tab. You can add more tabs by clicking on the \u2018+\u2019 sign. You can add as many tabs you want.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Adding-More-Tabs-in-Tabbed-Content.jpg\" class=\"attachment-full size-full\" alt=\"Adding More Tabs in Tabbed Content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Adding-More-Tabs-in-Tabbed-Content.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Adding-More-Tabs-in-Tabbed-Content-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Adding-More-Tabs-in-Tabbed-Content-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Adding-More-Tabs-in-Tabbed-Content-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then give names to your tabs and content content in the body part. You can customize style, colors, layout, and more from the right-hand side options panel.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"691\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabbed-Content-Settings-Panel.jpg\" class=\"attachment-full size-full\" alt=\"Tabbed Content Settings Panel\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabbed-Content-Settings-Panel.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabbed-Content-Settings-Panel-300x214.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabbed-Content-Settings-Panel-768x548.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabbed-Content-Settings-Panel-620x442.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you like to display content in vertical order, then just click on the vertical icon from the tab display. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"516\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Vertical-Tabs.jpg\" class=\"attachment-full size-full\" alt=\"Vertical Tabs\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Vertical-Tabs.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Vertical-Tabs-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Vertical-Tabs-768x409.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Vertical-Tabs-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]So that\u2019s how you can add tabbed content using the Ultimate Blocks plugin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-create-tabs-using-the-wp-tabs-plugin\"><\/a>How to Create Tabs Using the WP Tabs Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]The plugin we will be using is <a href=\"https:\/\/wordpress.org\/plugins\/wp-expand-tabs-free\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Tabs<\/a>. Once you have installed and activated the plugin, find it on your list of <strong>Installed Plugins<\/strong> and click to <strong>Add Tab Group<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Installed-Plugins.jpg\" class=\"attachment-full size-full\" alt=\"Installed Plugins\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Installed-Plugins.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Installed-Plugins-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Installed-Plugins-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]At the top of the <strong>Add New Tab Group<\/strong> you will find the group name field (we named our group <em>Lorem ipsum<\/em>). You will also want to take note of the <strong>Publish<\/strong> button. You will need to publish your tab group in order to use it. Finally, you will find the <strong>Add New Tab<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"456\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Add-New-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Add New Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Add-New-Tab.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Add-New-Tab-300x195.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Add-New-Tab-620x404.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We will use the <strong>Add New Tab<\/strong> button to generate three tabs, and populate our tab group with some placeholder text and media, in this case an image. Editing a tab works exactly like editing a post.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"422\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Tabs.jpg\" class=\"attachment-full size-full\" alt=\"WP Tabs\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Tabs.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Tabs-300x181.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Tabs-620x374.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Scrolling down, we see the<strong> Tabs Settings<\/strong> tab. We have left all the settings on their default values, but here you can change the <strong>Tabs Layout<\/strong> between <em>Horizontal<\/em> and <em>Vertical<\/em> (only available with the Pro version of the plugin), <strong>Tabs Alignment<\/strong> between <em>Left<\/em> and <em>Right<\/em>, change the <strong>Activator Event<\/strong> (when tabs open or close) from between <em>On Click<\/em> and <em>Mouseover<\/em> (on hover), and toggle the <strong>Preloader<\/strong> (this option, when left <em>ON<\/em>, hides the tabs until the entire page is loaded). Finally, at the very bottom, you will find the <strong>Shortcode<\/strong> for this tab group which you need to copy.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Tabs-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"WP Tabs Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Tabs-Shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Tabs-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Tabs-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you are satisfied with your settings, you need to scroll all the way up and <strong>Publish<\/strong> your tab group. Having copied the shortcode, you can now paste it anywhere you want it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are using the <strong>Gutenberg<\/strong> block editor and want to show your tabs as part of a post, you need to click the + sign, create a <strong>shortcode<\/strong> block, and paste your shortcode in its field.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are working with the <strong>WPBakery Page Builder<\/strong>, the procedure is more or less the same: you need to use the <strong>shortcode<\/strong> element and supply it with the shortcode for your tab group. For the <strong>Classic<\/strong> editor, simply paste the shortcode where you want it while making sure you are using the <strong>Text<\/strong> editor. Of course, if you prefer your plugin-generated tab groups to<strong> Elementor<\/strong>\u2019s tab widget, you can use Elementor\u2019s <strong>Shortcode<\/strong> widget instead.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabs-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Tabs Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabs-Shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabs-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabs-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In any case, your tabs, as configured, will appear in the post, and the procedure is the same for all other widget-ready areas.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabs-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Tabs Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabs-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabs-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Tabs-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you have seen, sorting and organizing your content in tabs is easy, takes next to no time at all, and doesn\u2019t need to cost any money. Our first suggestion is always to use a theme which already has a tabs functionality, as it is bound to have been tested and proven to work with the theme, but you can achieve a similar effect with Elementor or a plugin. If you feel your content could benefit from them, there is no excuse not to try them.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Want to make a big chunk of content better organized and more legible? Try our handy how-to guide for tabbed content in WordPress!<\/p>\n","protected":false},"author":16990,"featured_media":16721,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-16614","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=16614"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16614\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/16721"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=16614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=16614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=16614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}