Vídeo en inglés
(dispone de subtítulos en español generados automáticamente)
Transcripción del vídeo
Hola, gracias por ver este vídeo sobre la demo de Francis. Me gusta mucho esta demo y quería compartirla con vosotros para que podáis utilizarla. Por desgracia, la demo es un poco complicada, así que quiero explicaros cómo funciona.
Uno de los principales retos es que me gusta mucho cómo la imagen se extiende hasta el extremo derecho de la página web, con una división en el centro. Sin embargo, no se extiende hasta el extremo izquierdo, sino que se coloca en el contenedor del centro. Otro detalle es que el menú hamburguesa es blanco aquí, pero en otras páginas es negro.
Este es el tipo de cosas que quiero mostraros. Para conseguirlo, tendréis que utilizar un poco de magia CSS y comprender cómo están estructuradas las cosas, especialmente con el clásico problema al que se enfrentan todos los sitios web: la responsividad, es decir, asegurarse de que la página funciona perfectamente también en pantallas móviles. Así es como lo hice. En primer lugar, si consultáis el personalizador y la sección de CSS adicional, encontraréis varias reglas que hay que añadir. Todas ellas se explican aquí, así que espero que sean comprensibles. Es posible que tengas que aprender un poco de CSS para entenderlas completamente.
Otra cosa importante a tener en cuenta es que, en la página de inicio y en las páginas individuales del portfolio, el contenido se divide en dos grupos principales. En Gutenberg, el primer grupo es la imagen y el segundo grupo le sigue. A estos grupos se les asignan clases específicas, que son esenciales para que el diseño funcione como se desea. Por ejemplo, el segundo grupo tiene una clase que hace que aparezca encima del primero. Otra clase oculta ciertos elementos en los dispositivos móviles, y así sucesivamente.
Lo ideal es importar la demo y utilizar el plugin Yoast Duplicate Post para duplicarla. A continuación, puedes reescribir el contenido según sea necesario, sin necesidad de profundizar en los detalles técnicos. Pero si quieres entender cómo funciona todo, es importante saber que hay reglas específicas y clases CSS personalizadas que hacen que la demo funcione como lo hace.
Por último, una cosa más: la demo de Francis utiliza un bloque espaciador flexible. Esto es importante porque el espaciador predeterminado de WordPress no permite ajustar el espaciado en función del tamaño de la pantalla. Tuve que utilizar esta función para que funcionara. Después de importar la demo, solo tienes que ir a la página de inicio del portfolio e instalar el bloque espaciador. Esto permitirá que el espacio se ajuste en función de si lo estás viendo en un ordenador, una tableta o un dispositivo móvil, utilizando VH (altura de la ventana gráfica) para el tamaño de la pantalla.
Espero que esto te ayude, ¡y buena suerte!
