Tabs Left - Content to the right

Support
#1

Hey Folks,
I looked for this in the archives, seems like the answer that was provided in 2019 no longer applies - or at least I don’t see a way to implement it. I’d like to recreate the effect seen on this page in the “Pricing Factors” section:

https://vermontframes.com/pricing/#factors

I believe this can be done with the Tabs element yes?

Best,
Gregg

#2

Hello @lorax,

Thank you for the inquiry.

You can replicate the same layout using slider triggers. Place buttons in a left column and a slider on the right. Then, apply triggers to the buttons in the left column to activate specific slides. You can find more information about this in the following documentation:

– https://theme.co/docs/sliders#custom-attributes

This video should also help: https://www.youtube.com/watch?v=do45n9xMUVo.

Let us know if you need more info.

Best regards,

#3

Hey @Ismael,
Wonderful! I’ve never used the stacked slider with the custom attributes before. Very cool functionality! Thank you.

#4

No problem! Please don’t hesitate to reach out if you have more questions. Have a nice day.

#5

@Ismael Is there a way to set the interactive state of each slide trigger so the user will know what the current slide is they’re looking at?

#6

Around 2:30 in the video, it shows how to adjust the style of the element where the slider trigger is attached, on hover or click. You can check it here: https://youtu.be/do45n9xMUVo?t=151

Hope that helps.

#7

@Ismael - That’s not quite what I meant. I have the interactivity - slides change as their supposed to. But if I go to slide 4 I want the column trigger for slide 4 to hold its interactive state. Does that make sense?

#8

Thank you for the clarification. Unfortunately, there’s no built-in option for this, but if you’re using the Button element for example, you can try targeting the focus or active (clicked) state to indicate the active slide trigger. In the Customize > Element CSS section, you can add something like this:

$el:focus { border: 3px solid red; }

Let us know the result.

#9

Bummer - okay. I built the triggers using text so no, that’s not going to work. I’ll keep what I have and if I have time later, mess with it to get to an interactive state solution. Thanks!

#10

Hello @lorax,

Thank you for the update. Understood regarding the current setup with text-based triggers. Please don’t hesitate to reach out if you need further assistance.

Thanks