DocumentaçãoCommercePage Builder

Page Builder Apresentação parte 2: blocos

Last update: Thu Oct 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • Iniciante
  • Intermediário
  • Usuário

O exercício a seguir ilustra a diferença entre blocos simples e blocos dinâmicos e como usar Page Builder para criar cada tipo de bloco.

NOTE
Page Builder tem um novo tipo de conteúdo chamado Banner, que é apresentado no primeiro exercício de explicação passo a passo e não está relacionado à funcionalidade de banner anterior. A opção anterior Banner no menu Conteúdo, agora é Bloco Dinâmico.

Bloco dinâmico na vitrine {width="700" modal="regular"}

Este exercício supõe que você tenha concluído a Parte 1: Página Simples, incluindo os pré-requisitos e arquivos de amostra baixados. Siga as partes deste exercício de explicação em ordem.

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.

Parte 1: Criar um bloco simples

Neste exercício de apresentação, você cria um bloco simples com conteúdo de Google Maps. Blocos simples às vezes são chamados de blocos CMS ou blocos estáticos, pois o conteúdo não é alterado. Um bloco simples é ideal para conteúdo que você possa querer reutilizar.

Etapa 1: criar um bloco

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

  2. No canto superior direito, clique em Add New Block.

  3. Para Block Title, digite Google Map.

  4. Para Identifier, digite google-map.

  5. Escolha o Store View onde o bloco deve estar disponível.

    Informações de Bloqueio {width="600" modal="regular"}

  6. No canto superior direito, clique em Save.

