Page Builder Apresentação parte 1: página simples

Siga este exercício de três partes para se familiarizar com o espaço de trabalho do Page Builder criando uma página simples que ilustra a facilidade de criar páginas ricas em conteúdo de seu próprio design.

Exemplo de página simples

NOTE
Esses exercícios de explicação são atualizados para refletir as alterações recentes no espaço de trabalho do Page Builder na versão 2.4.1. Se você estiver usando uma versão anterior do Adobe Commerce, use os exercícios de apresentação do Page Builder incluídos no Commerce Guia do Usuário do 2.3.

Antes de começar

Antes de iniciar este exercício, é recomendável aumentar o Tempo de Vida da Sessão do Administrador para evitar que a sessão atinja o tempo limite enquanto você trabalha.

Verifique as definições de configuração necessárias para o gerenciamento de conteúdo:

Baixar os ativos de imagem de apresentação

  1. Baixe o arquivo simple-page-assets e salve-o em seu sistema local.

  2. Navegue até o arquivo baixado e extraia os arquivos compactados.

    Em um sistema Windows, clique com o botão direito do mouse e escolha Extract All arquivos. Escolha a pasta de destino e clique em Extract.

    Em um sistema Mac, basta clicar duas vezes no arquivo zip e mover os arquivos extraídos para a pasta de destino.

    A pasta contém os seguintes arquivos de imagem:

    Page Builder arquivos de apresentação - ativos de página simples {width="500"}

Siga as três partes desta apresentação em ordem.

Parte 1: Linha de sangria completa com banner

Nesta parte do exercício Página simples, você cria uma página que tem uma linha e um banner totalmente sangrados. A linha tem imagens de plano de fundo diferentes para dispositivos móveis e de desktop.

Page Builder linha de sangria completa com banner

Etapa 1: criar uma página

  1. Na barra lateral Admin, vá para Content > Elements>Pages.

  2. No canto superior direito, clique em Add New Page e faça o seguinte:

    • Para impedir que esta página seja publicada no seu armazenamento, defina Enable Page como No.

    • Para Page Title, digite Simple Page.

    Configurações básicas da página {width="600" modal="regular"}

  3. Expandir Seletor de expansão a seção Design.

    Observe que Layout está definido como Page -- Full Width por padrão. Além das cinco opções padrão de layout, o Page Builder adiciona layouts de largura total para páginas, categorias e produtos.

  4. Se os dados de exemplo estiverem disponíveis, defina New Theme como Magento Luma. Caso contrário, você pode escolher outro tema disponível ou deixá-lo em branco para usar o tema padrão.

    A configuração New Theme ​pode ser usada para substituir o tema padrão e aplicar um tema diferente à página.

    note note
    NOTE
    O layout de Largura Total só pode ser usado com um tema compatível.

    Configurações de design da página {width="600" modal="regular"}

  5. No canto superior direito, clique em Save.

    Quando a página é salva, o nome Página Simples aparece no canto superior esquerdo da página.

