Category: Divi columns in tabs

Updated: September 8, Sep 28, Free Layout 9 comments. Post Views: 5, Some basic CSS knowledge is required, like colors and font-size.

Divi Tab Section Plugin

Hello, I love this side tab you created and I thank you for sharing it. I have a question because I am new to all of this. So my question is if I wanted to put say one tab section with the tabs on the left, and then maybe another tab section that the tabs would be on the right. How would I do this? Also, what if I want to put another couple of tab sections on a different page.

I guess how can I control what each tab section will do by itself for each section and or page. I figure you are more advanced than me so I figure I would ask you. Thank you again. Hi Tony! You can definitely control how each tab section looks on its own, you would need to apply a class or ID to the entire section and then target each different section with your CSS. So I have everything running pretty smoothly.

However, I have an instance where when I click on a tab, it changes color, and then a dotted rectangle hangs around the outer edges of the text but still inside the tab. When I click on anything else on my webpage but keeping the tab still active, the dotted lines disappear. How can I figure out how to make sure those dotted lines do not appear?

Hi Reggie! Is this happening on your entire site or just on the layout? The code works great, thanks. Your email address will not be published. Save my name, email, and website in this browser for the next time I comment.

View Demo Download layout. Import the layout into your Divi library Download the zip file using the Download button above. Unzip the file you downloaded and import the included. Notes: If you use the WP gallery the icon color will be your theme color from customizer settings. The gallery function itself IS always imported. Tony Tom on November 3, at pm.

Leslie on November 4, at am. Reggie on March 10, at pm. Leslie on March 11, at pm. Logan Kilburn on October 16, at am. Leslie on October 18, at am.This module is great for sectioning out the information on your website in tabs.

divi columns in tabs

You can use this for different packages or services that your company offers. Sign up for a 15 day free trial to our powerful WordPress Hosting Platform. Take advantage of everything we have to offer for free. No credit card required!

How to Add Columns Within the Tab Modules of Divi

I did a tab with just some text. You can kind of see what that looks like. You can see, tabs are a great way to display a lot of contents on your website without taking up a bunch of real estate. Tabs are a great way to do that really, and they kind of spice up the interactivity of a page as well. So, we just want to copy that. Of course, it does give you the option to customize this one particular tab.

So, just for this tab, this will be blue. Again, this is up to your preference. Now, if I want to get into the settings for all the tabs, and I just come back in to where it shows all my items.

Just throw this green in there just to give you an idea of what that looks like. So, I can change it, to say, to use the blue. I think that covers everything, once again my name is Jimi Blevins and thank you so much for watching. Your email address will not be published. Learn More. So I can have a background color kind of behind my content.Divi Academy Membership gives you exclusive access to over resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks.

For Recipe 5 I have decided to create quite a simple and short tutorial but something I have seen asked in the Divi Facebook groups several times.

You are going to need to change the width value in the css above depending on the number of tabs you have. If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

divi columns in tabs

Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now. Subscribe to receive regular emails packed with tips, tricks, tutorials, freebies, product info and promotional offers, and get instant access to 25 completely free awesome Divi resources!

We take your privacy seriously, and you can opt-out at any time. See our privacy policy here. Hi, thanks for this great tutorial. Really helped me there. Any ideas why this is happening? Thanks a lot Michelle!

Please ignore my prvious message, I found the solution. Thanks again for your posts Stan. Can you tell me how can I remove the grey right part in my tab? And do the 3 parts equals. I tried the code but it didnt work. Welcome Lauren. HI Michelle, I love this! Thanks for the tut — how can i align the tabs at the bottom? Would really appreciate your help with this. You can use this code, but this positions absolutely so if you have varying length of content its going to look odd.

