[Resolved] Call To Action – like a shortcode

Home Forums Support Call To Action – like a shortcode

Viewing 15 posts - 16 through 30 (of 31 total)
  • Author
    Posts
  • #912981
    David
    Staff
    Customer Support

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

    #912994
    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?

    #913077
    David
    Staff
    Customer Support

    Have you tried removing and adding them back in?

    #913176
    Michael

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

    #913352
    David
    Staff
    Customer Support

    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?

    #914141
    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 πŸ™‚

    #914171
    David
    Staff
    Customer Support

    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%;
        }
    }
    #914178
    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?

    #914186
    David
    Staff
    Customer Support

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

    #914191
    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…

    #914194
    David
    Staff
    Customer Support

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

    #914613
    David
    Staff
    Customer Support

    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%;
        }
    }
    #914628
    Michael

    Thank you David! πŸ™‚
    Fantastic support πŸ™‚

    #914634
    David
    Staff
    Customer Support

    You’re very welcome – glad we got there in the end πŸ™‚

Viewing 15 posts - 16 through 30 (of 31 total)
  • You must be logged in to reply to this topic.