DocumentaciónCommercePage Builder

[Solo PaaS]{class="badge informative" title="Se aplica solo a proyectos de Adobe Commerce en la nube (infraestructura PaaS administrada por Adobe) y a proyectos locales."}

Añadir contenido: bloque dinámico

Last update: Thu Sep 04 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Usuario

Utilice el tipo de contenido Bloque dinámico para agregar un bloque dinámico existente al Page Builder escenario.

Bloque dinámico en la tienda {width="700" modal="regular"}

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.

Cuadro de herramientas Bloque dinámico

Herramienta
Icono
Descripción
Mover
Icono de mover {width="25"}
Mueve el contenedor de bloque y su contenido a otra posición del escenario.
Configuración
Icono de configuración {width="25"}
Abre la página Editar bloque, donde puede elegir el bloque y cambiar las propiedades del contenedor.
Hide
Ocultar icono {width="25"}
Oculta el contenedor de bloques actual y su contenido.
Mostrar
Mostrar icono {width="25"}
Muestra el contenedor de bloques oculto y su contenido.
Duplicar
Icono duplicado {width="25"}
Realiza una copia del contenedor de bloques y de su contenido.
Eliminar
Quitar icono {width="25"}
Elimina el contenedor de bloques y su contenido 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 un bloque dinámico existente al escenario

  1. Vaya al área de trabajo Page Builder en la página, bloque, producto o categoría de destino.

  2. En el panel Page Builder, expanda Add Content y arrastre un marcador de posición Dynamic Block al escenario.

    Arrastrando un marcador de posición de bloque dinámico al escenario {width="600" modal="regular"}

  3. Pase el ratón sobre el contenedor de bloques dinámicos vacío para mostrar la caja de herramientas y elija el icono Configuración ( icono Configuración {width="20"} ).

    Cuadro de herramientas de bloques dinámicos {width="600" modal="regular"}

  4. En la página Editar bloque dinámico, haga clic en Select Dynamic Block y use la lista para seleccionar el bloque.

    Seleccionar un bloque dinámico {width="600" modal="regular"}

    En la lista, busque el bloque dinámico que desea insertar y haga clic en Select. A continuación, haga clic en Add Selected.

    Seleccionar un bloque dinámico en la lista {width="600" modal="regular"}

    A continuación, aparece un resumen de la información del bloque dinámico.

    Resumen de bloques dinámicos {width="600" modal="regular"}

  5. Establezca Template en una de las siguientes opciones:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Opción Descripción
    Dynamic Block Block Template Agrega un bloque independiente.
    Dynamic Block Inline Template Inserta el contenido del bloque en el texto.

    Plantilla de bloque dinámico {width="200"}

  6. Complete la Configuración avanzada según sea necesario.

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

Configuración avanzada

  1. Para controlar la posición del bloque dinámico 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 la lista a lo largo del borde izquierdo del contenedor principal, con margen para cualquier relleno que se especifique.
    Center Alinea la lista en el centro del contenedor principal, con margen para cualquier relleno que se especifique.
    Right Alinea el bloque a lo largo del borde derecho del contenedor principal, con margen para cualquier relleno que se especifique.

  2. Establezca el estilo Border que se aplica a los cuatro lados del contenedor de bloques dinámico:

    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.

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

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

    Separe los distintos nombres de clase con un espacio.

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

    Introduzca los valores correspondientes en el diagrama.

    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

Editar configuración del contenedor de bloques dinámicos

  1. Pase el ratón sobre el contenedor de bloques dinámicos para mostrar la caja de herramientas y elija el icono Configuración ( icono Configuración {width="20"} ).

    Cuadro de herramientas de bloques dinámicos {width="500" modal="regular"}

  2. Si es necesario, cambie el bloque dinámico:

    • Haga clic en Select Dynamic Block.

      Seleccionar otro bloque dinámico {width="20"}

    • En la lista de bloques dinámicos activos, haga clic en Select para el bloque que desee agregar.

  3. Actualice los ajustes restantes según sea necesario.

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

Duplicación de un bloque dinámico

  1. Pase el ratón sobre el contenedor de bloques dinámicos para mostrar la caja de herramientas y elija el icono Duplicate ( Icono de duplicado {width="20"} ).

    El duplicado aparece justo debajo del original.

    Duplicado de un bloque dinámico {width="500" modal="regular"}

  2. Para mover el nuevo bloque dinámico a una posición diferente, pasa el ratón sobre su contenedor y, a continuación, elige Mover ( Icono Mover {width="20"} ) en el cuadro de herramientas.

  3. Seleccione y arrastre el bloque dinámico hasta que aparezca la guía roja en la nueva posición.

    Los bordes superior e inferior de cada contenedor aparecen como líneas discontinuas mientras se mueve el bloque dinámico.

Eliminación de un bloque dinámico del escenario

  1. Pase el ratón sobre el contenedor de bloques dinámicos para mostrar la caja de herramientas y elija el icono Quitar ( Quitar icono {width="20"} ).

  2. Cuando se le pida que confirme, haga clic en OK.

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