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

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

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:

{width="500"}

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

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.

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

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

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.

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

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.

Expandir a seção Content.

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

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

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.

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 {width="600" modal="regular"}

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

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.

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

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.

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

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.

No painel Page Builder, expanda Media e arraste um espaço reservado para Banner para o estágio.

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

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

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.

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

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

Em Appearance, escolha Collage Right.

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

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

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

• Para Background Image, clique em Carregar.

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

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

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

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

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.

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

Aplicar formatação ao texto:

• Selecione a primeira linha de texto. Em seguida, na barra de ferramentas do editor, em Formatos, escolha Heading 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.

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

Passe o mouse para exibir a caixa de ferramentas Banner, escolha novamente o í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.

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

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.

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

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.

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

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

No canto superior direito do estágio, clique no ícone 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.

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

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

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

Expandir a seção Content.

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

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.

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

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

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

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.

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

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

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

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

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

No canto superior esquerdo da primeira coluna, clique no controle circular 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.

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

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

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

Insira a imagem de amostra no espaço reservado.

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

Expandir a seção Content.

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

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.

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

  {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 ( ) para centralizar a imagem na coluna.

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

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.

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

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.

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 ( {width="20"} ).

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

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

• No canto superior direito, clique em Fechar.

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 (

  {width="20"}

  ).

• Para Minimum Height, insira 450 como a altura em pixels da imagem na primeira coluna.

• Defina Vertical Alignment como Center.

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

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

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

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.

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

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

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.

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

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

  O texto vinculado agora é realçado no banner.

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

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

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

No canto superior direito, clique em Save.

Se necessário, expanda a seção Content.

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

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

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

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.

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

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.

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

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

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

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