Un opt-in es el elemento fundamental en tu blog si quieres enfocarte en la captación de suscriptores. En pocas palabras, son todos aquellos elementos que disponen de unas zonas para dejar correo electrónico y nombre (o cualquier otro parámetro que prefieras) de forma que el blogger pueda captar suscriptores desde su propio sitio.
He de reconocer que en esta apartado nunca me he metido de fondo. Mi trato con los opt-in se había reducido a implementar el código que proporciona MailChimp en mi blog o a la utilización de uno de los múltiples plugins para captar suscriptores que existen para WordPress.
¿El motivo de no tener opt-in personalizados?
Soy un negado con el tema del diseño web. Como muchos bloggers no tengo conocimientos de HTML o CSS, por lo que la creación de todos estos opt-in se me hacía bastante complicado.
Sin embargo, con el nuevo diseño del blog quise aprender los conceptos básicos de diseño web de tal forma que no tuviera que recurrir a un tercero para realizar modificaciones en mi blog. Y, como siempre, tanta curiosidad desembocó en la creación de las diferentes zonas de captación que podéis encontrar en el blog.
En el post de hoy quiero enseñarte cómo crear opt-in para construir tu lista de suscriptores, de tal forma que puedas crear uno sin tener conocimiento de programación o diseño web.
Recursos y herramientas que necesitas para diseñar tu opt-in
Como podréis adivinar, una persona que no tenga ni la menor idea de programación como yo es práticamente imposible que sea capaz de generar el código para implementar un opt-in. Es cierto que he aprendido algo de CSS para modificarlos a mi estilo, pero la base de lo que te voy a contar está basada en dos tutoriales que encontré en Internet:
– Horizontal Opt-in en Genesis utilizando el plugin Genesis eNews Extended
– Horizontal Opt-in con una imagen de fondo a tamaño completo en Genesis
Además, de estos dos tutoriales necesitarás utilizar el plugin Genesis eNews Extended y un editor como Notepad++ para poder editar todo el código.
Lo que te voy a mostrar en este post es una variante de ambos tutoriales realizada por mí. Gracias a esta personalización he podido adaptar los opt-in a determinados posts y páginas, cambiar su aspecto general y modificar los colores de los mismos. Como he dicho, no soy diseñador y es posible que existe una alternativa que utilice menos código. No obstante, esto es DIY y lo que a mi me ha funcionado.
Cómo insertar un opt-in horizontal a tamaño completo en tu blog
Vamos a pasar a la acción. Voy a mostrarte los pasos necesarios para crear tus propios cuadros de suscripción a tamaño completo que puedas implementar de forma sencilla en tu blog.
1. Registrar y añadir una nueva zona para widget en tu blog
Ve al archivo functions.php que se encuentra alojado en tu child theme de Genesis y añade la siguientes línea de código:
2. Personaliza el el diseño
Una vez creado el opt-in, vamos a añadir una serie de líneas de código al archivo style.css del child theme de nuestro blog. Esto nos permitirá configurar el aspecto con el que se mostrará a los lectores. Como podéis apreciar, he realizado unas cuantas modificaciones para que se adapta a los distintos formatos de pantalla que tengo configurados en el nuevo diseño del blog.
3. Instala y configura el widget de Genesis eNews Extended
Para finalizar, solamente queda poner en marcha el widget que hemos creado. Para ello, una vez has instalado Genesis eNews Extended dirígete a la pestaña de Widgets dentro del panel de control de WordPress.
Verás que ahora se ha creado una nueva área bajo el nombre de Horizontal Opt-In. Es en este lugar donde tienes que arrastrar el widget de Genesis eNews Extended y configurarlo según el servicio de email marketing que utilicéis.
Me gustaría explicar cómo configurarlo, pero es un procedimiento distinto para cada herramienta. Yo personalmente utilizo MailChimp, por lo que si alguno de vosotros usáis el mismo y tenéis dudas de cómo configurarlo no dudéis en mandarme un mail y os explico cómo hacerlo.
Un pequeña variante de código para configurar la visualización de Opt-In
Si os fijáis en mi blog, utilizo dos Opt-In distintos a continuación del Header. En la Home utilizo uno en el que puedes agregar una imagen de fondo y que os pasaré a explicar a continuación. En el resto de posts y páginas hago uso de este mismo opt-in.
Para llevar a cabo esta personalización solamente tendréis que añadir lo siguiente a vuestro archivo functions.php:
Cómo insertar un opt-in horizontal como una imagen de fondo a tamaño completo en tu blog
Este segundo opt-in del que os hablo es una personalización del anterior. En concreto lo que podremos añadir es una imagen de fondo a tamaño completo en lugar de un fondo con un sólo color. Para ello es necesario añadir algo de JavaScript al blog, pero tranquilos que no es nada complicado.
1. Añadir los archivos JavaScript
Añadiremos dos archivos que son totalmente necesarios para habilitar la imagen de fondo. Para ello, el primer paso previo que tenemos que hacer es crear una carpeta en la ubicación de nuestro child theme bajo el nombre de js.
Aquí añadiremos los dos JavaScript que te comento. El primero se llama jquery.backstretch.min.js y sobre él no tendréis que realizar modificación alguna. Simplemente descargarlo y copiarlo a la carpeta que os he mencionado.
El segundo archivo, backstretch-init.js posee la información sobre la ubicación de la imagen que queréis añadir de fondo.
Para añadir una vuestra personalizada vamos a hacer lo siguiente:
1. Crear o descargar una imagen que usaréis como fondo
2. Subir dicha imagen a la galería de WordPress y anota la URL que se genera
3. Copiar dicho URL y sustituirla en la que aparece dentro del archivo backstretch-init.js. Recordad que la comilla que aparece antes y después de la URL no se debe borrar.
Una vez tenemos configurado archivo, solamente nos queda subirlo al mismo directorio js que habéis creado anteriormente.
2. Registrar la correpondiente zona de widget
Una vez más tendremos que realizar un procedimiento muy similar al caso anterior. Vamos a nuestro archivo functions.php (recordad que siempre nos referimos al child theme) y añadimos las siguientes líneas de código.
3. Configurar el diseño del widget
Seguidamente de añadir el área para el widget, es hora de personalizar tanto esta zona creada como el aspecto del opt-in. Para ello, vamos de nuevo al archivo style.css y añadimos las siguientes líneas de código (recuerda que están configuradas con la estética de mi blog):
4. Implementa el widget en el blog
Del mismo modo que lo hemos hecho antes tendremos que configurar Genesis eNEws Extended. La única diferencia es que, en esta ocasión, el área de widget aparece bajo el nombre Horizontal Background Opt-In para confundirla con la anterior.
Otra personalización adicional
Este widget es el que se muestra en la home de mi blog. Es cierto que todavía no he añadido ninguna imagen de fondo, pero lo tengo habilitado de tal modo para su puesta a punto en unas semanas.
Si queréis tener un caso similar al mío y que solamente se muestre en la Home tendréis que retocar unas líneas de código del archivo functions.php de la siguiente forma:
##
Como véis, crear vuestro propio opt-in es una tarea realmente sencilla ya que no es necesario tener ningún tipo de conocimiento en programación para disponer de uno en vuestra web.
Si que es necesario aprender CSS básico para modificar los colores y tipografía del opt-in, pero con las personalizaciones adicionales que he realizado es muy intuitivo que vosotros lo adaptéis al estilo de vuestro blog.
¿De qué forma fomentáis la captación de suscriptores en vuestro sitio?
PD: Como he comentado, no soy diseñador web ni nada por el estilo. Por tanto, no os puedo asegurar responder todas las preguntas que me realicéis a través de los comentarios o por correo electrónico.
Photo Credit | Flickr
Diseño DIY: cómo crear un opt-in personalizado en tu blog ha sido publicado originalmente en el blog de Alejandro Caballero. Puedes conectar conmigo a través de Twitter, Facebook y Google+.