Este post nace de la demanda de muchos usuarios que nos preguntáis como hemos colocado el CTA (llamada a la acción) que podéis ver en la parte inferior de este post invitando a los usuarios y lectores del blog a suscribirse. Y como en AsiThemes nos encanta la transparencia, pues os lo contamos sin problemas :)
Este sistema es ideal para captar nuevos suscriptores en tu Membership Site. Es muy poco invasiva a la par que muy efectiva dado que el usuario siempre tiene el CTA visible y llama la atención sin molestar. ¡A nosotros nos funciona!
Para colocar un CTA en los posts de tu web desarrollada con WordPress Genesis Framework necesitas realizar 3 acciones en el código:
- En el functions.php
/* Add html code to single post */
add_action('genesis_entry_footer', 'asi_genesis_entry_footer');
function asi_genesis_entry_footer() {
if (is_single()) {
?>
<div class="footer-post-cta">
<div class="left-wrapper">
<img src="https://asithemes.com/wp-content/themes/asi/images/logo-asithemes-mini.svg"/>
<div class="subtitle">
<div>Lorem ipsum dolor sit amet, consectetur</div>
<div>Nullam elementum sapien mauris, quis vulputate</div>
</div>
</div>
<div class="btn-wrapper">
<a class="button" href="#">Suscribirse</a>
</div>
<div class="clearfix"></div>
</div>
<?php
}
}
Sino, usando el plugin https://es.wordpress.org/plugins/genesis-simple-hooks/ copiando el siguente codigo en el campo del hook «genesis_entry_footer»
/* Add html code to single post */
<?php if (is_single()) { ?>
<div class="footer-post-cta">
<div class="left-wrapper">
<img src="https://asithemes.com/wp-content/themes/asi/images/logo-asithemes-mini.svg"/>
<div class="subtitle">
<div>Lorem ipsum dolor sit amet, consectetur</div>
<div>Nullam elementum sapien mauris, quis vulputate</div>
</div>
</div>
<div class="btn-wrapper">
<a class="button" href="#">Suscribirse</a>
</div>
<div class="clearfix"></div>
</div>
<?php } ?>
2. En el javascript scripts.js hay que añadir esto para cuando el post llega al final de la pagina haciendo scroll
jQuery(document).scroll(function () {
var scrollVal = jQuery(document).scrollTop() + jQuery(window).height();
var footer_cta = jQuery(".site-footer").offset().top;
if (scrollVal >= footer_cta) {
jQuery(".footer-post-cta").addClass("relative");
} else {
jQuery(".footer-post-cta").removeClass("relative");
}
});
Otra manera es usando el apartado «Theme Settings->Header/Footer Scripts->Footer Scripts» del Personalizador incluyendo el siguiente código
<script type="text/javascript">
jQuery(document).scroll(function () {
var scrollVal = jQuery(document).scrollTop() + jQuery(window).height();
var footer_cta = jQuery(".site-footer").offset().top;
if (scrollVal >= footer_cta) {
jQuery(".footer-post-cta").addClass("relative");
} else {
jQuery(".footer-post-cta").removeClass("relative");
}
});
</script>
3. Por ultimo tenemos el css para darle estilos al CTA, en el style.css o en el personalizador en el apartado «CSS Adicional»
.entry-footer .footer-post-cta{
border-radius: 5px 5px 0 0;
background-color: #ffffff;
box-shadow: 0 0 2px 0 #dedede;
bottom: 0;
position: fixed;
padding: 10px;
max-width: 720px;
width: 100%;
}
.entry-footer .footer-post-cta.relative{
position: relative;
}
.entry-footer .footer-post-cta .left-wrapper{
float: left;
min-width: 470px;
}
.entry-footer .footer-post-cta img{
display: inline-block;
max-width: 40px;
vertical-align: middle;
}
.entry-footer .footer-post-cta .subtitle{
font-size: 13px;
color: #8492a6;
display: inline-block;
width: calc(100% - 55px);
vertical-align: middle;
margin-left: 10px;
}
.entry-footer .footer-post-cta .subtitle div:first-child{
font-size: 17px;
font-weight: 600;
color: #000000;
}
.entry-footer .footer-post-cta .btn-wrapper{
float: right;
}
@media only screen and (max-width: 800px){
.entry-footer .footer-post-cta{
width: 90%;
}
.entry-footer .footer-post-cta.relative{
width: 100%;
}
.entry-footer .footer-post-cta .left-wrapper{
min-width: 435px;
}
}
@media only screen and (max-width: 650px){
.entry-footer .footer-post-cta {
width: 90%;
}
.entry-footer .footer-post-cta .left-wrapper{
min-width: auto;
text-align: center;
float: none;
margin-bottom: 10px;
}
.entry-footer .footer-post-cta .left-wrapper .subtitle{
margin: 0;
width: 100%;
}
.entry-footer .footer-post-cta .left-wrapper .subtitle div{
font-size: 15px;
}
.entry-footer .footer-post-cta img,
.entry-footer .footer-post-cta .subtitle div:last-child{
display: none;
}
.entry-footer .footer-post-cta .btn-wrapper{
float: none;
}
}