Las filas son el segundo bloque de construcción más grande dentro del constructor de Divi y pueden utilizarse de diversas maneras.

Las filas representan distintas disposiciones de columnas que se pueden colocar dentro de las secciones.

Al igual que los módulos, las filas tienen varias configuraciones que puedes acceder haciendo clic en el ícono de ajustes en la esquina superior izquierda de la fila.

Las opciones de fila son especialmente poderosas porque te permiten crear una gran variedad de diseños, ya que definen la estructura donde se ubican los módulos.

Cómo agregar una fila a tu página

1. Edita o crea una nueva página desde el Escritorio de WordPress → Páginas → Todas las páginas.

2. Si la página ya tiene el Divi Builder activado, haz clic en el enlace Editar con Divi.
   

Esto abrirá el Constructor Visual.

2- Si la página no tiene el Divi Builder activado, ábrela con el editor por defecto de WordPress haciendo clic en Editar, y luego haz clic en el botón Usar el constructor de Divi.

Agregar una nueva fila

Haz clic en el botón verde (+) para añadir una nueva fila a tu sección.

Verás un cuadro emergente donde podrás elegir la disposición de columnas para esa fila.

Cómo agregar un video de fondo

Haz clic en la cuarta pestaña, el ícono de Video.

Haz clic en el signo + gris para abrir la biblioteca de medios, donde podrás seleccionar un video ya cargado o subir uno nuevo.

Opciones de Video de Fondo

Mp4 vs Webm – Se recomienda subir ambas versiones (mp4 y webm) ya que no todos los navegadores soportan el formato webm. Cargar ambos asegura que el video se reproduzca en todos los dispositivos y navegadores.

• Ancho del video de fondo – Define el ancho del video escribiendo un valor numérico.

• Alto del video de fondo – Define el alto del video escribiendo un valor numérico.

• Pausar el video cuando otro se reproduzca – Activa esta opción si deseas que el video de fondo se pause cuando se reproduzca otro video. Por defecto, el video se pausa cuando no está en vista. Si deseas que siga reproduciéndose, desactiva esta opción.

Cómo agregar un patrón de fondo

Haz clic en la quinta pestaña, el ícono de Patrón.

Haz clic en Agregar patrón de fondo y elige el tipo de patrón que deseas desde el menú desplegable.

Opciones de Patrón de Fondo

• Color del patrón – Selecciona el color desde la paleta de tu sitio o usa el cuentagotas para escoger un nuevo color.

• Transformar patrón – Puedes mover el patrón horizontal o verticalmente, rotarlo o invertirlo.

• Tamaño del patrón – Puedes seleccionar el tamaño: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges personalizado, podrás definir el ancho y alto del patrón usando un deslizador o valores numéricos.

• Origen de repetición – Define desde dónde se repetirá el patrón.

• Desplazamiento horizontal y vertical – Ajusta la posición del patrón en el eje horizontal y vertical.

• Repetición del patrón – Elige cómo se repetirá el patrón: horizontal, vertical, etc.

• Modo de fusión del patrón – Define cómo el patrón interactúa visualmente con las capas debajo. Puedes elegir entre 16 modos de fusión desde el menú desplegable.

Cómo agregar una máscara de fondo

Haz clic en la sexta pestaña, el ícono de Máscara.

Haz clic en Agregar máscara de fondo y selecciona el tipo de máscara desde el menú desplegable.

Opciones de Máscara de Fondo

• Color de la máscara – Elige el color desde la paleta del sitio o usa el cuentagotas.

• Transformar máscara – Puedes mover, rotar, invertir o reflejar la máscara.

• Relación de aspecto de la máscara – Define la relación ancho/alto.

• Tamaño de la máscara – Puedes elegir: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges personalizado, aparecerán las opciones de ancho y alto de la máscara.

• Modo de fusión de la máscara –  Esto define cómo la capa de máscara interactúa con las capas que se encuentran debajo de ella. Selecciona uno de los 16 modos de fusión disponibles en el menú desplegable.

Etiqueta de administración

Aquí puedes agregar una etiqueta que aparecerá en el constructor en el backend, tanto en vista de estructura como en vista de capas.
Muy útil para identificar filas fácilmente en diseños grandes.

Pestaña de diseño

Aquí encontrarás todas las opciones de estilo para la fila:

• Tamaño

• Espaciado

• Borde

• Sombra de caja (Box Shadow)

• Filtros

• Transformaciones

• Animación

Tamaño

 Este grupo de opciones define el tamaño (ancho y alto) de la Fila. Puedes establecer un ancho máximo, una altura máxima y una altura mínima para la Fila.

