Placing multiple cards across a single row using Pro - instruction please

Support
#1

Hi! I am feeling immensely frustrated, having just started using X-pro (and wordpress). While it is relatively easy to design a row of cards using css flexbox, I am not finding it intuitive in wordpress with X pro. I want to design a card with an image, title and caption (vertically aligned), with three across the screen for lg screen and one for xs screen. However in the Content builder for pro I can only see sections, rows–which can be split into columns-- and can only place a single element (e.g. image, or text …) in each row column. I want to place a card in each row column (flexbox with image, caption and text elements). I would also like to be able to style the card, with a border or link the card to another page etc.

I am hoping I have missed a really obvious way to do this and am that you can explain it to me.

Thank you!

Regards Christine Booth

#2

Hi Christine,

Thanks for reaching out.

You mean a flip card element? Or are you just trying to create a content which similar to a card? What you could do is use Global Blocks to compose your preferred content, please check this https://theme.co/apex/forum/t/global-blocks/24723. Then you can simply insert global block element that you created as one single item within the column of cornerstone.

As for customizing the borders, you can inspect the section and find this area while you’re in a global block builder.

And there is no limit of how many elements you could add in a single column.

Thanks!

#3

Thank you for your prompt response!

Although I paid for X-theme (with Cornerstone), when I opened my account on this site, I paid some more to get Pro. I haven’t been able to add the X-theme to my local wamp-server–so I don’t have Cornerstone. (my envato licence won’t allow its installation?) Pro only seems to allow the addition of a single element to a “container” ie column within a row. I’ll give the global block a go. - but I will be using Pro to edit it. Would I be able to just write my own code snippet (with custom css) then save it as a preset - or global block? I am really only just learning how to use WordPress and X Pro.

Thank you for your patience!
Regards
Christine

#4

Hello @TinDTC,

Please be advised that Cornerstone is integrated in Pro theme. You can edit a page and insert the same elements like you do in Cornerstone.

Pro only seems to allow the addition of a single element to a “container” ie column within a row.

  • You can insert a section, multiple rows and columns. You can only have multiple rows in a section and multi columns within a row. You cannot nest columns by the way. Column inside a column is not possible with Cornerstone or in Pro editor. If there is a need to have multiple or nested columns, perhaps this video tutorial could help you:
    https://www.youtube.com/watch?v=sQ5qq6P7xUQ

Hope this helps.

#5

Thank you! The video was really helpful. I have managed to create a standard card element and saved it as a global block. However, because I need to change the image and text in this “card element”, it isn’t really good as a global block. But I have learnt how to do it and that is good!

I’ll gradually get the hang of this!

Just one more small question. Having made a “card element” inside a section (image + title + text + cta button). Can I change the background color for a hover- state of the section/row? It would be nice if the background changes when the user clicks on the row div.( Or do I need to learn how to customise with js now?..my next lesson.

Kind regards
Christine

#6

Hi Christine,

To change the background color of section/row on hover, please add the my-section class to your section:

After that add this custom CSS under Theme Options > CSS:

.my-section:hover {
     background-color: #f0f0f0 !important;
}

Hope it helps :slight_smile:

#7

Yes. Fabulous! In fact I did use similar css in the global block (used the css menu on the far LHS panel)–but had allocated bg colours to too many of the divs! Seeing your answer encouraged me to look further for my error, because your answer gave me the confidence to know that the css panel can work.

So I forge ahead… thank you for your help.

Kind regards, Christine

#8

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#9

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