Diseño - Fila
Utilice el tipo de contenido Row para agregar una fila en la Page Builder etapa.
Cuadro de herramientas Fila
El cuadro de herramientas de fila aparece cuando pasa el ratón por encima del contenedor de filas. El cuadro de herramientas incluye opciones para mover, ocultar, duplicar, editar o quitar la fila. La selección de la configuración determina el aspecto, el fondo y el diseño de la fila. Se pueden arrastrar elementos de contenido adicionales a la fila desde el panel Page Builder de la izquierda.






Añadir una fila
-
En el panel Page Builder bajo Layout, arrastre un nuevo(a)Row al escenario, justo debajo de la primera fila.
-
Para dar formato a la fila, pasa el ratón sobre el contenedor de filas para mostrar el cuadro de herramientas y elige el icono Configuración (
Utilice las secciones siguientes para obtener información detallada sobre cómo completar la configuración disponible.
Cambiar configuración de fila
-
Pase el ratón sobre el contenedor de filas para mostrar la caja de herramientas y elija el icono Configuración (
-
Utilice las secciones siguientes para obtener información detallada sobre la actualización de la configuración disponible.
-
Una vez finalizado, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.
Aspecto
Use la configuración Apariencia para determinar cómo se muestra el contenido en la fila.
-
Para determinar cómo aparece el color de fondo o la imagen de fondo en relación con el contenedor y la anchura del área de contenido, elija la alineación:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Opción Descripción Contained El color de fondo o la imagen están limitados al ancho de página máximo definido por la temática. Full Width Limita el contenido al ancho de página máximo definido por la temática. El color de fondo o la imagen no están limitados y amplían el ancho completo de la fila. Full Bleed El contenido, la imagen de fondo o el color no están limitados y amplían el ancho completo de la fila. La opción de sangrado completo solo se puede usar con temas que admitan el diseño. -
Escriba Minimum Height para la fila. Este valor puede ser un número con cualquier unidad CSS válida (como
100px
,50%
,50em
,100vh
) o un cálculo (como100vh - 237px
).Por ejemplo, puede establecer la altura mínima de una fila para ampliar la altura completa de la página, lo que le ofrece opciones atractivas para imágenes y vídeos de fondo de página completa.
-
Elija una configuración de Vertical Alignment para alinear cualquier contenedor de contenido que se agregue a la fila (Superior, Centro o Inferior).
Contexto
Existen muchas opciones para definir la visualización de fondo de una fila. Puede aplicar un color simple o una imagen de fondo, y administrar efectos más sofisticados.
Color de fondo
Especifique el color de fondo eligiendo una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente. Esta configuración determina el color de fondo de la fila. También puede ajustar la opacidad del color.
Puede establecer el valor de una de las tres maneras siguientes:
- Un nombre de color predefinido, como
White
- El valor hexadecimal del color, como
#ffffff
- El valor rgba del color, con un porcentaje de opacidad, como
rgba(255, 255, 255, 0.75)
Si desea elegir un color, haga clic en la muestra a la izquierda del cuadro Sin color.
Si hace clic en el cuadro de color para abrir de nuevo el selector de color, el cuadro situado debajo del control deslizante mostrará los valores actuales de rojo, verde, azul y alfa (rgba). El último número indica el porcentaje de opacidad actual como decimal. Puede utilizar el control deslizante para ajustar la opacidad o introducir el valor decimal deseado.
Background Type
Un tipo de fondo puede ser una imagen o un vídeo. Page Builder toma el valor predeterminado de Image
y muestra varias configuraciones de imagen. Si selecciona Video
, Page Builder intercambia la configuración de la imagen por la configuración del vídeo. Ambos tipos de fondo se describen de la siguiente manera.
Configuración del tipo de imagen
Si establece Background Type en Image
, utilice la siguiente configuración para definir la visualización de la imagen de fondo.
-
Background Image: si es necesario, utilice las herramientas proporcionadas para elegir una imagen de fondo que aplicar a la fila:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Opción Descripción Upload Carga un archivo de imagen desde el equipo local a la galería y, a continuación, lo aplica como imagen de fondo de la fila. Select from Gallery Le pide que elija una imagen existente de la galería como imagen de fondo para la fila. Permite arrastrar la imagen al mosaico de la cámara o navegar a la imagen en el sistema de archivos local. -
Background Mobile Image: si es necesario, utilice las mismas herramientas para elegir una imagen de fondo diferente para usarla en dispositivos móviles.
-
Background Size - Establezca esta opción para determinar cómo se escala la imagen de fondo en relación con el ancho de la fila:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Opción Descripción Cover
La imagen de fondo cubre el ancho completo de la fila. Contain
La imagen de fondo está limitada a la anchura del área de contenido. Auto
Aplica el tamaño de la hoja de estilos actual. -
Background Position - Establezca esta opción para determinar cómo se ancla la imagen de fondo en relación con la fila:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Punto de ancla Posición Top
Izquierda/Centro/Derecha Center
Izquierda/Centro/Derecha Bottom
Izquierda/Centro/Derecha El punto de ancla es como un pin de inserción que adjunta la imagen a la fila en la posición de fondo especificada.
-
Background Attachment: establezca el tipo de datos adjuntos para determinar cómo se mueve la imagen de fondo en relación con la página de desplazamiento:
table 0-row-2 1-row-2 2-row-2 layout-auto Opción Descripción Scroll
La imagen de fondo adjunta se sincroniza para moverse hacia abajo a medida que la página se desplaza. Utilice Fondo paralaje para controlar la velocidad de desplazamiento. Fixed
(No disponible para móviles) La imagen de fondo no se mueve cuando el contenedor se desplaza por la imagen y está fijo en la posición de fondo especificada. -
Background Repeat - Se establece en
Yes
para repetir la imagen de fondo y rellenar el espacio disponible en la fila.
Configuración del tipo de vídeo
Si establece el Tipo de fondo en Video
, use la siguiente configuración para definir la visualización de la imagen de fondo.
-
Video URL: escriba una dirección URL de vídeo válida. Las direcciones URL de vídeo válidas pueden ser vínculos a:
- Vídeos de YouTube:
https://youtu.be/CoDhMRUUjeI
- Vídeos de Vimeo:
https://vimeo.com/190156113
- Archivos de vídeo válidos (
.mp4
se recomienda):https://myvideos.com/spiral.mp4
- Vídeos de YouTube:
-
Overlay Color: seleccione un color para aplicar un matiz transparente al vídeo.
-
Infinite Loop - Se estableció en
No
para que el vídeo se reproduzca una vez y se detenga. Cuando esta opción está establecida enYes
(predeterminada), el vídeo se repite en un bucle infinito. -
Lazy Load - Se establece en
No
para que el vídeo se cargue con la página, incluso cuando no esté visible. Cuando esta opción se establece enYes
(predeterminada), el vídeo se carga desde el origen solo cuando está visible en la pantalla. -
Play Only When Visible - Se establece en
No
para que el vídeo comience a reproducirse inmediatamente después de cargarse, independientemente de si está visible o no. Cuando esta opción se establece enYes
(predeterminada), el vídeo solo se reproducirá cuando esté visible. -
Fallback Image: si es necesario, especifique una imagen para que se muestre en la pantalla antes de que se cargue el vídeo y si, por algún motivo, el vídeo no se carga.
Fondo de paralaje
Utilice estas opciones para controlar la velocidad de una imagen de fondo o un vídeo de desplazamiento en relación con el desplazamiento de la página. El fondo se puede configurar para que se desplace más lentamente para crear una sensación de inmersión.
- Establecer Habilitar fondo de paralaje en
Yes
. - Escriba Velocidad de paralaje como un valor decimal entre
-1.0
y2.0
.
Avanzadas
-
Para controlar la posición horizontal de los contenedores de contenido que se agregan a la fila, elija un Alignment:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Opción Descripción Default
Aplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual. Left
Alinea los contenedores de contenido a lo largo del borde izquierdo del contenedor de filas, con margen para cualquier relleno que se especifique. Center
Alinea el contenedor de contenido en el centro del contenedor de filas, con margen para cualquier relleno que se especifique. Right
Alinea el contenedor de contenido a lo largo del borde derecho del contenedor de filas, con margen para cualquier relleno que se especifique. -
Establezca el estilo Border que se aplica a los cuatro lados del contenedor de filas:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Opción Descripción Default
Aplica el estilo de borde predeterminado especificado por la hoja de estilos asociada. None
No proporciona ninguna indicación visible de los bordes del contenedor. Dotted
El borde del contenedor aparece como una línea de puntos. Dashed
El borde del contenedor aparece como una línea discontinua. Solid
El borde del contenedor aparece como una línea sólida. Double
El borde del contenedor aparece como una línea doble. Groove
El borde del contenedor aparece como una línea ranurada. Ridge
El borde del contenedor aparece como una línea discontinua. Inset
El borde del contenedor aparece como una línea de margen. Outset
El borde del contenedor aparece como una línea de inicio. -
Si establece un estilo de borde distinto de
None
, complete las opciones de visualización de borde:table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Opción Descripción Border Color Especifique el color seleccionando una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente. Border Width Introduzca el número de píxeles de la anchura de la línea del borde. Border Radius Introduzca el número de píxeles para definir el tamaño del radio que se utiliza para redondear cada esquina del borde. La fila del ejemplo siguiente tiene un radio de borde de 15.
-
(Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarlos al contenedor de filas.
Separe los distintos nombres de clase con un espacio.
-
Escriba valores, en píxeles, para que Margins and Padding especifique los márgenes exteriores y el margen interior de la fila.
Introduzca cada valor correspondiente en el diagrama del contenedor de filas.
table 0-row-2 1-row-2 2-row-2 layout-auto Área del contenedor Descripción Margins Cantidad de espacio en blanco que se aplica al borde exterior de todos los lados del contenedor. Opciones: Top
/Right
/Bottom
/Left
Padding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor. Opciones: Top
/Right
/Bottom
/Left