Using Section Dividers in Divi
Los divisores de sección en Divi te dan la posibilidad de añadir transiciones creativas en forma de figuras entre diferentes secciones de tu página.
Los divisores de sección de Divi (también llamados divisores de forma) te permiten agregar transiciones creativas en forma de figuras entre diferentes secciones de tu página.
Los diseños de divisores de sección se pueden colocar en la parte superior y/o inferior de cada elemento de sección en Divi.
Esto permite una forma única de separar tu contenido con transiciones de fondo fluidas.
¿Dónde están disponibles los divisores de sección de Divi?
Los divisores están disponibles en todas las secciones:
-
Regular
-
De ancho completo
-
Especiales
Los divisores de sección son exclusivos del elemento Sección de Divi, por lo que no puedes agregarlos a otros elementos como módulos, columnas o filas.
Puedes usar máscaras de fondo y/o degradados para añadir diseños únicos de fondo a esos elementos.
26 Formas Únicas
Puedes elegir entre 26 formas únicas, que pueden voltearse, redimensionarse, repetirse, combinarse y personalizarse para crear posibilidades infinitas de diseño.
Estas formas están construidas con SVG, lo que significa que se escalan sin perder calidad, se ven perfectas en dispositivos retina, son muy ligeras y no afectan la velocidad de carga de tu sitio web.
Cómo acceder a los divisores de sección en Divi
-
Haz clic en el icono de engranaje de la sección para abrir la ventana de configuración.
-
Ve a la pestaña Diseño → Divisores.
Opciones de Divisor de Sección en Divi
Existen varias opciones para ayudarte a crear divisores de forma hermosos para tus páginas Divi. Los divisores se pueden colocar en la parte superior e inferior de tus secciones.
Además, puedes elegir el estilo, color y altura del divisor.
También hay una opción de repetición horizontal que le da una apariencia completamente diferente a tus divisores, así como opciones para voltearlos. Por último, puedes posicionar tu divisor sobre o debajo del contenido de la sección.
Divisores de Forma en la Parte Superior e Inferior
Los divisores pueden colocarse en la parte superior e inferior de la sección. Al usarlos en combinación, puedes lograr resultados sorprendentes.
Estilos de Divisor de Forma
Hay 26 opciones de divisor para elegir. Opciones en ángulo, diagonales y curvas ofrecen un estilo y sensación diferentes.
Colores de los Divisores de Forma
Personalizar las opciones del divisor de forma es fácil con Divi.
Coincidencia Automática de Color
Cuando se agrega un nuevo divisor a una sección, este coincidirá automáticamente con el color de tu sección actual y la sección adyacente, creando una transición fluida entre ambas sin necesidad de personalizar los colores. Al mover la sección o ajustar los colores de fondo, el color del divisor se actualizará automáticamente.
Opciones de Color Personalizadas
Además de la coincidencia automática, puedes elegir cualquier color que desees para tu divisor usando colores guardados, globales o recientes.
También puedes usar el sistema mágico de colores de Divi para seleccionar un color basado en tus colores más recientes. Divi sugerirá colores armoniosos en filas basadas en tu actividad reciente.
Altura del Divisor de Sección
Ajustar la altura del divisor cambiará cómo se ve el divisor en tu sección. La altura predeterminada es de 100px, pero puedes usar cualquier unidad de medida compatible con Divi, incluyendo píxeles (px), picas (pc), porcentaje (%), altura de vista (vh), entre otros.
Una opción adicional para la altura del divisor es la posibilidad de ajustar la altura al pasar el cursor. Esto te permite crear un efecto de movimiento cuando los usuarios navegan por la página.
Repetición Horizontal del Divisor de Sección
La repetición horizontal se usa para duplicar el divisor de izquierda a derecha. Por defecto, está activada una sola instancia del divisor.
Para elegir cuántas veces repetir el divisor, utiliza el control deslizante de repetición horizontal para asignar cuántas instancias del divisor deben mostrarse.
Esta repetición también puede ajustarse con las opciones de diseño adaptable de Divi.
Ejemplo: Puedes tener una repetición de 5 veces en escritorio, 3 veces en tableta y 1 vez en móvil.
Volteo del Divisor de Sección
Divi mejora aún más tus opciones proporcionando una opción para voltear el divisor. Puedes voltear el divisor horizontal o verticalmente.
Organización del Divisor
La configuración de organización del divisor permite que el divisor se agregue por encima o por debajo del contenido de la sección.
Esto es útil para agregar dimensión y profundidad a tu diseño, y añade efectos interesantes para mantener a los visitantes de tu sitio comprometidos.
¿Qué es posible hacer con los Divisores de Sección en Divi?
Las posibilidades con los divisores de sección en Divi son infinitas.
Ejemplo: Puedes agregar efectos de animación. Además, puedes incorporar efectos como ocultar elementos, rotar divisores con controles de transformación o usar efectos de desplazamiento.
Agregar Movimiento a los Divisores de Forma
Como se mencionó anteriormente, puedes crear la apariencia de movimiento usando los efectos de desplazamiento en la altura del divisor.
Sin embargo, hay formas adicionales de agregar movimiento a los divisores.
Ejemplo: Puedes añadir una sección vacía por encima o debajo de otras secciones con contenido para mostrar movimiento utilizando los efectos de animación de Divi.
Uso de Efectos de Transformación con Desplazamiento en Divisores de Sección
Otra forma de incorporar movimiento es usar los efectos de transformación con desplazamiento de Divi. Aplicar estos efectos hará que la página cobre vida al desplazarse el usuario.
Sigue Aprendiendo
Hay muchas formas de incorporar divisores de forma en tus diseños. Para aprender formas divertidas e interesantes de hacer que tus diseños destaquen, revisa los siguientes recursos adicionales en el blog de Elegant Themes:
-
Ocultar elegantemente tu texto debajo de los divisores de sección en un diseño impresionante con Divi
-
Cómo rotar divisores de sección para crear impresionantes bordes laterales con las opciones de transformación de Divi
-
Cómo crear hermosas revelaciones de pie de página debajo de los divisores de sección en Divi
Popular Articles
How to Create an App for Restaurants (with or without Delivery)
Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...APPS: Radio
The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...APPS: Webhooks
The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...APPS: Audio & Music
How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...QR Promotions
This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...
Related Articles
Using Divi Transform Options
Divi transformation options are a set of powerful tools that allow you to manipulate web design in surprising ways, creating depth and attractive visual effects. Divi transformation options allow you to move elements, scale them, rotate them into ...Using Divi Presets
Divi's predefined settings greatly speed up your design process by allowing you to take the design of any element and apply it to other modules. Divi is highly customizable, allowing you to make Divi modules and other elements look as you like. ...Using Border Options in Divi
Divi border options allow you to easily add and stylize edges on any item on the page. With Divi Edge Options, it is possible to create truly unique designs for your website. You can apply custom edges to Divi elements, including sections, rows, and ...Using Spacing Options in Divi
It is easy to customize spacing into sections, rows and modules with Divi Spacing Options. Spacing is an important element in web design. It helps organize your content and keep things clear and balanced. With Divi, it is easy to customize spacing in ...Using Sizing Options in Divi
Divi Size Options make it easy to adjust the size of sections, rows, columns and modules in Divi. Divi Size Options make adjusting the size of sections, rows, columns and modules simple. Size is an essential part of creating attractive websites. ...