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