DocumentaciónCommercePage Builder

Diseño: fichas

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Usuario

Use el tipo de contenido Tabs para agregar un conjunto de pestañas en la Page Builder etapa. Al arrastrar el marcador de posición de pestañas desde el panel al escenario, aparece inicialmente una sola pestaña predeterminada. Puede agregar más pestañas para crear un conjunto completo. La anchura del conjunto de pestañas viene determinada por la anchura de su contenedor principal y la configuración de relleno.

Conjunto de fichas

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

Cajas de herramientas

Cuando trabaja con el tipo de contenido Tabs, agrega y edita fichas individuales y el contenedor de fichas que contiene una o más fichas. Cada ficha tiene su propia caja de herramientas que se utiliza para diseñar fichas en el escenario Page Builder.

Cuadro de herramientas de ficha individual

Cuadro de herramientas de fichas

Herramienta
Icono
Descripción
Mover
Icono de mover {width="25"}
Este control situado junto a la etiqueta de la ficha se utiliza para mover la ficha individual a otra posición en el conjunto de fichas.
Configuración
Icono de configuración {width="25"}
Abre la página Editar fichas, donde puede cambiar las propiedades de la ficha individual.
Duplicar
Icono duplicado {width="25"}
Realiza una copia de la pestaña.
Eliminar
Quitar icono {width="25"}
Elimina la pestaña del conjunto de pestañas.

Cuadro de herramientas Contenedor de pestañas

Cuadro de herramientas de contenedor de fichas

Herramienta
Icono
Descripción
Mover
Icono de mover {width="25"}
Mueve el conjunto de fichas a otra posición en la cuadrícula del contenedor principal.
Añadir
Agregar icono {width="25"}
Agrega una pestaña al conjunto de pestañas.
(etiqueta)
Tabs
Identifica el contenedor actual como un conjunto de pestañas. Pase el ratón por encima del borde superior del contenedor para ver el cuadro de herramientas.
Configuración
Icono de configuración {width="25"}
Abre la página Editar ficha, donde puede cambiar las propiedades del contenedor.
Hide
Ocultar icono {width="25"}
Oculta el contenedor de pestañas.
Mostrar
Mostrar icono {width="25"}
Muestra el contenedor de pestañas oculto.
Duplicar
Icono duplicado {width="25"}
Realiza una copia de la ficha actual.
Eliminar
Quitar icono {width="25"}
Elimina el conjunto de pestañas actual del escenario.
NOTE
Los elementos ocultos se almacenan en la base de datos y son invisibles para los clientes. Sin embargo, estos elementos son visibles para los motores de búsqueda y otros bots que rastrean el sitio. También se devuelven como parte del contenido si se solicitan a través de una llamada de API con un atributo de invisibilidad, a menos que los elimine del escenario.

Añadir una pestaña individual

  1. En el panel Page Builder bajo Layout, arrastre el marcador de posición Tabs ​directamente al escenario o a una fila o columna del escenario.

    Arrastrando fichas a una fila {width="600" modal="regular"}

  2. Haga clic en la etiqueta Tab 1 para mostrar el cuadro de herramientas de fichas individuales y elija el icono Configuración ( icono Configuración {width="20"} ).

  3. Escriba Tab Name que desee usar como etiqueta.

    Escribiendo el nombre de ficha {width="600" modal="regular"}

  4. Si es necesario, escriba Minimum Height en la ficha.

    Este valor puede ser un número con cualquier unidad CSS válida (como 100px, 50%, 50em, 100vh) o un cálculo (como 100vh - 237px).

  5. Elija una configuración de Vertical Alignment para alinear cualquier contenedor de contenido que se agregue a la pestaña (Superior, Centro o Inferior).

  6. Si es necesario, configure las demás opciones utilizando las siguientes secciones como guía:

  7. En la esquina superior derecha, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.

Agregar un conjunto de pestañas

Los pasos siguientes comienzan con una pestaña individual y crean un conjunto de tres pestañas dentro de un contenedor de pestañas. Si todavía no tiene una pestaña individual, siga las instrucciones anteriores para agregar una sola pestaña al escenario.

  1. Pase el ratón sobre el contenedor de pestañas para mostrar la caja de herramientas y elija el icono Agregar ( Agregar icono {width="20"} ).

  2. Haga clic en la etiqueta Tab 2 para mostrar el cursor e introduzca su propia etiqueta para la pestaña.

  3. Vuelva a hacer clic en la segunda ficha del escenario y elija el icono Duplicar ( Icono de duplicado {width="20"} ).

  4. Haga clic en la etiqueta YourName Copy para mostrar el cursor e introduzca su propia etiqueta para la tercera pestaña.

Conjunto de fichas coincidente con la caja de herramientas

