Seleccionar página

Las Filas Pueden Ser Extremadamente Versátiles

Las Filas son los diversos diseños de columnas que pueden ser colocadas dentro de las secciones. Muy similar a los Módulos, las Filas tienen varias configuraciones que pueden ser accesadas haciendo click en el ícono en la esquina superior izquierda de la fila. En este tutorial estaremos viendo sólo algunas de las características y cómo pueden ser usadas para crear algunos diseños interesantes.

La Configuración General

HACER QUE ESTA FILA TENGA ANCHURA COMPLETA (MAKE THIS ROW FULLWIDTH): Habilita esta opción para extender la anchura de esta fila hasta el borde de la ventana del navegador.

USAR ANCHURA PERSONALIZADA (USE CUSTOM WIDTH): Cámbialo a Sí si deseas ajustar la anchura de esta fila a una anchura no estándar.

EL USO PERSONALIZADO DE CANALÓN DE ANCHO (GUTTER WIDTH): Habilite esta opción para definir canalón ancho de esta fila.

RELLENO PERSONALIZADO (CUSTOM PADDING): Ajusta el relleno a valores específicos o déjalo en blanco para usar el relleno por defecto.

CONSERVAR EL RELLENO PERSONALIZADO EN DISPOSITIVOS MÓVILES (KEEP CUSTOM PADDING ON MOBILE): Permitir que el relleno personalizado se conserve en pantallas de dispositivos móviles

IDENTIFICADOR CSS (CSS ID): Introduce un identificador CSS opcional que usar para este módulo. Puede usarse un identificador para crear un estilo CSS personalizado o para crear enlaces a secciones determinadas de tu página.

CLASE CSS (CSS CLASS): Introduce clases CSS opcionales que usar para este módulo. Puede usarse una clase CSS para crear un estilo CSS personalizado. Puedes añadir múltiples clases separadas por un espacio.

DISEÑADOR DE ADMINISTRACIÓN: Aquí puedes agregar un nombre descriptivo para esta sección de manera que puedas reconocerla fácilmente.

Ajustes avanzados de diseño

Imagen de fondo (Background Image) – Si está definida, esta imagen será utilizada como el fondo para esta Sección. Para eliminar la imagen de fondo, simplemente borra el URL del campo de esta configuración.

Las imágenes de fondo de Sección abarcan el ancho del navegador, así que recomendamos que tus imágenes de fondo sean por lo menos de 1080 pixeles de ancho.

Color de Fondo Transparente (Transparent Background Color) – Habilitar esta opción eliminará el color de fondo de esta sección, permitiendo que se muestre el color o imagen de fondo del sitio Web.

Color de Fondo (Background Color) – Si sólo deseas utilizar un color sólido para el fondo de tu sección, utiliza el seleccionador de color para elegir un color de fondo, o escribe el código HEX manualmente.

Video MP4 de Fondo (Background Video MP4) – Todos los videos deben ser cargados tanto en formato .MP4 como en formato .WEBM para asegurar la compatibilidad máxima en todos los navegadores. Carga la versión .MP4 aquí. Los fondos de video están deshabitados para los dispositivos móviles, y se utilizará tu imagen de fondo en vez de tu video. Por esta razón, debes definir tanto una imagen de fondo como un video de fondo para asegurarte de tener los mejores resultados. Importante: Para que los videos en formato MP4 puedan funcionar en todos los navegadores, tu servidor debe tener designados correctamente los tipos MIME. Puedes aprender más acerca de utilizar .htaccess para definir los tipos MIME aquí. Si notas que tus videos no están funcionando en ciertos navegadores, esta pudiera ser la razón.

