Archived topic
Speedy Call to Action plugin with shortcode support?
11 replies · Started by Matthias on August 12, 2020
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
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;
}
}Wow David,
thank you, exactly what I was looking for!
All the very best,
Matt
You're welcome
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
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' );Excellent thank you,
Matthias
You're welcome
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
Hi there,
Try this:
.download-cta {
margin-bottom: 1.5em;
}Excellent, thanks a million Tom!
Matthias
You're welcome!
