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.

Facebook
Twitter
LinkedIn
WhatsApp
Juan Pardo

Juan Pardo

Diseñador Web WordPress Freelance. Ayudo a otros profesionales y pequeños negocios a desarrollar una fuerte presencia online y a mejorar sus conversiones web a través de un diseño personalizado

Quiero trabajar contigo
Cerrar
Compartir
Twittear
Compartir
+1
Pin