[Resolved] Speedy Call to Action plugin with shortcode support?

[Matthias]

Hi Team,
kindly check this page: https://heilfasten-portal.com/fachartikel-fasten/mittelmeerdiaet-mediterrane-diaet.html
At the end you will find a red call to action “Download” banner, which is created using convert plus. Now: We tested thrive leads and also convert plus. Both add a lot of weight to the page.
We do not use gutenberg but the classic editor. The CTA’s are added via shortcode.

Do you have some magic plugin or idea how I can have a responsive CTA that truly is lightweight and added via shortcode?
I tried a simple graphic/image, but run in the reponsive issue with regards to texts.
Any great idea is highly appreciate in the times where speed matter even more!
Thank you,
Matt

[David]

Hi there,

you could create your own shortcode to ouput some static HTML:

function custom_cta_shortcode() {
    ob_start();
    ?>
    <div class="download-cta">
        <div class="inside-download-cta">
            <p class="cta-text">CTA message goes here</p>
            <a class="button" href="url_to_download">Download</a>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'download-cta', 'custom_cta_shortcode' );

Your shortcode: [download-cta]

Then some CSS to style it:

/* Set background color */
.download-cta {
    background-color: #ff0000;
}

/* Add Padding and create flex row */
.inside-download-cta {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Normalise button and text margins */
.inside-download-cta>* {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

/* Test styling */
.download-cta .cta-text {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

/* Button Styling */
.download-cta .button {
    margin-left: 10px;
    margin-right: 10px;
    background-color: #000;
    color: #fff;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
}

.download-cta .button:hover {
    background-color: #444;
}

/* Responsive make elements stack on small devices */
@media (max-width: 768px) {
    .inside-download-cta {
        display: block;
        text-align: center;
    }
}

[Matthias]

Wow David,
thank you, exactly what I was looking for!
All the very best,
Matt

[David]

You’re welcome

[Matthias]

Hi David,
one more question 🙂

If I want to create a second shortcode e.g. [download-cta-m]
that will be displayed on the same post, with the same styling, how do I do that?

I am asking as I tried to create the function twice resulting in an error… I guess i need one function (snippet) for both shortcodes?

Thank you,
Matthias

[David]

Yes, make a duplicate of the Shortcode and gave it unique function and short code names eg.

function custom_cta_shortcode-two() {
    ob_start();
    ?>
    <div class="download-cta">
        <div class="inside-download-cta">
            <p class="cta-text">CTA message goes here</p>
            <a class="button" href="url_to_download">Download</a>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'download-cta-m', 'custom_cta_shortcode-two' );

[Matthias]

Excellent thank you,
Matthias

[David]

You’re welcome

[Matthias]

Hi David,
I searched but could not figure it out… How can I add a line break to the CTA in CSS after the CTA?
I just need one <br> after it but in CSS.
Otherwise it sticks to much to the text underneath…
Thank you again for your help,
Matthias

[Tom]

Hi there,

Try this:

.download-cta {
    margin-bottom: 1.5em;
}

[Matthias]

Excellent, thanks a million Tom!
Matthias

[Tom]

You’re welcome!

[Author]

Posts