DocumentaçãoCommercePage Builder

Page Builder Passo a passo parte 2: blocos

Last update: Tue Nov 28 2023 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined
  • undefined

O exercício seguinte ilustra a diferença entre blocos simples e blocos dinâmicose 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 anterior do banner. O que era anteriormente a opção Banner no Menu Conteúdo, agora é Bloco dinâmico.

Bloco dinâmico na loja

Este exercício pressupõe que você tenha concluído 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
Estes exercícios de explicação são atualizados para refletir as alterações Page Builder no espaço de trabalho na versão 2.4.1. Se você estiver usando uma versão anterior do Adobe Commerce, use o Page Builder exercícios incluídos na Commerce Guia do usuário da versão 2.3.

Parte 1: Criar um bloco simples

Neste exercício de explicação passo a passo, 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. No Admin barra lateral, vá para Content > Elements>Blocks.

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

  3. Para Block Title, insira Google Map.

  4. Para Identifier, insira google-map.

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

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

  6. No canto superior direito, clique em Save.

Etapa 2: adicionar um Google Map

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

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

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

    Um mapa para o local da loja será exibido se Google Maps está configurado para sua loja.

    Mapa do Google configurado para sua loja {width="600" modal="regular"}

    Um mapa de espaço reservado será exibido se Google Maps ainda não está configurado para a sua loja.

    Google Maps espaço reservado {width="600" modal="regular"}

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

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

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

Etapa 3: configurar Google Maps

Se Google Maps já estiver configurado para o armazenamento, ignore esta etapa e prossiga para a próxima.

  1. Vá para a 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 o instruções no Google Maps documentação.

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

  5. Retorne para a Commerce Administrador e acesse Stores > Settings>Configuration.

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

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

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

    Para obter mais informações sobre o Content Management Advanced Tools opções de configuração, consulte a seção Guia de referência de configuração.

  8. Para Google Maps API Key, cole a chave copiada.

  9. Clique em Test Key.

    Se houver um problema com sua chave, volte para a guia Google Maps Site da plataforma 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. No Admin barra lateral, vá para Content > Elements>Pages.

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

  3. Expandir Seletor de expansão o Content e clique em Edit with Page Builder ou dentro da área de visualização de conteúdo.

  4. No Page Builder painel em Layout, arraste um Row ​espaço reservado até a parte superior do estágio.

    Adição da linha à parte superior do estágio {width="600" modal="regular"}

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

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

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

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

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

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

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

  12. No canto superior direito, clique na guia Save seta 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.

Exemplo de promoção em árvore Luma

Etapa 1: criar um novo bloco dinâmico

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

    Lista de blocos dinâmicos {width="700" modal="regular"}

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

    Nova página Bloco dinâmico {width="600" modal="regular"}

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

    • Definir Enable Dynamic Block para Yes.

    • Para Dynamic Block Name, insira Tee Shirt Promo.

    • Definir Dynamic Block Type para Content Area e clique em Done.

      O Tipo de bloco dinâmico determina onde layout de página que o bloco é colocado. 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 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 os 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.

      Escolha dos segmentos de clientes {width="600" modal="regular"}

Etapa 2: Concluir as configurações

Role para baixo até Content ​seção, que exibe uma tag em branco Page Builder pré-visualização de conteúdo 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 linha para exibir a caixa de ferramentas e escolher o Configurações ( Ícone Configurações {width="20"} ) ícone.

  2. Em Appearance, escolha Full Bleed.

  3. Para Minimum Height, insira 400px.

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

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

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

Tarefa 2: Adicionar colunas

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

Arrastar o tipo de coluna para a linha

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

Tarefa 3: Adicionar texto

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

    Arrastar 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 >

    Inserção de 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 para 40px.

    Definição da altura da linha {width="600" modal="regular"}

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

    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 Botão tipo de conteúdo 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 para a Page Builder guia espaço de trabalho e editor de texto, selecione a Shop Tees > texto na terceira linha e escolha Negrito ( Botão Negrito ) na barra de ferramentas do editor.

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

    Inserção de um link {width="600" modal="regular"}

  4. Para URL, insira o link relativo preparado.

  5. Definir Target para None.

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

  6. Para Title, insira Shop Tees.

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

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

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

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

    Clicar nesse ícone retornará para a Content ​seção do bloco dinâmico com a pré-visualização exibida.

  9. No canto superior direito, clique em Save.

Etapa 3: Adicionar uma regra de preço

  1. Abra o Camiseta Promocional bloco dinâmico no modo de edição novamente.

  2. Expandir Seletor de expansão o Related Promotions e clique em Add Cart Price Rules.

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

  3. No Adicionar Regras de Preço do Carrinho Relacionadas , marque a caixa de seleção da Compre 3 camisetas e obtenha a 4ª gratuitamente regra de preço e clique Add Selected.

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

    A regra de preço aparece na variável Promoções relacionadas seção, em Regra de preço do carrinho relacionada. 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. No Admin barra lateral, vá para Content > Elements>Pages

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

  3. Expandir Seletor de expansão 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 a Remover ( Ícone Remover {width="20"} ) ícone.

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

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

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

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

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

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

  8. No Edit Dynamic Block ​clique em Select Dynamic Block.

    Selecionar bloco dinâmico {width="600" modal="regular"}

  9. Localize o Tee Shirt Promo ​bloco dinâmico criado e clique em Select.

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

    Informações de bloco dinâmico {width="600" modal="regular"}

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

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

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

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

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

  13. No canto superior direito, clique na guia Save seta 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

Etapa 1: Editar o bloco dinâmico

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

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

  3. Expandir Seletor de expansão 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 da 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 no link White amostra.

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

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

    Clicar nesse ícone retornará para a Content ​seção do bloco dinâmico com a pré-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 Parte 3: Conteúdo do catálogo

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