Etapa 2: Adicionar um Google Map

  1. Role para baixo até a visualização de conteúdo Page Builder (atualmente vazia) e clique em Edit with Page Builder.

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

    Arrastando um mapa para o estágio {width="600" modal="regular"}

    Será exibido um mapa para o local da loja se Google Maps estiver configurado para a loja.

    Mapa do Google configurado para seu armazenamento {width="600" modal="regular"}

    Um mapa de espaço reservado será exibido se Google Maps ainda não estiver configurado para seu armazenamento.

    Google Maps espaço reservado {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 ​do bloco com a visualização exibida.

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

Etapa 3: configurar Google Maps

Se Google Maps já estiver configurado para o seu armazenamento, você poderá ignorar esta etapa e prosseguir para a próxima.

  1. Vá para o Console da Google Cloud Platform.

  2. Clique na lista suspensa do projeto e selecione ou crie o projeto ao qual deseja adicionar uma chave de API.

  3. Para configurar suas credenciais de API, siga as instruções na documentação Google Maps.

  4. Copie sua chave de API na área de transferência.

  5. Retorne ao Administrador Commerce e vá para Stores > Settings>Configuration.

  6. No painel esquerdo, em General, escolha Content Management.

  7. Expandir Seletor de expansão Advanced Content Tools.

    Ferramentas avançadas de conteúdo {width="600" modal="regular"}

    Para obter mais informações sobre as opções de configuração do Content Management Advanced Tools, consulte o Guia de Referência de Configuração.

  8. Para Google Maps API Key, cole a chave que você copiou.

  9. Clique em Test Key.

    Se houver um problema com sua chave, retorne ao site da Plataforma Google Maps para resolver o problema. Em seguida, tente novamente.

  10. Após verificar sua chave, clique em Save Config.

Etapa 4: adicionar o bloco a uma página

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

  2. Na grade, localize o Simple Page ​que você criou no primeiro tutorial e selecione Edit ​na coluna​ Action.

  3. Expanda Seletor de expansão a seção Content e 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 a parte superior do estágio.

    Adicionando a linha à parte superior do estágio {width="600" modal="regular"}

  5. No painel Page Builder, expanda Add Content e arraste um espaço reservado Block para a nova linha.

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

    Bloquear caixa de ferramentas {width="600" modal="regular"}

  7. Na página Editar Bloco, clique em Select Block.

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

  8. Na caixa de pesquisa, digite map e pressione a tecla Enter/Return para localizar o bloco criado.

    Localizar Bloqueio na Lista {width="600" modal="regular"}

  9. Na grade, clique em Select para escolher o bloco Google Maps.

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

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

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

Parabéns! Você concluiu a primeira parte do exercício Bloquear. Certifique-se de manter seu trabalho como referência.

Parte 2: Criar um bloco dinâmico

Um bloco dinâmico inclui uma lógica que determina onde, quando e para quem ele aparece. Neste exercício de explicação passo a passo, você cria um bloco dinâmico para uma promoção que é acionada quando as condições da regra de preço são atendidas e que é exibida somente para um segmento de cliente específico. O resultado desse exemplo é semelhante ao banner criado no primeiro exercício, mas com uma lógica que controla quando ele aparece na loja.

Promoção de amostra do Camiseta Luma {width="600" modal="regular"}

Etapa 1: criar um novo bloco dinâmico

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

    Lista de Bloqueios Dinâmicos {width="700" modal="regular"}

  2. No canto superior direito, clique em Add Dynamic Block.

    Nova página de Bloqueio Dinâmico {width="600" modal="regular"}

  3. Conclua as configurações básicas do novo bloco dinâmico:

    • Defina Enable Dynamic Block como Yes.

    • Para Dynamic Block Name, digite Tee Shirt Promo.

    • Defina Dynamic Block Type como Content Area e clique em Done.

      O Tipo de Bloco Dinâmico determina onde o bloco é colocado no layout de página. Ao configurar um bloco dinâmico para sua loja, considere o layout da página e o tema, para que você possa usar bem o espaço disponível. Algumas lojas têm uma área de conteúdo ativa limitada a uma largura fixa, enquanto outras estendem a largura total da tela.

      Configuração de Tipo de Bloco Dinâmico {width="600" modal="regular"}

    • Para Customer Segment, marque a caixa de seleção de cada segmento que você deseja aplicar ao bloco dinâmico e clique em Concluído para salvar a lista de segmentos.

      Para o exemplo a seguir, há dois segmentos de clientes que identificam clientes registrados por gênero. Esse bloco dinâmico aparece somente para clientes fêmeas registrados que estão conectados às suas contas enquanto fazem compras em sua loja.

      Escolhendo os segmentos de clientes {width="600" modal="regular"}

Etapa 2: Concluir as configurações

Role para baixo até a seção Content, que exibe uma visualização vazia do conteúdo Page Builder, e clique em Edit with Page Builder. Em seguida, conclua as seguintes tarefas:

Tarefa 1: adicionar uma imagem de plano de fundo

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

  2. Em Appearance, escolha Full Bleed.

  3. Para Minimum Height, digite 400px.

  4. Role até a seção Background ​e defina o Background Image ​clicando em Select from Gallery ​e escolhendo a imagem wide-banner-background.png carregada no primeiro tutorial.

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

    Linha com a imagem {width="600" modal="regular"}

Tarefa 2: Adicionar colunas

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

Arrastando o tipo de coluna para a linha {width="600" modal="regular"}

A linha agora é dividida em duas colunas de igual largura.

Tarefa 3: Adicionar texto

  1. No painel Page Builder, expanda Elements e arraste um espaço reservado para Texto para a segunda coluna.

    Arrastando uma caixa de texto para a segunda coluna {width="600" modal="regular"}

  2. Insira as três linhas de texto a seguir no editor:

    Even more ways to mix and match.

    Buy 3 Luma tees and get a 4th free.

    Shop Tees >

    Inserindo texto para a coluna {width="600" modal="regular"}

  3. Selecione todas as três linhas de texto e use a barra de ferramentas para definir a Altura da Linha como 40px.

    Definindo a altura da linha {width="600" modal="regular"}

  4. Defina o Font Size para cada linha da seguinte maneira:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Linha Tamanho da fonte
    Linha 1: 28px
    Linha 2: 24px
    Linha 3: 18px

    Como esse bloco pode ser colocado em qualquer lugar da página, use o estilo de parágrafo padrão, em vez dos níveis de cabeçalho. Além disso, não se preocupe se o texto ainda não for quebrado corretamente na coluna.

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

Tarefa 4: Adicionar um Link

No primeiro exercício, você aprendeu a usar o tipo de conteúdo Botão para criar um link. Este exemplo mostra como inserir um link da barra de ferramentas do editor.

  1. Em outra guia do navegador, abra a loja e navegue até a página que deve ser o destino do link.

    Você pode usar o URL totalmente qualificado ou um URL relativo que omita a referência ao domínio da loja.

    URL completo
    : https://mystore.com/women/tops-women/tees-women.html

    URL relativo
    : ../women/tops-women/tees-women.html

  2. Retorne à guia do espaço de trabalho Page Builder e ao editor de texto, selecione o texto Shop Tees > na terceira linha e escolha Negrito ( Botão Negrito ) na barra de ferramentas do editor.

  3. Com o texto Shop Tees > na terceira linha ainda selecionado, escolha Inserir/editar link ( Botão Inserir/editar link ) na barra de ferramentas do editor.

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

  4. Para URL, insira o link relativo preparado.

  5. Defina Target como None.

    Essa configuração abre a página na mesma janela do navegador, em vez de abrir uma nova guia.

  6. Para Title, digite Shop Tees.

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

  7. Para salvar o link e retornar ao espaço de trabalho Page Builder, clique em OK.

    Detalhes do link {width="600" modal="regular"}

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

    Clicar nesse ícone retorna à seção Content ​do bloco dinâmico com a visualização exibida.

  9. No canto superior direito, clique em Save.

Etapa 3: Adicionar uma regra de preço

  1. Abra o bloco dinâmico Tee Shirt Promo no modo de edição novamente.

  2. Expanda Seletor de expansão a seção Related Promotions e clique em Add Cart Price Rules.

    Promoções relacionadas {width="600" modal="regular"}

  3. Na página Adicionar Regras de Preço do Carrinho Relacionadas, marque a caixa de seleção para a Comprar 3 camisetas e obtenha a 4ª regra de preço gratuita e clique em Add Selected.

    Adicionando uma regra de preço do carrinho relacionada {width="600" modal="regular"}

    A regra de preço aparece na seção Promoções Relacionadas, em Regra de Preço do Carrinho Relacionado. Você pode associar várias regras de preço a um bloco dinâmico. No entanto, esse exemplo simples usa apenas um.

    Regra de preço do carrinho selecionada {width="600" modal="regular"}

  4. No canto superior direito, clique em Save.

Etapa 4: adicionar o bloco dinâmico a uma página

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

  2. Localize a Página Simples que você criou no primeiro exercício de explicação passo a passo e abra-a no modo de edição.

  3. Expanda Seletor de expansão a seção Content e clique em Edit with Page Builder.

  4. Passe o mouse sobre a linha superior com a mesma imagem do bloco dinâmico para exibir a caixa de ferramentas e o ícone Remover ( Ícone Remover {width="20"} ).

    Para confirmar a remoção da linha da página, clique em OK.

  5. No painel Page Builder, em Layout, arraste um novo espaço reservado Row ​para a parte superior do estágio.

  6. No painel Page Builder, expanda Add Content e arraste um espaço reservado Dynamic Block para a nova linha.

    Arrastando um bloco dinâmico para a linha {width="600" modal="regular"}

  7. Passe o mouse sobre o contêiner de bloco dinâmico para exibir a caixa de ferramentas e escolher o ícone Configurações ( Ícone Configurações {width="20"} ).

    Caixa de ferramentas de bloco dinâmico {width="600" modal="regular"}

  8. Na página Edit Dynamic Block, clique em Select Dynamic Block.

    Selecionar Bloco Dinâmico {width="600" modal="regular"}

  9. Encontre o bloco dinâmico Tee Shirt Promo ​que você criou e clique em Select.

    Um resumo das informações de bloco dinâmico aparece abaixo.

    Informações sobre blocos dinâmicos {width="600" modal="regular"}

  10. Aceite o padrão Template, Dynamic Block Block Template.

  11. Quando terminar, clique em Save para salvar as configurações e retornar ao espaço de trabalho Page Builder.

    Bloco Dinâmico na visualização da página {width="600" modal="regular"}

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

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

Você concluiu a segunda parte do exercício Bloquear. Certifique-se de manter seu trabalho como referência.

Parte 3: Atualizar o bloco dinâmico

Nesta parte final do exercício, você edita um bloco dinâmico enquanto a página está ativa na loja. Em seguida, faça logon na loja como um membro do segmento do cliente para que o bloco apareça.

Exemplo de bloco dinâmico na vitrine {width="600" modal="regular"}

Etapa 1: Editar o bloco dinâmico

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

  2. Encontre seu bloco dinâmico Tee Shirt Promo ​na grade e abra-o no modo de edição.

  3. Expanda Seletor de expansão a seção Content e clique em Edit with Page Builder.

  4. Alterar a largura da coluna:

    • Passe o mouse sobre a borda entre as duas colunas.

    • Mantenha pressionado o botão do mouse e arraste a borda duas divisões para a esquerda.

      Divisões de grade {width="600" modal="regular"}

      A primeira coluna é agora quatro de 12 (4/12) divisões de grade de largura, e a segunda coluna é oito de 12 (8/12) divisões de largura.

      Duas colunas desiguais {width="600" modal="regular"}

  5. Alterar a cor do texto:

    • Selecione as duas primeiras linhas de texto.

    • Na barra de ferramentas do editor, escolha Text Color e clique na amostra White.

    Cor do texto {width="600" modal="regular"}

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

    Clicar nesse ícone retorna à seção Content ​do bloco dinâmico com a visualização exibida.

  7. No canto superior direito, clique em Save.

Etapa 2: visualizar o bloco dinâmico

Como esse bloco dinâmico é visível somente para membros de um segmento de cliente específico, você deve fazer logon como um cliente que é membro do segmento de cliente para ver a promoção. Neste exemplo, o bloco aparece somente para clientes do sexo feminino.

  1. Abra uma janela de navegador na loja.

  2. Para exibir sua página de exemplo, modifique o URL na barra de endereços da seguinte maneira:

    mystore.com/sample-page

    Se o armazenamento estiver configurado para incluir o sufixo html, inclua o sufixo da seguinte maneira:

    mystore.com/sample-page.html

  3. Fazer logon como uma cliente do sexo feminino:

    • No canto superior direito da home page, clique em Sign In.

    • Se os dados do exemplo do Luma estiverem instalados no sistema, use as seguintes credenciais:

      Email - roni_cost@example.com

      Password - roni_cost3@example.com

    • Clique em Sign In.

    • Retorne à página de exemplo para ver o bloco dinâmico criado com a Promoção Camiseta.

    Bloco dinâmico exibido para um segmento de cliente {width="700" modal="regular"}

Você concluiu o exercício Bloquear. Certifique-se de manter seu trabalho como referência.

Quando estiver pronto, prossiga para a Parte 3: Conteúdo do Catálogo

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