Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Recipe #26 was inspired by another Divi community member. 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.
This layout will work for standard, fullwidth and fullwidth with zero gutters.
Watch the video, get the code you need in the accompanying blog post, be sure to scroll to the bottom for your fabulous freebie, and let me know what you think in the comments!
So let’s get cooking!
Ingredients
The Divi Theme from Elegant Themes.
Some images to use in the tabs, mine are from Pixabay
Cooking time
This should take you around 15 minutes max.
Preparation
First let’s set up our tab module. On your page, add a new standard section with a single column and add a tabs module..
Method
Next, open up the row settings and apply the following depending on how wide you want the tabs module to be:
Standard width:
Make this row fullwidth: No
Use custom gutter width: No
Fullwidth:
Make this row fullwidth: Yes
Use custom gutter width: No
Fullwidth zero gutters:
Make this row fullwidth: Yes
Use custom gutter width: Yes
Gutter width: 0
It doesn’t matter which option you choose, this layout will scale nicely if you change your mind later, as long as your images are wide enough to fill the width setting you have chosen, but its a good idea to start with the standard width to make sure your text fits in the available space.
Then save & exit.
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
Next you will want to go into the advanced design settings tab and adjust your settings for the following:
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. You don’t need to set the font sizes for tablet and mobile, we will handle that with CSS using percentages so everything scales down nicely.
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. I am using an image with dimensions of 1920x1080 px so at fullscreen it will fill the available space, there is also a little bit of CSS included later to scale that image to 100% width for users viewing on even larger screens.
Here is the HTML I am using in my tabs
<img class="ds-tabs-image" src="IMAGE URL HERE"> <div class="ds-tabs-text"> <h2>TITLE HERE</h2> <p class="ds-tabs-body">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p> <a href="LINK URL HERE">LINK TEXT HERE</a> </div>
And this is what we are doing:
Assigning the ds-tabs-image class on the image allows us to add a width of 100% in the CSS so it fills the space no matter what screen size it is viewed on. You will want your images to be at least 1920px so they don’t pixelate too much on very large screens.
Creating a <div> and assigning it a class of ds-tabs-text so that in our CSS we can position it to sit over the image rather than below it. We are putting all our text content within that <div>.
Assigning the <p> a class of ds-tabs-body so that we can hide it on mobile and just show the title and link text. Leaving the body text visible on small screens will mean we either have to make the font size really small or have the text cover most or all of the image, which doesn’t look good.
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. When your’re done, save and exit the module.
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
.ds-tab-navigation .et_pb_all_tabs { padding: 0; background: #000 !important; border-top: 0; } .ds-tab-navigation .et_pb_tab, .ds-tab-navigation .et_pb_tabs_controls a, .ds-tab-navigation .et_pb_tabs_controls .et_pb_tab_active a { padding: 0; } .ds-tab-navigation.et_pb_tabs { border: none !important; } .ds-tab-navigation .et_pb_tabs_controls ul { border-bottom: none; }
Next we are positioning the tabs absolutely so they sit on top of our image rather than above it, we are giving them a width of 100% and a transparent background so we can see the image through them (you will need to have set transparency in the tab background colour in the advanced design settings of the module for this to take effect).
Then we are styling the individual tab controls so they have a fixed height and the text is aligned to the center both horizontally and vertically, then there is a little transition so they change gradually rather than instantly.
.ds-tab-navigation ul.et_pb_tabs_controls { border: none; position: absolute; width: 100%; background: transparent; z-index: 10; } .ds-tab-navigation .et_pb_tabs_controls li { height: 80px; text-align: center; padding: 5px 10px !important; border: none; display: flex; flex-direction: column; justify-content: center; -webkit-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s; }
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:
Change both number ‘8‘s to the number of tabs you are using
Change 12.5% to the result of this sum: (100 / your number of tabs). So for instance, if you want to use 5 tabs it would be (100 / 5 = 20), so change 12.5% to 20%.
.ds-tab-navigation .et_pb_tabs_controls li:first-child:nth-last-child(8), .ds-tab-navigation .et_pb_tabs_controls li:first-child:nth-last-child(8) ~ li { width: 12.5%; }
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.
.ds-tab-navigation .et_pb_tabs_controls li.et_pb_tab_active { position: relative; bottom: 0 !important; height: 80px; margin-top: 0; } .ds-tab-navigation .et_pb_tabs_controls li:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; -webkit-transform: scale3d(0, 5, 1); transform: scale3d(0, 5, 1); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9); transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9); } .ds-tab-navigation .et_pb_tabs_controls li.et_pb_tab_active:before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
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.
.ds-tab-navigation img.ds-tabs-image { width: 100% !important; margin-bottom: -10px; } .ds-tab-navigation div.ds-tabs-text { position: absolute; bottom: 0; width: 100%; padding: 20px; color: #fff; background: rgba(0, 0, 0, .7); display: flex; flex-direction: column; justify-content: center; text-align: center; } .ds-tab-navigation div.ds-tabs-text a, .ds-tab-navigation div.ds-tabs-text h2 { color: #fff; text-transform: uppercase; } .ds-tab-navigation div.ds-tabs-text a { padding: 10px 20px; } .ds-tab-navigation div.ds-tabs-text a:before { content: ''; position: absolute; bottom: 0; left: 40%; width: 20%; height: 2px; background: #fff; -webkit-transform: scale3d(0, 5, 1); transform: scale3d(0, 5, 1); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9); transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9); } .ds-tab-navigation div.ds-tabs-text a:hover:before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
And finally, our media queries. Eights tabs wide won’t look good on smaller screens screens so we are switching it to four wide under 1280px. 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 12.5% so that they fill 100% of the height of the tab. Again here you will want to adjust this based on the number of tabs you have. Use the same calculation I mentioned earlier for the width.
The last bit reduces the font size again and hides the <p> text when the screen gets too small for it be viable to show it.
@media only screen and (max-width: 1280px) { .ds-tab-navigation .et_pb_tabs_controls li:first-child:nth-last-child(8), .ds-tab-navigation .et_pb_tabs_controls li:first-child:nth-last-child(8) ~ li { width: 25%; } .ds-tab-navigation .et_pb_tabs_controls li, .ds-tab-navigation .et_pb_tabs_controls li.et_pb_tab_active { height: 40px; } } @media only screen and (max-width: 1023px) { .ds-tab-navigation ul.et_pb_tabs_controls { height: 100%; } .ds-tab-navigation div.ds-tabs-text h2 { font-size: 80%; } .ds-tab-navigation div.ds-tabs-text a { font-size: 70%; } .ds-tab-navigation div.ds-tabs-text p { line-height: 1em !important; } } @media only screen and (max-width: 766px) { .ds-tab-navigation .et_pb_tabs_controls li, .ds-tab-navigation .et_pb_tabs_controls li.et_pb_tab_active { height: 12.5%; } .ds-tab-navigation p.ds-tabs-body { font-size: 70%; } .ds-tab-navigation .et_pb_tabs_controls li a { font-size: 70%; } .ds-tab-navigation div.ds-tabs-text { right: 0; width: 75%; padding: 10px; } } @media only screen and (max-width: 500px) { .ds-tab-navigation p.ds-tabs-body { display: none; } .ds-tab-navigation .et_pb_tabs_controls li a { font-size: 50% !important; } }
Here is all of the CSS with full comments. Copy and paste this into your child theme stylesheet, Divi options custom CSS box or the page specific CSS box and be sure to save.
Full CSS
/*--------------------------------------------------------------------*/ /*----------Tabs Module for Content Navigation by Divi Soup-----------*/ /*--------------------------------------------------------------------*/ /*Remove padding and set the background color for the tabs*/ .ds-tab-navigation .et_pb_all_tabs { padding: 0; background: #000 !important; border-top: 0; } .ds-tab-navigation .et_pb_tab, .ds-tab-navigation .et_pb_tabs_controls a, .ds-tab-navigation .et_pb_tabs_controls .et_pb_tab_active a { padding: 0; } /*Remove the tabs border*/ .ds-tab-navigation.et_pb_tabs { border: none !important; } /*Remove the border for the tab controls*/ .ds-tab-navigation .et_pb_tabs_controls ul { border-bottom: none; } /*Style the tabs controls*/ .ds-tab-navigation ul.et_pb_tabs_controls { border: none; position: absolute; width: 100%; background: transparent; z-index: 10; } /*Style the individual tabs controls*/ .ds-tab-navigation .et_pb_tabs_controls li { height: 80px; text-align: center; padding: 5px 10px !important; border: none; display: flex; flex-direction: column; justify-content: center; -webkit-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s; } /*Evenly space the tab controls*/ /*Replace the number 8 with the number of tabs you have*/ /*Divide 100 by the number of tabs you have and replace the width value with your result*/ .ds-tab-navigation .et_pb_tabs_controls li:first-child:nth-last-child(8), .ds-tab-navigation .et_pb_tabs_controls li:first-child:nth-last-child(8) ~ li { width: 12.5%; } /*Position the active tab*/ .ds-tab-navigation .et_pb_tabs_controls li.et_pb_tab_active { position: relative; bottom: 0 !important; height: 80px; margin-top: 0; } /*Add the bottom line effect animation to the tabs*/ .ds-tab-navigation .et_pb_tabs_controls li:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; -webkit-transform: scale3d(0, 5, 1); transform: scale3d(0, 5, 1); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9); transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9); } /*Animate the bottom line effect*/ .ds-tab-navigation .et_pb_tabs_controls li.et_pb_tab_active:before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } /*Set the tab image to fullwidth for larger screens*/ .ds-tab-navigation img.ds-tabs-image { width: 100% !important; margin-bottom: -10px; } /*Style the tab text content*/ .ds-tab-navigation div.ds-tabs-text { position: absolute; bottom: 0; width: 100%; padding: 20px; color: #fff; background: rgba(0, 0, 0, .7); display: flex; flex-direction: column; justify-content: center; text-align: center; } .ds-tab-navigation div.ds-tabs-text a, .ds-tab-navigation div.ds-tabs-text h2 { color: #fff; text-transform: uppercase; } /*Style the tab text links*/ .ds-tab-navigation div.ds-tabs-text a { padding: 10px 20px; } /*Add the bottom line effect animation to the tab text links*/ .ds-tab-navigation div.ds-tabs-text a:before { content: ''; position: absolute; bottom: 0; left: 40%; width: 20%; height: 2px; background: #fff; -webkit-transform: scale3d(0, 5, 1); transform: scale3d(0, 5, 1); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9); transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9); } /*Animate the bottom line effect on the tab text links*/ .ds-tab-navigation div.ds-tabs-text a:hover:before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } /*Adjust for smaller screens*/ /*This creates two rows of tabs, set the width percentage based on the number of tabs you want on each row, 25% = 4 tabs*/ @media only screen and (max-width: 1280px) { .ds-tab-navigation .et_pb_tabs_controls li:first-child:nth-last-child(8), .ds-tab-navigation .et_pb_tabs_controls li:first-child:nth-last-child(8) ~ li { width: 25%; } .ds-tab-navigation .et_pb_tabs_controls li, .ds-tab-navigation .et_pb_tabs_controls li.et_pb_tab_active { height: 40px; /*set the height of the tabs when using multiple rows*/ } } @media only screen and (max-width: 1023px) { .ds-tab-navigation ul.et_pb_tabs_controls { height: 100%; } .ds-tab-navigation div.ds-tabs-text h2 { font-size: 80%; } .ds-tab-navigation div.ds-tabs-text a { font-size: 70%; } .ds-tab-navigation div.ds-tabs-text p { line-height: 1em !important; } } /*At this breakpoint, the tabs will stack one on top of the other, set the height of the tabs based on how many you have, 100 / 8 = 12.5*/ @media only screen and (max-width: 766px) { .ds-tab-navigation .et_pb_tabs_controls li, .ds-tab-navigation .et_pb_tabs_controls li.et_pb_tab_active { height: 12.5%; } .ds-tab-navigation p.ds-tabs-body { font-size: 70%; } .ds-tab-navigation .et_pb_tabs_controls li a { font-size: 70%; } .ds-tab-navigation div.ds-tabs-text { right: 0; width: 75%; padding: 10px; } } /*Hide the body text on smaller mobiles*/ @media only screen and (max-width: 500px) { .ds-tab-navigation p.ds-tabs-body { display: none; } .ds-tab-navigation .et_pb_tabs_controls li a { font-size: 50% !important; } } /*--------------------------------------------------------------------*/ /*--------End Tabs Module for Content Navigation by Divi Soup---------*/ /*--------------------------------------------------------------------*/
And that’s it. 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 X
Hello and thanks for this great recipe. However, I’m struggling a bit with the CSS. It seems that the only place that the custom CSS works is in the live customization section of the child theme. I would like to create several pages (projects actually) with tabs like this, but they will not all have the same number of tabs. At which level should I specify the number of tabs and make the percentage adjustments for mobile display?
Thanks for any suggestion you can offer.
Judy
You can view instructions of what yoou need to edit within the CSS. The calculations depend on the number of tabs.
To have multiple instances, you will need to duplicate the CSS and create new classes for each instance, and then adjust the values again.
Hello Michelle,
I like your tutorials and I am also a member of Divi Academy :). Can you please help me with something?
I the test page link I provide to you, I set the image width: 50% !important; but the image is half of the screen and the other half is black. How to make this image fill the space and center to the middle? My image is 1920X2880px. I try also to put the exact image with 600x900px but still dont work. Can you please help me resolving this?
Many thanks!
Dragos
Your image is showing as fullwidth, but your tabs module is in a column, which is restricting the width.
Hello, Michelle,
Great tutorial. I made it but the pictures in the tab are always on half of the screen, the other half is black. Any idea how to fix it?
Can you share a link where that’s happening so we can take a look?
Hello Michelle,
This is a fantastic tutorial. Amazing work!
I just have a quick question… Did you ever get past the stacking? I don’t want my tabs to stack. I’m moving through the editor but can’t get to it.
Thanks in advance!
They only stack on mobile – unless you’re using two, maybe three, tabs, there is no way to display them without stacking them.
Hi Michelle,
your tutorial rocks:)!! thanx alot for this!
Can you help me please, i have a problem with the responsive Design… The content Images are not visible by 768px Screen width.
On Bigger and smaller devices it works perfectly.
Thanks in advance,
AndyK (Germany)
The demos work OK on that size. Can you share a link to the specific site you are having the issue on?
Hello Shay,
thx for your respond:) Its an onepager and the sections i have trouble with are “Projekte” <-projects and "Jodelunterricht" <- Yoddeling teaching
Link: https://raess.that-is-action-design.de/
Thank you for your help!!
Andreas from Germany
Change line 198 from the full CSS to:
@media only screen and (max-width: 1023px){
.ds-tab-navigation ul.et_pb_tabs_controls {
height: auto !important;}
}
Thank you soooo much Shay!! it works:) Merci merci, so happy now!
Awesome!
Hi Michelle,
Thanks for your great site and this CSS and tutorial – i’m a huge fan of Divi-soupies!
I was wondering if there is a way to get the tabs to show at the bottom instead of the top – like bottom of the page navigation?
Would love your input here!
Thanks in advance,
Lynn (Cape Town, South Africa)
You can switch out these current top/bottom rules in the CSS to flip the menu to the bottom:
.ds-tab-navigation div.ds-tabs-text {
top: 0;
}
.ds-tab-navigation ul.et_pb_tabs_controls {
bottom: 0px;
}
Thank you so much
Hi Michelle Thanks so much for this FAB tutorial – it was just what I was looking for! I SO love your work! I’m having some troubles though (on this page http://lisabondarenko.com.au/retreats/) I have entered all my tabs, and when I click on any of the tabs, it takes me to the top of the page … and doesn’t change the tab. Yikes! Where have I gone wrong? Thank you in advance for any advice you can provide. Cathy ps – this page is still under development … so not looking it’s absolute best yet lol pps – You may… Read more »
It is working for me, guess you worked it out? Site looks great too, well done you
Thanks so much Michelle – all thanks to your wonderful template <3
(turns out a plugin was causing some site-wide dramas). Thanks for responding
Glad it is sorted Cathy
wow its’nice .. thank you Michelle
Most welcome
Hi Michelle, Thank you very much for this tutorial which has helped me a lot. I took your CSS and try to pick the things which I needed for my purposes. I only have some troubles with the media queries. I have 5 tabs so your 12.5% becomes 20% for me. I list below the code which I used (taken from your tutorial). I changed 12.5% with 20%. Maybe the wrong thing is the breakpoint which I don’t know how to calculate. The tabs stack one on top of the other but they looks like you can see at this… Read more »
Did you get this sorted? I can’t find any issues here?
This is fantastic!! Absolutely love this recipe! Your an inspiration to us all……
Thank you Glenn
Thank you so much for this tutorial. It has inspired me to want to learn more css. Very impressive indeed.
Thanks Robert, glad you like it
Just one quick question, the CSS tabs have changed location, or split up.
I want to put the CSS in to the page specific custom CSS box.
Now it says: Before, After, Main and so on..
Sorry but I don’t understand your question, can you elaborate please?
Hello Michelle,
I am from South Africa, I just wanted to say thank you for your tutorial. You have a lovely way of communicating what is needed and have a knack of making the complex easily doable.
I love your website. As soon as I can save enough (our currency is a lot weaker than the dollar
), I will definitely invest in one of your products.
Have a blessed day further.
Thank you so much Regan, glad it was useful for you
Hi Michelle ,
I´m from Spain and I discovered this page one week ago.
First I want to thank you all your job and this amazing tutorial.
But I have a question :
When I put css code in my seettings page divi builder and save all changes perfect.
But 15 seconds later If I try a quick preview again the codes doesn´t appear and I have to insert it one again.
Could you help me ?
Why does it happen?
Thank you so much
Sorry but that is an issue with Divi directly and not the code wo you will need to contact ET to resolve that issue
Hello Michelle, I was wondering that is it possible to add a divi module(s) inside the tabs?
There is a plugin called AC shortcodes that can do that, check Elegant Marketplace
Very happy to have found you Michelle. They are very interesting all your tutorials, including this one.
I have a question. Is it possible to put 2 rows of tabs?
Example:
1st row: 9 tabs
2nd row: 9 tabs.
Thank you.
P.S .: Excuse my English, I speak French
PierreD
Yes it is possible but will require modifications to the CSS
Hi! Awesome tutorial. Thank you for sharing.
Is there any way to add automatic transition functionality. For my situation in particular, I’m not sure if it is intuitive that the users has to tab through.
You could write your own timed animation and apply that class to the module, would require relatively advanced CSS skills though
Hi Michelle, Just download the layout and the CSS – thanks so much for making them available! Thought i’d give it a shot and see if I can rework it for my purposes. Mainly wanted the awesome styled tabs and then just text beneath them – no need for the images. Can’t seem to get the CSS to have any effect at all though on the tabs on my page? I don’t have any other CSS related to them at all and tried it in all three places suggested. Just thought i’d comment and see if there is a common… Read more »
I would really need a more detailed explanation or image of what you are trying to achieve and a link to your site to help further Adam
Hi Michelle First of all, many thanks for an excellent tutorial. I don’t know, I wasted or invested time to learn for past 6-7 days to find out exactly – what I got here. Man are not man if they are satisfied, so am I. I still have one unmet desire. On small screen, instead of tabs aligning on the left side with stacking over each other, I wanted to have them remain at top with only four tabs visible at a time and other tabs be visible on swiping ( scrolling). For reference, I want Youtube, Twitter or whatsapp… Read more »
Anurag that would require some JQuery which is not my forte I am afraid so can’t help to change the the functionality on this occassion
Do you have a solution that when you click the tab, it auto scrolls to the top of the page to reveal all content?
I haven’t tried this Ray no, sorry
Good work!!
I would like to be able to add content but not with width 100% but with a normal size of the content.
How i can do?
Thanks
Dave
The content is set to take up all the space in the CSS, just remove the width settings from these sections
.ds-tab-navigation img.ds-tabs-image {
width: 100% !important;
margin-bottom: -10px;
}
.ds-tab-navigation div.ds-tabs-text {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px;
color: #fff;
background: rgba(0, 0, 0, .7);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
Amazing Michelle!!! Just one but… it seams that the link at the bottom’s tab isn’t working on mobile (iphone6+). Any thoughts?
Seems after an update some code was getting overwritten. I have modified the recipe code but you can just add the !important declaration to this section which is the last in the CSS:
@media only screen and (max-width: 500px) {
.ds-tab-navigation .et_pb_tabs_controls li a {
font-size: 50%;
}
}
Hi Michelle – I was literarily having sleepless night wracking my brain to think of a way to show some martial arts in an appealing way that displayed well mobile and desktop. I was already on the track of the tabs module but didn’t like were I wound up with it… not giving up on the idea I searched to see if anyone else thought of similar. So I wound up here and I’m an instant fan! I was so close but you hit the nail. However I’m having a problem with how it displays on mobile… You can see… Read more »
Hey Edward, glad it was useful. I think you have now used another option for mobile layout?
Hi Michelle yes actually in the end mobile seemed to need something even simpler. Something more intuitive to how people use mobile. Setting the content up in mobile in a swappable slider felt more natural. However the page jitters up and down during swipes not loving that but I’ll look into that down the road.
I do now have another question. Is it at all possible to put the tabs at the bottom of the tab panel. I almost have that working but it’s not perfect. Maybe you’ve done this already?
Great site by the way thanks for sharing your knowledge.
Haven’t done this yet Edward but if you play with position:absolute you should be able to get there
Hmm I thought I replied sorry… Yes I decided mobile needed something more intuitive to swiping and used a slider in place. I don’t love the idea of maintaining 2 sets of data but so be it.
This is beautiful Michelle – thankyou so much.
I know I’m a bit of a newbie, but I was wondering how I would figure out how to not show the two text boxes at the bottom.
Any help would be greatly appreciated
That’s pretty simple Mike, just leave it out of the HMTL, so everything from the first div down, just leave the image
OMG Michelle this is gorgeous and so perfect! Thank you!
Welcome Madelein, glad you like it
Awesome post! Thanks for the wonderful tutorial!
Could you guide me on how to put a space between the tab buttons? As of now all the three buttons are connected!
Do you have a link and I can take a look
Michelle,
Thank you for such an awesome tutorial! I am pretty green to website development and seem to need some help.
Just about everything seems to be working perfectly, except the text and link at the bottom of the module. After adding in the CSS the tabs formatting and everything is fine, but I can no seem to get that text to appear on top of the image.
Any advice on mitigating this issue?
Thanks!
Do you have a link so I can take a look Taylor?
Thank U very MUCH !!!))) i am a newber in sait creation, but i deside to create one for events in our city (Odessa, Ukraine). I tried to release what you write to do a main menu from it. and that’s AMAZING!!! Thanx a lot for your post!!! But with mobile version it’s problem, because it looks like animation slider and nothing i can’t link. But i find a way and decide to do cool thing from this on mobile view)…
Thanks again and kiss U..))))
You are most welcome
OMG! I remember talkimg about this…
You’re a hero!!!
Thank you!
Thanks so much!
I’ve had a few problems with it not turning out and would love to see this available as a simple layout download.
Yup! I’m lazy.
I’ve tried it a few times.
Tabs appear on the side,
Then tabs appear on the top stacked on top of each other.
Arghh
Thanks though.
Trying again #4
Check the orange box at the bottom of the post Tim, all three versions are available in a download
SUPER EPIC !!! Thanks for post this one . I want to know this method work with shortcode ?
Well you could copy all the shortcodes from the module or try this little plugin: https://divisoup.com/acshortcodes
I think I am in love with you
thank you soooo much.
Welcome Susanne
This is amazing work Michelle. The patience you must have! Congratulations on another triumph.
Thanks Mike, love it when I get the time to play with things like this
absolutely wonderful, thank you Michelle so very much
Welcome Pat
Wow! This is great! Thank you so much.
Happy Holidays
Marc
Thanks Marc, happy holidays
Thank you, you are amazing!
And so are you Tammy
Epic!!
Thanks for the compliment Justin
Awesome! I would like to see the link at the bottom to use a DIVI button
You could potentially do this with shortcodes Mark but is much easier to just apply the Divi button styling to the link text, something like this:
.ds-tab-navigation div.ds-tabs-text a {
padding: 0.3em 1em;
border: 2px solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: transparent;
font-size: 20px;
font-weight: 500;
line-height: 1.7em !important;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
And then remove the underline animation
It is beautiful congratulations! and thank you.
Welcome Gérard
I thought you were a rock star, Michelle. Now I KNOW you are! Thank you!
Welcome Elise, and thank you