adding buttons?

[Ashley Gainer]

Hi! I’m not sure this is the right place to ask this, but I figure here’s a good place to start since you (Tom) are so awesome!

I’m tweaking my home page at ashleygainer.com and I’d like to add a couple of buttons on there, not unlike the buttons you have on the GP homepage. How do I do that? Is there a special “button” code I can add somewhere in the html/css?

Thanks for any help!

[Ashley Gainer]

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!

[Ashley Gainer]

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!

[Tom]

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 🙂

[Ashley Gainer]

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!

[Ashley Gainer]

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

[Tom]

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;
}

[Author]

Posts