Page Builder Tutorial, parte 1: página simple

Siga este ejercicio en tres partes para familiarizarse con la Page Builder espacio de trabajo mediante la creación de una página sencilla que ilustra lo fácil que es crear páginas con contenido enriquecido de su propio diseño.

Ejemplo de página simple

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 de introducción incluidos en la Commerce Guía del usuario de 2.3.

Antes de empezar

Antes de comenzar este ejercicio, se recomienda aumentar el Duración de sesión de administrador para evitar que se agote el tiempo de espera de la sesión mientras trabaja.

Compruebe las opciones de configuración de Content Management necesarias:

Descargar los recursos de imagen del tutorial

  1. Descargue la simple-page-assets y guarde el archivo en el sistema local.

  2. Vaya al archivo descargado y extraiga los archivos comprimidos.

    En un sistema Windows, haga clic con el botón derecho y seleccione 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:

    Page Builder archivos de tutorial: recursos de página simples {width="500"}

Siga las tres partes de este tutorial en orden.

Parte 1: Fila de sangrado completo con titular

En esta parte del ejercicio Página simple, se crea una página que tiene una fila y un banner a sangre completa. La fila tiene diferentes imágenes de fondo para escritorio y dispositivos móviles.

Page Builder fila a sangre completa con banner

Paso 1: Crear una página

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

  2. 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 hasta No.

    • Para Page Title, introduzca Simple Page.

    Configuración básica de página {width="600" modal="regular"}

  3. Expandir Selector de expansión el Design sección.

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

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

    El New Theme ​Esta configuración se puede utilizar para anular la temática predeterminada y aplicar una temática diferente a la página.

    note note
    NOTE
    El diseño Anchura completa solo se puede utilizar con un tema.

    Configuración de diseño de página {width="600" modal="regular"}

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

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

Paso 2: Dar formato a la fila

  1. Expandir Selector de expansión el Content sección.

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

    note note
    NOTE
    El Encabezado de contenido es opcional. De forma predeterminada, se le aplica el formato de nivel de encabezado 1 (H1) según la temática. Para este ejercicio, la variable Encabezado de contenido se deja en blanco.

    Vista previa del contenido de la página con fila vacía {width="600" modal="regular"}

  2. Clic Edit with Page Builder o dentro del área de previsualización de contenido.

    En el ampliado Page Builder workspace, el panel de la izquierda proporciona las herramientas de contenido que puede utilizar para crear su contenido en el escenario.

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

    Page Builder cuadro de herramientas fila {width="600" modal="regular"}

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

  5. En Appearance, elija Sangrado completo.

    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.

    Configuración de fila: sangrado completo {width="600" modal="regular"}

  6. Desplácese hacia abajo hasta el Advanced ​y establecer todo Margins and Padding ​configuración para 0.

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

    Configuración de fila: márgenes y relleno {width="600" modal="regular"}

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

Paso 3: Añadir un titular

