Secciones de DIVI

Las secciones son los bloques más grandes del constructor de Divi. Puede considerarlas como bloques horizontales apilables, los cuales se usan para agrupar el contenido dentro de áreas que se distinguen visualmente. En Divi, todo lo que construya debe comenzar en una sección. Este “envoltorio de contenido” tiene varios ajustes que se pueden configurar para lograr asombrosos resultados.

Antes de poder añadir un módulo de sección a una página, deberá activar el constructor de Divi. Luego de haber instalado el tema Divi en su sitio, notará un botón Usar el constructor de Divi en la parte superior del editor de la entrada al crear una nueva página. Si hace clic en este botón, se activará el constructor de Divi, el cual le dará acceso a todos los módulos disponibles. Haga clic en el botón Usar el constructor visual para activar el constructor en modo visual. También puede hacer clic en el botón Activar constructor visual al momento de visitar las páginas de su sitio luego de iniciar sesión en WordPress.

Una vez activado el constructor visual, podrá hacer clic en el botón del signo + azul para añadir una nueva sección a la página. Se abrirá una ventana emergente que le permitirá agregar cualquiera de los tres tipos de secciones de Divi: Estándar, Especial y Ancho completo.

Después de añadir la sección, se le pedirá insertar una estructura de columnas para la primera fila que estará contenida en esa sección, si insertó una sección Estándar o Especial. Si insertó una sección de Ancho completo, podrá insertar directamente los módulos propios de ese tipo de sección (para más información, vea Usar secciones de ancho completo).

Una vez seleccionada la estructura de columnas, estará listo para insertar módulos.

Al hacer clic en el botón Ajustes de sección, verá la lista de opciones de la sección; estas secciones están separadas en tres grupos principales: Contenido, Diseño y Avanzado.

Opciones de contenido

Dentro de la pestaña Contenido encontrará todos los elementos de contenido de la sección. Para las secciones estos elementos de contenido están limitados al fondo, tales como fondos de imagen y de vídeo.

Color de fondo

Si tan solo desea usar un color plano como fondo de sección, use el selector de color para definir uno.

Degradado de fondo

Puede usar para el fondo de la sección un degradado de dos colores con esta herramienta, y definir el tipo de degradado (lineal o radial), la dirección de degradado (en grados), la posición inicial y posición final (en porcentajes).

Imagen de fondo

Si es definida, esta imagen se usará como fondo para la sección. Para quitar la imagen de fondo, simplemente borre la URL del campo de configuración. Las imágenes de fondo en una Sección abarcan el ancho completo del navegador, por lo tanto recomendamos que las imágenes tengan al menos 1080 píxeles de ancho.

Si usa una imagen, podrá activar el efecto Parallax, con el cual la imagen de fondo permanecerá fija al desplazar la página, creando un asombroso efecto visual. También podrá definir el método usado para el efecto Parallax (CSS o True Parallax).

Podrá, además, seleccionar el tamaño de imagen de fondo (Cubrir, Ajustar o Tamaño real), la posición (Superior izquierda, Superior centrada, Superior derecha, Centrada a la izquierda, Centrada, Centrada a la derecha, Inferior izquierda, Inferior centrada e Inferior derecha), el tipo de repetición (No repetir, Repetir, Repetir X horizontal, Repetir Y vertical, Espacio y Redondo) y el estilo de mezcla (Normal, Multiplicar, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Luminosidad y Color).

Vídeo MP4 de fondo

Todos los vídeos deben ser subidos en formato .MP4 o .WEBM para asegurarse máxima compatibilidad con todos los navegadores. Suba la versión .MP4 aquí. Nota importante: Los vídeos de fondo se desactivan en dispositivos móviles. En su lugar, se utiliza una imagen de fondo. Por esta razón, debería definir ambos fondos, imagen y vídeo, para asegurarse mejores resultados. Nota importante: para que el formato de vídeo MP4 funcione en todos los navegadores, su servidor debe tener designados los tipos MIME correctos. Puede aprender más sobre cómo usar el archivo .htaccess para definir los tipos MIME aquí. Si nota que sus vídeos no se reproducen en ciertos navegadores, es probable que esta sea la razón.

Vídeo WEBM de fondo

Todos los vídeos deben ser subidos en formato .MP4 o .WEBM para asegurarse máxima compatibilidad con todos los navegadores. Suba la versión .WEBM aquí. Nota importante: Los vídeos de fondo se desactivan en dispositivos móviles. En su lugar, se utiliza una imagen de fondo. Por esta razón, debería definir ambos fondos, imagen y vídeo, para asegurarse mejores resultados. Nota importante: para que el formato de vídeo WEBM funcione en todos los navegadores, su servidor debe tener designados los tipos MIME correctos. Puede aprender más sobre cómo usar el archivo .htaccess para definir los tipos MIME aquí. Si nota que sus vídeos no se reproducen en ciertos navegadores, es probable que esta sea la razón.

Ancho del vídeo de fondo

