Cómo funciona el editor dinámico de Squarespace
Tutorial sobre el fluid engine 2022
El día de hoy te traigo un tutorial sobre el nuevo editor dinámico de Squarespace, fluid Engine en inglés, ya que la introducción de este editor durante el verano de este año 2022, cambia bastante la experiencia de diseño en la plataforma.
Anteriormente compartí una entrada en el blog hablando sobre esta actualización, aclarando cómo puede afectarte si tienes tu página web en Squarespace y qué hacer al menos de momento, de cara a esta actualización.
Por mi parte voy a intentar hacer este tutorial tan útil para usuarios nuevos que van llegando a Squarespace como para aquellas personas que ya tienen su sitio en la plataforma y quieren aprender a usar el nuevo editor así que haré algunas comparaciones entre el editor dinámico y el editor clásico que es como Squarespace llama a la experiencia de diseño anterior.
Por ello, es importante destacar que la introducción del editor dinámico sólo afecta la experiencia de diseño de cada sección en páginas. Los otros apartados del sitio como DISEÑO, MARKETING y CONFIGURACIÓN quedan más o menos igual.
También seguirán funcionando como hasta ahora aquellos tipos de colecciones que no nos permiten añadir secciones de página como las entradas del blog o descripciones de productos, estos espacios siguen funcionando con el editor clásico.
Marcas de tiempo:
00:00 Intro
01:47 Comienza el tutorial
02:55 Cómo agregar secciones del editor clásico
03:54 Bloques de contenido en el editor dinámico
09:30 Formato de las secciones en el editor dinámico
11:12 Editar la vista para dispositivos móviles
Tutorial
En una página vamos a agregar una sección para trabajar con el nuevo editor dinámico.
Acceder a los bloques de contenido
Para añadir un nuevo bloque, haz click en la esquina superior izquierda, en el botón “+ AGREGAR BLOQUE”.
Los bloques se pueden arrastrar ahora más libremente por la sección en una cuadrícula que podemos ver haciendo click en la letra G del teclado. G de grid cuadrícula en inglés.
Recuerda que ahora podemos colocar un bloque por encima de otro.
Nuevas opciones de edición en los bloques de contenido:
Fondos en los bloques de texto.
La alineación vertical de cada bloque.
En los botones e imágenes podemos optar porque llenen el bloque o se ajusten a la medida del contenido.
Recomiendo que, si te parece que algo no acaba de encajar en tu diseño, revises todas estas nuevas opciones de edición que muy seguramente algo de eso te servirá para ajustar el diseño.
configuración de la sección
Otro cambio notorio es la edición del formato de cada sección que use el editor dinámico.
Antes sólo podíamos ajustar la altura, la anchura y/o la alineación de la sección.
Ahora podemos ajustar:
El recuento de filas.
El espaciado de la cuadrícula que nos permitirá acercar o alegar más los bloques entre sí.
Podemos optar porque la sección rellene o no la pantalla. Si optas por NO rellenar pantalla, verás que ahora puedes hacer que tus bloque de contenido queden “pegaditos” al borde superior y/o borde inferior de la sección. Esto puede ser súper útil para ciertos diseños.
Las opciones para ajustar la altura y alineación de la sección siguen disponibles.
Diseño móvil
Finalmente tenemos la vista móvil que es, en mi opinión, el cambio más importante que entramos en este nuevo editor dinámico. La vista móvil ahora es independiente de la vista de escritorio.
Esto implica más trabajo al momento de diseñar pero también nos da nueva libertad y control sobre el resultado del diseño para dispositivos móviles. Por ejemplo, ahora podemos tener 2 columnas en móvil.
Recuerda siempre revisar tu diseño móvil pues los bloques aparecerán en el orden que los agregaste y esto no siempre funciona bien.
Haz uso de las flechas que aparecen en los controles del lado derecho de cada bloque para moverlos de lugar.
Es importante destacar que la ubicación del bloque o su tamaño en móvil no afectará a la vista de escritorio y viceversa, sin embargo la alineación y otro tipo de ajustes sí impactarán ambas vistas.
Problemas con tamaño tablet
La vista para tablet quedó un tanto abandonada por Squarespace con este nuevo editor y es algo en lo que se sabe que están trabajando. Por lo pronto puedes hacer uso del tip que te comparto en este tutorial para resolver el problema de los espacios excesivos que a veces aparecen entre bloque y bloque en tamaño tablet.
¿Quieres una experiencia de diseño sin complicaciones? Entonces adquiere una de mis plantillas Premium para lanzar tu página web con Squarespace.
Navega por categorías
y recuerda:
#SéDiferenteHazLaDiferencia
