Page Builder Tutorial, parte 2: bloques

El siguiente ejercicio ilustra la diferencia entre bloques simples y bloques dinámicos, y cómo usar Page Builder para crear cada tipo de bloque.

NOTE
Page Builder tiene un nuevo tipo de contenido llamado Titular, que aparece en el primer ejercicio de tutorial y no está relacionado con la funcionalidad de banner anterior. ¿Qué era anteriormente la opción Banner en? Menú Contenido, es ahora Bloque dinámico.

Bloque dinámico en la tienda

Este ejercicio supone que ha completado Parte 1: Página simple, incluidos los requisitos previos y archivos de ejemplo descargados. Siga las partes de este ejercicio de introducción en orden.

NOTE
Estos ejercicios de introducción se actualizan para reflejar los cambios recientes en la Page Builder workspace en la versión 2.4.1. Si utiliza una versión anterior de Adobe Commerce, utilice el Page Builder ejercicios incluidos en la Commerce Guía del usuario de 2.3.

Parte 1: Crear un bloque simple

En este ejercicio de tutorial, creará un bloque simple con contenido de Google Maps. A veces se llama a bloques simples Bloques de CMS o bloques estáticos, porque el contenido no cambia. Un bloque simple es ideal para contenido que quizá desee reutilizar.

Paso 1: Crear un bloque

  1. En el Administrador barra lateral, vaya a Content > Elements>Blocks.

  2. En la esquina superior derecha, haga clic en Add New Block.

  3. Para Block Title, introduzca Google Map.

  4. Para Identifier, introduzca google-map.

  5. Elija la Store View donde el bloque va a estar disponible.

    Bloquear información {width="600" modal="regular"}

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

Paso 2: Añadir un Google Map

  1. Desplácese hacia abajo hasta el Page Builder previsualización de contenido (actualmente vacío) y haga clic en Edit with Page Builder.

  2. En el Page Builder panel, expandir Media y arrastre un Map marcador de posición al escenario.

    Arrastrar un mapa al escenario {width="600" modal="regular"}

    Aparecerá un mapa con la ubicación de la tienda si Google Maps está configurado para su tienda.

    Mapa de Google configurado para su tienda {width="600" modal="regular"}

    Aparecerá un mapa de marcador de posición si Google Maps aún no está configurado para su tienda.

    Google Maps placeholder {width="600" modal="regular"}

  3. En la esquina superior derecha del escenario, haga clic en Cerrar pantalla completa ( Icono Cerrar pantalla completa ) icono.

    Al hacer clic en este icono, volverá a la Content ​para el bloque con la vista previa mostrada.

  4. En la esquina superior derecha, haga clic Save flecha y elija Save & Close.

Paso 3: Configuración Google Maps

If Google Maps ya está configurado para su tienda, puede omitir este paso y continuar con el siguiente.

  1. Vaya a la Consola de Google Cloud Platform.

  2. Haga clic en el menú desplegable del proyecto y seleccione o cree el proyecto para el que desea agregar una clave de API.

  3. Para configurar las credenciales de la API, siga los instrucciones en el Google Maps documentación.

  4. Copie la clave API en el portapapeles.

  5. Vuelva a la Commerce Administrador y vaya a Stores > Settings>Configuration.

  6. En el panel izquierdo, debajo de General, elija Content Management.

  7. Expandir Selector de expansión Advanced Content Tools.

    Herramientas de contenido avanzadas {width="600" modal="regular"}

    Para obtener más información sobre Content Management Advanced Tools opciones de configuración, consulte las Guía de referencia de configuración.

  8. Para Google Maps API Key, pegue la clave copiada.

  9. Haga clic Test Key.

    Si hay algún problema con la clave, vuelva al Google Maps Sitio de Platform para resolver el problema. A continuación, inténtelo de nuevo.

  10. Tras comprobar la clave, haga clic en Save Config.

