Hay muchos diseños geniales de Divi en la web. Una cosa que hace que muchos de los mejores temas de Divi se destaquen son las divisiones de secciones. Las divisiones de secciones son una excelente manera de agregar un toque visual a su sitio web. La mejor manera de agregarlos es con estilo CSS, pero no es necesario que sepa CSS para agregarlos a su sitio web Divi. Puede usar un complemento llamado Section Style Manager Pro.
El estilo de sección agrega formas únicas en que las secciones se separan entre sí. Las secciones estándar son rectas. El estilo puede crear ángulos, cuadros, círculos, triángulos y más únicos. Incluso algo tan simple como un ángulo puede hacer que su sitio web se destaque y se vea más interesante. En esta descripción general del complemento, veremos los estilos disponibles en Section Style Manager Pro y veremos lo fácil que es usarlo.
Section Style Manager Pro está disponible en: Bolt Themes
Inspirado en Divi Module Editor y la selección de separadores en CodDrops , el complemento proporciona una manera fácil de agregar estilo CSS para crear 28 separadores únicos para las secciones de su sitio web Divi.
El complemento agrega clases de CSS que luego puede asignar a las secciones utilizando la clase de CSS adecuada. No tienes que saber CSS o incluso cuáles son las clases. Simplemente seleccione el estilo que desee de las imágenes que le da en la pantalla. Todo lo que tienes que saber hacer es pegar en un campo.
Los estilos de sección incluyen:
- 3 triangulo
- 3 diagonales
- 3 semicírculo
- división de 2 rondas
- 3 ángulo
- 2 deslizadores
Avanzado incluye:
- Cajas
- castillos
- Puntos
- Líneas dobles
- esquina doblada
- Inzigzag
- Múltiples triángulos
- Bordes redondeados
- Abertura
- Triángulo grande transparente
- Pequeño triángulo transparente
- Zig-zag
Después de cargar el complemento, se agrega un nuevo enlace al menú del tablero llamado Estilos de sección. Esto abre la pantalla del menú donde puede ver los estilos disponibles y las instrucciones para usarlos.
Uso de los estilos
Primero, en la página del complemento en el tablero, haga clic en el estilo que desea usar. La clase CSS para ese estilo se copiará automáticamente en su portapapeles.
A continuación, vaya a la sección en la que desea tener el estilo. Vaya a la configuración de la sección, seleccione CSS personalizado y péguelo en el campo llamado Clase CSS .
Finalmente, haga clic en Guardar y salir y actualice la página. El estilo ahora se agrega a esa sección.
Ejemplos de estilos de sección regular
Para crear ejemplos, hice una página de prueba usando el diseño básico de la página de inicio de la Biblioteca Divi. La segunda sección es un encabezado de ancho completo con texto. Esta es la sección donde agregaré los estilos. Para ayudar a que esta sección se destaque, he diseñado las secciones de arriba y de abajo en azul.
Ahora, veamos algunos ejemplos.
Parte superior de secciones triangulares
Aquí hay una sección triangular. Éste le coloca el triángulo encima. También está disponible en la parte inferior, o tanto en la parte superior como en la inferior.
Secciones diagonales Ambos
La sección diagonal agrega una pendiente diagonal en la parte superior, inferior o en ambas. Este usa ambos.
Parte inferior de secciones de semicírculo
Este coloca un semicírculo en la parte superior, inferior o en ambas. Este lugar está en la parte inferior.
Parte superior curvada de secciones divididas redondas
Este es el estilo Round Split con parte superior curva. También tiene una opción para un fondo curvo.
ángulo ambos
El estilo Ángulo coloca un ángulo a la izquierda, a la derecha o a ambos en la parte superior de la sección. Este usa ambos.
Controles deslizantes Pantalla completa
Este estilo funciona con controles deslizantes de pantalla completa, lo que le permite crear fácilmente un control deslizante para ocupar horizontalmente la pantalla completa o la mitad de la pantalla. Este es un control deslizante de pantalla completa.
Si tiene algo más en la sección, ese módulo no se mostrará como pantalla completa o media pantalla. En la imagen de arriba, la fila original y el control deslizante están en la misma sección. He diseñado el fondo del control deslizante para que se destaque.
Aplicar estilo al fondo
Para diseñar el fondo, simplemente seleccione un color de fondo en la sección. Los estilos coincidirán automáticamente con el estilo del color de fondo.
Este usa un triángulo tanto para la parte superior como para la inferior.
Este usa una sección diagonal en la parte inferior.
Uso de imágenes
Aunque solo estaba destinado a trabajar con fondos de color, funciona un poco con imágenes, pero reacciona de manera diferente a lo previsto. Usando prueba y error, puede obtener algunos efectos interesantes. Parallax apaga el estilo. Para ser justos, no era su intención que yo lo usara con imágenes, por lo que esto no es negativo para el complemento, pero tuve que experimentar y creo que vale la pena intentarlo. Sin embargo, recomiendo probar sus imágenes en varios navegadores si decide probarlo.
Estilos de sección avanzados
Los Estilos de sección avanzados agregan un nivel adicional de personalización: tienen patrones más complejos y se pueden personalizar con el Personalizador de temas .
Personalizador de temas avanzado de SSM
Se agrega una nueva pestaña llamada SSM Advanced al personalizador de temas e incluye una pestaña para cada uno de los estilos de sección avanzados. Aquí puede ajustar los colores para cada uno de los estilos de forma independiente. Estas son personalizaciones globales, lo que significa que estos ajustes aparecerán en todas partes donde se use ese estilo.
Cajas
Los cuadros le brindan ajustes para dos colores, lo cual es excelente para crear un efecto de pared de castillo. En el ejemplo anterior, utilicé los colores de la sección actual y la sección debajo de ella para unir las dos secciones.
Puntos
Puede aplicar estilo a los puntos anteriores y posteriores de un color y aplicar estilo al punto central de otro color.
Líneas dobles
Las líneas dobles se pueden diseñar de forma independiente. Aquí he usado dos variaciones de rojo para combinar con el color de fondo de la sección.
Esquina Doblada
Aquí hay un vistazo a la esquina doblada. Encontré este difícil de diseñar porque realmente solo funciona si diseñas la esquina para que coincida con la sección. He diseñado la parte superior de la esquina un poco más oscura que el color de la sección para que se destaque un poco. La parte trasera de la esquina es mucho más oscura y el área debajo de la sección es de un color completamente diferente. Para ayudar a que el ojo del lector perciba el rojo debajo de la sección, podría diseñar algo más en esa sección para que parezca que se asoma.
Inzigzag
Inczigzag hace algunos efectos interesantes. He hecho que el color de fondo inferior coincida con los colores de fondo de la sección anterior y siguiente para dar el efecto de que esta sección los superpone.
triángulo múltiple
He aquí un vistazo al Triángulo Múltiple. Agregué un color de fondo rojo oscuro para que se destaque.
Abertura
Aquí hay un vistazo a Slit. Coloca una banda grande en la parte superior de la sección y tiene estilo para dos colores. Hice que el fondo principal coincidiera con la sección y el segundo fondo una versión más oscura del color principal.
Triángulo grande transparente
Este es el Gran Triángulo Transparente. Para darle estilo usé el mismo color que la sección debajo para crear un interesante diseño de flecha hacia abajo.
En este, agregué un fondo azul oscuro a la sección y usé un azul ligeramente más claro para el color de fondo transparente.
Triángulo pequeño transparente
Aquí está el triángulo pequeño transparente con estilo con dos variaciones del mismo color.
Constructor de front-end
Dado que el complemento solo le brinda una manera fácil de agregar clases de CSS prefabricadas a sus secciones, en realidad no tiene ningún código con el que entrar en conflicto o ser restringido por el generador de front-end. Todavía puede ajustar el estilo de su sección utilizando el generador frontal como cualquier sección.
El estilo del CSS tendrá que hacerse desde el Personalizador de temas, pero todo se puede ajustar desde el frente. Como era de esperar, puede pegar la clase CSS en el campo adecuado desde la interfaz. Si prefiere usar el generador de front-end, no tendrá ningún problema al usar Section Style Manager Pro.
Usarlo con Extra
Funciona bien con páginas y publicaciones en Extra . El generador de categorías me dio algunos problemas con el formato. Recomiendo probar diferentes estilos para ver qué funciona mejor para su diseño.
Licencia, Documentación, Actualizaciones y Soporte
Section Style Manager Pro se puede utilizar en sitios web ilimitados para usted y sus clientes.
El complemento incluye actualizaciones gratuitas de por vida. Las actualizaciones se realizan automáticamente y se agrega un enlace al complemento en la lista de complementos donde puede buscar actualizaciones.
La documentación se proporciona en la página del tablero y cubre cómo copiar y dónde pegar la clase CSS, y cómo diseñar los estilos avanzados usando el personalizador de temas. Hay dos tutoriales en video en la página de ventas del complemento para guiarlo a través del uso de ambos tipos de estilos.
El soporte de por vida se proporciona a través de correo electrónico. También puede enviarles un correo electrónico con preguntas previas a la venta.
Pensamientos finales
Section Style Manager Pro proporciona una manera fácil de agregar 28 estilos de división de secciones a su sitio web. Deberá pegar la clase CSS en la sección que desee, pero poder elegir entre varios estilos con solo hacer clic en la clase que desee en la pantalla del panel simplifica el proceso de estilo CSS. No se requiere programación… simplemente haga clic y pegue.
Puede usar los estilos en tantas secciones en una sola página como desee, pero le recomiendo usar solo un estilo por sección. El uso de dos estilos puede provocar que entren en conflicto. El complemento es liviano, por lo que no hay tensión adicional en su sitio web.
Todos los estilos usan el color de fondo de la sección y se mezclan perfectamente. Los estilos avanzados proporcionan varias capas que se pueden colorear individualmente con el personalizador de temas. Es fácil combinar la paleta de colores de su sitio web o los colores de su propia marca.
Está disponible en Bolt Themes (que se encuentra aquí: Divi Section Style Manager Pro ). Si solo desea los estilos básicos y los dos estilos de control deslizante, puede probar la versión lite gratuita (que se encuentra aquí: Divi Section Style Manager Lite ).
¿Has probado Section Style Manager Pro? ¡Háganos saber lo que piensa al respecto en los comentarios a continuación!
Imagen destacada de Lesia_G / shutterstock.com