DocumentaciónCommercePage Builder

Page Builder Tutorial, parte 2: bloques

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

Creado para:

  • Principiante
  • Intermedio
  • Usuario

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 denominado Banner, el cual aparece en el primer ejercicio de tutorial y no está relacionado con la funcionalidad de banner anterior. Lo que antes era la opción Banner en el menú Contenido, ahora es 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 realizados en el espacio de trabajo Page Builder en la versión 2.4.1. Si usa una versión anterior de Adobe Commerce, use los 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. Los bloques simples a veces se denominan bloques 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 la barra lateral Admin, vaya a Content > Elements>Blocks.

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

  3. Para Block Title, escriba Google Map.

  4. Para Identifier, escriba google-map.

  5. Elija el Store View en el que el bloque va a estar disponible.

    Información de bloqueo {width="600" modal="regular"}

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

Paso 2: Agregar un(a) Google Map

  1. Desplácese hacia abajo hasta la vista previa de contenido Page Builder (actualmente vacía) y haga clic en Edit with Page Builder.

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

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

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

    Google Map configurado para tu tienda {width="600" modal="regular"}

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

    Google Maps marcador de posición {width="600" modal="regular"}

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

    Al hacer clic en este icono, volverá a la sección Content ​del bloque con la vista previa mostrada.

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

Paso 3: Configurar Google Maps

Si 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 las instrucciones de la documentación de Google Maps.

  4. Copie la clave API en el portapapeles.

  5. Vuelva al administrador de Commerce y vaya a Stores > Settings>Configuration.

  6. En el panel izquierdo bajo 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 acerca de las opciones de configuración de Content Management Advanced Tools, consulte la Guía de referencia de configuración.

  8. Para Google Maps API Key, pegue la clave que ha copiado.

  9. Haga clic en Test Key.

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

  10. Una vez verificada su clave, haga clic en Save Config.

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

  1. En la barra lateral Admin, vaya a Content > Elements>Pages.

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

  3. Expanda Selector de expansión en la sección Content y haga clic en Edit with Page Builder o dentro del área de vista previa del contenido.

  4. En el panel Page Builder bajo Layout, arrastre un marcador de posición Row ​a la parte superior del escenario.

    Agregando la fila a la parte superior del escenario {width="600" modal="regular"}

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

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

    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 presione la tecla Intro/Retorno para encontrar el bloque que creó.

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

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

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

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

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

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

¡Felicitaciones! 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 la barra lateral Admin, 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 Dynamic Block {width="600" modal="regular"}

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

    • Establezca Enable Dynamic Block en Yes.

    • Para Dynamic Block Name, escriba Tee Shirt Promo.

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

      El tipo de bloque dinámico determina en qué parte del diseño de página se coloca el bloque. Al configurar un bloque dinámico para tu tienda, ten en cuenta tanto el diseño de la página como el tema, para que puedas 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 de clientes 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 la sección Content, que muestra una vista previa del contenido Page Builder vacío, 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 ver la caja de herramientas y elija el icono Configuración ( Icono de configuración {width="20"} ).

  2. En Appearance, elija Full Bleed.

  3. Para Minimum Height, escriba 400px.

  4. Desplácese a la sección Background ​y establezca Background Image. Para ello, haga clic en Select from Gallery ​y elija la imagen wide-banner-background.png cargada en el primer tutorial.

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

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

Tarea 2: Agregar columnas

En el panel Page Builder bajo Layout, arrastre un marcador de posición Column ​a la fila.

Arrastrando el tipo de columna a la fila

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

Tarea 3: Agregar texto

  1. En el panel Page Builder, expanda Elements y arrastre un marcador de posición Texto a la segunda columna.

    Arrastrando 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 >

    Escribiendo texto para la columna {width="600" modal="regular"}

  3. Seleccione las tres líneas de texto y use la barra de herramientas para establecer el Alto de línea en 40px.

    Estableciendo la altura de línea {width="600" modal="regular"}

  4. Establezca Font Size para cada línea de la siguiente manera:

    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: Agregar un vínculo

En el primer ejercicio, aprendió a usar el tipo de contenido Button 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 ficha y al editor de texto de Page Builder Workspace, seleccione el texto de Shop Tees > en la tercera línea y elija Negrita ( Botón Negrita ) en la barra de herramientas del editor.

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

    Insertando un vínculo {width="600" modal="regular"}

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

  5. Establezca Target en 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, escriba 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 al área de trabajo Page Builder, haga clic en OK.

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

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

    Al hacer clic en este icono, volverá a la sección Content ​del 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 de nuevo el bloque dinámico Tee Shirt Promo en el modo de edición.

  2. Expanda Selector de expansión en la sección Related Promotions y haga clic en Add Cart Price Rules.

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

  3. En la página Agregar reglas de precio del carro de compras relacionadas, selecciona la casilla de verificación de Comprar 3 camisetas y recibe la cuarta regla de precio gratuita y haz clic en Add Selected.

    Agregando una regla de precio del carro de compras relacionada {width="600" modal="regular"}

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

    Regla de precio del carro de compras 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 la barra lateral Admin, vaya a Content > Elements>Pages

  2. Busque la página simple que creó en el primer ejercicio de tutorial y ábrala en modo de edición.

  3. Expanda Selector de expansión en la sección 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 icono Quitar ( Quitar icono {width="20"} ).

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

  5. En el panel Page Builder bajo Layout, arrastre un nuevo marcador de posición Row ​a la parte superior del escenario.

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

    Arrastrando 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 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"}

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

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

  9. Busque el bloque dinámico Tee Shirt Promo ​que creó 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. Una vez finalizado, haga clic en Save para guardar la configuración y volver al área de trabajo Page Builder.

    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 el icono Cerrar pantalla completa ( Icono de cerrar pantalla completa ).

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

  13. En la esquina superior derecha, haga clic en la flecha Save 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 la barra lateral Admin, vaya a Content > Elements>Dynamic Blocks.

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

  3. Expanda Selector de expansión en la sección 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 la muestra White.

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

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

    Al hacer clic en este icono, volverá a la sección Content ​del 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 en 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, continúe con Parte 3: Contenido del catálogo

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