Help with setting up a team page

Hello
I am trying to set up a team page similar to this one:

I also like this one:

Can you please provide some guidance on how I may achieve this. I have tried to use the ‘Team: 3 Column’ template but it appears to be quite basic. The aspects I want to achieve are (a) get the ‘Read more/learn more’ buttons in there, (b) have the ‘long bio’ open up in a pop-up and © get the pictures to fade on rollover.

Thank you.

Hi there,

Each of the team member here have tried individual pages like this that gets opened in a lightbox.

What you can do it to make three columns and add a classic image, custom headline, and text element . The read more link is just a text link that opens the lightbox.

You will then have to enable the link option of the classic image and add the individual team page as the url.

Once you save that, the image will automatically have the hover state and when you click it, it will open the page.

The sample site that you have provided is using a third party lightbox plugin but X has a built in lightbox feature but you might need to further customize it as it goes beyond the scope of our support.

But to get you started, to open the team member page in a lightbox instead of directly llinking to the page, add a Raw content element somewhere on the page and add this shortcode:

[lightbox selector=".img-lightbox"]

Notice that the selector is img-lightbox so you will have to set img-lightbox as the class of the images that you want the link to be opened in a lightbox.

Lastly, to link the Read More text to the same lightbox, you will have to use this in the text element:

<a href="THE_PAGE_LINK" class="img-lightbox">Read More</a>

Hope this helps you get started.

Cheers!

1 Like

Thank you so much.

I have completed the steps you provide here, but unfortunately, the lightbox is not behaving very well.

My site is located at:
www.test.rockycitypsych.com/wp

Would you mind checking it out and letting me know if what is there is how it should look.

I’m thinking I may need to invest in a 3rd party lightbox.

Hey @turnupthemetal,

Your sample sites use a third party lightbox. X lightbox only supports either a single image or a video. It does not support HTML content like your sample sites. Regretfully, you will need to find a third party content lightbox plugin.

Thank you for understanding.

1 Like

Ok. Thanks.

You’re welcome, feel free to get in touch with us regarding any queries about the Pro, X|Theme, and Cornerstone.

Cheers!

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