Diseño: columna

Utilice el Columna tipo de contenido para dividir una página en varias columnas en la Page Builder stage. Cuando se agrega una columna a una fila o pestaña o directamente al escenario, el grupo de columnas se divide inicialmente en dos columnas de igual ancho. Puede agregar o quitar columnas según sea necesario. Se puede cambiar el tamaño de una columna arrastrando el borde entre dos columnas. La anchura de la siguiente columna se ajusta para rellenar el espacio disponible dentro de la fila, la pestaña o el escenario. Una sola columna amplía el ancho completo del escenario o su contenedor.

Adición de una columna

NOTE
Si está realizando cambios importantes en Page Builder contenido, se recomienda aumentar el Duración de sesión de administrador para evitar que se agote el tiempo de espera de la sesión mientras trabaja.

Actualizaciones en la versión 2.4.5

Las funciones de Page Builder se actualizan en la versión 2.4.5 para que los usuarios ahora utilicen Columns ​como contenedor principal para columnas individuales. Este nuevo contenedor también admite propiedades para el fondo y elimina la necesidad de ajustar las columnas en una fila. Reduce el marcado innecesario y proporciona un control más preciso sobre la visualización y la experiencia de la tienda.

Puede cambiar el diseño de la Columns contenedor arrastrando una columna por encima o por debajo de otras columnas del grupo y apilándolas. Esto abre una nueva variedad de posibles combinaciones de diseños que se pueden lograr sin necesidad de que los desarrolladores los personalicen.

Vea este vídeo para ver una demostración de cómo Columns El contenedor se puede utilizar para restringir los diseños de página:

Cuadro de herramientas Columna

Cada columna tiene una caja de herramientas de opciones que aparece al pasar el ratón por encima del contenedor.

Herramienta
Icono
Descripción
Mover
Icono Mover {width="25"}
Mueve la columna y su contenido a otra posición en relación con otras columnas.
(etiqueta)
Columna
Identifica el contenedor actual como una columna. Pase el ratón sobre el contenedor de columnas para ver el cuadro de herramientas.
Configuración
Icono de configuración {width="25"}
Abre la página Editar columna, donde puede cambiar las propiedades del contenedor.
Duplicar
Icono Duplicar {width="25"}
Realiza una copia de la columna actual.
Eliminar
Icono Eliminar {width="25"}
Elimina la columna actual y su contenido.

Cuadrícula de columnas

El rejilla garantiza que el contenido se alinee de forma coherente en una columna y ayuda a que la página se represente correctamente tanto en el escritorio como en los dispositivos móviles. Para obtener más información, consulte la Herramientas de contenido avanzadas de la sección Page Builder configuración.

Divisiones de cuadrícula en una fila con una columna

En el siguiente ejemplo de dos columnas, los números entre paréntesis (6/12) en el borde superior de cada contenedor de columnas indican el número de divisiones de cuadrícula en cada columna y el número total de divisiones. En este caso, la columna es la anchura de seis unidades de cuadrícula de un total de 12.

Divisiones de cuadrícula en fila con dos columnas

Añadir una columna

  1. En el Page Builder panel debajo de Layout, arrastre un Column ​al escenario.

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

    Dos columnas iguales {width="600" modal="regular"}

  2. En la esquina superior izquierda del grupo de columnas, haga clic en Cuadrícula herramienta ( Control de 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 Herramientas de contenido avanzadas de la sección Page Builder configuración.

    Divisiones de cuadrícula en dos columnas {width="600" modal="regular"}

Cambiar el tamaño de una columna

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

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

    Borde resaltado entre dos columnas {width="600" modal="regular"}

  2. 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).

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

Eliminación de una columna

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

    Cuadro de herramientas Columna {width="600" modal="regular"}

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

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

    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.

    Columna única con cuadrícula {width="600" modal="regular"}

  3. 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 mostrar el cuadro de herramientas y elegir la Configuración ( Icono de configuración {width="20"} ) icono.

    • Desplácese hacia abajo hasta el Advanced ​y establezca las cuatro Padding ​valores para 0.

      Uso del relleno cero {width="600" modal="regular"}

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

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

Cambiar configuración de columna

  1. Pase el ratón sobre la columna para mostrar el cuadro de herramientas y elegir la Configuración ( Icono de configuración {width="20"} ) icono.

    Cuadro de herramientas Columna {width="600" modal="regular"}

  2. Cambie el Appearance ajustes 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, introduzca el 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 la variable Vertical Alignment para controlar la posición de los contenedores de contenido que se agregan a la columna (Top, Center, o Bottom).

  3. Cambie el fondo del contenido de la columna.

    • Background 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. 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.
      Icono de cámara {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 utilizarla en la visualización en dispositivos móviles.

    • Background Size - Cambie esta configuración para determinar cómo se escala la imagen de fondo en relación con la anchura 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 este ajuste para determinar el punto de ancla 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 este ajuste Yes.

  4. Actualice el Advanced ​ajustes según sea necesario.

    • Para controlar la posición horizontal de los contenedores de contenido que se añaden 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.
    • Configure las variables Border estilo, 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 bordes:

      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 aplicarla al contenedor de columnas.

      Separe los distintos nombres de clase con un espacio.

    • Introduzca valores, en píxeles, para Margins and Padding para especificar los márgenes externos y el relleno interno 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
  5. Cuando termine, haga clic en Save para aplicar la configuración de y volver a Page Builder workspace.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d