Etapa 2: Formatar a linha

  1. Expandir Seletor de expansão a seção Content.

    Esta ação exibe a visualização de Page Builder com uma linha vazia.

    note note
    NOTE
    O campo Cabeçalho de Conteúdo é opcional. Por padrão, é formatado como um cabeçalho de nível 1 (H1) de acordo com o tema. Para este exercício, o Cabeçalho do Conteúdo é deixado em branco.

    Visualização do conteúdo da página com linha vazia {width="600" modal="regular"}

  2. Clique em Edit with Page Builder ou dentro da área de visualização de conteúdo.

    No Page Builder espaço de trabalho expandido, o painel à esquerda fornece as ferramentas de conteúdo que você pode usar para criar o conteúdo no estágio.

  3. Passe o mouse sobre a linha vazia para exibir a caixa de ferramentas.

    Cada contêiner de conteúdo tem uma caixa de ferramentas com um conjunto semelhante de opções.

    Caixa de ferramentas de Page Builder linha {width="600" modal="regular"}

  4. Na caixa de ferramentas Linha, escolha o ícone Configurações ( Ícone Configurações {width="20"}.

  5. Em Appearance, escolha Sangria Completa.

    A configuração de aparência Sangria completa estende as bordas esquerda e direita da área de conteúdo da linha e do plano de fundo até a largura total da página.

    Configurações de linha - sangria completa {width="600" modal="regular"}

  6. Role para baixo até a seção Advanced ​e defina todas as configurações de Margins and Padding ​como 0.

    Essa configuração garante que o banner estenda a largura total da linha.

    Configurações de linha - margens e preenchimento {width="600" modal="regular"}

  7. Para salvar as configurações e retornar ao espaço de trabalho Page Builder, role até a parte superior da página e clique em Save no canto superior direito.

Etapa 3: adicionar um banner

NOTE
Page Builder tem um novo tipo de conteúdo chamado Banner, que é apresentado nesta etapa. A opção Banner no menu Conteúdo agora é um Bloco Dinâmico.
  1. No painel Page Builder, expanda Media e arraste um espaço reservado para Banner para o estágio.

    Arrastando um tipo de conteúdo de banner para o estágio {width="600" modal="regular"}

  2. Passe o mouse sobre o contêiner de banner para exibir a caixa de ferramentas.

    note note
    NOTE
    O estágio agora tem dois contêineres de conteúdo, cada um com uma caixa de ferramentas separada. Como o banner está aninhado dentro da linha, verifique se você está trabalhando na caixa de ferramentas correta.

    Além da caixa de ferramentas, os botões Carregar Imagem e Selecionar na Galeria são incluídos para que você possa fazer alterações rápidas no banner diretamente do palco.

    Caixa de ferramentas do banner {width="600" modal="regular"}

  3. Na caixa de ferramentas Banner, escolha o ícone Configurações ( Ícone Configurações {width="20"} ).

  4. Em Appearance, escolha Collage Right.

    A configuração Collage Right posiciona o conteúdo no lado direito do banner.

    Aparência do banner - colagem à direita {width="600" modal="regular"}

  5. Role para baixo até a seção Background ​e defina a imagem de fundo do banner:

    • Para Background Image, clique em Carregar.

      Plano de fundo do banner - carregar imagem {width="600" modal="regular"}

      Navegue até o diretório onde você salvou os ativos de página simples extraídos e escolha o arquivo wide-banner-background.jpg.

      A imagem é carregada e uma miniatura da imagem carregada é exibida. O nome do arquivo, as dimensões da imagem e o tamanho do arquivo são observados abaixo.

      Imagem de fundo carregada na galeria de mídia {width="600" modal="regular"}

    • Para Background Mobile Image, clique em Carregar.

      No mesmo diretório de arquivos, escolha o arquivo wide-banner-background-mobile.jpg.

      A imagem de fundo móvel é usada para dispositivos móveis e também sempre que uma janela do navegador do desktop é redimensionada para a largura de um dispositivo móvel.

      Selecionando o arquivo de imagem de banner de exemplo para celular {width="600" modal="regular"}

    • Volte para a parte superior da página e clique em Save para salvar as configurações e retornar ao espaço de trabalho Page Builder.

      O plano de fundo aparece no palco e estende a largura total da linha.

      Banner com imagem de plano de fundo {width="600" modal="regular"}

    Observe o texto de espaço reservado que aparece no lado direito da linha. A posição deste texto reflete a configuração de aparência Collage Right.

  6. Clique no texto do espaço reservado e insira a seguinte mensagem como duas linhas:

    Get fit and look fab in new seasonal styles.

    New LUMA yoga collection

    A barra de ferramentas do editor é exibida acima da caixa de texto. O texto pode ser inserido e formatado diretamente do palco ou escolhendo Configurações na caixa de ferramentas do banner.

    Editando o conteúdo do banner do estágio {width="600" modal="regular"}

  7. Aplicar formatação ao texto:

    • Selecione a primeira linha de texto. Em seguida, na barra de ferramentas do editor, em Formatos, escolha Heading 2.

      Aplicando o formato do Título 2 {width="600" modal="regular"}

    • Selecione a segunda linha de texto. Em seguida, na barra de ferramentas do editor, em Formatos, escolha Paragraph.

    As configurações de formato aplicam os estilos da folha de estilos associada ao tema atual.

    Banner no estágio de conteúdo com texto formatado {width="600" modal="regular"}

__

  1. Passe o mouse para exibir a caixa de ferramentas Banner, escolha novamente o ícone Configurações ( Ícone Configurações {width="20"} ) e role até a seção Content.

    Observe que seu texto é exibido na caixa Texto da Mensagem. O texto pode ser inserido e editado no estágio ou na seção Content ​das configurações de banner.

    Configurações de banner - texto da mensagem {width="600" modal="regular"}

  2. Continuando na seção Content, defina o link e o botão do banner:

    • Defina Link como Category e clique em Select para mostrar a árvore de categorias.

    • Escolha What's New como a categoria vinculada.

      Conteúdo do banner - link para a categoria {width="600" modal="regular"}

    • Defina Show Button como Always.

    • Para Button Text, insira Shop Now como o texto que aparece no botão.

    • Para Button Type, aceite o padrão Primary.

      O estilo do botão do tema atual determina o formato do botão.

  3. Defina a sobreposição do banner:

    Você pode usar uma sobreposição para aplicar uma cor de plano de fundo à área de conteúdo ativa definida pela configuração Aparência. A imagem de fundo do banner permanece visível por toda a largura do banner.

    • Defina Show Overlay como Always.

    • Para Overlay Color, siga um destes procedimentos:

      • Clique no quadrado colorido e escolha a amostra branca.
      • Clique na caixa de texto Sem cor e digite White ou o valor hexadecimal #ffffff.

      Em seguida, clique em Apply.

      Configurações do banner - cor de sobreposição do botão {width="600" modal="regular"}

    • Volte para a parte superior da página e clique em Save para salvar as configurações e retornar ao espaço de trabalho Page Builder.

      O botão é exibido abaixo da mensagem do banner no palco.

      Banner no estágio de conteúdo com mensagem de texto e botão {width="600" modal="regular"}

  4. No canto superior direito do estágio, clique no ícone Fechar Tela cheia ( Fechar tela cheia ).

    Clicar nesse ícone retorna à seção Content ​da página com a visualização exibida.

    Você pode alternar entre os dois modos de espaço de trabalho a qualquer momento.

  5. No canto superior direito, clique na seta Save e escolha Save & Close.

  6. Se solicitado, clique no link Gerenciamento de Cache na mensagem na parte superior da página e atualize qualquer cache inválido.

Parte 2: Linha contida com duas colunas iguais

Nesta parte do exercício, você adiciona uma linha à página e divide a linha em duas colunas iguais. Em seguida, você adiciona uma imagem vinculada a cada coluna. Nas instruções, cada nova linha é adicionada antes da primeira linha para fazer com que o painel Page Builder se alinhe ao estágio. No final do exercício, você reorganiza as linhas para que elas correspondam ao exemplo de Página simples.

Exemplo de página usando linha contida com duas colunas iguais

Etapa 1: adicionar uma linha

  1. Na grade Páginas, localize a Página Simples que você criou na primeira parte deste exercício e selecione Edit na coluna Action.

  2. Expandir Seletor de expansão a seção Content.

  3. Clique em Edit with Page Builder ou dentro da área de visualização de conteúdo.

  4. No painel Page Builder, em Layout, arraste um espaço reservado Row ​para o estágio e coloque-o acima do banner.

    A diretriz vermelha marca o limite entre as duas linhas.

    Adicionando uma nova linha acima do banner {width="600" modal="regular"}

  5. Passe o mouse sobre a nova linha para exibir a caixa de ferramentas e escolha o ícone Configurações ( Ícone Configurações {width="20"} ).

    Caixa de ferramentas de linha {width="600" modal="regular"}

  6. Em Appearance, aceite a configuração padrão Concontained.

    Essa configuração limita a área de conteúdo da linha à largura da página, conforme definido pelo tema.

    Mantendo a configuração padrão de aparência Contida {width="600" modal="regular"}

  7. No canto superior direito, clique em Save para salvar as configurações e retornar ao espaço de trabalho Page Builder.

Etapa 2: adicionar uma coluna

  1. No painel Page Builder, em Layout, arraste um espaço reservado Column ​para a nova linha.

    Arrastando um tipo de conteúdo de coluna para o estágio {width="600" modal="regular"}

    A linha agora é dividida em duas colunas de igual largura. Cada coluna é um container separado para o conteúdo com sua própria caixa de ferramentas dedicada de opções.

    Linha com duas colunas de largura igual {width="600" modal="regular"}

  2. No canto superior esquerdo da primeira coluna, clique no controle circular Grade ( Controle de grade ) para mostrar as diretrizes de grade.

    A grade garante que o conteúdo seja alinhado de forma consistente e seja renderizado corretamente em dispositivos móveis e desktop. Para obter informações sobre como configurar o tamanho da grade, consulte a seção Configurar Page Builder no tópico de Instalação Page Builder.

    Os números entre parênteses (6/12) na borda superior de cada contêiner de coluna indicam o número de divisões de grade em cada coluna e o número total de divisões na linha.

    Exibindo detalhes de tamanho de grade da coluna {width="600" modal="regular"}

Nesta etapa, você aprenderá a fazer upload de uma imagem no banner.

  1. No painel Page Builder, expanda a seção Media e arraste um espaço reservado Image para a primeira coluna.

    Arrastando o tipo de conteúdo de imagem para a primeira coluna {width="600" modal="regular"}

  2. Insira a imagem de amostra no espaço reservado.

    Espaço reservado para imagem {width="600" modal="regular"}

    Para uma imagem localizada em seu sistema, você pode escolher um destes métodos:

    • Carregar o arquivo de imagem: na primeira coluna, clique em Upload Image. Em seguida, navegue até o diretório onde você salvou os ativos de página simples extraídos e escolha o arquivo small-banner-1.jpg.

      Imagem carregada adicionada à primeira coluna {width="600" modal="regular"}

      Repita esta ação para adicionar o arquivo small-banner-2.jpg à segunda coluna.

    • Arraste o arquivo de imagem: na área de trabalho, abra a pasta de ativos da página simples e posicione-a ao lado da janela do navegador Admin, onde você está trabalhando com o estágio Page Builder. Em seguida, arraste o arquivo small-banner-1.jpg da pasta de ativos da página simples e solte-o na primeira coluna.

      Arrastando a imagem para a segunda coluna {width="600" modal="regular"}

      Repita esta ação para adicionar o arquivo small-banner-2.jpg à segunda coluna.

  3. Determine qual página do catálogo deseja vincular a cada imagem.

  4. Passe o mouse sobre a imagem na primeira coluna para exibir a caixa de ferramentas e escolha o ícone Configurações ( Ícone Configurações {width="20"} ).

    Caixa de ferramentas Imagem {width="600" modal="regular"}

  5. Vincular a imagem a uma categoria:

    • Role para baixo e defina Link como Category.

    • Na árvore de categorias, faça drill-down e escolha a categoria Men's Hoodies & Sweatshirt.

    • No canto superior direito, Save as configurações e retorne ao espaço de trabalho Page Builder.

  6. Repita a etapa anterior para vincular a imagem na segunda coluna à categoria Gear.

  7. No canto superior direito do estágio, clique no ícone Fechar Tela cheia ( Fechar tela cheia ).

    Clicar nesse ícone retorna à seção Content ​da página com a visualização exibida.

  8. No canto superior direito, clique na seta Save e escolha Save & Close.

  9. Quando solicitado, clique no link Gerenciamento de Cache na mensagem na parte superior da página e atualize qualquer cache inválido.

Parte 3: Linha de largura total com colunas desiguais

A linha final desta página apresenta o conteúdo de uma análise do produto. Você adiciona uma linha de largura completa e a divide em duas colunas de larguras diferentes. Uma imagem de plano de fundo é adicionada à primeira coluna, com uma cor de plano de fundo correspondente aplicada à linha para um efeito unificado.

Exemplo de linha de largura completa com colunas de diferentes larguras

Etapa 1: adicionar uma linha

  1. Na grade Páginas, localize a Página Simples que você criou na primeira parte deste exercício e selecione Edit na coluna Action.

  2. Expandir Seletor de expansão a seção Content.

  3. Clique em Edit with Page Builder ou dentro da área de visualização de conteúdo.

  4. No painel Page Builder, em Layout, arraste um espaço reservado Row ​para o estágio e coloque-o acima da linha criada na segunda parte deste exercício.

    Uma diretriz vermelha marca o limite entre as duas linhas.

    Adicionando uma nova linha {width="600" modal="regular"}

  5. Passe o mouse sobre a nova linha para exibir a caixa de ferramentas e escolha o ícone Configurações ( Ícone Configurações {width="20"} ).

    Caixa de ferramentas de linha {width="600" modal="regular"}

  6. Na página Editar Linha em Appearance, escolha Full Width.

    Essa configuração limita a área de conteúdo à largura máxima da página definida pelo tema. A cor e/ou imagem do plano de fundo não são limitadas e estendem a largura total da linha.

    Selecionando a aparência de Largura Total {width="600" modal="regular"}

  7. Na seção Background, digite #f1f1f1 como Background Color.

    Definindo a cor do plano de fundo {width="600" modal="regular"}

  8. Role para baixo até a seção Advanced ​e defina todos os valores de Margens e Preenchimento ​como 0.

    Definindo as margens e o preenchimento {width="600" modal="regular"}

  9. Volte para a parte superior da página e clique em Save para salvar as configurações e retornar ao espaço de trabalho Page Builder.

    A cor de fundo da linha agora é um bege claro.

    Linha com a cor de plano de fundo no estágio {width="600" modal="regular"}

Etapa 2: adicionar colunas de diferentes larguras

  1. No painel Page Builder, em Layout, arraste um espaço reservado Column ​para a linha superior do palco.

    Arrastando uma coluna para o estágio {width="600" modal="regular"}

  2. Arraste a borda direita da primeira coluna para a posição quatro de 12 (4/12) na grade.

    O tamanho da segunda coluna se ajusta a oito de 12 (8/12).

    Redimensionando a primeira coluna {width="600" modal="regular"}

  3. Passe o mouse sobre o primeiro contêiner de coluna para exibir a caixa de ferramentas e escolher o ícone Configurações ( Ícone Configurações {width="20"} ).

  4. Role para baixo até a seção Advanced ​e defina todos os valores de Margens e Preenchimento ​como 0.

    Definindo as margens e o preenchimento {width="600" modal="regular"}

  5. Volte para a parte superior da página e clique em Save para salvar as configurações e retornar ao espaço de trabalho Page Builder.

Etapa 3: adicionar uma imagem à primeira coluna

  1. No painel Page Builder, expanda Media e arraste um tipo de conteúdo Image para a primeira coluna.

    Arrastando um tipo de conteúdo de imagem para a primeira coluna {width="600" modal="regular"}

  2. No espaço reservado de imagem, clique em Upload Image.

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

  3. Navegue até o diretório onde você salvou os ativos de página simples extraídos e escolha o arquivo review-image.jpg.

    A imagem carregada aparece na primeira coluna e se mescla perfeitamente com a cor do plano de fundo da linha.

    Imagem carregada adicionada à coluna {width="600" modal="regular"}

Etapa 4: adicionar o conteúdo da revisão à segunda coluna

A segunda coluna da linha deve conter conteúdo de uma análise do cliente, incluindo a imagem de classificação de cinco estrelas e a mensagem de texto formatada.

  1. No painel Page Builder, expanda a seção Elements e arraste o tipo de conteúdo Text para a segunda coluna.

    Arrastando o tipo de conteúdo de texto para o estágio {width="600" modal="regular"}

  2. Clique em no elemento de texto para exibir a barra de ferramentas do editor.

  3. Na barra de ferramentas, clique no ícone Inserir imagem ( Inserir ícone de imagem ) e faça o seguinte:

    Inserindo uma imagem no texto {width="600" modal="regular"}

    • Na caixa de diálogo Insert/edit image, clique no ícone_ Localizar _( Localizar ícone ) ao lado do campo​ Source.

      Caixa de diálogo Inserir/editar imagem {width="600" modal="regular"}

    • Na página Select Images, clique em Choose Files.

    • Na pasta onde você salvou os ativos de página simples, escolha rating.png.

    • De volta à página, clique duas vezes no bloco de imagem para selecioná-lo e inserir seu URL no campo do Source.

      Escolhendo a imagem na página {width="600" modal="regular"}

    • Para Image Description, digite 5-Star Rating e clique em OK para inserir a imagem na coluna.

    • Na barra de ferramentas do editor, clique em Alinhar ao Centro ( Botão Alinhar ao centro ) para centralizar a imagem na coluna.

      Imagem de classificação centralizada {width="600" modal="regular"}

  4. Posicione o ponto de inserção logo após a imagem de cinco estrelas, pressione a tecla Enter/Return para iniciar uma nova linha e insira o seguinte 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

    O texto é centralizado à medida que você digita.

    Texto de revisão centralizado na coluna {width="600" modal="regular"}

  5. Formate o texto:

    • Clique em qualquer lugar na primeira linha de texto e, na barra de ferramentas do editor, em Formatos, escolha Heading 2.

    • Selecione o texto restante e, na barra de ferramentas do editor, em Formatos, escolha Paragraph.

    O texto é formatado de acordo com a folha de estilos associada ao tema.

  6. Obtenha as dimensões da imagem para centralizar o conteúdo verticalmente na coluna:

    • Passe o mouse sobre a imagem na primeira coluna para exibir a caixa de ferramentas e escolha o ícone Configurações ( Configurações {width="20"} ).

    • Abaixo da miniatura da imagem, anote as dimensões da imagem.

      Dimensões da imagem exibidas abaixo da miniatura {width="600" modal="regular"}

    • No canto superior direito, clique em Fechar.

  7. Centralizar o conteúdo verticalmente na segunda coluna:

    • Passe o mouse sobre a segunda coluna para exibir a caixa de ferramentas e escolha o ícone Configurações ( Ícone Configurações {width="20"} ).
    note note
    NOTE
    Selecione o contêiner de coluna em vez do contêiner de Texto para exibir a caixa de ferramentas correta.
    • Para Minimum Height, insira 450 como a altura em pixels da imagem na primeira coluna.

    • Defina Vertical Alignment como Center.

    Definindo a altura mínima e o alinhamento vertical {width="600" modal="regular"}

  8. Role para baixo até a seção Advanced ​e defina todos os valores de Margins and Padding ​como zero ( 0 ).

    Definindo as margens e o preenchimento {width="600" modal="regular"}

  9. Volte para a parte superior da página e, no canto superior direito, clique em Save para salvar as configurações e retornar ao espaço de trabalho Page Builder.

    Linha com conteúdo de revisão no estágio {width="600" modal="regular"}

  1. Selecione o texto Antonia Racer Tank e clique no ícone Inserir link ( Inserir link ) na barra de ferramentas do editor.

  2. Na caixa de diálogo Inserir link, especifique o link para o produto de catálogo:

    • Insira o produto URL.

      Você pode inserir um URL relativo ou totalmente qualificado. O link relativo a seguir é inserido para este exemplo:

      ../antonia-racer-tank.html

    • (Opcional) Para Título, insira o nome do produto.

      O atributo Title link é usado por alguns navegadores como uma dica de ferramenta.

      Inserindo um link no texto {width="600" modal="regular"}

    • Quando terminar, clique em OK para salvar o link.

      O texto vinculado agora é realçado no banner.

      Banner com texto vinculado {width="600" modal="regular"}

  3. No canto superior direito do estágio, clique no ícone Fechar Tela cheia ( Fechar tela cheia ).

    Clicar nesse ícone retorna à seção Content ​da página com a visualização exibida.

  4. No canto superior direito, clique em Save.

Etapa 6: reorganizar as linhas

Com todas as três linhas concluídas, a etapa final é reorganizar as linhas para corresponder ao exemplo original de Página Simples. Para corresponder ao exemplo original, a primeira linha deve ser movida para a parte inferior e a última linha deve ser movida para a parte superior.

  1. Se necessário, expanda Seletor de expansão a seção Content.

  2. Clique em Edit with Page Builder ou dentro da área de visualização de conteúdo.

  3. Passe o mouse sobre a primeira linha do palco para exibir a caixa de ferramentas e escolha o ícone Mover ( Ícone Mover ).

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

  4. Mantenha o botão do mouse pressionado enquanto verifica se todo o conteúdo da linha está selecionado e arraste a linha para uma posição abaixo da linha de guia vermelha na parte inferior da página.

    note note
    NOTE
    Se você mover acidentalmente apenas parte do conteúdo (como a imagem), basta mover o conteúdo de volta para onde ele pertence e tentar novamente.

    Movendo uma linha no estágio {width="600" modal="regular"}

  5. Repita esse processo para mover a primeira linha para a segunda posição.

    A ordem das linhas na página agora corresponde ao exemplo de Página simples.

  6. No canto superior direito do estágio, clique no ícone Fechar Tela cheia ( Fechar tela cheia ).

    Clicar nesse ícone retorna à seção Content ​da página com a visualização exibida.

  7. No canto superior direito, clique na seta Save e escolha Save & Close.

  8. Se solicitado, clique no link Gerenciamento de Cache na mensagem na parte superior da página e atualize qualquer cache inválido.

Você concluiu o exercício Página simples. Manter o trabalho criado para que você possa consultá-lo posteriormente.

Quando estiver pronto, prossiga para Parte 2: Blocos.

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