Making Columns with new tab element?

Support
#1

I am trying to use the newer tab element, but I need to be able to have 2 columns within the tabs. Is this possible? I am really just needing the image on one side, text on the other in 2 of my tabs, then I have a video one side, text on the other in my 3rd tab. I am struggling with alignment on everything.

Also, within the tab headers, how can I get the blue interaction color to be full width rather than just the small space around the word?


https://rrnewvintagerd.wpengine.com/

#2

Hello @tkcostello,

Thanks for writing in!

Regretfully you cannot insert a row/column element in the tab element. What you could do is to make use of the container and column element in the tab content instead. You can check out the shortcodes here:

Maybe you can insert something like this:

[container][column type="1/2"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus. In luctus mi in nisi condimentum, sed ornare enim tempor. [/column] [column type="1/2" last="true"] Place your IMAGE in here. [/column][/container]

We would love to know if this has worked for you. Thank you.

#3

Worked amazingly!! Thank you! https://prnt.sc/ohhuwr

Regarding the tab headers - is there a way to get the hover colors to go full width there? https://prnt.sc/ohhvfi meaning white space above and below filled in.

#4

Hello @tkcostello,

Thanks for updating the thread. :slight_smile:

You can remove the padding that’s assigned to Tabs header and after that please do following:

  1. In Tabs element under Customize > Setup > Class add class name.
  2. After that add following CSS under Pro > Theme Options > CSS:
.tabs-element .x-tabs-list ul {
    min-height: 5em;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#5

I added the CSS, but even with trying to tweak it, I just get this: https://prnt.sc/oinq35 https://prnt.sc/oinpqr

#6

Hi @tkcostello,

This is what I am seeing at the moment: https://screencast-o-matic.com/watch/cqi01DOw7C
Image and text are side by side. Can you confirm if you have figured this out already?

#7

Yes, I ended up doing something different there. Thanks for the help.

#8

You’re welcome,

Have a good day,

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.