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

Baixe o simple-page-assets e salve o arquivo 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"}

No Admin barra lateral, 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 na sua loja, defina Enable Page para No.

• Para Page Title, insira Simple Page.

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

Expandir o Design seção.

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

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

A variável 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 é exibida no canto superior esquerdo da página.

Expandir o Content seção.

Essa ação exibe a variável Page Builder visualizar 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 ambiente Page Builder espaço de trabalho, o painel à esquerda fornece as ferramentas de conteúdo que você pode usar para criar o conteúdo no palco.

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.

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

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

Em Appearance, escolha Sangria total.

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é Advanced ​seção e definir todas Margins and Padding ​configurações para 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 para a Page Builder espaço de trabalho, role até a parte superior da página e clique em Save no canto superior direito.

No Page Builder painel, expandir Media e arraste uma Banner espaço reservado 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, a variável Fazer upload de imagem e Selecionar na Galeria são incluídos botões para que você possa fazer alterações rápidas no banner diretamente do palco.

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

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

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é 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 a wide-banner-background.jpg arquivo.

  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 arquivo, escolha o wide-banner-background-mobile.jpg arquivo.

  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 para a Page Builder espaço de trabalho.

  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 Colagem à direita configuração de aparência.

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 estágio ou escolhendo Configurações na caixa de ferramentas 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"}

Para exibir a caixa de ferramentas Banner, selecione o Configurações ( {width="20"} ) novamente e role até o ícone Content ​seção.

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

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

Continuar no Content ​defina o link e o botão do banner:

• Definir Link para Categorye clique em Select para mostrar a árvore de categorias.

• Escolher What's New como a categoria vinculada.

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

• Definir Show Button para Always.

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

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

  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.

• Definir Show Overlay para Always.

• Para Overlay Color, execute um dos procedimentos a seguir:

  • Clique no quadrado colorido e escolha a amostra branca.
  • Clique em Sem cor caixa de texto 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 para a Page Builder espaço de trabalho.

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

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

No canto superior direito do estágio, clique na guia Fechar tela cheia ( ) ícone.

Clicar nesse ícone retornará para a Content ​para a página com a pré-visualização exibida.

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

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

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

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

Expandir o Content seção.

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

No Page Builder painel em Layout, arraste um Row ​espaço reservado 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 escolher a Configurações ( {width="20"} ) ícone.

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

Em Appearance, aceite o Contido ​configuração padrão.

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 para a Page Builder espaço de trabalho.

No Page Builder painel em Layout, arraste um Column ​espaço reservado 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 ícone circular Grade controle ( ) para mostrar as diretrizes da 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 Configurar Page Builder na seção Page Builder Configurar tópico.

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 Page Builder , expanda a Media e arraste um 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:

• Fazer upload do 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 a small-banner-1.jpg arquivo.

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

  Repita essa ação para adicionar a variável small-banner-2.jpg para a segunda coluna.

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

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

  Repita essa ação para adicionar a variável small-banner-2.jpg para a 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 escolher o Configurações ( {width="20"} ) ícone.

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

Vincular a imagem a uma categoria:

• Rolar para baixo e definir Link para Category.

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

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

Repita a etapa anterior para vincular a imagem na segunda coluna ao Engrenagem categoria.

No canto superior direito do estágio, clique na guia Fechar tela cheia ( ) ícone.

Clicar nesse ícone retornará para a Content ​para a página com a pré-visualização exibida.

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

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

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

Expandir o Content seção.

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

No Page Builder painel em Layout, arraste um Row ​o espaço reservado 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 escolher a Configurações ( {width="20"} ) ícone.

{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"}

No Background, insira #f1f1f1 como o Background Color.

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

Role para baixo até Advanced ​seção e definir todas Margens e preenchimento ​valores para 0.

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

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

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

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

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

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

Arraste a borda direita da primeira coluna para o quarto de 12 (4/12) na grade.

O tamanho da segunda coluna é ajustado para oito de 12 (8/12).

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

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

Role para baixo até Advanced ​seção e definir todas Margens e preenchimento ​valores para 0.

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

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

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

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

No alocador de espaço 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 a review-image.jpg arquivo.

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 Page Builder , expanda a Elements e arraste o Text tipo de conteúdo 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 na guia Inserir imagem ( ) e faça o seguinte:

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

• No Insert/edit image ​clique na caixa de diálogo_ Localizar _(   ) ao lado do ícone​ Source campo.

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

• No 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 Origem.

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

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

• Na barra de ferramentas do editor, clique em Centralizar ( ) 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 escolher o Configurações ( {width="20"} ) ícone.

• 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 escolher a Configurações ( {width="20"} ) ícone.

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

• Definir Vertical Alignment para Center.

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

Role para baixo até Advanced ​seção e definir todas Margins and Padding ​valores para 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 para a Page Builder espaço de trabalho.

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

Selecione o Antonia Racer Tank e clique no botão Inserir link ( ) na barra de ferramentas do editor.

No 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, digite 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 na guia Fechar tela cheia ( ) ícone.

Clicar nesse ícone retornará para a Content ​para a página com a pré-visualização exibida.

No canto superior direito, clique em Save.

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

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 a Mover ( ) ícone.

{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 na guia Fechar tela cheia ( ) ícone.

Clicar nesse ícone retornará para a Content ​para a página com a pré-visualização exibida.

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

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