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.
{width="700" modal="regular"}
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.
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
-
En la barra lateral Admin, vaya a Content > Elements>Blocks.
-
En la esquina superior derecha, haga clic en Add New Block.
-
Para Block Title, escriba
Google Map
. -
Para Identifier, escriba
google-map
. -
Elija el Store View en el que el bloque va a estar disponible.
{width="600" modal="regular"}
-
En la esquina superior derecha, haga clic en Save.
Paso 2: Agregar un(a) Google Map
-
Desplácese hacia abajo hasta la vista previa de contenido Page Builder (actualmente vacía) y haga clic en Edit with Page Builder.
-
En el panel Page Builder, expanda Media y arrastre un marcador de posición Map al escenario.
{width="600" modal="regular"}
Aparecerá un mapa a la ubicación de su tienda si Google Maps está configurado para ella.
{width="600" modal="regular"}
Aparecerá un mapa de marcador de posición si Google Maps aún no se ha configurado para su tienda.
{width="600" modal="regular"}
-
En la esquina superior derecha del escenario, haga clic en el icono Cerrar pantalla completa ( ).
Al hacer clic en este icono, volverá a la sección Content del bloque con la vista previa mostrada.
-
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.
-
Vaya a la consola de Google Cloud Platform.
-
Haga clic en el menú desplegable del proyecto y seleccione o cree el proyecto para el que desea agregar una clave de API.
-
Para configurar las credenciales de la API, siga las instrucciones de la documentación de Google Maps.
-
Copie la clave API en el portapapeles.
-
Vuelva al administrador de Commerce y vaya a Stores > Settings>Configuration.
-
En el panel izquierdo bajo General, elija Content Management.
-
Expandir Advanced Content Tools.
{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.
-
Para Google Maps API Key, pegue la clave que ha copiado.
-
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.
-
Una vez verificada su clave, haga clic en Save Config.
Paso 4: Añadir el bloque a una página
-
En la barra lateral Admin, vaya a Content > Elements>Pages.
-
En la cuadrícula, busque el Simple Page que creó en el primer tutorial y seleccione Edit en la columna Action.
-
Expanda en la sección Content y haga clic en Edit with Page Builder o dentro del área de vista previa del contenido.
-
En el panel Page Builder bajo Layout, arrastre un marcador de posición Row a la parte superior del escenario.
{width="600" modal="regular"}
-
En el panel Page Builder, expanda Add Content y arrastre un marcador de posición Block a la nueva fila.
-
Pase el ratón sobre el contenedor de bloques vacío para ver la caja de herramientas y elija el icono Configuración ( {width="20"} ).
{width="600" modal="regular"}
-
En la página Editar bloque, haga clic en Select Block.
{width="600" modal="regular"}
-
En el cuadro de búsqueda, escriba
map
y presione la tecla Intro/Retorno para encontrar el bloque que creó.{width="600" modal="regular"}
-
En la cuadrícula, haga clic en Select para elegir el bloque Google Maps.
-
En la esquina superior derecha, haga clic en Save para guardar la configuración y volver al área de trabajo Page Builder.
-
En la esquina superior derecha del escenario, haga clic en el icono Cerrar pantalla completa ( ).
Al hacer clic en este icono, volverá a la sección Content de la página con la vista previa mostrada.
-
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.
{width="600" modal="regular"}
Paso 1: Crear un nuevo bloque dinámico
-
En la barra lateral Admin, vaya a Content > Elements>Dynamic Blocks.
{width="700" modal="regular"}
-
En la esquina superior derecha, haga clic en Add Dynamic Block.
{width="600" modal="regular"}
-
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.
{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.
{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
-
Pase el ratón sobre el contenedor de filas para ver la caja de herramientas y elija el icono Configuración ( {width="20"} ).
-
En Appearance, elija Full Bleed.
-
Para Minimum Height, escriba
400px
. -
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. -
En la esquina superior derecha, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.
{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.
{width="600" modal="regular"}
La fila ahora se divide en dos columnas de igual ancho.
Tarea 3: Agregar texto
-
En el panel Page Builder, expanda Elements y arrastre un marcador de posición Texto a la segunda columna.
{width="600" modal="regular"}
-
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 >
{width="600" modal="regular"}
-
Seleccione las tres líneas de texto y use la barra de herramientas para establecer el Alto de línea en
40px
.{width="600" modal="regular"}
-
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.
{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.
-
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
-
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 ( ) en la barra de herramientas del editor. -
Con el texto
Shop Tees >
todavía seleccionado en la tercera línea, elija Insertar/editar vínculo ( ) en la barra de herramientas del editor.{width="600" modal="regular"}
-
Para URL, escriba el vínculo relativo que ha preparado.
-
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.
-
Para Title, escriba
Shop Tees
.Algunos exploradores utilizan el atributo de vínculo Título como información sobre herramientas.
-
Para guardar el vínculo y volver al área de trabajo Page Builder, haga clic en OK.
{width="600" modal="regular"}
-
En la esquina superior derecha del escenario, haga clic en el icono Cerrar pantalla completa ( ).
Al hacer clic en este icono, volverá a la sección Content del bloque dinámico con la vista previa mostrada.
-
En la esquina superior derecha, haga clic en Save.
Paso 3: Añadir una regla de precio
-
Abra de nuevo el bloque dinámico Tee Shirt Promo en el modo de edición.
-
Expanda en la sección Related Promotions y haga clic en Add Cart Price Rules.
{width="600" modal="regular"}
-
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.
{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.
{width="600" modal="regular"}
-
En la esquina superior derecha, haga clic en Save.
Paso 4: Añadir el bloque dinámico a una página
-
En la barra lateral Admin, vaya a Content > Elements>Pages
-
Busque la página simple que creó en el primer ejercicio de tutorial y ábrala en modo de edición.
-
Expanda en la sección Content y haga clic en Edit with Page Builder.
-
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 ( {width="20"} ).
Para confirmar la eliminación de la fila de la página, haga clic en OK
-
En el panel Page Builder bajo Layout, arrastre un nuevo marcador de posición Row a la parte superior del escenario.
-
En el panel Page Builder, expanda Add Content y arrastre un marcador de posición Dynamic Block a la nueva fila.
{width="600" modal="regular"}
-
Pase el ratón sobre el contenedor de bloques dinámicos para mostrar la caja de herramientas y elija el icono Configuración ( {width="20"} ).
{width="600" modal="regular"}
-
En la página Edit Dynamic Block, haga clic en Select Dynamic Block.
{width="600" modal="regular"}
-
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.
{width="600" modal="regular"}
-
Aceptar el valor predeterminado Template,
Dynamic Block Block Template
. -
Una vez finalizado, haga clic en Save para guardar la configuración y volver al área de trabajo Page Builder.
{width="600" modal="regular"}
-
En la esquina superior derecha del escenario, haga clic en el icono Cerrar pantalla completa ( ).
Al hacer clic en este icono, volverá a la sección Content de la página con la vista previa mostrada.
-
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.
{width="600" modal="regular"}
Paso 1: Editar el bloque dinámico
-
En la barra lateral Admin, vaya a Content > Elements>Dynamic Blocks.
-
Busque el bloque dinámico Tee Shirt Promo en la cuadrícula y ábralo en modo de edición.
-
Expanda en la sección Content y haga clic en Edit with Page Builder.
-
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.
{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.
{width="600" modal="regular"}
-
-
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.
{width="600" modal="regular"}
-
-
En la esquina superior derecha del escenario, haga clic en el icono Cerrar pantalla completa ( ).
Al hacer clic en este icono, volverá a la sección Content del bloque dinámico con la vista previa mostrada.
-
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.
-
Abra una ventana del explorador en la tienda.
-
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
-
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.
{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