Añadir una cabecera con CTA en Genesis Sample desde el personalizador de WordPress

Aprende a introducir una cabecera que incluya una llamada a la acción en Genesis Sample desde el personalizador de WordPress siguiendo este tutorial.

Una de las ventajas de pertenecer al club de Código Genesis es que puedes dejar tus sugerencias para futuros tutoriales. 

A raíz de la entrada sobre cómo introducir una sección Hero personalizada en la home, Vicente, uno de nuestros suscriptores, propuso:

¿Podrías añadir un botón debajo de la descripción y la opción en el personalizador de poner el texto del botón y otra caja para poner el enlace?

Dicho y hecho.

Con este tutorial vas a aprovecharte del personalizador de WordPress para:

• Agregar la imagen.
• Elegir su encuadre.
• Insertar el texto del título.
• Añadir una descripcion.
• Incluir un botón (CTA) con el texto y URL que desees.

Y no solo eso, sino que también podrás elegir el color de ambos textos de forma independiente.

En resumen: vas a tener un control total sobre la cabecera.

Suena bien ¿verdad? Este es el resultado final:

Aunque estos snippets están diseñados para Genesis Sample, puedes aplicarlos en cualquier otro child theme de Genesis tras realizar pequeños cambios en el código. 

Vamos allá. 

Instrucciones para agregar una cabecera con CTA en la front-page de Genesis Sample desde el personalizador de WordPress

1. Crea una plantilla para la página principal

Genesis Sample carece de una plantilla front-page, así que el primer paso es crear un fichero front-page.php en la carpeta raíz del tema que contenga el siguiente código:

Con esto generas la plantilla que se mostrará en la página principal y le introduces una sección de cabecera en formato Hero con los siguientes elementos:

• Título.
• Descripción.
• Botón con una llamada a la acción (CTA).

Además, este bloque fuerza el diseño de ancho completo.

Si prefieres dejar la sidebar, elimina la línea responsable del código anterior y listo. 😉

2. Modifica el archivo customize.php

Para añadir las opciones en el personalizador de WordPress debes editar el fichero customize.php situado en la carpeta /lib/.

En concreto, introduce el siguiente código al final del mismo:

Con este bloque incluyes una nueva sección en el personalizador de WordPress llamada «Cabecera de la página principal» dentro de la cual se encuentran las opciones de agregar y posicionar la imagen, así como los apartados para insertar el título y la descripción.

También desde aquí podrás elegir el color de ambos textos de forma independiente.

Por defecto, el botón de la llamada a la acción llevará el texto «Contacto» y la url a «https://tuweb/contacto», pero puedes modificarlo con la CTA que te interese.

3. Personaliza el CSS de la cabecera

Una vez configurada la plantilla para la nueva home y el fichero del personalizador, solo te falta asignar los estilos para que luzca tal y como deseas.

Para ello pega este bloque al final de style.css:

Al introducir estas líneas de CSS te aseguras de que la cabecera se visualice correctamente.

Ya solo te falta el último detalle.

4. Añade la imagen de fondo desde el personalizador de WordPress

Elige la fotografía que deseas usar como fondo directamente desde el personalizador de WordPress.

Tal y como te indica esta sección, procura que la imagen  tenga un ancho generoso (1600-2000px) para que también se adapte bien a los dispositivos de alta resolución.

Conclusiones

Ahora ya sabes cómo crear una cabecera con imagen, título, descripción y un botón de llamada a la acción en la página principal de Genesis Sample. 

¿Lo mejor?

Tus clientes podrán hacer todos los cambios de forma sencilla desde el personalizador de WordPress: texto, colores, enlace, foto…

Y recuerda, si quieres aplicarlo en otro child theme de Genesis, haz unos pocos ajustes y ya lo tienes.

Si deseas hacerme alguna pregunta o darme una sugerencia para próximos tutoriales, no te cortes. Cuéntamela en los comentarios (opción exclusiva para suscriptores).

Tutoriales relacionados

• https://codigogenesis.com/anadir-imagen-cabecera-home-genesis-sample-personalizador-wordpress/
• https://codigogenesis.com/anadir-imagen-cabecera-home-genesis-sample-personalizador-wordpress/
• https://codigogenesis.com/anadir-imagen-cabecera-home-genesis-sample-personalizador-wordpress/
• https://codigogenesis.com/forzar-el-diseno-de-ancho-completo-en-genesis-framework/