Después de subir el vídeo, debe asignarle un ancho aquí. Debe ser igual al ancho real del vídeo, de lo contrario la posición del fondo será incorrecta.

Alto del vídeo de fondo

Después de subir el vídeo, debe asignarle una altura aquí. Debe ser igual al ancho real del vídeo, de lo contrario la posición del fondo será incorrecta.

Pausar vídeo cuando se reproduce otro

Permita que el vídeo sea pausado por otros reproductores cuando comiencen a reproducir

Pausar vídeo cuando no está a la vista

Si desea pausar el vídeo al hacer clic, seleccione esta opción.

Etiqueta de administración

La etiqueta de administración le permite cambiar el nombre para identificar la sección más fácilmente. Cuando use la vista de estructura, estas etiquetas aparecerán dentro del bloque de la sección en la interfaz del constructor.

Sistema de ayuda de Divi

Dentro de cada pestaña de los ajustes de las secciones, a continuación de las opciones, se incluye un enlace al sistema de ayuda de Divi, que incluye más de 70 vídeos completos con instrucciones de configuración y uso del constructor. Este sistema único les da a usted y a sus clientes la ayuda que necesiten, permitiéndoles aprender al mismo tiempo que crean sus sitios.

Los vídeos individuales de cada lista de reproducción se pueden abrir en una ventana emergente, fuera del cuadro de ayuda, lo cual le permite redimensionar o mover la interfaz del vídeo por toda la pantalla para que encuentre la mejor ubicación. El vídeo permanece abierto y anclado a su posición mientras usted explora el constructor, siguiendo el tutorial y construyendo la página. Puede visitar uno por uno los vídeos de la lista, cerrar el vídeo y volver a la lista de reproducción en cualquier momento. Los vídeos solo están disponibles en inglés.

Opciones de diseño

Dentro de la pestaña Diseño encontrará todas las opciones de estilo de la sección, tales como el tamaño y el espaciado. Esta es la pestaña que usará para cambiar la apariencia de la sección. Cada tipo de sección de Divi tiene una larga lista de ajustes de diseño que puede usar para cambiar casi todo.

Mostrar sombra interior

Aquí puede seleccionar si la sección mostrará una sombra interior o no. Esto puede lucir mejor si usa colores o imágenes de fondo.

Ancho

De manera predeterminada, el ancho del módulo está asignado al 100% de la columna que lo contiene. Si desea modificar ese ancho puede hacerlo usando el control deslizante. Por ejemplo, un valor de 50% limitará el ancho del módulo a la mitad de la columna que lo contiene.

Alineación de sección

Aquí puede elegir la posición del módulo en caso de que haya modificado el ancho en el ajuste anterior: alineado a la izquierda, al centro o a la derecha.

Separadores

Aquí podrá seleccionar los estilos de la separación de la sección, tanto superior como inferior de manera independiente.

Estilo del separador

Elija uno de los 26 tipos distintos de separador, cuya vista previa se mostrará en la lista.

Color del separador

Si seleccionó un estilo de separador verá esta opción, que le permitirá seleccionar el color (por lo general, será el mismo color de fondo de la sección anterior).

Altura del separador

Aquí podrá controlar la altura del elemento gráfico usado como separador.

Voltear separador

Aquí podrá invertir horizontal o verticalmente el elemento gráfico usado como separador.

Disposición del separador

Aquí podrá seleccionar la disposición del separador: Arriba del contenido de la sección o Debajo del contenido de la sección.

Margen personalizado

Aquí puede ajustar el margen a valores específicos, o dejar en blanco para usar el margen predeterminado.

Relleno personalizado

Aquí puede ajustar el relleno a valores específicos, o dejar en blanco para usar el relleno predeterminado.

Borde

Aquí puede controlar de manera individual el radio de las cuatro esquinas de la sección, así como la apariencia, el ancho, el color y el estilo (sólido, punteado, rayado, doble, surco, cresta, interior y exterior).

Sombra

Use estos ajustes para añadir una sombra en la sección. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).

Filtros

Seleccione aquí el tipo de filtro para aplicar a la sección: podrá controlar valores de Tonalidad, Saturación, Brillo, Contraste, Invertir, Sepia, Opacidad y Desenfoque. También podrá definir el modo de mezcla con la imagen o color de fondo que haya elegido para este módulo, con las siguientes opciones: Normal, Multiplicar, Pantalla, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.

Estilo de la animación

Elija un estilo de animación para activar las animaciones en este elemento. Las opciones son: Desvanecer, Diapositiva, Rebotar, Zoom, Voltear, Plegar o Rodar. Una vez activado, podrá personalizar aún más el estilo de animación. Para desactivar las animaciones, elija la opción Ninguna.

Repetición de la animación

De manera predeterminada, las animaciones solo se ejecutarán una vez. Si desea que la animación se repita continuamente puede elegir aquí la opción Repetir.

Dirección de la animación

Esta opción está disponible para todos los estilos de animación, excepto Desvanecer. Elija una de las cinco direcciones de animación diferentes, cada una de las cuales ajustará la posición inicial y final del elemento animado: Centrada, Derecha, Izquierda, Arriba, Abajo.