Haz clic en las flechas para elegir la alineación del módulo (izquierda, centro o derecha). Por defecto, una Fila está alineada a la izquierda.

Usar ancho personalizado de canalones – Puedes ajustar el tamaño de los espacios (canalones) entre cada columna cuando está activado.

Igualar alturas de columnas – Cuando está activado, cada columna tendrá la misma altura, independientemente del contenido. Se usará la altura de la columna más alta.

Ancho  – Define el ancho de la Fila. Por defecto, el ancho es el 80% del ancho de la Fila. Para más información, consulta la documentación oficial.

Ancho máximo  – Define el ancho máximo de la Fila. Por defecto, el ancho máximo es de 1080px. Para más información, consulta la documentación oficial.

Alineación de la Fila – Si se establece un valor para el Ancho o Ancho Máximo, la alineación de la Fila puede configurarse con estas tres opciones:

• Alineado a la izquierda

• Centrado

• Alineado a la derecha

Altura mínima  – Define el valor mínimo para la altura de la Fila. Para más información, consulta la documentación oficial.

Altura  – Define la altura de la sección. Para más información, consulta la documentación oficial.

Altura máxima  – Define el valor máximo de altura que puede tener la sección. Para más información, consulta la documentación oficial.

Espaciado

Agrega márgenes (afuera) o relleno/padding (adentro) con valores numéricos.

Haz clic en el ícono de cadena para mantener iguales los valores de arriba/abajo o izquierda/derecha.

Valores por defecto:

• Margen: 0

• Relleno:

  • Superior: 27px

  • Inferior: 27px

  • Izquierda/Derecha: 0px

Borde

Agrega bordes completos o solo en un lado. Ajusta:

• Ancho del borde (mínimo 1px para que se vea)

• Color del borde

• Estilo del borde: sólido, punteado, doble, etc.

• Esquinas redondeadas: introduce un valor numérico. Puedes vincular/desvincular los valores de cada esquina.

Sombra de caja (Box Shadow)

Agrega sombra al módulo y personaliza:

• Posición Horizontal de la Sombra  - Define la posición horizontal de la sombra.
  

• Posición Vertical de la Sombra  - Define la posición vertical de la sombra.
  

• Intensidad del Desenfoque de la Sombra- Define la intensidad del desenfoque de la sombra. Mientras mayor sea el valor, mayor será el desenfoque, y la sombra se verá más amplia y tenue.
  

• Intensidad de la Expansión de la Sombra  - Define la fuerza con la que se expande el desenfoque. Al aumentar esta intensidad, la sombra se vuelve más densa. Una mayor densidad resulta en una sombra más intensa.
  

• Color de la Sombra  - Define el color de la sombra.
  

• Posición de la Sombra  - Define si la sombra estará dentro del módulo o fuera de él.
  

Filtros

Puedes ajustar la Fila (Row):

1. Matiz (Hue) - Define el ángulo del matiz de un color.
   
2. Saturación - Define qué tan intensa debe ser la saturación del color.
3. Brillo - Define qué tan brillantes deben ser los colores.
4. Contraste - Define qué tan marcadas deben ser las áreas claras y oscuras.
5. Invertir - Invierte el matiz, la saturación y el brillo según el valor especificado.
6. Sepia - Define una apariencia más cálida, con tonos amarillos/marrones.
7. Opacidad - Define qué tan transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).
8. Desenfoque (Blur) - Define la cantidad de desenfoque gaussiano aplicado al módulo.
9. Modo de fusión (Blend Mode) - Se refiere a cómo el módulo se mezcla con las capas debajo de él. Por defecto, está seleccionado "normal".

Nota: Cualquiera de los filtros mencionados anteriormente también afectará a los elementos internos de la fila: columnas y módulos. 

Transformar

• Escalar
• Trasladar
• Rotar
• Sesgar
• Puntos de origen.

Navega con la tecla Tab para acceder a cada opción. Configura cada opción ingresando valores numéricos o arrastrando y ampliando el cuadro o círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el ícono de cadena en la esquina inferior derecha.

Animación

​Aquí puedes aplicar animación al módulo. Una vez que eliges un estilo, puedes ajustar las siguientes opciones:

• Duración de la animación: Define el tiempo que tarda la animación en completar un ciclo.

• Retraso de la animación: Define el tiempo que espera desde que se aplica la animación a un elemento antes de comenzar. La animación puede comenzar después, inmediatamente desde el inicio, o inmediatamente y a mitad de la animación.