Mover una pestaña dentro del conjunto

  1. Haga clic en la ficha que desee mover.

  2. Seleccione y arrastre el icono Mover ( Icono Mover {width="20"} ), que aparece justo antes del texto de la etiqueta de la pestaña, a una nueva posición dentro del conjunto de pestañas.

Adición de contenido a una pestaña

Puede cambiar cualquier tipo de contenido en una pestaña, igual que en una fila. Siga estos pasos para agregar un tipo de contenido de texto como ejemplo.

  1. Haga clic en la pestaña donde desee añadir el contenido.

  2. En el panel Page Builder, expanda Elements y arrastre un marcador de posición Texto a la pestaña.

  3. Introduzca o pegue texto en el editor y utilice la barra de herramientas del editor para darle formato según sea necesario.

    Consulte Elementos - Texto para obtener más información acerca de cómo trabajar con el tipo de contenido de texto.

    Se ha agregado contenido de edición de texto en la ficha {width="500" modal="regular"}

  4. En la esquina superior derecha, haga clic en Save.

Cambiar la configuración de ficha individual

  1. Pase el ratón sobre una ficha individual para ver la caja de herramientas y elija el icono Configuración ( icono Configuración {width="20"} ).

  2. Si es necesario, cambie cualquiera de las configuraciones básicas de la pestaña:

    • Tab Name - Escriba texto revisado para la etiqueta de tabulación. También puede modificar la etiqueta directamente en el escenario.

    • Minimum Height: escriba como píxeles si desea anular la altura automática. Por ejemplo, puede establecer la altura mínima para que coincida con la altura de una imagen de fondo para garantizar que la imagen completa sea visible.

    • Vertical Alignment: elija la posición vertical de los contenedores de contenido que se agregan a la pestaña.

  3. Cambie el resto de la configuración según sea necesario mediante las siguientes secciones para obtener más información.

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

Contexto

  • Background Color: 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.

    Sin color (predeterminado) {width="200"}

    Puede introducir un valor de tres formas:

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

    Elegir una muestra de color {width="600" modal="regular"}

    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.

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

    note note
    NOTE
    Page Builder también admite una capa de transparencia, o canal alfa, en imágenes de fondo que se pueden usar para crear fondos con distintos grados de opacidad.

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

    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 ficha.
    Select from Gallery Le pide que elija una imagen existente de la galería como imagen de fondo para la ficha.
    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 usarla en dispositivos móviles.

  • Background Size: elija cómo se escalará la imagen de fondo en relación con la anchura de la pestaña:

    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 pestaña.
    Contain La imagen de fondo está limitada a la anchura del área de tabulación.
    Auto Aplica el tamaño de la hoja de estilos actual.

  • Background Position - Elija cómo se ancla la imagen de fondo en relación con la pestaña: Top Left / Top Center / Top Right / Center Left / Center / Center Right / Bottom Left / Bottom Center / Bottom Right

  • Background Attachment - Elija el tipo de archivo adjunto 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.
    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 pestaña.

Avanzadas

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

  • Establezca el estilo Border que se aplica a los cuatro lados del contenedor de pestañas:

    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:

    Color del borde {width="600" modal="regular"}

    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.

    Fila con un radio de borde de 15 {width="500"}

  • (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 del contenedor de pestañas.

    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

Cambiar configuración del conjunto de pestañas

  1. Pase el ratón sobre el borde superior del contenedor del conjunto de pestañas para mostrar la caja de herramientas y elija el icono Configuración ( icono Configuración {width="20"} ).

  2. Si es necesario, cambie Default Active Tab.

    Elija la pestaña del conjunto que desea que esté activa cuando se cargue la página.

  3. Escriba Minimum Height, en píxeles, si desea anular la altura automática del conjunto de pestañas.

  4. Para colocar las fichas de navegación en la parte superior del conjunto de fichas, elija Tab Navigation Alignment (Left, Center o Right).

    Fichas de navegación alineadas a la derecha {width="500" modal="regular"}

  5. Defina las opciones avanzadas para el conjunto de pestañas:

    • Para controlar la posición del conjunto de pestañas dentro del contenedor principal, 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 el conjunto de pestañas a lo largo del borde izquierdo del contenedor principal, con margen para cualquier relleno que se especifique.
      Center Alinea el conjunto de pestañas en el centro del contenedor principal, con margen para cualquier relleno que se especifique.
      Right Alinea el conjunto de pestañas a lo largo del borde derecho del contenedor principal, con margen para cualquier relleno que se especifique.

    • Establezca el estilo Border aplicado a los cuatro lados del contenedor de pestañas:

      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 pestañas.

      Separe los distintos nombres de clase con un espacio.

    • Escriba valores, en píxeles, para que Margins and Padding determine los márgenes externos y el relleno interno del contenedor de fichas.

      Introduzca los valores correspondientes en el diagrama del contenedor de pestañas.

      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

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

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