Page Builder, parte 1: página simple

Descargue el archivo de simple-page-assets y guárdelo en el sistema local.

Vaya al archivo descargado y extraiga los archivos comprimidos.

En un sistema Windows, haga clic con el botón secundario y elija Extract All archivos. A continuación, elija la carpeta de destino y haga clic en Extract.

En un sistema Mac, simplemente puede hacer doble clic en el archivo zip y luego mover los archivos extraídos a la carpeta de destino.

La carpeta contiene los siguientes archivos de imagen:

{width="500"}

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

En la esquina superior derecha, haga clic en Add New Page y haga lo siguiente:

• Para evitar que esta página se publique en su tienda, establezca Enable Page en No.

• Para Page Title, escriba Simple Page.

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

Expanda en la sección Design.

Observe que Layout está establecido en Page -- Full Width de manera predeterminada. Además de las cinco opciones estándar de layout, Page Builder agrega diseños de ancho completo para páginas, categorías y productos.

Si los datos de ejemplo están disponibles, establezca New Theme en Magento Luma. De lo contrario, puede elegir otra temática disponible o dejarla en blanco para utilizar la predeterminada.

La configuración New Theme ​se puede usar para anular el tema predeterminado y aplicar un tema diferente a la página.

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

En la esquina superior derecha, haga clic en Save.

Cuando se guarda la página, aparece el nombre Página simple en la esquina superior izquierda de la página.

Expanda en la sección Content.

Esta acción muestra la vista previa de Page Builder con una fila vacía.

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

Haga clic en Edit with Page Builder o dentro del área de vista previa de contenido.

En el espacio de trabajo Page Builder expandido, el panel de la izquierda proporciona las herramientas de contenido que puede usar para generar contenido en el escenario.

Pase el ratón sobre la fila vacía para mostrar el cuadro de herramientas.

Cada contenedor de contenido tiene una caja de herramientas con un conjunto similar de opciones.

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