• Opacidad inicial de la animación: Define el valor inicial de opacidad.

• Curva de velocidad de la animación: Define el método de aceleración de tu animación. Acelerar y desacelerar crea un efecto más suave que una curva lineal.

• Repetición de la animación: Por defecto, las animaciones se reproducen una vez. Para hacer un bucle continuo, elige la opción Loop.

Pestaña Avanzada

​En esta pestaña encontrarás opciones útiles para diseñadores web con experiencia, como CSS personalizado.

Aquí puedes aplicar CSS personalizado a tu módulo, así como clases e IDs personalizados para usar propiedades CSS avanzadas o código CSS específico usando la clase del módulo.

ID y Clases CSS

Asigna un ID o clase CSS específica a este módulo, útil para aplicar CSS personalizado mediante la hoja de estilos de tu tema hijo.

CSS Personalizado

• CSS libre: Escribe CSS libre usando el selector selector para apuntar a este módulo. Ejemplo: selector h1 {color: red;}

• Elementos del módulo: También puedes agregar CSS personalizado en esta pestaña para secciones específicas del módulo.

Condiciones

Esta pestaña permite elegir cuándo mostrar la sección, basado en condiciones como si el usuario ya ha comprado antes, qué navegador usa, sistema operativo, etc.

Puedes agregar una o varias condiciones.

Visibilidad

• Desactivar en: Define la visibilidad de la fila. Puedes ocultarla en teléfonos, tablets o desktops marcando la casilla correspondiente.

Desbordamiento Horizontal

​Define qué mostrar cuando el contenido se desborda horizontalmente:

• Visible

• Scroll (barra de desplazamiento)

• Oculto

• Automático (decide el navegador)

Desbordamiento Vertical
Define qué mostrar cuando el contenido se desborda verticalmente:

• Visible
• Scroll
• Oculto
• Automático

Transiciones

​Controla la duración, retraso y curva de velocidad de la animación al pasar el cursor (hover).

• Duración de la transición - Define la duración (en milisegundos) de la transición de la animación al pasar el cursor.
  

• Retraso de la transición - Define el retraso de la transición de la animación al pasar el cursor (en milisegundos).
  

• Curva de velocidad de la transición - Define la curva de velocidad de la transición de la animación al pasar el cursor.
  

Posición

​Define la posición de la fila:

• Relativa (valor por defecto): Posicionada según el flujo normal y desplazada según los valores de offset vertical y horizontal. No afecta otros elementos.

• Absoluta: Removida del flujo normal; se posiciona relativo al ancestro posicionado más cercano o al contenedor inicial.

• Fija: Removida del flujo normal; posicionada respecto a la ventana del navegador, útil para filas "sticky".

• Offset Vertical: Posición vertical de la fila.

• Offset Horizontal: Posición horizontal de la fila.

• Z-index: Define el orden de apilamiento. Filas con mayor z-index se superponen a las de menor valor.

Efectos de Scroll

Define cómo se comporta la sección al hacer scroll. Puedes hacer la fila "sticky" (fija) en la parte superior, inferior o ambas.

También puedes activar movimiento vertical, ajustando la velocidad de desplazamiento del elemento (más rápido o lento) sin afectar elementos cercanos.

El efecto de disparo del movimiento te permite elegir cuándo se activa el efecto de scroll: cuando la parte superior, media o inferior del elemento está visible.

Probemos algunas configuraciones

Ahora que revisamos todas las opciones, vamos a probar algunas combinaciones para mostrar qué es posible usando cada ajuste creativamente.

En este ejemplo, comenzaré con la opción de fila de ancho completo (Fullwidth). Esta opción es una de las más versátiles.

Esta opción extiende el ancho de la fila hasta el borde del navegador, como una Sección de ancho completo. Pero a diferencia de una Sección, las filas Fullwidth pueden tener estructura de columnas y contener cualquier módulo.

En el ejemplo, creé una fila de 4 columnas y añadí una imagen cuadrada a cada columna.

Luego, reduje el ancho del canal (Gutter Width) a 1 para eliminar el espacio entre las columnas.

Finalmente, eliminé el padding superior e inferior estableciendo el valor de Padding Top y Padding Bottom a 0.

El resultado es una transformación completa de la fila, convirtiendo nuestra fila normal de 4 columnas en una galería de imágenes a ancho completo y sin márgenes, que luce espectacular sobre la sección verde debajo.

Este mismo efecto puede lograrse usando colores de fondo personalizados para columnas y módulos de texto. Las posibilidades son infinitas.