Aunque la etiqueta spacer ya no existe, ahora contamos con técnicas más sofisticadas para integrar espacio negativo en un sitio web, las cuales son aún más fáciles de ejecutar con una herramienta de diseño sin código como Webflow.
El espacio negativo es fundamental para aportar equilibrio, enfoque y legibilidad a tu diseño, por lo que es importante que sepas cómo utilizar estas técnicas modernas con eficacia.
La etiqueta HTML spacer es obsoleta
La etiqueta spacer se utilizaba para crear espacio negativo, también llamado espacio en blanco, entre elementos en un diseño al escribir HTML. Aunque esta técnica funcionaba, los diseñadores acabaron necesitando un control más preciso a medida que los sitios web se volvían más grandes y sofisticados. Se introdujeron CSS y JavaScript para tomar el control del diseño, la presentación y el comportamiento, relegando al HTML a la creación de la estructura del sitio.
El lanzamiento en 2011 de Firefox 4, que eliminó la compatibilidad con <spacer>, marcó el principio del fin, y ahora es obsoleta en todos los navegadores web. Algunos sitios que no se han actualizado desde la etiqueta HTML spacer deberían seguir funcionando técnicamente, ya que la mayoría de los navegadores tratan el HTMLUnknownElement como una etiqueta span, pero no hay garantía de que los futuros navegadores lo permitan.
Por supuesto, con cualquier afirmación contundente, como que el spacer ha muerto, surgirán puntos de vista contrarios, y hay defensores de resucitar la etiqueta HTML spacer en el diseño web moderno.
Hoy en día, los diseñadores web añaden espacio principalmente cambiando el código en CSS o con programas sin código que permiten diseñar visualmente. A continuación, te guiaremos a través de algunas de las técnicas más eficaces para añadir espacio negativo a tu diseño al estilo sin código en Webflow.
Webflow es una herramienta de diseño visual que traduce lo que creas en el lienzo a un CSS limpio y eficaz. En su mayor parte, las técnicas utilizadas en Webflow pueden realizarse directamente con código, pero pueden resultar complejas y llevar mucho tiempo.
Entiende los términos que necesitas para crear espacio en Webflow
Unidades EM o REM
Las unidades EM y REM son unidades de longitud relativas que se escalan con la tipografía. El uso de unidades relativas en lugar de absolutas, como los píxeles, ayuda a que un sitio web sea adaptable, de modo que pueda ajustarse a dispositivos de diferentes tamaños, como los teléfonos móviles.
Las unidades REM son relativas al elemento raíz y se escalarán con la tipografía de la etiqueta body. Si el usuario cambia el tamaño de la ventana de su navegador o abre el sitio web en una tableta o pantalla móvil, REM lo admitirá y seguirá siendo legible.
EM se escalará con la tipografía de el elemento padre del que hereda sus atributos. Esto puede dar lugar a inconsistencias inesperadas si se han realizado cambios en el tamaño de la tipografía en cualquier elemento padre dentro de la jerarquía entre donde está el espaciador y el cuerpo. Requiere un conocimiento un poco más avanzado para usar EM correctamente, pero permite un control preciso en áreas específicas.
Para más información sobre los ajustes de tamaño, consulta nuestra lección de Webflow University.
Clases y clases combinadas
Una clase aplica un conjunto específico de propiedades de estilo a cualquier elemento al que se le asigne. Una vez aplicada la clase, cambiarla modificará simultáneamente todos los elementos asignados a ella. Esto ahorra tiempo y ayuda a que los diseños sean más coherentes.
Una clase combinada es una clase adicional que añade estilos aún más específicos sobre la clase principal. Se puede utilizar para crear variaciones coherentes o excepciones específicas a la clase base.
Usar clases para añadir espacio en lugar de establecer márgenes individuales en cada elemento de una página crea un CSS más limpio y optimizado. Las clases en Webflow funcionan exactamente igual que las clases en CSS.
Para más información sobre el uso de clases, consulta nuestra lección de Webflow University.
Símbolos
Un Símbolo es un elemento en Webflow que se repite a lo largo de un proyecto. Puede ser una barra de navegación, un botón o incluso un bloque de espacio negativo. Una vez que un elemento se convierte en Símbolo, aparecerá en el panel de Símbolos y podrá añadirse al diseño desde allí.
Los Símbolos permiten a los diseñadores crear y mantener diseños complejos de forma más coherente y eficiente, ya que solo hay que crear el elemento una vez y dejar que se repita. También son especialmente útiles para aplicar un sistema de diseño en todo un sitio web. Si varias personas trabajan en un proyecto, contar con Símbolos predefinidos garantiza que el espacio sea uniforme y coherente. Los Símbolos también son visibles en el Navegador, lo que facilita ver la estructura general de la página de un vistazo.
Para saber más sobre los Símbolos, echa un vistazo a nuestra lección de Webflow University.
Crea espacio negativo como un objeto usando elementos div
Usar elementos div para crear espacio es una técnica similar a la que se utilizaba con la antigua etiqueta HTML spacer (descanse en paz). Creará un objeto invisible que ocupa una cantidad específica de espacio definida por una clase. Esta clase puede llamarse incluso "spacer". Una vez creado este objeto (o estos objetos), puedes soltarlos en tu diseño tantas veces como quieras, lo que lo convierte en un enfoque muy sencillo y eficiente.
Al añadir más estilos al elemento, como un borde en uno de los lados, también puedes usar esta técnica para colocar divisores (líneas, guiones o símbolos) en tu diseño.
Cómo usar elementos div
Empieza colocando un elemento div en el lienzo, en la zona donde quieras el espacio negativo. Establece una altura y una anchura mínimas usando REM.
Consejo profesional: usa min-width y min-height en lugar de una anchura y altura absolutas, así el elemento rellenará automáticamente todo el elemento padre.
Cambia el nombre de la clase automática (por ejemplo, "Spacer"). Para crear espacios de varios tamaños, puedes crear clases combinadas (como "Large" y "Small") y añadirlas a tu clase "Spacer" siempre que necesites ese tamaño específico.
Para usar estos elementos div "Spacer" como espacio horizontal, configura el contenedor que contiene tus párrafos y espacios en flexbox. Luego, establece el diseño en horizontal y se convertirán en huecos entre columnas en lugar de espacio apilado verticalmente. Si usas una cuadrícula, se convertirán en espacios vacíos en la cuadrícula, creando diseños desplazados o asimétricos.
El siguiente paso es convertir estos elementos en Símbolos. Haz clic derecho sobre el elemento. En la parte inferior del menú desplegable verás "create Symbol". Haz clic ahí y ponle nombre a tu nuevo Símbolo. Te interesará crear Símbolos individuales para cada variante del elemento "Spacer". Este Símbolo se puede arrastrar al lienzo y soltarlo donde necesites espacio negativo en tu sitio. Actualiza el símbolo principal y se actualizarán todas sus instancias.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Crea espacio negativo relativo a un objeto usando una clase de utilidad de margen
En CSS, un objeto puede estar rodeado por el exterior por tres tipos de espacio: margen, borde y relleno (padding). El margen es el área fuera del borde, mientras que el relleno es el área dentro del borde. Cada uno de estos espacios es relativo al elemento al que se aplican. En este caso, usar el margen creará espacio visual alrededor y entre los elementos.
Crear una clase de margen mantendrá tu espaciado coherente y hará que sea rápido de aplicar. Dado que la clase de margen se adjunta a cada elemento individual, puede crear efectos impredecibles en el diseño general cuando dos o más objetos interactúan, algo importante a tener en cuenta.
Esta técnica también es un poco menos visible al solucionar problemas, ya que debe establecerse como una clase en cada elemento en lugar de insertarse como un objeto independiente, como ocurre con un bloque div "Spacer".
Cómo usar una clase de utilidad de margen
Primero, crea una clase de utilidad que solo tenga el margen como configuración. Esta clase de utilidad se puede adjuntar como una clase combinada a cada elemento donde necesites espacio.
Crea versiones de esta clase de margen que generen espacio en diferentes direcciones (Superior, Inferior, Izquierda, Derecha, Vertical - Superior e Inferior, Horizontal - Izquierda y Derecha) y clases combinadas para tener varios tamaños (Inferior + Grande, Inferior + Mediano, Inferior + Pequeño). No se recomienda aplicar margen a "Todos los lados" cuando uses esta técnica, ya que puede desplazar el diseño de formas inesperadas cuando los objetos a los que has aplicado márgenes interactúan en el lienzo.
Para crear una clase de utilidad global, lo mejor es tener una guía de estilo o una página similar para mantener estas clases. Crea cada clase de margen en un elemento div y déjalas en la guía de estilo. Esto hará que sean fáciles de editar en el futuro y garantizará que no se eliminen accidentalmente al usar la opción de limpiar estilos no utilizados en el panel del Gestor de Estilos. Ahora puedes aplicar estas clases de utilidad de margen a cualquier elemento en cualquier página para lograr el espaciado deseado.
Usa código personalizado para insertar un elemento hr
Insertar un elemento de línea horizontal crea un "espaciador con estilo" mediante la inclusión de código personalizado para generar un elemento que Webflow no admite de forma nativa. Para hacerlo, añade un componente Embed y escribe simplemente <hr>. Ni siquiera necesitas una etiqueta de cierre. De nuevo, convertir esto en un símbolo te permitirá colocarlo donde necesites añadir espacio.
Consejo pro: los colaboradores también pueden añadir la línea horizontal directamente en los elementos de texto enriquecido.
Para saber más sobre el código personalizado en texto enriquecido, consulta nuestra lección en Webflow University.
La configuración del elemento hr la aplica la hoja de estilos del navegador. Para ajustar el aspecto de tu elemento hr, coloca el código siguiente en la configuración del proyecto dentro de las etiquetas de apertura y cierre <style> </style>. Luego, ajusta las propiedades dentro de ese código o añade cambios adicionales como el color o el estilo (border-color: red; o border-style: dashed;).
hr {
display: block;
margin-top: 2rem;
margin-bottom: 2rem;
border-bottom: none;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #fff;
}
Este código incluso puede escribirse de forma abreviada para simplificarlo aún más.
hr {
display: block;
margin: 2rem 0 2rem 0;
border-bottom: none;
border-top: 1px solid #fff;
}
Para convertir tu elemento hr en un espacio negativo vacío, simplemente establece el borde en none.
Para saber más sobre código personalizado, consulta nuestra lección en Webflow University.
hr {
display: block;
margin: 2rem 0 2rem 0;
border: none;
}
Crea espacio dentro de las cuadrículas
También puedes jugar con el espacio negativo usando cuadrículas en tu diseño al configurar el elemento hijo de la cuadrícula en posicionamiento manual. Cualquier lugar donde no coloques un elemento (o donde pongas un div vacío) tendrá un bloque de espacio negativo que se ubicará y dimensionará de forma uniforme con los demás elementos de esa cuadrícula.
La propiedad de espacio entre cuadrículas (grid gap) también se puede usar para añadir espacio de manera uniforme entre cada columna y fila dentro de una cuadrícula. Esta no es la forma en la que querrías incorporar espacio en todo tu sitio, pero puede ser una técnica de diseño útil al organizar áreas específicas.
Toma el control del uso del espacio negativo
Al emplear eficazmente el espacio negativo (también conocido como espacio en blanco), guías la mirada del espectador a través de tu diseño, centrándola en lo importante y proporcionando un respiro entre elementos. Esto hace que tu diseño sea, a la vez, más bello y eficaz. El espaciador HTML cumplió un propósito importante en su momento, y las técnicas que han surgido a partir de él permiten la misma función de diseño esencial con mayor eficiencia y delicadeza.
Comprender a fondo las herramientas que se pueden emplear para crear espacio te permite tener un control total sobre la estructura de tu sitio web para crear diseños dinámicos y adaptables. La ventaja del diseño de sitios moderno sin código es que permite una estructura pulida y limpia, tanto visualmente como en el código generado. Menos edición en el back-end significa una gestión del sitio más sencilla y menos posibilidades de diseños rotos o inconsistencias.
El espacio negativo es intrínsecamente complicado: ¿cómo convertir la ausencia de contenido en un elemento de diseño concreto y controlable? El enfoque de Webflow hace que estas piezas sean visibles y permite nombrarlas, ajustarlas y repetirlas. Dominar estas técnicas hará que tus diseños sean más modernos, profesionales y cercanos.
