How can I make a block like this, when the regular tab widget looks different?
This topic has 11 replies, 2 voices, and was last updated 4 months ago ago by Goostaf
How can I make a block like this, when the regular tab widget looks different?
Dear @Goostaf,
Thank you for reaching out.
We would appreciate it if you could provide additional screenshots or a video, along with a more detailed explanation of the issue or the outcome you are trying to achieve. This will help us better understand your request and assist you more effectively.
Thank you for your cooperation.
Best regards,
The 8Theme Team
I want to implement the same block as in your demo, but I don’t understand how to do it. Is it Tab or something else? How can we do it? we want exactly this block with tabs and style
Dear @Goostaf,
We hope this message finds you well.
Kindly add more inner rows as shown in the screenshot below for your reference:
Please let us know if you need any further assistance.
Best regards,
The 8Theme Team
I also put a tab, but your style is different, and it displays differently on mobile
Dear @Goostaf,
We hope this message finds you well.
We would like to kindly ask you to add the following custom CSS code, which is used in our demo:
/* Tabs */
.et-tab-content {
border: 3px solid #E95D2A;
}
.et-tabs-wrapper .tabs-nav {
border-bottom: none !important;
padding-bottom: 0px !important;
}
.et-tabs-wrapper .tabs-nav li {
border-top: 2px solid #e1e1e1;
border-left: 2px solid #e1e1e1;
max-width: unset;
margin: 0;
}
.tabs .tab-title {
padding: 15px 62px 15px 62px !important;
background-color: #FAFAFA;
font-size: 16px !important;
font-weight: 500;
text-transform: none !important;
}
.tabs-nav li:last-child {
border-right: 2px solid #e1e1e1;
}
.tabs .tab-title:hover, .tabs .tab-title:focus {
color: #e95d2a;
}
.et-tabs-wrapper .tabs .tab-title.opened,
.et-tabs-wrapper .tabs .tab-title:hover {
background-color: white;
}
.template-container .et-tabs-wrapper .tabs-nav li.et-opened:before,
.template-container .et-tabs-wrapper .tabs .accordion-title.opened:before {
display: none;
}
Please feel free to make any adjustments to the code as needed.
Best regards,
The 8Theme Team
thank you, and you can see all the tabs on your mobile, but we can only see one on top, and the others are on the bottom
Dear @Goostaf,
Thank you for reaching out.
Could you please let us know where you saw those tabs? It is possible that they were generated by Elementor rather than WPBakery Page Builder.
For your reference, we kindly invite you to check the mobile version of our demo at the following link:
https://xstore.8theme.com/demos/2/niche-market02/
Best regards,
The 8Theme Team
Yes, it’s the same as mine, but in that demo, it seems to be Elementor, so it doesn’t work on WPBakery Page. The tabs are lost on mobile, and you have to scroll down to see the other tabs. In Elementor, it’s convenient because all the tabs are visible at once.
Dear @Goostaf,
Unfortunately, Elementor and WPBakery utilize entirely different structures and layouts for their elements, which makes direct compatibility between the two challenging.
If you would like to suggest a feature or improvement, we kindly invite you to submit your request through our official roadmap page. Please note that you will need to create an account to do so: https://support.wpbakery.com/roadmap
Best regards,
The 8Theme Team
Thanks for the support! My topic “How can I make a block like this, when the regular tab widget looks different?” has been successfully resolved.
The issue related to '‘How can I make a block like this, when the regular tab widget looks different?’' has been successfully resolved, and the topic is now closed for further responses