En el cuadro de herramientas Fila, elija el icono Configuración ( {width="20"}.

En Appearance, elija Sangrado total.

La configuración de apariencia de sangrado completo extiende los bordes izquierdo y derecho del área de contenido de la fila y el fondo al ancho completo de la página.

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

Desplácese hacia abajo hasta la sección Advanced ​y establezca todos los valores de Margins and Padding ​en 0.

Esta configuración garantiza que el banner amplíe el ancho completo de la fila.

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

Para guardar la configuración y volver al área de trabajo Page Builder, desplácese hasta la parte superior de la página y haga clic en Save en la esquina superior derecha.

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

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

Pase el ratón sobre el contenedor del titular para mostrar el cuadro de herramientas.

Además del cuadro de herramientas, se incluyen los botones Cargar imagen y Seleccionar de la galería para que pueda realizar cambios rápidos en el titular directamente desde el escenario.

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

En el cuadro de herramientas del titular, elija el icono Configuración ( {width="20"} ).

En Appearance, elija Collage Right.

La configuración Collage Right coloca el contenido en el lado derecho del banner.

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

Desplácese hacia abajo hasta la sección Background ​y defina la imagen de fondo del titular:

• Para Background Image, haga clic en Cargar.

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

  Vaya al directorio en el que guardó los recursos de página simples extraídos y elija el archivo wide-banner-background.jpg.

  La imagen se cargará y aparecerá una miniatura de la imagen cargada. A continuación se indica el nombre del archivo, las dimensiones de la imagen y el tamaño del archivo.

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

• Para Background Mobile Image, haga clic en Cargar.

  En el mismo directorio de archivos, elija el archivo wide-banner-background-mobile.jpg.

  La imagen de fondo móvil se utiliza para dispositivos móviles y también siempre que se cambia el tamaño de una ventana del explorador de escritorio a la anchura de un dispositivo móvil.

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

• Desplácese de nuevo a la parte superior de la página y haga clic en Save para guardar la configuración y volver al área de trabajo Page Builder.

  El fondo aparece en el escenario y extiende el ancho completo de la fila.

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

Observe el texto de marcador de posición que aparece en el lado derecho de la fila. La posición de este texto refleja la configuración de apariencia Collage Right.

Haga clic en el texto del marcador de posición e introduzca el siguiente mensaje como dos líneas:

Get fit and look fab in new seasonal styles.

New LUMA yoga collection

La barra de herramientas del editor aparece encima del cuadro de texto. Se puede introducir y dar formato al texto directamente desde el escenario o eligiendo Configuración en la caja de herramientas del titular.

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

Aplicar formato al texto:

• Seleccione la primera línea de texto. A continuación, en la barra de herramientas del editor en Formatos, elija Heading 2.

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

• Seleccione la segunda línea de texto. A continuación, en la barra de herramientas del editor en Formatos, elija Paragraph.

La configuración de formato aplica los estilos de la hoja de estilos asociada al tema actual.

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

Pase el ratón por encima para mostrar el cuadro de herramientas del titular, elija de nuevo el icono Configuración ( {width="20"} ) y luego desplácese hasta la sección Content.

Observe que el texto se muestra en el cuadro Texto del mensaje. Se puede introducir y editar texto desde el escenario o desde la sección Content ​de la configuración del banner.

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

Continuando en la sección Content, establezca el vínculo y el botón del titular:

• Establezca Link en Category y, a continuación, haga clic en Select para mostrar el árbol de categorías.

• Elija What's New como categoría vinculada.

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

• Establezca Show Button en Always.

• Para Button Text, escriba Shop Now como el texto que aparece en el botón.

• Para Button Type, acepte el valor predeterminado Primary.

  El estilo de botón del tema actual determina el formato del botón.

Establezca la superposición del banner:

Puede utilizar una superposición para aplicar un color de fondo al área de contenido activo definida por la configuración Aspecto. La imagen de fondo del titular permanece visible durante todo el ancho del titular.

• Establezca Show Overlay en Always.

• Para Overlay Color, realice una de las siguientes acciones:

  • Haga clic en el cuadrado de color y seleccione la muestra blanca.
  • Haga clic en el cuadro de texto Sin color y escriba White o el valor hexadecimal #ffffff.

  A continuación, haga clic en Apply.

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

• Desplácese de nuevo a la parte superior de la página y haga clic en Save para guardar la configuración y volver al área de trabajo Page Builder.

  El botón aparece debajo del mensaje del titular en el escenario.

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

Puede alternar entre los dos modos de espacio de trabajo en cualquier momento que desee.

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

Si se le solicita, haga clic en el vínculo Administración de caché en el mensaje en la parte superior de la página y actualice cualquier caché no válida.

En la cuadrícula Páginas, busque la Página simple que creó en la primera parte de este ejercicio y seleccione Edit en la columna Action.

Expanda en la sección Content.

Haga clic en Edit with Page Builder o dentro del área de vista previa de contenido.

En el panel Page Builder bajo Layout, arrastre un marcador de posición Row ​al escenario y colóquelo sobre el titular.

La directriz roja marca el límite entre las dos filas.

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

Pase el ratón sobre la nueva fila para ver el cuadro de herramientas y elija el icono Configuración ( {width="20"} ).

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

En Appearance, acepte la configuración predeterminada Contenido.

Esta configuración limita el área de contenido de la fila al ancho de la página según se define en la temática.

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

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

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

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

La fila ahora se divide en dos columnas de igual ancho. Cada columna es un contenedor independiente para el contenido con su propia caja de herramientas de opciones dedicada.

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

En la esquina superior izquierda de la primera columna, haga clic en el control circular Grid ( ) para mostrar las directrices de la cuadrícula.

La cuadrícula garantiza que el contenido se alinee de forma coherente y que se represente correctamente tanto en equipos de escritorio como en dispositivos móviles. Para obtener información acerca de cómo configurar el tamaño de la cuadrícula, vea la sección Configurar Page Builder en el tema Configuración de Page Builder.

Los números entre paréntesis (6/12) en el borde superior de cada contenedor de columnas indican el número de divisiones de cuadrícula en cada columna y el número total de divisiones en la fila.

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

En el panel Page Builder, expanda la sección Media y arrastre un marcador de posición Image a la primera columna.

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

Inserte la imagen de muestra en el marcador de posición.

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

Para una imagen ubicada en el sistema, puede elegir cualquiera de estos métodos:

• Cargar el archivo de imagen: en la primera columna, haga clic en Upload Image. A continuación, vaya al directorio en el que guardó los recursos de página simple extraídos y elija el archivo small-banner-1.jpg.

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

  Repita esta acción para agregar el archivo small-banner-2.jpg a la segunda columna.

• Arrastre el archivo de imagen: en el escritorio, abra la carpeta de recursos de página simple y colóquela junto a la ventana del explorador de administración donde está trabajando con el escenario Page Builder. A continuación, arrastre el archivo small-banner-1.jpg desde la carpeta de recursos de la página simple y suéltelo en la primera columna.

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

  Repita esta acción para agregar el archivo small-banner-2.jpg a la segunda columna.

Determine qué página del catálogo desea vincular a cada imagen.

Pase el ratón sobre la imagen de la primera columna para ver la caja de herramientas y elija el icono Configuración ( {width="20"} ).

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

Vincule la imagen a una categoría:

• Desplácese hacia abajo y establezca Link en Category.

• En el árbol de categorías, explore en profundidad y elija la categoría Men's Hoodies & Sweatshirt.

• En la esquina superior derecha, Save la configuración y vuelva al área de trabajo Page Builder.

Repita el paso anterior para vincular la imagen de la segunda columna a la categoría Engranaje.

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.

Cuando se le solicite, haga clic en el vínculo Administración de caché en el mensaje en la parte superior de la página y actualice cualquier caché no válida.

En la cuadrícula Páginas, busque la Página simple que creó en la primera parte de este ejercicio y seleccione Edit en la columna Action.

Expanda en la sección Content.

Haga clic en Edit with Page Builder o dentro del área de vista previa de contenido.

En el panel Page Builder bajo Layout, arrastre un marcador de posición Row ​al escenario y colóquelo sobre la fila que se creó en la segunda parte de este ejercicio.

Una directriz roja marca el límite entre las dos filas.

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

Pase el ratón sobre la nueva fila para ver el cuadro de herramientas y elija el icono Configuración ( {width="20"} ).

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

En la página Editar fila bajo Appearance, elija Full Width.

Esta configuración limita el área de contenido al ancho de página máximo definido por la temática. El color de fondo o la imagen no están limitados y amplían el ancho completo de la fila.

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

En la sección Background, escriba #f1f1f1 como Background Color.

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

Desplácese hacia abajo hasta la sección Advanced ​y establezca todos los valores de Márgenes y relleno ​en 0.

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

Desplácese de nuevo a la parte superior de la página y haga clic en Save para guardar la configuración y volver al área de trabajo Page Builder.

El color de fondo de la fila ahora es beige pálido.

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

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

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

Arrastre el borde derecho de la primera columna a la posición cuatro de 12 (4/12) de la cuadrícula.

El tamaño de la segunda columna se ajusta a ocho de 12 (8/12).

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

Pase el ratón sobre el primer contenedor de columnas para ver la caja de herramientas y elija el icono Configuración ( {width="20"} ).

Desplácese hacia abajo hasta la sección Advanced ​y establezca todos los valores de Márgenes y relleno ​en 0.

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

Desplácese de nuevo a la parte superior de la página y haga clic en Save para guardar la configuración y volver al área de trabajo Page Builder.

En el panel Page Builder, expanda Media y arrastre un tipo de contenido de Image a la primera columna.

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

En el marcador de posición de la imagen, haga clic en Upload Image.

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

Vaya al directorio en el que guardó los recursos de página simples extraídos y elija el archivo review-image.jpg.

La imagen cargada aparece en la primera columna y se funde perfectamente con el color de fondo de la fila.

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

En el panel Page Builder, expanda la sección Elements y arrastre el tipo de contenido Text a la segunda columna.

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

Haga clic en el elemento de texto para mostrar la barra de herramientas del editor.

En la barra de herramientas, haga clic en el icono Insertar imagen ( ) y haga lo siguiente:

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

• En el cuadro de diálogo Insert/edit image, haga clic en el icono_ Buscar _( ) que se encuentra junto al campo​ Source.

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

• En la página Select Images, haga clic en Choose Files.

• En la carpeta donde guardó los recursos de la página simple, elija rating.png.

• Cuando vuelva a la página, haga doble clic en el mosaico de la imagen para seleccionarlo e insertar su URL en el campo Source.

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

• Para Image Description, escriba 5-Star Rating y haga clic en OK para insertar la imagen en la columna.

• En la barra de herramientas del editor, haga clic en Alinear al centro ( ) para centrar la imagen en la columna.

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

Coloque el punto de inserción justo después de la imagen de cinco estrellas, presione la tecla Intro/Retorno para comenzar una nueva línea e introduzca el siguiente texto:

Awesome Tank!

I'm a long distance runner and it keeps me pretty comfortable, although these companies always act like their shirts are magical and really it's just pretty basic stuff. Still it's a great shirt, and I would recommend it.

Antonia Racer Tank – Reviewed by Allyson

El texto se centra a medida que escribe.

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

Dar formato al texto:

• Haga clic en cualquier lugar de la primera línea de texto y, en la barra de herramientas del editor, en Formatos, elija Heading 2.

• Seleccione el texto restante y, en la barra de herramientas del editor, en Formatos, elija Paragraph.

El texto recibe el formato de acuerdo con la hoja de estilos asociada al tema.

Obtenga las dimensiones de la imagen para que pueda centrar el contenido verticalmente en la columna:

• Pase el ratón sobre la imagen de la primera columna para ver la caja de herramientas y elija el icono Configuración ( {width="20"} ).

• Debajo de la miniatura de la imagen, tome nota de las dimensiones de la imagen.

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

• En la esquina superior derecha, haga clic en Cerrar.

Centre el contenido verticalmente en la segunda columna:

• Pase el ratón sobre la segunda columna para ver el cuadro de herramientas y elija el icono Configuración ( {width="20"} ).

• Para Minimum Height, escriba 450 como el alto en píxeles de la imagen de la primera columna.

• Establezca Vertical Alignment en Center.

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

Desplácese hacia abajo hasta la sección Advanced ​y establezca todos los valores de Margins and Padding ​en cero ( 0 ).

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

Desplácese de nuevo a la parte superior de la página y, en la esquina superior derecha, haga clic en Save para guardar la configuración y volver al área de trabajo Page Builder.

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

Seleccione el texto Antonia Racer Tank y haga clic en el icono Insertar vínculo ( ) de la barra de herramientas del editor.

En el cuadro de diálogo Insertar vínculo, especifique el vínculo al producto del catálogo:

• Escriba el producto URL.

  Puede introducir una dirección URL relativa o completa. Para este ejemplo, se introduce el siguiente vínculo relativo:

  ../antonia-racer-tank.html

• (Opcional) Para Title, escriba el nombre del producto.

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

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

• Una vez finalizado, haga clic en OK para guardar el vínculo.

  El texto vinculado ahora se resalta en el titular.

  {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 Save.

Si es necesario, expanda en la sección Content.

Haga clic en Edit with Page Builder o dentro del área de vista previa de contenido.

Pase el ratón sobre la primera fila del escenario para ver el cuadro de herramientas y elija el icono Mover ( ).

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

Mantenga pulsado el botón del ratón mientras verifica que todo el contenido de la fila está seleccionado y arrastre la fila a su posición debajo de la guía roja en la parte inferior de la página.

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

Repita este proceso para mover la primera fila a la segunda posición.

El orden de las filas de la página ahora coincide con el ejemplo de página simple.

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.

Si se le solicita, haga clic en el vínculo Administración de caché en el mensaje en la parte superior de la página y actualice cualquier caché no válida.