Paso 4: Añadir el bloque a una página

  1. En el Administrador barra lateral, vaya a Content > Elements>Pages.

  2. En la cuadrícula, busque Simple Page ​que creó en el primer tutorial y seleccione Edit ​en el​ Action columna.

  3. Expandir Selector de expansión el Content y haga clic en Edit with Page Builder o dentro del área de previsualización de contenido.

  4. En el Page Builder panel debajo de Layout, arrastre un Row ​marcador de posición al principio del escenario.

    Añadir la fila a la parte superior del escenario {width="600" modal="regular"}

  5. En el Page Builder panel, expandir Add Content y arrastre un Block marcador de posición a la nueva fila.

  6. Pase el ratón sobre el contenedor de bloques vacío para mostrar el cuadro de herramientas y elegir la Configuración ( Icono de configuración {width="20"} ) icono.

    Bloquear caja de herramientas {width="600" modal="regular"}

  7. En la página Editar bloque, haga clic en Select Block.

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

  8. En el cuadro de búsqueda, escriba map y pulse la tecla Intro/Retorno para buscar el bloque que ha creado.

    Buscar bloque en la lista {width="600" modal="regular"}

  9. En la cuadrícula, haga clic en Select para elegir el Google Maps Bloque.

  10. En la esquina superior derecha, haga clic en Save para guardar la configuración y volver a Page Builder workspace.

  11. En la esquina superior derecha del escenario, haga clic en Cerrar pantalla completa ( Icono Cerrar pantalla completa ) icono.

    Al hacer clic en este icono, volverá a la Content ​de la página con la vista previa.

  12. En la esquina superior derecha, haga clic Save flecha y elija Save & Close.

¡Felicidades! Ha completado la primera parte del ejercicio Bloquear. Asegúrese de mantener su trabajo como referencia.

Parte 2: Crear un bloque dinámico

Un bloque dinámico incluye una lógica que determina dónde, cuándo y a quién aparece. En este ejercicio de tutorial, se crea un bloque dinámico para una promoción que se activa cuando se cumplen las condiciones de la regla de precios y que solo aparece en un segmento de cliente específico. El resultado de este ejemplo es similar al titular que se creó en el primer ejercicio, pero con lógica que controla cuándo aparece en la tienda.

Ejemplo de promoción de camiseta de Luma

Paso 1: Crear un nuevo bloque dinámico

  1. En el Administrador barra lateral, vaya a Content > Elements>Dynamic Blocks.

    Lista de bloques dinámicos {width="700" modal="regular"}

  2. En la esquina superior derecha, haga clic en Add Dynamic Block.

    Nueva página de bloque dinámico {width="600" modal="regular"}

  3. Complete la configuración básica del nuevo bloque dinámico:

    • Establecer Enable Dynamic Block hasta Yes.

    • Para Dynamic Block Name, introduzca Tee Shirt Promo.

    • Establecer Dynamic Block Type hasta Content Area y haga clic en Done.

      El Tipo de bloque dinámico determina en qué parte de la variable diseño de página que el bloque está colocado. Al configurar un bloque dinámico para su tienda, tenga en cuenta tanto el diseño de página como la variable tema, para que pueda aprovechar bien el espacio disponible. Algunas tiendas tienen un área de contenido activo limitada a una anchura fija, mientras que otras amplían la anchura completa de la pantalla.

      Configuración del tipo de bloque dinámico {width="600" modal="regular"}

    • Para Customer Segment, seleccione la casilla de verificación de cada segmento que desee aplicar al bloque dinámico y haga clic en Listo para guardar la lista de segmentos.

      En el ejemplo siguiente, hay dos segmentos del cliente que identifican a los clientes registrados por sexo. Este bloque dinámico solo aparece para las clientas mujeres registradas que han iniciado sesión en sus cuentas mientras compran en su tienda.

      Selección de los segmentos del cliente {width="600" modal="regular"}

Paso 2: Completar la configuración

Desplácese hacia abajo hasta el Content, que muestra una sección vacía Page Builder y haga clic en Edit with Page Builder. A continuación, complete las siguientes tareas:

Tarea 1: Agregar una imagen de fondo

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

  2. En Appearance, elija Full Bleed.

  3. Para Minimum Height, introduzca 400px.

  4. Desplácese hasta Background ​y configure la sección Background Image ​haciendo clic en Select from Gallery ​y eligiendo el wide-banner-background.png imagen cargada en el primer tutorial.

  5. En la esquina superior derecha, haga clic en Save para aplicar la configuración de y volver a Page Builder workspace.

    Fila con la imagen {width="600" modal="regular"}

Tarea 2: Añadir columnas

En el Page Builder panel debajo de Layout, arrastre un Column ​en la fila.

Arrastrar el tipo de columna a la fila