Duración de la animación

Aumente o disminuya la velocidad mediante el ajuste de duración de la animación. Las unidades son en milisegundos y la duración predeterminada de la animación es de un segundo.

Retardo de la animación

Si desea añadir un retardo antes de ejecutar la animación puede designar aquí ese retraso en milisegundos. Esto puede ser útil si usa varios módulos animados juntos.

Intensidad de la animación

Esta opción está disponible para todos los estilos de animación, excepto Desvanecer y Rebotar. La intensidad afecta la suavidad o fuerza de la animación. Si baja la intensidad, la animación será más suave y sutil. Si la aumenta, la animación será más agresiva y ágil.

Opacidad inicial de la animación

Si aumenta la opacidad inicial, puede reducir o eliminar el efecto de desvanecido que es aplicado a todos los estilos de animación.

Curva de velocidad de la animación

Aquí puede ajustar el método de atenuación de la animación. Las opciones son: Atenuación de entrada y salida, Atenuación, Atenuación de entrada y Atenuación de salida. Atenuar la entrada o salidad de la animación creará un efecto más suave en comparación con una curva de velocidad lineal.

Opciones avanzadas

Dentro de la pestaña Avanzado encontrará opciones que podrían ser útiles para diseñadores web más experimentados, tales como los atributos CSS y HTML. Aquí puede aplicar código CSS personalizado a la sección, y también puede aplicar clases CSS e ID personalizadas, las cuales pueden ser usadas para personalizar la sección dentro de la hoja de estilos del tema hijo.

ID CSS

Escriba una ID CSS opcional para usar en esta sección. Puede usar una ID para aplicarle estilos o usarla como anclaje de enlace.

Clase CSS

Escriba una o varias clases CSS opcionales para usar en esta sección. Una clase CSS puede ser usada para aplicar estilos. Puede añadir múltiples clases, separadas por un espacio. Estas clases pueden ser usadas en el tema hijo o en el recuadro CSS personalizado para añadir a la página (desde los ajustes de la página) o al sitio entero (desde las opciones del tema).

CSS personalizado

Puede aplicar CSS personalizado a la sección desde aquí. Dentro de la sección CSS personalizado encontrará un campo de texto donde podrá añadir el código directamente a cada elemento. El código que se añada a estos campos ya está envuelto en sus respectivas etiquetas, por lo que solo deberá introducir reglas de CSS separadas por punto y coma.

Visibilidad

Esta opción le permite controlar en qué dispositivos aparecerá la sección. Puede elegir desactivarla de manera individual en tablets, teléfonos móviles o en equipos de escritorio. Esto es especialmente útil si desea usar secciones distintas para cada dispositivo, o si desea simplificar el diseño para móviles al eliminar ciertas secciones de la página.

Usar secciones de ancho completo

Las secciones de ancho completo le dan acceso a un nuevo conjunto de módulos de ancho completo. Estos módulos se comportan de manera un tanto diferente, ya que sacan ventaja del ancho completo del navegador. Los módulos de ancho completo solo pueden colocarse dentro de secciones de ancho completo.

Una vez que agregue a la página una nueva sección de ancho completo, podrá insertar un módulo de ancho completo directamente. A diferencia de las secciones normales, no existe el concepto de filas o columnas aquí, ya que los módulos de ancho completo siempre van a tomar el 100% del ancho de la pantalla. Los módulos de ancho completo representan una buena manera de añadir un corte visual en una página.

Un buen ejemplo de módulo de ancho completo es el carrusel. Este carrusel de ancho completo funciona igual que el carrusel estándar, solo que se expande al 100% del ancho del navegador. Mostrar un carrusel a semejante escala puede resultar deslumbrante.

Usar secciones especiales

Las secciones especiales le brindan niveles adicionales de división vertical, los cuales permiten insertar columnas dentro de columnas. Estas secciones son útiles para crear diseños dinámicos con barras laterales.

A diferencia de las secciones normales, cuando use una sección especial, podrá agregar variantes complejas de columnas seguidas de barras laterales extendidas, sin ver rupturas de página no deseadas. Estos tipos de estructura no son posibles en las secciones normales.

Una vez que haya agregado una sección especial a la página, notará que un área tiene la opción Insertar módulo/s, mientras que la otra tiene la opción Añadir fila. El área para insertar módulos representa la barra lateral vertical. Puede agregar aquí todos los módulos que desee, en una sola fila, los cuales rellenarán toda la extensión de la sección, adyacentes a la estructura de columnas que cree en la sección siguiente. Al hacer clic en Añadir fila podrá agregar filas adicionales. Es decir, tiene la posibilidad de agregar filas dentro de filas.

Como resultado, podrá crear la estructura de columnas que desee, y todas lucirán estupendas. A continuación hay un ejemplo de una página creada con las secciones especiales. Como se ve, el diseño es de dos sectores, con una barra lateral y una estructura compleja de columnas contigua.