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.
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:
-
O Editor WYSIWYG está habilitado na configuração Opções WYSIWYG.
-
Page Builder está habilitado na configuração das Ferramentas Avançadas de Conteúdo.
Baixar os ativos de imagem de apresentação
-
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"}
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.
Etapa 1: criar uma página
-
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.
note note NOTE O layout de Largura Total só pode ser usado com um tema compatível. {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.
Etapa 2: Formatar a linha
-
Expandir 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. {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.
Etapa 3: adicionar um banner
-
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.
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.
{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.
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.
Etapa 1: adicionar uma linha
-
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.
Etapa 2: adicionar uma coluna
-
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"}
Etapa 3: Adicionar imagens com links
Nesta etapa, você aprenderá a fazer upload de uma imagem no banner.
-
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.
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.
Etapa 1: adicionar uma linha
-
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"}
Etapa 2: adicionar colunas de diferentes larguras
-
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.
Etapa 3: adicionar uma imagem à primeira coluna
-
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"}
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.
-
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"} ).
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
.
{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"}
Etapa 5: inserir um link de produto de catálogo
-
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.
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.
-
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.
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. {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.
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.