Video WEBM de Fondo (Background Video WEBM) – Todos los videos deben ser cargados tanto en formato .MP4 como en formato .WEBM para asegurar la compatibilidad máxima en todos los navegadores. Carga la versión .WEBM aquí. Los fondos de video están deshabitados para los dispositivos móviles, y se utilizará tu imagen de fondo en vez de tu video. Por esta razón, debes definir tanto una imagen de fondo como un video de fondo para asegurarte de tener los mejores resultados. Importante: Para que los videos en formato WEBM puedan funcionar en todos los navegadores, tu servidor debe tener designados correctamente los tipos MIME. Puedes aprender más acerca de utilizar .htaccess para definir los tipos MIME aquí. Si notas que tus videos no están funcionando en ciertos navegadores, esta pudiera ser la razón.

Anchura de Video de Fondo (Background Video Width) – Para que los tamaños de tus videos puedan ser manipulados correctamente por el sistema Divi, debes escribir aquí la anchura exacta en pixeles de tu video.

Altura de Video de Fondo (Background Video Height) – Para que los tamaños de tus videos puedan ser manipulados correctamente por el sistema Divi, debes escribir aquí la altura exacta en pixeles de tu video.

Pausar Video (Pause Video) – Permite que otros reproductores pausen el vídeo cuando comiencen a reproducir.

Usar Efecto de Paralelaje (Use Parallax Effect) – Cuando esté habilitado, tu imagen de fondo se quedará fija cuando te desplaces, creando un divertido efecto de paralaje. Habilitar esta opción forzará que todas las columnas en una fila tengan la misma altura.

Igualar las Alturas de las Columnas (Equalize Column Heights) – Esta es una excelente opción, especialmente útil cuando has aplicado colores de fondo a columnas individuales. Habilitar esta opción forzará a todas las columnas en la fila a tener el mismo valor de altura.

Columna Imagen de Fondo (Column Background Image) – Para cada columna en una fila, puedes asignar una imagen de fondo independiente.

Columna Color de Fondo (Column Background Color) – Para cada columna en una fila, puedes asignar un color de fondo independiente.

Columna Relleno (Column Padding) – Para cada columna en una fila, puedes asignar valores de relleno independientes.

Mantener la Columna de Relleno en el Móvil (Keep Custom Padding on Mobile) – ermitir que el relleno personalizado se conserve en pantallas de dispositivos móviles.

 

CSS Personalizado

Antes (Before) – Agrega aquí el código CSS para ser aplicado en el elemento :before en el div de la fila principal.

Elemento principal (Main Element) – Agrega aquí el código CSS para ser aplicado en el div de la fila principal.

Después (After) –  Agrega aquí el código CSS para ser aplicado en el elemento :after en el div de la fila principal.

Vamos a Probar algunas Configuraciones

Ahora que hemos visto varias de las configuraciones, vamos a probar algunas en combinación para mostrarte lo que es posible hacer cuando cada configuración es utilizada creativamente. En este ejemplo, estaremos jugando con la Fila de Anchura Completa como introducción. La opción para hacer «Anchura Completa» es una de las opciones más versátiles en el kit de herramientas. Esta extenderá el ancho de la columna a los bordes de la ventana del navegador, similarmente a una sección de Ancho Completo. Sin embargo, a diferencia de la Sección de Anchura Completa, las Filas de Anchura Completa pueden tener estructuras de columnas y pueden hospedar cualquier tipo de módulo.

En el ejemplo siguiente se creó una Fila de 4 Columnas y se agregó una imagen a cada columna. Después se habilitó la opción de «Hacer Fila de Anchura Completa» para extender la fila a los extremos de la ventana del navegador.

Después se redujo a 1 el «Espacio Entre Columnas» que aparece cuando se elige «Sí» en la configuración de «El Uso Personalizado de Canalón de Ancho» (Gutter Width), para eliminar el espacio entre las columnas en la fila.

Finalmente se eliminó el espacio «Superior» y «Base» de la fila cambiando la opción de «Relleno Personalizado» (Custom Padding) a cero las dos.

El resultado es una transformación completa de la fila, convirtiendo nuestra fila normal de 4 columnas con imágenes en una galería que luce espectacular sobre la sección verde debajo de ella. Este mismo efecto puede ser creado utilizando colores de fondo personalizados en las columnas y módulos de texto ¡Las posibilidades son infinitas!