Bloques de diseño

Esta es una función práctica de Sitely que deberías usar siempre que sea posible. Los bloques de diseño no solo aportan una estructura organizada a tus páginas, sino que también hacen que sea increíblemente fácil reorganizar el contenido en ellas. Entonces, ¿qué es un bloque de diseño?

Si observas las ilustraciones de un wireframe típico de sitio web a continuación, notarás que los elementos de la página se dividen en secciones visualmente distintas; cada sección transmite una idea, concepto o mensaje particular.

Al pasar el puntero del mouse sobre el control de cambio de tamaño, el cursor cambiará para indicar que se trata de un control de redimensionamiento y que, al arrastrarlo, cualquier bloque de diseño que esté debajo del bloque actual se desplazará hacia abajo a medida que se cambia el tamaño del bloque.

Aunque añadir un bloque al lienzo y luego llenarlo con contenido funcionará sin problemas, un enfoque más simple puede ser comenzar diseñando tu primera área de contenido, quizá una sección hero para tu página web. Una vez que el contenido esté diseñado a tu gusto, puedes seleccionar todos los elementos que componen esa sección hero, hacer clic derecho y elegir ‘Mover a bloque de diseño’ en el menú contextual.

Esta acción agrupará todo y colocará el contenido dentro de un bloque de diseño por ti. Ahora puedes mover tu bloque de diseño a cualquier parte de la página, con la tranquilidad de que tu sección hero cuidadosamente diseñada permanecerá intacta y te seguirá. Esto te permite empezar a diseñar el contenido de tu siguiente bloque. En muchos aspectos, los bloques de diseño comparten todas las funciones de estilo de las cajas anchas. Puedes establecer un color de relleno, darle al bloque un relleno con imagen o degradado, aplicar bordes (superior e inferior), añadir sombra y filtros de fondo. También puedes definir tu bloque de diseño como una ubicación de desplazamiento, lo que facilita que tu navegación enlace a partes específicas de tu página.

Otros tipos de bloques de diseño

Sitely tiene un par de otros bloques de diseño en su caja de herramientas. Esencialmente, son bloques de diseño creados para casos de uso específicos. Por ejemplo, ‘Cuadrícula de imágenes/video’ y ‘Cuadrícula de diseño’ son bloques pensados para propósitos concretos. Funcionan de forma muy similar al bloque de diseño estándar, pero el contenido que agregas en ellos es más específico. Consulta la documentación para ver detalles sobre cómo se usan estas cuadrículas. 

Opciones de visibilidad

Cualquier bloque de diseño puede configurarse para que esté oculto inicialmente, lo que significa que no se verá cuando la página se cargue por primera vez en la ventana del navegador. Para que un usuario vea el bloque, deberás proporcionar algún elemento interactivo en la página que revele el bloque al hacer clic. Un ejemplo claro de cómo usar esta función es cuando deseas incorporar un mega‑menú en tu sitio. Estos se ven comúnmente en sitios de comercio electrónico, donde a los usuarios se les da acceso rápido a grupos de productos mediante un enlace de navegación principal. He aquí un ejemplo.

En este ejemplo, un usuario que haga clic en un enlace de la navegación principal verá un bloque con categorías de productos y enlaces que lo llevarán a páginas específicas del sitio. Evidentemente, será mejor para los usuarios que este mega‑menú no sea visible al cargar la página por primera vez, porque tendería a interrumpir el flujo del diseño principal. Por eso, al crear el mega‑menú en un bloque de diseño y ocultarlo inicialmente, la página se mantiene clara y sin desorden. Sin embargo, al hacer clic en un enlace, se mostrará el menú y todas sus opciones. Verás la opción de ocultar un bloque de diseño en el panel de estilos cuando tengas seleccionado un bloque de diseño en el lienzo.

Al usar esta función, es buena idea asignar un ID de grupo a tus bloques de diseño; es simplemente un número que indica que el bloque pertenece a un grupo específico de bloques en la página. El valor predeterminado es cero, pero puedes usar cualquier número que elijas. Esto es importante porque, cuando creas un enlace para revelar el bloque (ya sea un enlace de menú normal o un botón), tendrás la opción de cerrar cualquier otro bloque de diseño de la página cuando se haga clic en el enlace. Claramente, si tuviera dos mega‑menús vinculados a dos enlaces de navegación distintos, solo querría que apareciera uno a la vez. Por lo tanto, al crear mis enlaces de navegación, haría que el enlace cerrara cualquier otro bloque de diseño antes de abrir otro. Al dar a mis bloques de mega‑menú un ID común, solo se cerrarán los bloques que compartan ese ID. En otras palabras, solo se mostrará un mega‑menú a la vez. Si no incluyo este número de ID, hacer clic en un enlace de mega‑menú podría cerrar inadvertidamente TODOS los bloques de diseño de mi página. Por ello, me aseguraría de que todos los demás bloques tuvieran un ID de grupo diferente.