El bloque Divisor te permite insertar separadores de línea visualmente atractivos entre diferentes secciones de contenido en tu página. Estos divisores ayudan a mejorar la legibilidad y a crear 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, convirtiéndolo en un elemento de diseño versátil para separar 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 de 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 Sólida, Punteada, Discontinua o Doble.
- Color: Establece el color de la línea divisoria.
- Ancho: Controla el ancho del divisor como un porcentaje de su contenedor, de 1% a 100%.
- Altura: Establece el grosor de la línea divisoria en píxeles, de 1px a 10px.
- Alineación: Alinea el divisor a la Izquierda, Centro o Derecha. Admite alineación por dispositivo para escritorio, tableta y móvil.
- Add Element: Optionally place an element in the center of the divider line. Choose from None (just the line), Text (a text label), or Icon (a Font Awesome icon).
- Cuando se selecciona Texto: Introduce el texto de la etiqueta y elige una Etiqueta HTML (H1–H6 o span) para controlar su marcado semántico.
- Cuando se selecciona Icono: Elige tu icono usando el selector de iconos y establece el Tamaño del Icono.
Paso 3: Personaliza 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 Ninguna, Cabello, Pequeña, Mediana o Grande.
- Tipografía de Encabezado (visible cuando Añadir Elemento está configurado como Texto): Personaliza la familia de fuentes, el peso, 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 como Texto): Establece el color de la etiqueta de texto en el divisor.
- Color del Icono (visible cuando Añadir Elemento está configurado como Icono): Establece el color del icono que se muestra en el divisor.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque Divisor (Arriba, Derecha, Abajo, Izquierda). Esto determina cuánto espacio aparece entre el divisor y los elementos circundantes en la página.
- Relleno: Ajusta el espaciado interior dentro de tu bloque Divisor (Arriba, Derecha, Abajo, Izquierda). Admite valores por dispositivo para escritorio, tableta y móvil.
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para tu bloque Divisor, creado automáticamente por SeedProd para estilos personalizados o segmentación de JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del divisor. Introduce cada atributo en una línea nueva usando el formato: nombre-del-atributo|valor.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque Divisor en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque Divisor en dispositivos tableta.
- Ocultar en móvil: Oculta 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 entre en la vista, como Rebote, Fundido de entrada, Zoom de entrada, Girar de entrada y muchos más.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque Divisor y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque Divisor a tu página! Los divisores son una forma sencilla pero eficaz de crear estructura visual y guiar a tus visitantes a través de tu contenido. Experimenta con diferentes estilos de línea, colores, anchos y elementos centrales para encontrar el aspecto adecuado para tu diseño.