+41 78 955 3005

Documentación de Divi en Español

Siga las instrucciones a continuación para instalar y configurar su nuevo tema

Filas y opciones de filas de Divi

Siguenos en Facebook

Las filas pueden ser extremadamente versátiles

Las filas pueden ser muy versátiles, ya que son los distintos diseños de columnas para colocar dentro de las secciones. Al igual que los módulos, las filas tienen varios ajustes a los cuales se puede acceder con un clic en el icono del extremo superior izquierdo. Aquí podrá ver solo algunas de las tantas características incluidas y cómo se pueden usar para crear diseños únicos. Los ajustes de las filas en particular se pueden emplear para crear una inmensa variedad de diseños con el constructor de Divi, ya que son estos ajustes los que definen la estructura en la cual se albergan los módulos.

Filas y opciones de Filas

Ajustes generales

  • 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).
  • Relleno personalizado – Si desea ajustar el relleno (superior, inferior, izquierdo y derecho) de la fila, puede hacerlo con esta opción.
  • Mantener relleno personalizado en dispositivos móviles – Si desea conservar los valores del relleno personalizado en los dispositivos móviles, puede hacerlo con esta opción.
  • Desactivar en – Seleccione el dispositivo en el cual desea desactivar este módulo.
  • Rótulo de administración –El rótulo de administración le permite cambiar la etiqueta para identificar el módulo más fácilmente.

Ajustes de diseño avanzado

  • Margen personalizado – Si desea ajustar el margen (superior, inferior, izquierdo y derecho) de la fila, puede hacerlo con esta opción.
  • Imagen de fondo – Se pueden aplicar imágenes de fondo a una fila.
  • Color de fondo – De manera predeterminada, las filas tienen un color de fondo transparente. Aquí puede elegir un color sólido para el fondo.
  • Vídeo MP4 de fondo – Se pueden aplicar vídeos de fondo a las filas. Si desea aplicar un vídeo de fondo, debe subir el archivo en formato MP4 aquí.
  • Vídeo WEBM de fondo – Se pueden aplicar vídeos de fondo a las filas. Si desea aplicar un vídeo de fondo, debe subir el archivo en formato WEBM aquí.
  • Ancho del vídeo de fondo – Luego de subir el archivo, debe introducir aquí el ancho del vídeo. Debe ser igual al ancho real del vídeo, de lo contrario la posición del fondo no será correcta.
  • Alto del vídeo de fondo – Luego de subir el archivo, debe introducir aquí la altura del vídeo. Debe ser igual a la altura real del vídeo, de lo contrario la posición del fondo no será correcta.
  • Pausar vídeo – Si desea que los vídeos puedan ser pausados con un clic, active esta opción.
  • Usar efecto Parallax – Si desea usar un efecto Parallax para la imagen de fondo, puede activarlo aquí y luego elegir el método (CSS o True Parallax).
  • Igualar alturas de columna – Esta es una opción genial, en especial cuando se han 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.
  • Columna Imagen de fondo (Imagen de fondo de columna) – Para cada columna en una fila, puede asignar una imagen de fondo única.
  • Columna efecto Parallax (Efecto Parallax de columna) – Si desea usar un efecto Parallax en la columna, puede activarlo aquí y luego elegir el método (CSS o True Parallax).
  • Columna Color de fondo (Color de fondo de columna) – Para cada columna en una fila, puede asignar un color de fondo único.
  • Columna Relleno (Relleno de columna) – Para cada columna en una fila, puede asignar valores únicos de relleno.
  • Mantener relleno personalizado en dispositivos móviles – Si desea conservar los valores del relleno personalizado de la columna en los dispositivos móviles, puede hacerlo con esta opción.

CSS personalizado

  • ID CSS – Puede asignar una ID CSS a la fila si desea referirla desde la hoja de estilos o usarla como anclaje de enlace.
  • Clase CSS – Puede asignar una clase CSS a la fila si desea referirla desde la hoja de estilo.
  • Columna ID CSS – Puede asignar una ID CSS a la columna si desea referirla desde la hoja de estilos o usarla como anclaje de enlace.
  • Columna Clase CSS – Puede asignar una clase CSS a la columna si desea referirla desde la hoja de estilo.
  • 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.
  • Columna Antes – Introduzca aquí el código CSS para aplicar antes (::before) del div de la columna correspondiente (aparecerán tantos campos Antes como columnas se hayan insertado en la fila).
  • Columna Elemento principal – 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).
  • Columna Después – Introduzca aquí el código CSS para aplicar después (::after) del div de la columna correspondiente (aparecerán tantos campos Después como columnas se hayan insertado en la fila).

Prueba de algunos Ajustes

Ahora que se han repasado todos los ajustes, se probarán algunas combinaciones para mostrar las diferentes posibilidades que se ofrecen. En este ejemplo, se tocará 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 se ha creado una fila con cuatro columnas y añadido una imagen rectangular a cada columna. Luego se ha activado la opción Hacer esta fila de ancho completo para ampliar la fila hasta los bordes de la ventana del navegador.

A continuación, se ha reducido el Ancho de separación a 1 para eliminar el espacio entre las columnas de la fila.

El resultado es una transformación completa de una fila normal de cuatro columnas a una galería de imágenes que luce espectacular en contraste con la sección color verde de abajo. También se puede crear este mismo efecto al usar colores de fondo personalizados para las columnas y para los módulos de texto. ¡Las posibilidades son infinitas!

Únete a 401.632 clientes felices y obtén acceso a la colección completa de Elegant Themes de 87 bellos temas por el precio de uno

Elegant Themes ofrece una garantía de devolución de dinero de 30 días, por lo que unirse es libre de riesgo!

 

Tema hijo Divi y Plugins para mejorar el Diseño tu Pagina Divi

Suscríbete a nuestra Newsletter

Para recibir Actualizaciones, Promociones y Tutoriales

Felicitaciones! Te has suscrito a nuestra Newsletter correctamente.

Pin It on Pinterest

Share This