Filas y opciones de filas

Ajustes de contenido

Color de fondo

Si tan solo desea usar un color plano como fondo de la fila, use el selector de color para definir uno.

Degradado de fondo

Puede usar para el fondo de la fila 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 fila. Para quitar la imagen de fondo, simplemente borre la URL del campo de configuración.

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.

Fondo de columnas

Para cada columna de una fila puede asignar un fondo único. Las opciones son las mismas que para los demás fondos: color, degradado, imagen y vídeo.

Etiqueta de administración

La etiqueta de administración le permite cambiar el nombre para identificar la fila más fácilmente. Cuando use la vista de estructura, estas etiquetas aparecerán dentro del bloque de la fila 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.

Ajustes de diseño

Alineación de fila

Aquí puede elegir la posición del módulo respecto del área visible de la pantalla: alineado a la izquierda, al centro o a la derecha.

Hacer esta fila de ancho completo

Si se activa esta opción, la fila se extenderá al ancho de la ventana del navegador (similar a una sección de ancho completo). Esto es buenísimo para crear atractivos diseños de columnas en ancho completo.

Usar ancho personalizado

También puede asignar un ancho personalizado a cada fila. Por ejemplo, si desea añadir alguna variación al flujo de la página y hacer una fila más extensa que el resto, puede introducir aquí un valor personalizado para el ancho.

Usar ancho personalizado de separación

El ancho de separación es la distancia entre columnas. Hay cuatro tamaños de ancho de separación, desde ninguno a grande. Si asigna el ancho de separación a 1, no existirá ninguna separación entre columnas. Cuando se combina con la opción Hacer esta fila de ancho completo, podrá crear un efecto similar al del módulo Portfolio de ancho completo.

Ancho de separación

Use este selector deslizante para asignar el ancho de separación entre columnas (de 1: sin separación, a 4: separación grande).

Igualar alturas de columna

Esta es una opción genial, en especial cuando ha aplicado colores sólidos de fondo a columnas individuales. Al activar esta opción, todas las columnas estarán obligadas a tomar el mismo valor de altura.

Relleno personalizado

Si desea ajustar el relleno (superior, inferior, izquierdo y derecho) de la fila, puede hacerlo con esta opción.

Margen personalizado

Si desea ajustar el margen (superior, inferior, izquierdo y derecho) de la fila, puede hacerlo con esta opción.

Relleno personalizado de columna

Para cada columna en una fila, puede asignar valores únicos de relleno.

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 fila. 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.

Ajustes avanzados

ID CSS

Escriba una ID CSS opcional para usar en esta fila. 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 fila. Una clase CSS puede ser usada para aplicar estilos.

ID CSS de columna

Puede asignar una ID CSS a la columna si desea referirla desde la hoja de estilos o usarla como anclaje de enlace.

Clase CSS de columna

Puede asignar una clase CSS a la columna si desea referirla desde la hoja de estilos.

Antes

Introduzca aquí el código CSS para aplicar antes (::before) del div de la fila principal.

Elemento principal

Introduzca aquí el código CSS para aplicar al div de la fila principal.

Después

Introduzca aquí el código CSS para aplicar después (::after) del div de la fila principal.

:before de columna

Introduzca aquí el código CSS para aplicar antes (::before) del div de la columna correspondiente (aparecerán tantos campos :before como columnas se hayan insertado en la fila).

Elemento principal de columna

Introduzca aquí el código CSS para aplicar al div de la columna correspondiente (aparecerán tantos campos Elemento principal como columnas se hayan insertado en la fila).

:after de columna

Introduzca aquí el código CSS para aplicar después (::after) del div de la columna correspondiente (aparecerán tantos campos :after como columnas se hayan insertado en la fila).

Visibilidad

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

Probemos algunos ajustes

Ahora que hemos repasado todos los ajustes, probaremos algunas combinaciones para mostrar las posibilidades creativas que nos ofrecen. En este ejemplo, tocaremos el ajuste de la Fila de ancho completo como introducción. La opción para hacer la fila de ancho completo es una de las más versátiles del conjunto. Esto ampliará el ancho de la fila hasta los extremos del navegador, de manera similar a la Sección de ancho completo. A diferencia de esta, sin embargo, las filas de ancho completo pueden tener estructuras de columnas y pueden contener cualquier módulo.

En el siguiente ejemplo hemos creado una fila con cuatro columnas y añadido una imagen rectangular a cada columna. Luego activamos la opción Hacer esta fila de ancho completo para ampliar la fila hasta los bordes de la ventana del navegador.