Diseño: columna

En el panel Page Builder bajo Layout, arrastre un(a)Column ​al escenario.

{width="600" modal="regular"}

El grupo de columnas ahora se divide en dos columnas de igual anchura. Cada columna es un contenedor independiente para el contenido y tiene su propio conjunto de opciones de cuadro de herramientas.

{width="600" modal="regular"}

En la esquina superior izquierda del grupo de columnas, haga clic en la herramienta Cuadrícula ( ) y ajuste el tamaño de la cuadrícula según sea necesario.

Colocar el contenido en la cuadrícula ayuda a alinear el contenido de forma coherente y procesa la página correctamente tanto en el escritorio como en los dispositivos móviles. Para obtener más información, consulte la sección Herramientas de contenido avanzadas de la configuración de Page Builder.

{width="600" modal="regular"}

Pase el ratón sobre el borde entre dos columnas.

El borde se resalta y aparece la caja de herramientas de la columna seleccionada.

{width="600" modal="regular"}

Mantenga pulsado el botón del ratón para mostrar la cuadrícula y arrastre el borde a una nueva posición en la cuadrícula.

El ancho de ambas columnas se ajusta para reflejar el cambio. La nueva anchura de cada columna aparece después de la etiqueta, como 4/12 (cuatro de 12) y 8/12 (ocho de 12).

{width="600" modal="regular"}

Pase el ratón sobre la columna que quiera quitar para mostrar el cuadro de herramientas y elija el icono Quitar ( {width="20"} ).

{width="600" modal="regular"}

Si la columna contiene contenido, haga clic en OK para confirmar.

Para acelerar el proceso en el futuro, puede omitir el paso de confirmación seleccionando la casilla de verificación Do not show this again.

El grupo de columnas ahora tiene una sola columna (12/12) y cuadrícula. Dado que la cuadrícula sólo está disponible para columnas, puede utilizar esta técnica para mostrarla.

{width="600" modal="regular"}

Si desea que el grupo de columnas amplíe la columna restante hasta el ancho completo de la fila o etapa:

• Pase el ratón sobre la columna para ver el cuadro de herramientas y elija el icono Configuración ( {width="20"} ).

• Desplácese hacia abajo hasta la sección Advanced ​y establezca los cuatro valores de Padding ​en 0.

  {width="600" modal="regular"}

• En la esquina superior derecha, haga clic en Save para cerrar la página Edit Column.

Haga clic en el icono Cerrar pantalla completa ( {width="20"} ) en la esquina superior derecha del área de trabajo y, a continuación, haga clic en Save en la esquina superior derecha.

Pase el ratón sobre la columna para ver el cuadro de herramientas y elija el icono Configuración ( {width="20"} ).

{width="600" modal="regular"}

Cambie la configuración de Appearance según sea necesario.

• Elija la configuración de alineación que determina la posición de la columna en relación con su contenedor.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Opción	Descripción
  Full Height	La columna amplía la altura completa de su contenedor.
  Top Aligned	La columna se alinea en la parte superior de su contenedor.
  Centered	La columna se centra en el centro de su contenedor.
  Bottom Aligned	La columna se alinea en la parte inferior de su contenedor.

• Si es necesario, escriba Minimum Height para la columna. Por ejemplo, puede establecer la altura mínima para que coincida con la altura de una imagen de fondo.

• Si establece la altura mínima, establezca Vertical Alignment para controlar la posición de los contenedores de contenido que se agregan a la columna (Top, Center o Bottom).

Cambie el fondo del contenido de la columna.

• Background Color: especifique el color 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 columna.

• Background Image: si es necesario, utilice las herramientas proporcionadas para elegir una imagen de fondo que aplicar a la columna:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Herramienta	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 columna.
  Select from Gallery	Le pide que elija una imagen existente de la galería como imagen de fondo para la columna.
  {width="25"}	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: cambie esta configuración para determinar cómo se escala la imagen de fondo en relación con el ancho de la columna:

  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 columna.
  Contain	La imagen de fondo está limitada a la anchura del área de contenido.
  Auto	Aplica el tamaño de fondo predeterminado especificado en la hoja de estilos de la temática actual.

• Background Position: cambie esta configuración para determinar el punto de anclaje de la imagen en relación con la columna. Opciones: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center o Bottom Right

• Background Attachment - Cambie esta configuración 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 se sincroniza para moverse hacia abajo a medida que la página se desplaza.
  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: si desea repetir la imagen de fondo para rellenar el espacio, cambie esta configuración Yes.

Actualice la configuración de Advanced ​según sea necesario.

• Para controlar la posición horizontal de los contenedores de contenido que se agregan a la columna, 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 columnas, con margen para cualquier relleno que se especifique.
  Center	Alinea el contenedor de contenido en el centro del contenedor de columnas, con margen para cualquier relleno que se especifique.
  Right	Alinea el contenedor de contenido a lo largo del borde derecho del contenedor de columnas, con margen para cualquier relleno que se especifique.

• Establezca el estilo Border, que se aplica a los cuatro lados del contenedor de columnas:

  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.

• (Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarlos al contenedor de columnas.

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

  Introduzca cada valor correspondiente en el diagrama de contenedor de columnas.

  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

Una vez finalizado, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.