La fila ahora se divide en dos columnas de igual ancho.

Tarea 3: Añadir texto

  1. En el Page Builder panel, expandir Elements y arrastre un Texto a la segunda columna.

    Arrastrar un cuadro de texto a la segunda columna {width="600" modal="regular"}

  2. Introduzca las tres líneas de texto siguientes en el editor:

    Even more ways to mix and match.

    Buy 3 Luma tees and get a 4th free.

    Shop Tees >

    Introducción de texto para la columna {width="600" modal="regular"}

  3. Seleccione las tres líneas de texto y utilice la barra de herramientas para establecer el Altura de línea hasta 40px.

    Configuración de la altura de línea {width="600" modal="regular"}

  4. Configure las variables Font Size para cada línea, como se indica a continuación:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Línea Tamaño de fuente
    Línea 1: 28px
    Línea 2: 24px
    Línea 3: 18px

    Dado que este bloque podría colocarse en cualquier lugar de la página, utilice el estilo de párrafo predeterminado en lugar de los niveles de encabezado. Además, no se preocupe de que el texto aún no se ajuste correctamente en la columna.

    Texto con formato {width="600" modal="regular"}

Tarea 4: Añadir un vínculo

En el primer ejercicio, aprendió a utilizar la variable Botón tipo de contenido para crear un vínculo. Este ejemplo muestra cómo insertar un vínculo desde la barra de herramientas del editor.

  1. En otra pestaña del explorador, abra la tienda y navegue hasta la página que va a ser el destino de destino del vínculo.

    Puede utilizar la dirección URL completa o una dirección URL relativa que omita la referencia al dominio de almacén.

    URL completa : https://mystore.com/women/tops-women/tees-women.html

    URL relativa: ../women/tops-women/tees-women.html

  2. Vuelva a la Page Builder pestaña y editor de texto de workspace, seleccione Shop Tees > texto en la tercera línea y elija Negrita ( Botón Negrita ) en la barra de herramientas del editor.

  3. Con el Shop Tees > texto en la tercera línea aún seleccionada, elija Insertar/editar vínculo ( Botón Insertar/editar vínculo ) en la barra de herramientas del editor.

    Inserción de un vínculo {width="600" modal="regular"}

  4. Para URL, introduzca el vínculo relativo que ha preparado.

  5. Establecer Target hasta None.

    Esta configuración abre la página en la misma ventana del explorador, en lugar de abrir una nueva pestaña.

  6. Para Title, introduzca Shop Tees.

    Algunos exploradores utilizan el atributo de vínculo Título como información sobre herramientas.

  7. Para guardar el vínculo y volver a Page Builder workspace, haga clic en OK.

    Detalles del vínculo {width="600" modal="regular"}

  8. En la esquina superior derecha del escenario, haga clic en Cerrar pantalla completa ( Icono Cerrar pantalla completa ) icono.

    Al hacer clic en este icono, volverá a la Content ​para el bloque dinámico con la vista previa mostrada.

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

Paso 3: Añadir una regla de precio

  1. Abra el Promoción de camiseta bloque dinámico en modo de edición de nuevo.

  2. Expandir Selector de expansión el Related Promotions y haga clic en Add Cart Price Rules.

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

  3. En el Agregar reglas de precio de carro relacionadas , seleccione la casilla de verificación del Compra 3 camisetas y obtén la cuarta gratis regla de precios y clic Add Selected.

    Adición de una regla de precio de carro relacionada {width="600" modal="regular"}

    La regla de precio aparece en la Promociones relacionadas sección, en Regla de precio del carro relacionado. Puede asociar varias reglas de precios con un bloque dinámico. Sin embargo, este ejemplo sencillo utiliza solo uno.

    Regla de precio del carro seleccionada {width="600" modal="regular"}

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