Hi Michelle, I am a newbie and just trying to finish my own site at the moment. I was having problems with the tabs and you equal-tabs helped. However, it looks great on a wide screen but the tabs go to the next line on a laptop screen and iPad. I have tried adjusting so many ways but I cant get it to work across everything. I used your entire code as below including media screen. Any assistance would be greatly appreciated before I go nuts. Its only 8 tabs as per what Michelle mentioned in her recipe.

Have decreased font sizes…. Dan you can adjust the line height and the font size for the tab title in the module design settings tab.

Reduce the size for tablets and mobile. Thanks for sharing Jeff.Posted on September 26, by Randy A. Have you ever created or used a layout in Divi that looks amazing, only to have odd gaps in a row because the modules have different heights? This happens with you have a few words in one module that sits next to another module with a lot of words. The demo content typically uses modules with the same length, but when you add your own content that length will change.

Fortunately, there is an easy way to design your layouts so the column-heights are equal. This example shows a few blurbs with content at various lengths. It would look cleaner and nicer if the blurbs were the same size regardless of their content. This stands out, and not in a good way. This is even more obvious if we use different background colors. Colors with greater contrast stand out even more. As a visual design, this would be more pleasing to the eye if the blurbs were the same size.

The easiest method to make each of the blurbs the same size is to push the issue back to the next element. This only works for the columns within the same row. Be sure to use the same settings. The blurb on the left has the color and box shadow removed. The layout is exactly the same as before.

There is no visual difference. Repeat this process for each of the columns. Each column is now automatically the same height. The colors remain with the columns, so I can move the blurbs around or replace them with text modules and the color remains in place. If I want to move the content and have them to keep their colors, I can move the columns within the row settings.

This moves everything associated with the column. I could replace the blurb with a different module with no trouble. The button automatically moves down and the columns remain the same size. The columns automatically expand to make room and all of the columns remain equal in height.

My first thought is usually to add the color, box shadow, and borders to the modules, but adding them to the columns in the rows opens up a lot of design possibilities. Do you equalize the column heights in your Divi designs? Let us know about it in the comments.

Randy is a WordPress writer from Tennessee. When he's not writing he's reading, playing guitar, or drinking coffee. How to Equalize Column Heights in Divi.I am always afraid that site visitors will have to hunt for content, which can be an argument for not using tabs, but on the other hand, the endless scroll can become tiresome and presenting content that is horizontal in orientation rather than vertical is a nice touch.

As always, you make the decision that is right for you and your client. In this example, we are using icons to trigger the display of text. Your icons can be images, found over on iconfinder.

First, you need to organize your content and figure out which icons or images you are going to use. In my example, my pretend client is a gym.

Custom Side / Vertical Tabs Section Layout for Divi

I popped into Canva yes, I know you uber talented PhotoShop people laugh at Canva, but it serves a purpose. I made sure all of my icons and larger images were the exact same size.

Took me two minutes. I highlighted it on this image. Now that you have pasted the CSS, add the icons or images to your media files, and then copy and replace my urls with yours. You will need a Divider module. I am not showing the divider and the height is 50px. You need to allow some space for the icons. Note, I am hiding this module on mobile. Next add the tabs module. Navigate back to General Settings in your Tabs Module and add your tabs, give each tab a title and add content with an image if you want an image of course, but I like that look.

And Voila! PS In case you are wondering, here is how your Tabs Module would look before the styling. I think you will agree this functions beautifully and is a really nice way to present your content.

Some of the steps may seem super simple, but I am a super simple girl and like things broken down for me, so I am assuming you will also.Used sparingly, I like the tabs. It allows you to organize content and breaks up the endless scrolling you see with some websites. Today I wanted to share with you how to add columns inside of those tabs. This plugin allows you to turn anything in your Divi Library into a short code, then you can place that short code anywhere on your site including inside of modules.

I was playing around with alignment, testing the dreaded div codes, and I hit upon the plugin. If you need to edit the content, you can easily do this by going into the Divi Library, editing there. After you hit update, your changes will automagically appear where ever the short code was placed.

