How to Create WordPress Tabs with Qi Addons for Elementor
The quality of the content of your website depends largely on your knowledge and skills, but the way you display it also plays an important part in how others perceive it. WordPress tabs are a great way to structure and organize content and make it easier to digest, especially when it comes to long articles. Keeping a reader on a page has never been easy, so making it harder by offering content that is not visually appealing is simply not a wise thing to do.
Tabs help you break an article into easily readable sections and make it more accessible to the reader who can then navigate through the text more smoothly. Of course, there are plenty more writing tips to help you make the content more attractive, but setting tabs is one of the essentials. In this article, we will show you how to add beautiful tabs to your content with the Qi Addons for Elementor.
Adding Tabs With a Plugin
Qi Addons for Elementor is a powerful, free tool that allows you to add a wide variety of beautiful elements to your website with ease. It comes with an intuitive, user-friendly interface, and both beginners and advanced users will find it easy to use. What’s especially great about Qi is the focus that is placed on design, so besides useful elements, it also provides you with a dash of contemporary elegance.
The process of installing the QI Addons for Elementor is no different from any other plugin installation. Should you have any questions about it, make sure to check the link we provided above, and you can also write to us in the comment section.
Since this is an Elementor plugin, make sure to switch to Elementor editor when creating a new post. All the Qi Addons widgets will be neatly displayed in the left-hand elements menu. Simply scroll down the menu to find them.
Now, there’s no need to browse all the Qi elements. You can simply enter the one that you want to add, tab in this case, in the search field and it will be displayed in the search results. As you can see below, the Qi Addons provides you with two tab elements – horizontal tab and vertical tab.
To add a vertical tab, drag and drop the Elementor element to the desired place. When the vertical tab is added, all the settings will be on the left side and within the Content and Style tabs are all the options related to the tabs. The option Advanced is actually Elementor’s default group for the column.
The first settings that you will see are the General settings, they include all the options needed for adjusting your content optimally.
Place Content Below Tab on Screen under option allows you to set the vertical tab according to the target screen size. You can choose between four screen sizes. For example, if the screen size is less than 480px the tab title will be placed above and not next to the text. This option refers only to vertical tabs. The image below illustrates how the vertical tab is seen on the big screen and how when you set the screen size in the option Place Content Below Tab on Screen under.
To enter and arrange the text in the vertical tab, click the Items option, and the menu will open with a field below it to enter the text directly. You can also immediately adjust the text settings in terms of alignment, typography. There is no need to set the General settings for typography as you can do that later in the Style tab. This is also where you set the vertical tab title, simply by entering it in the Title field. On the right side of the screen you will immediately see the preview of all the changes that you make.
After you input the text, you can continue to style it in more detail. Click on the Style option next to the Content option in the menu to open all the style settings.
The Title Tag setting lets you choose whether you want the vertical/horizontal tab title to be H1, H2, and so on. In the picture above, we opted for H1.
The Title Typography option is very interesting. The first icon with the globe opens a custom menu that allows you to choose typography type from global fonts. This is a safe choice if you want to make sure your tab is in line with the overall style of your website.
If you feel confident enough to set the title typography by yourself or simply want to explore more options, click on the pencil icon next to the globe to all the available typography settings. You can test them all easily, as you will immediately see the effect on the right side of the screen.
The Family option lets you choose the font, and then all the options below allow you to customize the font of your choice further.
The Size setting in this menu allows you to set the size of the letters by yourself, the Weight option lets you adjust the width of the letters in the font. The Transform option lets you choose whether you want the text to be only in upper or lower case or capitalized etc. The Decoration option lets you choose between for styles of the same font – default, normal, italic, or oblique. And you can also adjust the line height and letter spacing by yourself.
The typography settings are indeed fun to adjust as there is so much choice and you can really set both the title and the body text to look exactly like you envisioned it. After you give it your final touch, you can proceed to other style settings that include choosing the color of the font, the background color, and borders if you want to have them. If you opted for the gradient type of the background, the Location option lets you fine-tune the gradient effect.
Below you can see an example of how we arranged the Title, we found the Border option that lets you adjust the width of the title to be very interesting. We used only on one side of the Title, but you can experiemnt and see what works best for you.
You can also customize the text in terms of font color, background color, typography and border type. Since you have a live preview of all the changes that you make, you have a lot of room to experiment until you find what looks great on the page.
The image below is an example of how we customized the text to fit the rest of the content on the page.
The next important setting to notice in this menu is the Active/Hover option. This is where you can set how the tab will look when hovered over. The options are the same as all the previously mentioned above, so if you want the content to look different upon hovering this is where you set exactly how different you want it to look.
The Sideline options that are found here are for adding animated hover effects. We recommend you experiment a bit with it and see what would look best on your pages.
If you’re satisfied with how you set the tab so far, you can continue to explore the Spacing Style settings. These will let you adjust the spacing of the title, content, and items you used in the tab.
In case you need to insert a horizontal tab, the procedure is basically the same. You will have all the same options at your disposal except Place Content Below Tab on Screen under option.
For more detailed information check next videos:
In Conclusion
As you can see, adding a tab element with the Qi Addons for Elementor is not just easy but also full of exciting possibilities. Now that you have the Qi plugin installed you can continue to explore all of its features and enrich your website with more beautiful elements. To make your content even more beautiful, you can also highlight text in WordPress so it stands out. Should you have any questions regarding the use of the plugin, feel free to ask us in the comment section. We look forward to hearing about your experiences with Qi!
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
