Proyectos programación

WordCamp 2024 Torrelodones: diseño


Maquetadores anónimos desintoxícate y abraza el Editor del Sitio. Flavia Bernández

El Editor del Sitio versus maquetadores visuales (elementor, full site editing, editores de bloques …).

Paso 1: desintoxicate

Si has oído hablar de Gutenberg, de Astra, de Oxygen, de Divi, de Génesis, de Elementor, de bloques, de visualcomposers y no tienes claro qué hacer o cómo… ¡saldrás de dudas! Utiliza el Editor de Sitio o Editor de Bloques.

El Editor de Sitio utiliza el theme Twenty Twenty-Four.

Paso 2: van muy bien de rendimiento

Para evaluar el rendimiento de una web se puede utilizar https://pagespeed.web.dev/ 

Paso 3: piensa en sistemas.

El Editor de Sitio permite utilizar facilidades que está integrado en el core de WordPress:

  • Elegir colores: Apariencia > Editor > Estilos > Colores
  • Cambiar los bloques por defecto: Apariencia > Editor > Estilos > Bloques
  • Crear un tema hijo con Create Block Themes    https://wordpress.org/plugins/create-block-theme/ 
  • Sube tus tipografías.
  • Crea tus patrones (sincronizados o no) que podemos reutilizar.

Paso 4: práctica copiando elementos de webs chulas 

Educa el gusto; viendo webs de otros bien diseñadas: 

Ejemplos:

https://www.mccann.fr/en/

https://flabernardez.com/bloque/video-entre-mensaje/

Al Editor del Sitio se accede: Apariencia  > Editor > Plantillas

Para crear el bloque del Header

El Editor de Sitios no permite introducir aún valores en negativo hay que introducirlo con código HTML.

<style>

.margin-top-negative{

margin-block-start: –108px !important;

}

</style>

Para crear el bloque del vídeo entre mensaje

Es necesario pensar en un diseño en bloque; donde la estructura está con 4 filas y dentro de cada fila un párrafo.

Los videos tienen que estar autoplay – loop y muted (sino esta en muted el navegador no deja reproducirlo).

https://www.mccann.fr/en/

https://flabernardez.com/bloque/galeria-mosaico/

Es una galería ordenada en columnas.

Dentro de las columnas son galerías de imágenes en vertical.

Para mostrar el cursor se usa código html

El overflow se consigue poniendo al 120 px de la pantalla y con un margen negativo.

https://replay.software/sleeve

https://flabernardez.com/bloque/bento/

El concepto es ver que son por un lado un Stack que permite controlar la altura de los bloques.

Dos filas de columnas y luego se intercambian las columnas.

Para controlar los anchos se deben usar las columnas.

https://skware.webflow.io/

https://flabernardez.com/bloque/grid-con-slide/

Se utiliza el plugin Stackable Pro, que permite movimientos vitaminando el diseño. Usar estos plugin afecta a la page speed. 

Se usan dos Stack para controlar la altura.

Paso 5: si echas algo de menos, llegará o ya hay un plugin que lo hace.

Recomendaciones:

  • La hoja de estilos del hijo es donde debe estar el CSS. 
  • Ponte la barra de herramientas de los bloques arriba.