añadir-widget-area-mensaje-bienvenida-en-genesis-framework

Una de las preguntas más comunes que se suelen hacer cuando empiezas a conocer Genesis Framework es cómo añadir una Widget Area con un mensaje de bienvenida como la que podéis ver en la imagen de arriba.

Como véis se trata de un elemento muy visual y que proporciona al visitante un foco de atención. Se me ocurren muchos usos: un ebook de regalo con una llamada a la acción hacia tu landing page, la promoción de tus servicios o productos… o simplemente un enlace a alguna zona de interés que quieras resaltar de tu web.

Las funcionalidades que le des lo dejo a tu imaginación, yo te explico cómo crearlo. Tan fácil como añadir una widget area a tu functions.php (o la plantilla de página en la que quieras que aparezca) y un poco de CSS para darle forma.

Un enorme gracias a Sridhar Katakam por su apoyo a la comunidad de Genesis Framework. He modificado y adaptado parte de su código para conseguir el resultado que quería para mis proyectos. Ahora vamos al grano, estos son los pasos para crear o añadir un mensaje de bienvenida en tu web:

Añadir y registrar la Widget Area

Copia el siguiente código en tu functions.php o plantilla en la que quieras añadir esta nueva área:

Añadir el texto y la imagen del mensaje

En mi caso he subido una imagen transparente de 500 x 500 px en png titulada imagen-bienvenida.png

Para el mensaje, vamos a Apariencia y seleccionamos la Welcome Widget Area. Dentro de esta escribimos el título, mensaje y botón.

personalizar-widget-area-genesis-framework

Modificar la apariencia del área de bienvenida a través de CSS

A través de el siguiente código se puede modificar el fondo, los colores del texto y botón, la alineación de la imagen y que la visualización sea correcta en todos los dispositivos (responsive):

Así quedaría en la versión móvil. En mi caso dado las dimensiones de la imagen queda perfecto. Si no es tu caso y no sabes cómo conseguirlo deja un comentario y te echo una mano sin problemas 🙂

widget-area-mensaje-bienvenida-genesis-framework-responsive

 

Eso es todo, ¿sencillo verdad?. Crea un mensaje de bienvenida fácilmente con estos códigos y empieza a convertir tus visitantes en potenciales clientes.

Deja un comentario

Cerrar
Compartir
Twittear
Compartir
+1
Pin
Close Panel