Usa el Creador de Divisores Ondulados gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Las Secciones Necesitan Bordes Suaves
La mayoría de los sitios web se construyen con secciones apiladas: un encabezado principal, un bloque de características, un bloque de testimonios y un pie de página. Cuando esas secciones se encuentran con bordes rectos y duros, la página puede sentirse rígida y en bloques. Los divisores ondulados lo resuelven. Una onda es una curva suave que separa una sección de la siguiente, y hace que la página se sienta fluida y amable. La herramienta de arriba crea divisores ondulados como código SVG. Controlas el número de ondas, su altura, el número de capas y los colores, y luego copias el código o descargas el archivo.
SVG es el formato adecuado para divisores porque escala. Una onda dibujada como imagen puede verse borrosa en pantallas grandes o teléfonos de alta resolución. Una onda SVG es matemática, no píxeles, así que se mantiene nítida en cualquier tamaño. También es diminuta en tamaño de archivo, muchas veces menos de un kilobyte, lo que mantiene tu página rápida. El código de esta herramienta se coloca directamente en una página HTML, y puedes cambiar los colores después editando los valores de relleno.
Cómo Usar el Creador de Divisores Ondulados
Empieza con el número de ondas. Una o dos ondas dan una sensación tranquila y ondulante que va bien en sitios de negocios y salud. Cuatro o cinco ondas se sienten divertidas y con movimiento, lo que va bien en sitios infantiles y portafolios creativos. Luego ajusta la altura de onda. Una onda corta es una ondulación suave. Una onda alta es una curva dramática que se convierte en un elemento destacado de la página. La altura del divisor ajusta el espacio total que ocupa. Un divisor más alto da aire a las ondas, mientras que uno más bajo mantiene la página compacta.
Las capas añaden profundidad. Con una capa, obtienes una sola curva limpia. Con dos o tres capas, cada una en un color ligeramente distinto y con opacidad, el divisor parece agua superpuesta o colinas. El control de color de la segunda capa te permite ajustar esa mezcla. Un truco común es usar el color de tu marca para la capa delantera y un tono más claro para la capa trasera. El control de posición tiene que ver con la colocación: un divisor inferior se sitúa al pie de una sección, y un divisor superior en su parte alta. La mayoría de las páginas usan un divisor en la parte inferior de la sección principal, para que el encabezado se funda con el siguiente bloque.
Cómo Hacer que las Ondas Combinen con tu Diseño
Un divisor debe conectar dos secciones, no chocar con ninguna. La regla más sencilla es igualar el color de la onda con la sección de abajo. Si la siguiente sección tiene un fondo verde azulado, haz la onda verde azulada y colócala en la parte inferior de la sección de arriba. Así la onda parece la siguiente sección que sube. Si usas capas, haz la capa trasera una versión más clara del mismo color, para que la mezcla se sienta natural. Evita divisores arcoíris en páginas serias. Uno o dos colores, bien elegidos, superan a cinco colores siempre.
También vigila la altura en el móvil. Una onda alta que se ve genial en un ordenador puede comerse media pantalla de teléfono. Mantén los divisores moderados, entre 60 y 120 píxeles de alto, y prueba en una pantalla estrecha antes de publicar. El SVG de esta herramienta usa un viewBox, así que se estira al ancho completo de su contenedor de forma automática, lo que resuelve los distintos tamaños de pantalla por ti.
Preguntas Frecuentes
¿Cómo añado el divisor a mi sitio? Copia el código SVG del cuadro y pégalo al final de una sección en tu HTML, justo antes de que empiece la siguiente sección. Ajusta la sección de arriba para que no tenga margen inferior, así la onda toca el siguiente bloque de forma limpia.
¿Puedo voltear la onda boca abajo? Sí. La ruta de la onda es simétrica en su estructura, así que puedes voltearla con CSS añadiendo una transformación que gire el SVG 180 grados, o colocando el mismo divisor en la parte superior de la sección siguiente.
¿Por qué SVG en lugar de una imagen PNG? SVG se mantiene nítido en todos los tamaños de pantalla, carga más rápido y te permite cambiar colores editando texto. Un PNG se vería borroso en pantallas grandes y no se puede recolorear sin un editor de imágenes.
Crea una onda arriba, copia el código y dale a las secciones de tu página un borde más suave.
Pingback: Creador de Patrones de Rayas - Rayas Marcadas en Cualquier Ángulo