Classic Card - Click to Flip?

Hello ThemeCo,

My company is attempting to make a design change on our About Team page (http://edforwarddc.org/about/team-2/) that’s currently using the Classic Card element.

We are trying to make the Classic Cards flip ONLY when clicked. Currently, it flips when a user hovers with their cursor over the card. (Note: On mobile versions, it functions as click-to-flip, and we want the same for desktop.)

When using the CornerStone editor on the existing Classic Card, we can’t find a option for click-to-flip. Do we need to use a shortcode or other customize approach? We noticed that there is a ID and Style box at the bottom of the CornerStone editor option menu.

How do we go about making this change?

Thank you.

Hi @edforwarddc,

Thanks for reaching out.

Unfortunately, it’s not currently possible. It’s only limited to hover for desktop and tap for mobile. It would require custom development of the actual element which we don’t recommend.

Thanks!

Hello Rad,

Thank you so much for your reply. Okay, we understand the limitation.

Is there another element you can recommend we use that allows bio text to open/reveal itself through a click and still allow us to feature staff photos prominently?

We’re also really wanting to make sure that text can be copy and pasted easily by a site visitor at any time. (The classic card element we use now flips automatically, making copy/paste really challenging and hence our original hope that click-to-flip could be done.)

Thank you for helping us understand all of our options!

Hello @edforwarddc,

Thanks for updating in!

Instead of using a classic card element, you can use a combination of elements. You may create a 3 column rows and then in each column, insert an image element for the staff photo, a headline or text element and a content area modal element. When the user clicks on the modal element, a popup modal will appear and display the information about the staff photo.

Hope this make sense.

Hello RueNel,

Thanks for the awesome suggestion! I think that’s something we might be able to play around with.

I’m curious though, will the column, image, and popup modal function in the intended way on mobile as it will on desktop? In other words, will these elements working together adapt well on both device types?

Thank you!

Hi @edforwarddc,

Yes, it will work the same on mobile but if you intend to have a different look for each device then you can use HIDE DURING BREAKPOINT option. Like display flip card on mobile, then modal on the desktop. Please check this, https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Thanks!

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