Paso 4: Añadir el bloque dinámico a una página

  1. En el Administrador barra lateral, vaya a Content > Elements>Pages

  2. Busque el Página simple que creó en la primer ejercicio de introducción y ábralo en modo de edición.

  3. Expandir Selector de expansión el Content y haga clic en Edit with Page Builder.

  4. Pase el ratón sobre la fila superior con la misma imagen que el bloque dinámico para mostrar el cuadro de herramientas y el Eliminar ( Icono Eliminar {width="20"} ) icono.

    Para confirmar la eliminación de la fila de la página, haga clic en OK .

  5. En el Page Builder panel debajo de Layout, arrastre un nuevo Row ​marcador de posición al principio del escenario.

  6. En el Page Builder panel, expandir Add Content y arrastre un Dynamic Block marcador de posición a la nueva fila.

    Arrastrar un bloque dinámico a la fila {width="600" modal="regular"}

  7. Pase el ratón sobre el contenedor de bloques dinámicos para mostrar el cuadro de herramientas y elegir el Configuración ( Icono de configuración {width="20"} ) icono.

    Cuadro de herramientas de bloque dinámico {width="600" modal="regular"}

  8. En el Edit Dynamic Block ​página, haga clic en Select Dynamic Block.

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

  9. Busque el Tee Shirt Promo ​bloque dinámico que ha creado y haga clic en Select.

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

    Información de bloque dinámico {width="600" modal="regular"}

  10. Aceptar el valor predeterminado Template, Dynamic Block Block Template.

  11. Cuando termine, haga clic en Save para guardar la configuración y volver a Page Builder workspace.

    Bloque dinámico en la vista previa de la página {width="600" modal="regular"}

  12. En la esquina superior derecha del escenario, haga clic en Cerrar pantalla completa ( Icono Cerrar pantalla completa ) icono.

    Al hacer clic en este icono, volverá a la Content ​de la página con la vista previa.

  13. En la esquina superior derecha, haga clic Save flecha y elija Save & Close.

Ha completado la segunda parte del ejercicio Bloquear. Asegúrese de mantener su trabajo como referencia.

Parte 3: Actualización del bloque dinámico

En esta parte final del ejercicio, puede editar un bloque dinámico mientras la página está activa en su tienda. A continuación, inicie sesión en la tienda como miembro del segmento de clientes para que aparezca el bloque.

Bloque dinámico de muestra en la tienda

Paso 1: Editar el bloque dinámico

  1. En el Administrador barra lateral, vaya a Content > Elements>Dynamic Blocks.

  2. Encuentre su Tee Shirt Promo ​bloque dinámico en la cuadrícula y ábralo en modo de edición.

  3. Expandir Selector de expansión el Content y haga clic en Edit with Page Builder.

  4. Cambie el ancho de la columna:

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

    • Mantenga pulsado el botón del ratón y arrastre el borde dos divisiones hacia la izquierda.

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

      La primera columna tiene ahora cuatro de las 12 (4/12) divisiones de cuadrícula de ancho, y la segunda columna tiene ocho de las 12 (8/12) divisiones de ancho.

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

  5. Cambiar el color del texto:

    • Seleccione las dos primeras líneas del texto.

    • En la barra de herramientas del editor, elija Text Color y haga clic en White muestra.

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

  6. En la esquina superior derecha del escenario, haga clic en Cerrar pantalla completa ( Icono Cerrar pantalla completa ) icono.

    Al hacer clic en este icono, volverá a la Content ​para el bloque dinámico con la vista previa mostrada.

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

Paso 2: Ver el bloque dinámico

Dado que este bloque dinámico solo es visible para los miembros de un segmento de cliente específico, debe iniciar sesión como cliente que sea miembro del segmento de cliente para ver la promoción. En este ejemplo, el bloque solo aparece para clientes mujeres.

  1. Abra una ventana del explorador en la tienda.

  2. Para ver la página de ejemplo, modifique la dirección URL en la barra de direcciones de la siguiente manera:

    mystore.com/sample-page

    Si el almacén está configurado para incluir el sufijo html, inclúyalo de la siguiente manera:

    mystore.com/sample-page.html

  3. Iniciar sesión como cliente femenina:

    • En la esquina superior derecha de la página principal, haga clic en Sign In.

    • Si los datos de Luma de ejemplo están instalados en el sistema, utilice las siguientes credenciales:

      Email - roni_cost@example.com

      Password - roni_cost3@example.com

    • Haga clic Sign In.

    • Vuelva a la página de muestra para ver el bloque dinámico que creó con la promoción de camiseta.

    Bloque dinámico mostrado para un segmento de cliente {width="700" modal="regular"}

Ha completado el ejercicio Bloquear. Asegúrese de mantener su trabajo como referencia.

Cuando esté listo, proceda a Parte 3: Contenido del catálogo

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