[Resolved] making a call-to-action button section

[Whelen Troy]

Hi Tom,

I need to make a call to action button section at my homepage wherein, there is a text then followed by a call-to-action button.

How can I achieve that using the sections in page builder of the gp premium?

thank you!

[Leo]

Hi there,

If you are using a page builder plugin then it should be able to add a button.

If you are just using GP then you can then this should help: https://docs.generatepress.com/article/adding-buttons/

[Whelen Troy]

Hi Leo,

Thanks! By the way,

1. I wanted to put borders on the call-to-action box.
2. I want to change the text size.

How do I achieve this?

[Tom]

Can you link me to the page with the box so far?

[Whelen Troy]

Hi Tom,

This is the link to my progress: http://whelentroy.com/

this is somehow what I wanted to achieve: http://whelentroy.com/wp-content/uploads/2017/05/juanmacau-layout.jpg

Thanks much Tom.

[Leo]

Looks like you are looking for a ghose button. Try the CSS here: https://docs.generatepress.com/article/adding-buttons/#ghost-buttons

[Whelen Troy]

Hi Leo,

I tried what you said. But I seems like something’s wrong. I added the code and tried to edit some.

But this is how it looked like: http://whelentroy.com/

The call-to-action button is invisible. You can only see it when you hover through the text.

[Leo]

It just has white text when not hovered. Try adding a color style:

.button.ghost,
.button.ghost:visited {
    background: transparent;
    border: 2px solid #000000;
    color: #fe5e00;
}

[Whelen Troy]

Got it bro! Thank you so much!

One more thing, I wanted to make the text bigger. Like it will almost occupy the whole section. What code should I put there? or anything?

[Leo]

Try

.button.ghost,
.button.ghost:visited {
    background: transparent;
    border: 2px solid #000000;
    color: #fe5e00;
    padding: 5px;
}

[Author]

Posts