adding buttons?

To be more specific, what I'd like to do is something like what you've done in the third section of the add-on page (https://generatepress.com/add-ons/) where each of the add-ons has its own clickable image with the buttons below it.

But on my page, I just want there to be two of these clickable images with one button below each. The image/button combos would be side by side.

Does that help? Does that make sense? Is this a GP thing or will I need to learn some code to do it?

Thanks again!

Or maybe it'd be better to do it like the second section of the GP homepage, where it's little sections of text. I could do two little sections of text with a button beneath each. I just don't know what they're called to figure out how to do them myself!

Hi Ashley,

This might help: https://generatepress.com/forums/topic/custom-colors-for-buttons/#post-143266

To create the columns, I use this: https://en-ca.wordpress.org/plugins/lightweight-grid-columns/

Let me know if you need more info :)

thanks SO MUCH, Tom! I love that column plugin and I'll probably be using it a lot from now on.

Follow-up question: I have 2 columns, and I want the columns to be centered on the page. (Not the content centered, but the location of each "card" centered.) How can I do this?

I've got each column set to 25% of the desktop right now (50 on tablet and 100 on mobile). I experimented with "padding" the left side with an empty column, which gets the desktop look I'm after. Is there a better way? I also tried to find padding for left and right in the section, but couldn't find it. (Actually there are a few times I've wanted to pad left and right but haven't been able to figure it out.)

Thanks for any help!! Now I'm off to figure out the button thing!

just for your reference, the page I'm working on is ashleygainer.com

To center them, I would actually use HTML instead of the plugin.

Something like this:

<div class="centered-columns">
  <div class="grid-50 tablet-grid-50 mobile-grid-100">
    Text
  </div>
  <div class="grid-50 tablet-grid-50 mobile-grid-100">
    Text
  </div>
</div>

With this CSS:

.centered-columns {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}