The plugin comes with bonus materials, which you can preview here. There are ten different Team Layouts, my favorite effect from the bonus library is the content that is displayed when you hover over an image. I hope this plugin helps you. I would like to gift a copy to a reader. Please leave a comment below and in about 24 hours I will randomly select a winner and add a copy of the VRYN Library Shortcode plugin to your Elegant Marketplace account.

This is a great concept. Almost like dynamic content. I can let others have responsibility for the content of the specific library, yet I decide how to display it and use it. Love it. Have lots of uses for this as well. Thank-you for this!!!!!

Custom Side / Vertical Tabs Section Layout for Divi

A winner has been selected! I asked my daughter to select a number between choose a number between and she went with 1. Jo, the plugin has been added to your account, the next time you login to your dashboard it will be waiting for you. The post was well worth reading even without the added bonus of a potential freebie.

Article du fil d'actualités de CreaWeb2B

It has already started my little brain working in some new directions, which is always nice. Thanks for a great post. Thanks for the post.

divi columns in tabs

I think they are very similar, but that VRYN Library Shortcodes plugin has added some thing that are not related to the plugin. Please pick me! Thanks so much for this valuable article and sharing this information. It will help me a lot in future projects:.Divi Academy Membership gives you exclusive access to over resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks.

I had been meaning to write a new recipe on the tabs module for quite a while and the question in the Facebook group gave me some inspiration on what to create. Here we are using the tabs as a kind of menu to switch between content within each tab. You can add anything you like within the content area of each tab, but I have used an image with an overlapping div to create a slider type effect. Watch the video, get the code you need in the accompanying blog post, be sure to scroll to the bottom for your fabulous freebieand let me know what you think in the comments!

Some images to use in the tabs, mine are from Pixabay. On your page, add a new standard section with a single column and add a tabs module. Now open up the tabs module settings and click on the custom CSS tab and give the module a custom class of ds-tab-navigation. Active and inactive tab background colours, tab font, tab font size, tab text colour, body font size and body font colour. The font size will depend on which font you are using and how long your tab titles are.

Once you have all your settings how you want them, click on the general settings tab and then add new tab. This is where we add the content we want to display in each tab. So once you have created your first tab, save it and then duplicate it for how ever many tabs you want to show. Then go in and edit the content of each tab, changing out the tab title, image url, title, text and link text and url for each one.

Now for the CSS. There are full comments in the complete CSS below but here is an overview of what each bit is doing:. Here we are setting the background colour that shows when the tabs change and removing borders and padding. This next bit is what makes the tabs equal widths and fill the entire horizontal space.

In my demo I am using 8 tabs, so this is the CSS for 8 tabs. If you are using a different number this is what you need to do:. Now for the tab animation. Firstly we are setting the position of the active tab to relative, so we can add a pseudo element to it for the animation.

The second and third sections are the actual animation, we are hiding a bottom border effect initially by setting the scale width to 0, and then when that tab becomes active, the third section sets the scale to 1, or fullsize, and so animates the effect. In this section we are setting the styles for the classes we added to the content area previously, so the image, text and link.

Then we are adding the same animation effect to the link, but on hover rather than when it is active. We have also changed the position of the animation so it sits centrally underneath our link. And finally, our media queries. Then we are adjust the font size so it scales down and bit and everything still fits in. After that, Divi will automatically stack our tabs one on top of the other, so we setting the height of each tab to Use the same calculation I mentioned earlier for the width.

Here is all of the CSS with full comments. Now you should have a tabs module with content navigation just like my demo. If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now. Subscribe to receive regular emails packed with tips, tricks, tutorials, freebies, product info and promotional offers, and get instant access to 25 completely free awesome Divi resources!

We take your privacy seriously, and you can opt-out at any time. See our privacy policy here.


thoughts on “Divi columns in tabs

Leave a Reply

Your email address will not be published. Required fields are marked *