NOTE
Page Builder tiene un nuevo tipo de contenido llamado Titular, que se muestra en este paso. ¿Qué era antes el Titular en el menú Contenido, ahora es una Bloque dinámico.
  1. En el Page Builder panel, expandir Media y arrastre un Titular marcador de posición al escenario.

    Arrastrar un tipo de contenido de banner al escenario {width="600" modal="regular"}

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

    note note
    NOTE
    El escenario ahora tiene dos contenedores de contenido, cada uno con una caja de herramientas independiente. Como el banner está anidado dentro de la fila, asegúrese de que está trabajando en el cuadro de herramientas correcto.

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

    Cuadro de herramientas Banner {width="600" modal="regular"}

  3. En el cuadro Banner, seleccione la opción Configuración ( Icono de configuración {width="20"} ) icono.

  4. En Appearance, elija Collage Right.

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

    Apariencia del banner - collage a la derecha {width="600" modal="regular"}

  5. Desplácese hacia abajo hasta el Background ​y establezca la imagen de fondo del titular:

    • Para Background Image, haga clic en Cargar.

      Fondo del titular: cargar imagen {width="600" modal="regular"}

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

      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.

      Imagen de fondo cargada en la galería de medios {width="600" modal="regular"}

    • Para Background Mobile Image, haga clic en Cargar.

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

      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.

      Selección del archivo de imagen de banner de muestra para móviles {width="600" modal="regular"}

    • Vuelva a la parte superior de la página y haga clic en Save para guardar la configuración y volver a Page Builder workspace.

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

      Titular con imagen de fondo {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 el Collage derecho configuración de apariencia.

  6. 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. El texto se puede introducir y formatear directamente desde el escenario o eligiendo Configuración en el cuadro de herramientas del titular.

    Edición del contenido del titular desde el escenario {width="600" modal="regular"}

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

      Aplicación del formato Encabezado 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.

    Titular en la fase de contenido con texto con formato {width="600" modal="regular"}

__

  1. Pase el ratón por encima para mostrar el cuadro de herramientas Banner y seleccione Configuración ( Icono de configuración {width="20"} ) y, a continuación, desplácese hasta el Content ​sección.

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

    Configuración del titular: texto del mensaje {width="600" modal="regular"}

  2. Continuación en la Content, establezca el vínculo del titular y el botón:

    • Establecer Vínculo hasta Categoryy haga clic en Select para mostrar el árbol de categorías.

    • Elegir What's New como la categoría vinculada.

      Contenido del titular: vínculo a la categoría {width="600" modal="regular"}

    • Establecer Show Button hasta Always.

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

    • Para Button Type, acepte el Primary predeterminada.

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

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

    • Establecer Show Overlay hasta 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 en Sin color cuadro de texto y escriba White o el valor hexadecimal #ffffff.

      A continuación, haga clic en Apply.

      Configuración del titular: color de superposición de botón {width="600" modal="regular"}

    • Vuelva a la parte superior de la página y haga clic en Save para guardar la configuración y volver a Page Builder workspace.

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

      Titular en la fase de contenido con mensaje de texto y botón {width="600" modal="regular"}

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

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

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

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

Parte 2: Fila contenida con dos columnas iguales

En esta parte del ejercicio, agregue una fila a la página y divida la fila en dos columnas iguales. A continuación, agregue una imagen vinculada a cada columna. En las instrucciones, cada nueva fila se agrega antes de la primera fila para realizar el Page Builder panel alineado con el escenario. Al final del ejercicio, reorganice las filas para que coincidan con el ejemplo Página simple.

Página de ejemplo con fila contenida con dos columnas iguales

Paso 1: Añadir una fila

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

  2. Expandir Selector de expansión el Content sección.

  3. Clic 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 ​coloque el marcador de posición en el escenario y colóquelo encima del titular.

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

    Adición de una nueva fila sobre el titular {width="600" modal="regular"}

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

    Cuadro de herramientas Fila {width="600" modal="regular"}

  6. En Appearance, acepte el Contenido ​configuración predeterminada.

    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.

    Mantenimiento de la configuración de apariencia contenida predeterminada {width="600" modal="regular"}

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

Paso 2: Añadir una columna

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

    Arrastrar un tipo de contenido de columna al escenario {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.

    Fila con dos columnas de igual ancho {width="600" modal="regular"}

  2. En la esquina superior izquierda de la primera columna, haga clic en la circular Cuadrícula control ( Control de cuadrícula ) para mostrar las directrices de 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 sobre cómo configurar el tamaño de la cuadrícula, consulte la Configurar Page Builder de la sección Page Builder Tema de configuración.

    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.

    Visualización de los detalles de tamaño de cuadrícula de la columna {width="600" modal="regular"}

Paso 3: Añadir imágenes con vínculos

En este paso, aprenderá a cargar una imagen en el titular.

  1. En el Page Builder , expanda el Media y arrastre una Image a la primera columna.

    Arrastrando el tipo de contenido de imagen a la primera columna {width="600" modal="regular"}

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

    Marcador de imagen {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 simples extraídos y elija la small-banner-1.jpg archivo.

      Imagen cargada añadida a la primera columna {width="600" modal="regular"}

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

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

      Arrastrar la imagen a la segunda columna {width="600" modal="regular"}

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

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

  4. Pase el ratón sobre la imagen de la primera columna para ver el cuadro de herramientas y seleccione Configuración ( Icono de configuración {width="20"} ) icono.

    Cuadro de herramientas Imagen {width="600" modal="regular"}

  5. Vincule la imagen a una categoría:

    • Desplazarse hacia abajo y establecer Vínculo hasta Category.

    • En el árbol de categorías, aumente el detalle y elija Men's Hoodies & Sweatshirt categoría.

    • En la esquina superior derecha, Save Seleccione la configuración y vuelva a la Page Builder workspace.

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

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

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

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

Parte 3: Fila de ancho completo con columnas desiguales

La última fila de esta página incluye contenido de una revisión de producto. Se agrega una fila de ancho completo y se divide en dos columnas de anchos diferentes. Se agrega una imagen de fondo a la primera columna, con un color de fondo coincidente que se aplica a la fila para obtener un efecto unificado.

Ejemplo de fila de ancho completo con columnas de diferentes anchos

Paso 1: Añadir una fila

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

  2. Expandir Selector de expansión el Content sección.

  3. Clic 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 ​coloque el marcador de posición en el 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.

    Adición de una nueva fila {width="600" modal="regular"}

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

    Cuadro de herramientas Fila {width="600" modal="regular"}

  6. En la página Editar fila, en 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.

    Selección del aspecto de anchura completa {width="600" modal="regular"}

  7. En el Background, introduzca #f1f1f1 como el Background Color.

    Configuración del color de fondo {width="600" modal="regular"}

  8. Desplácese hacia abajo hasta el Advanced ​y establecer todo Márgenes y relleno ​valores para 0.

    Configuración de los márgenes y el relleno {width="600" modal="regular"}

  9. Vuelva a la parte superior de la página y haga clic en Save para guardar la configuración y volver a Page Builder workspace.

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

    Fila con el color de fondo en el escenario {width="600" modal="regular"}

Paso 2: Añadir columnas de diferentes anchos

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

    Arrastrar una columna al escenario {width="600" modal="regular"}

  2. Arrastre el borde derecho de la primera columna a las cuatro de 12 (4/12) en la cuadrícula.

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

    Cambio del tamaño de la primera columna {width="600" modal="regular"}

  3. Pase el ratón sobre el primer contenedor de columnas para mostrar el cuadro de herramientas y seleccione la opción Configuración ( Icono de configuración {width="20"} ) icono.

  4. Desplácese hacia abajo hasta el Advanced ​y establecer todo Márgenes y relleno ​valores para 0.

    Configuración de los márgenes y el relleno {width="600" modal="regular"}

  5. Vuelva a la parte superior de la página y haga clic en Save para guardar la configuración y volver a Page Builder workspace.

Paso 3: Agregar una imagen a la primera columna

  1. En el Page Builder panel, expandir Media y arrastre un Image Tipo de contenido en la primera columna.

    Arrastrar un tipo de contenido de imagen a la primera columna {width="600" modal="regular"}

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

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

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

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

    Imagen cargada añadida a la columna {width="600" modal="regular"}

Paso 4: Añadir el contenido de revisión a la segunda columna

La segunda columna de la fila debe contener contenido de una revisión del cliente, incluida la imagen de clasificación de cinco estrellas y el mensaje de texto con formato.

  1. En el Page Builder , expanda el Elements y arrastre la sección Text Tipo de contenido de la segunda columna.

    Arrastrar el tipo de contenido de texto al escenario {width="600" modal="regular"}

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

  3. En la barra de herramientas, haga clic en Insertar imagen ( Icono Insertar imagen ) y haga lo siguiente:

    Insertar una imagen en el texto {width="600" modal="regular"}

    • En el Insert/edit image, haga clic en_ Buscar _(  Icono Buscar  ) junto al icono de​ Source field.

      Cuadro de diálogo Insertar/editar imagen {width="600" modal="regular"}

    • En el Select Images ​página, 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 Origen.

      Selección de la imagen en la página {width="600" modal="regular"}

    • Para Image Description, introduzca 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 ( Botón Alinear al centro ) para centrar la imagen en la columna.

      Imagen de clasificación centrada {width="600" modal="regular"}

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

    Revisar el texto centrado en la columna {width="600" modal="regular"}

  5. Dar formato al texto:

    • Haga clic en cualquier lugar de la primera línea de texto y en la barra de herramientas del editor debajo de 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.

  6. 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 el cuadro de herramientas y seleccione Configuración ( Icono de configuración {width="20"} ) icono.

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

      Dimensiones de imagen mostradas debajo de la miniatura {width="600" modal="regular"}

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

  7. Centre el contenido verticalmente en la segunda columna:

    • Pase el ratón sobre la segunda columna para mostrar el cuadro de herramientas y elegir la Configuración ( Icono de configuración {width="20"} ) icono.
    note note
    NOTE
    Asegúrese de seleccionar el contenedor de columnas en lugar del contenedor de texto para mostrar el cuadro de herramientas correcto.
    • Para Minimum Height, introduzca 450 como la altura en píxeles de la imagen de la primera columna.

    • Establecer Vertical Alignment hasta Center.

    Configuración de la altura y alineación vertical mínimas {width="600" modal="regular"}

  8. Desplácese hacia abajo hasta el Advanced ​y establecer todo Margins and Padding ​valores a cero ( 0 ).

    Configuración de los márgenes y el relleno {width="600" modal="regular"}

  9. Vuelva 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 a Page Builder workspace.

    Fila con contenido de revisión en el escenario {width="600" modal="regular"}

  1. Seleccione el Antonia Racer Tank y haga clic en el botón Insertar vínculo ( Icono Insertar vínculo ) en la barra de herramientas del editor.

  2. En el Insertar vínculo , especifique el vínculo al producto del catálogo:

    • Introduzca 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 Título, introduzca el nombre del producto.

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

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

    • Cuando termine, haga clic en OK para guardar el vínculo.

      El texto vinculado ahora se resalta en el titular.

      Titular con texto vinculado {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 ​de la página con la vista previa.

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

Paso 6: Reorganizar las filas

Una vez completadas las tres filas, el paso final es reorganizar las filas para que coincidan con el original Página simple ejemplo. Para que coincida con el ejemplo original, la primera fila debe moverse hacia abajo y la última fila debe moverse hacia arriba.

  1. Si es necesario, expanda Selector de expansión el Content sección.

  2. Clic Edit with Page Builder o dentro del área de previsualización de contenido.

  3. Pase el ratón sobre la primera fila del escenario para mostrar el cuadro de herramientas y elegir la Mover ( Icono Mover ) icono.

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

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

    note note
    NOTE
    Si accidentalmente mueve solo parte del contenido, como la imagen, simplemente mueva el contenido hacia atrás a donde pertenece e inténtelo de nuevo.

    Mover una fila al escenario {width="600" modal="regular"}

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

  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 ​de la página con la vista previa.

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

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

Ha completado el ejercicio Página simple. Conserve el trabajo que ha creado para poder consultarlo más adelante.

Cuando esté listo, proceda a Parte 2: Bloques.

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