El bloque Divisor te permite insertar separadores de línea visualmente atractivos entre las diferentes secciones de contenido de tu página. Estos divisores ayudan a mejorar la legibilidad y crean un diseño más estructurado y atractivo.
Más allá de una simple línea, el bloque Divisor te permite colocar una etiqueta de texto o un icono en el centro del divisor, lo que lo convierte en un elemento de diseño versátil para dividir el contenido con estilo.
Añadir el bloque divisor a tus páginas
Sigue estos pasos para añadir un bloque divisor a tu página SeedProd:
Paso 1: Añadir el bloque
En Diseño > Bloques, arrastra y suelta el bloque Divisor en la sección deseada de tu página.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque Divisor para abrir su configuración. En la pestaña Contenido, configura la apariencia y el estilo de tu divisor.
Divisor:
- Estilo: Elige el estilo de línea para tu divisor: línea continua, punteada, discontinua o doble.
- Color: Establece el color de la línea divisoria.
- Ancho: controla el ancho del divisor como porcentaje de su contenedor, desde el 1 % hasta el 100 %.
- Altura: Establece el grosor de la línea divisoria en píxeles, desde 1 px hasta 10 px.
- Alineación: Alinea el divisor a la izquierda, al centro o a la derecha. Admite la alineación por dispositivo para ordenadores de sobremesa, tabletas y móviles.
- Añadir elemento: Opcionalmente, coloque un elemento en el centro de la línea divisoria. Elija entre Ninguno (solo la línea), Texto (una etiqueta de texto), o Icono (un icono de Font Awesome).
- Cuando se selecciona Texto: introduzca el texto de la etiqueta y elija una etiqueta HTML (H1–H6 o span) para controlar su marcado semántico.
- Cuando se selecciona Icono: Elija su icono utilizando el selector de iconos y establezca el tamaño del icono.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar aún más la apariencia de tu bloque Divisor.
Estilos:
- Sombra: Añade un efecto de sombra al divisor. Elige entre Ninguno, Línea fina, Pequeño, Mediano o Grande.
- Tipografía del encabezado (visible cuando Añadir elemento está configurado en Texto): personaliza la familia de fuentes, el grosor, el tamaño, la altura de línea, el espaciado entre letras y la transformación del texto para el elemento de texto.
- Color del texto (visible cuando Añadir elemento está configurado en Texto): Establece el color de la etiqueta de texto en el divisor.
- Color del icono (visible cuando Añadir elemento está configurado en Icono): Establece el color del icono que se muestra en el divisor.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque divisor (superior, derecho, inferior, izquierdo). Esto determina cuánto espacio aparece entre el divisor y los elementos circundantes en la página.
- Relleno: ajusta el espacio interior dentro del bloque divisor (superior, derecho, inferior, izquierdo). Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
Atributos:
- CSS ID: Muestra el identificador único generado automáticamente para tu bloque Divisor, creado automáticamente por SeedProd para estilos personalizados o segmentación JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del divisor. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor.
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque divisor en las pantallas del escritorio.
- Ocultar en tableta: Ocultar el bloque divisor en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque divisor en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elige un efecto de animación que se reproduzca cuando el bloque Divisor aparezca en pantalla, como Rebotar, Aparecer gradualmente, Acercar, Girar y muchos más.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Divisor y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque Divisor a tu página! Los divisores son una forma sencilla pero eficaz de crear una estructura visual y guiar a tus visitantes a través de tu contenido. Prueba con diferentes estilos de línea, colores, anchuras y elementos centrales para encontrar el aspecto adecuado para tu diseño.