Mídia - Banner

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

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

Os botões Upload Image ​e_Select from Gallery_ são incluídos para que você possa fazer alterações rápidas no conteúdo do banner diretamente do palco. Você também pode alterar o conteúdo na página Edit Banner.

Clique no espaço reservado do banner para exibir o editor de texto e inserir o conteúdo do banner.

Você também pode incluir conteúdo de banner mais complexo usando as configurações de Conteúdo.

Passe o mouse sobre o contêiner de banner para exibir a caixa de ferramentas e escolher o ícone Configurações ( ).

Use as seguintes seções para obter informações detalhadas sobre a atualização das configurações disponíveis:

• Appearance
• Content
• Background
• Advanced

Quando terminar, clique em Save no canto superior direito para fechar a página Edit Banner.

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

Clique no texto do espaço reservado e insira o texto que deseja exibir no banner.

A barra de ferramentas do editor é exibida acima da caixa de texto.

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

Use a barra de ferramentas do editor para inserir e formatar texto, bem como inserir elementos, como links, imagens e widgets.

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

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

Role para baixo até a seção Content ​e use o editor Message Text ​para inserir e formatar o texto do banner.

Você também pode inserir elementos, como links de texto, imagens e widgets.

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

Se necessário, especifique um Link para o banner.

O link é a página de destino exibida quando o cliente clica no botão ou na área do banner. Você pode usar um dos três tipos de link:

• URL - Links para uma URL relativa ou totalmente qualificada.
• Product - Identifica a página de destino com base no nome do produto ou SKU. Procure o produto por nome com base em um nome parcial ou completo. Escolha o produto na lista de resultados da pesquisa.
• Category - Identifica a página de destino como uma categoria ou subcategoria específica na árvore de categorias. Procure a categoria com base em um nome parcial ou completo. Escolha a categoria na seção expandida da árvore exibida.
• Page - Identifica a página de destino como uma página de conteúdo específica. Procure a página com base em um nome parcial ou completo. Escolha a página na lista de resultados da pesquisa.

note note
NOTE
A partir da versão 2.4.1, o Page Builder não oferece mais suporte à vinculação do banner e dos links dentro do texto aninhado devido a problemas com a exibição na loja. Se você estiver usando um link no Message Text, não poderá configurar a opção​_Link_. Se preferir usar um único link para todo o banner, você pode remover todos os links do texto.
{width="200"}

Se necessário, adicione um botão para solicitar que os clientes sigam o link.

A configuração Aparência do banner coloca um único link ou botão abaixo do texto. Complete as propriedades do link ou botão que deseja adicionar.

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

• Defina Show Button como um dos seguintes:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Opção	Descrição
  Always	Um botão sempre aparece no banner.
  On Hover	Um botão é exibido no banner somente ao passar o mouse.
  Never Show	Um botão nunca aparece no banner.

• Digite o Button Text a ser exibido no botão.

• Defina Button Type como um dos seguintes:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Opção	Descrição
  Primary	Aplica o estilo de botão primário da folha de estilos atual.
  Secondary	Aplica o estilo de botão secundário da folha de estilos atual, se aplicável.
  Link	Cria um hiperlink em vez de um botão.

  O estilo do botão do tema atual determina o formato do botão. Normalmente, um botão principal tem uma cor de fundo mais proeminente do que um botão secundário.

Defina Show Overlay como um dos seguintes:

Você pode usar uma sobreposição para aplicar uma cor de plano de fundo à área de conteúdo ativa definida pela configuração Appearance. A imagem de fundo do banner permanece visível por toda a largura do banner.

Se você optar por mostrar uma sobreposição, defina o Overlay Color:

• Clique na amostra Sem cor e escolha uma amostra.
• No campo Sem Cor, digite um nome de cor válido ou um valor hexadecimal.

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

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

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

Para controlar o posicionamento horizontal dos contêineres de conteúdo adicionados ao banner, escolha um Alignment:

Defina o estilo Border aplicado a todos os quatro lados do contêiner de banner:

Se você definir um estilo de borda diferente de None, conclua as opções de exibição de borda:

• Border Color - Especifique a cor escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente.

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

• Border Width - Insira o número de pixels para a largura da linha de borda.

• Border Radius - Insira o número de pixels para definir o tamanho do raio usado para arredondar cada canto da borda.

(Opcional) Especifique os nomes de CSS classes da folha de estilos atual para aplicar ao contêiner de banner.

Separe vários nomes de classe com um espaço.

Insira valores, em pixels, para que Margins and Padding especifique as margens externas e o preenchimento interno do banner.

Insira cada valor correspondente no diagrama do container de banner.