En este tutorial veremos como crear dos imágenes paralelas con áreas de widgets centradas para Genesis Framework. No es algo que me hayan pedido en ningún trabajo. Lo vi en una web de una inmobiliaria. Me gustó y quise replicarlo con Genesis Framework.
No sólo lo he querido replicar porque es visualmente atractivo, sino porque creo que puede tener ciertas utilidades. Como paso intermedio para una suscripción, o como Landing page para filtrar dos tipos de clientes. En otras palabras, un paso intermedio en un registro.
Ese paso intermedio era una landing page con sólo dos opciones. Dos grandes botones sobre dos imágenes de fondo. Pensé en varias maneras de hacerlo y como enfocarlo.
Dejo una captura para que veáis de lo que hablo.
Y una captura de como quedaría en móviles.
Lo haremos creando un template de página. Aunque voy a trabajar sobre Genesis Sample, con pequeñas modificaciones, podría funcionar en cualquier Genesis child theme.
Creamos las dos áreas de widgets
Siguiendo un poco el estilo de StudioPress, que utiliza áreas de widgets para sus composiciones de portadas, es lo que haremos para este tutorial. De esa manera si alguien quiere utilizarlo, puede colocar el contenido que quiera sobre las imágenes de fondo.
Vamos a ello. Creamos las dos áreas de widgets añadiendo este snippet de código al final del archivo functions.php, en este caso de Genesis Sample.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Si vais al personalizador o al dashboard de WordPress, veréis que ya podéis ver las áreas de widgets. Incluso podéis colocar contenido en ellas. Sólo que no se visualizará en ningún lugar. Para eso tenemos que crear el template. Lo vemos en el siguiente paso.
Creamos el template
Basándome un poco en el template para la Landing page de Genesis Sample, he creado este otro.
Eliminamos casi todo el contenido para dejar a pantalla completa, tanto en el ancho como en el alto, las dos áreas de widgets con las imágenes de fondo.
Crea un template llamado page-imagenes-paralelas.php y añade en él este snippet de código.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
En la cabecera del template podéis darle el nombre que queráis, en la línea Template Name: Imágenes paralelas. Será por el cual identificaremos nuestro nuevo template en el siguiente punto.
Aplicamos el template a una página
Ya hemos creado el template. El siguiente paso será crear una página para poder aplicarle este template. En la barra de la derecha en esa nueva página, seleccionad el template con el nombre que le hemos dado antes.
Estilos con CSS y adaptabilidad para móviles
En este tutorial los estilos CSS juegan un papel primordial. En esta ocasión, me he tomado la licencia para comentar algunas partes del código CSS.
Creo que ya lo he comentado alguna vez en alguno de mis tutoriales, pero por si acaso lo digo de nuevo. Nunca comentamos el código CSS. Si bien es cierto que es más legible que el PHP (siempre que esté bien escrito y tabulado), no está de más añadir algún comentario en partes críticas. No es más que para mejorar la comprensión y facilitar la tarea, si el día de mañana necesitamos editarlo. O lo edita otra persona.
Para añadir los estilos, copiad y pegad todo este código al final del archivo styles.css del tema Genesis Sample.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Al final del código CSS de este snippet, podéis comprobar que he incluido unas media queries. Esto es para dar soporte a dispositivos móviles, donde las imágenes, junto con las áreas de widgets centradas, se posicionarán una encima de la otra ocupando todo el alto de la pantalla, respetando, eso si, que cada una siga ocupando la mitad.