Call To Action – like a shortcode

[David]

In your code snippet can you try changing to: Run Snippet Everywhere

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

I just found out our technical support had installed a plugin called Remove Orphan Shortcodes. I have deactivated it.

But, what happens now is that the bracket cta_notstarted bracket is visible, but no actual formatting.

What else could be going on?

[David]

Have you tried removing and adding them back in?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

Yes, it’s not working. Perhaps I am doing it wrong?
What exactly should I write on the actual page?

[David]

It should be as simple as adding:

[shortcode-name]

sounds like something else is blocking shortcodes from being executed. Maybe your tech guys have been up to something else?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

Hi David,
I found the mistake . it was my spelling… 🙂

However, a few follow-ups:

The padding on mobile looks funny – do I need to adjust the CSS?

I would like to change the color of the header used in the CTA. I imagine I just name it, for instance h55, and then add h55 in the CSS? But I tried that and it does not show. Any tips and tricks for me?

Thanks 🙂

[David]

Awesome 🙂 looks good!

So no don’t change the <h3> to <h55>
Add this CSS to style the heading:

.custom-cta h3 {
    color: #f1bf74;
    font-size: 20px;
    font-weight: bold;
}

and to set different padding for mobile add this:

@media (max-width: 768px) {
    .custom-cta {
        padding: 5%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

Thanks! 🙂
The only problem with the h3, is that we use it on a lot of other places as well. So I need to somehow name the CTA h3 differently, and be able to style it in the css. Hence my thinking of calling it h55. But perhaps I can call it something else? What would that be, and how would it look in the snippet and in the CSS?

[David]

Change the <h3>Headline</h3> to <span>Headline</span>
Then in your CSS wherever you have h3 swap it for span

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

Strange – for some reason it does not work. As soon as I change h3 to span in the CSS nothing happens. Even the bottom margin is no longer being added to the span. Any idea what may be causing this?

It’s almost as if the theme does not allow for any other heading than the default ones…

[David]

Well it is peculiar – nothing wrong with the CSS….. so instead lets do this.

Replace your markup with <p class="cta-headline">Headline</p>

Then you can style the headline like so:

p.cta-headline {
    color: #f1bf74;
    font-size: 20px;
    font-weight: bold;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

It’s very peculiar.
I took a screenshot of everything. In this image you can see the snippet, the CSS, and even the page with the heading highlighted and “inspected” in Firefox. For some reason the formatting does not show. I even tried two different ways of adding the CSS for the cta-headline…

Can you spot anything strange?

https://www.dropbox.com/s/ybo8e16yle28ave/Screenshot%202019-05-29%2020.05.28.png?dl=0

[David]

This CSS:

@media (max-width: 768px) {
    .custom-cta {
        padding: 5%;
    }

it is missing the closing bracket for the media query – it should be this:

@media (max-width: 768px) {
    .custom-cta {
        padding: 5%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

Thank you David! 🙂
Fantastic support 🙂

[David]

You’re very welcome – glad we got there in the end 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts