Elementos - Botões

No painel Page Builder, expanda Elements e arraste um espaço reservado Buttons para uma linha, coluna ou conjunto de guias no estágio.

{width="500" modal="regular"}

Passe o mouse sobre o botão para exibir a caixa de ferramentas e escolha o ícone Configurações ( ).

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

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

Defina Button Type como um dos seguintes:

{width="500" modal="regular"}

Defina o Button Link usando um dos seguintes tipos:

• URL - Insira a URL de destino do link.

  O URL pode ser um link relativo para um produto ou página em sua loja, ou um URL totalmente qualificado.

  Exemplo de URL relativa - ../luma-analog-watch.html

  Exemplo de URL totalmente qualificado - http://mystore.com/luma-analog-watch.html

  Se o link for para um site diferente, é possível manter a página atual aberta na loja abrindo o link em uma nova guia do navegador.

  Para impedir que o visitante saia da sua loja, marque a caixa de seleção Open in new tab.

• Product - Digite um nome de produto (parcial ou completo) ou SKU e escolha o nome do produto na lista.

  note note
  NOTE
  Os produtos são exibidos na lista de acordo com as configurações Mostrar produtos sem estoque. Para comerciantes do Multi Source que usam o Inventory management, a lista de produtos é limitada pela origem atribuída somente ao site padrão.

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

• Category - Insira um nome de categoria (parcial ou completo) ou clique no campo em branco para exibir a árvore de categorias. Em seguida, escolha o nome da categoria na árvore.

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

• Page - Insira o nome de uma página CMS (parcial ou completa) ou clique no campo em branco para exibir a lista completa. Em seguida, escolha o nome da página na lista de resultados da pesquisa.

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

Conclua as configurações avançadas conforme necessário.

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

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

{width="500" modal="regular"}

Digite o texto que você deseja que apareça no segundo botão.

Clique no novo botão para exibir sua caixa de ferramentas e escolha o ícone Configurações ( {width="20"} ).

{width="500" modal="regular"}

Defina Button Type como Secondary.

Configure o Button Link conforme necessário.

No exemplo a seguir, o link é uma URL relativa que vai para a página Fale Conosco.

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

Conclua as configurações avançadas conforme necessário.

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

Clique no segundo botão novamente no palco e escolha o ícone Duplicar ( {width="20"} ).

{width="500" modal="regular"}

Digite o texto que você deseja que apareça no terceiro botão.

Clique no terceiro botão para exibir a caixa de ferramentas e escolha o ícone Configurações ( {width="20"} ).

{width="500" modal="regular"}

Atualize o Button Link conforme necessário.

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

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

{width="500" modal="regular"}

Em Appearance, escolha Stacked.

Defina All Buttons are same size como Yes.

{width="300"}

Atualize as configurações restantes conforme necessário, usando as descrições de Alterar configurações de um contêiner de botão.

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

O conjunto completo de botões empilhados aparece no palco, com um botão principal e dois botões secundários.

{width="500" modal="regular"}

Clique no botão que deseja mover.

Selecione e arraste o ícone Mover ( {width="20"} ), que aparece logo antes do texto do botão, para uma nova posição do botão dentro do contêiner do botão.

{width="500" modal="regular"}

Clique no botão no palco para exibir a caixa de ferramentas e escolha o ícone Configurações ( {width="20"} ).

{width="500" modal="regular"}

Atualize as configurações padrão conforme necessário.

• Button Text - Insira o texto a ser exibido no botão (também pode ser atualizado diretamente do estágio).

• Button Type - Determina o formato do botão.

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Tipo	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.

• Button Link - Determina a página de destino a ser apresentada ao clicar no botão.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Opção	Descrição
  URL	Usa um URL relativo ou totalmente qualificado para identificar a página de destino.
  Product	Identifica a página de destino com base no nome do produto ou SKU. O nome do produto pode ser pesquisado com base em um nome parcial ou completo. O produto é então escolhido na lista de resultados da pesquisa.
  Category	Identifica a página de destino como uma categoria ou subcategoria específica na árvore de categorias.
  Page	Identifica a página de destino como uma página CMS específica.

Conclua as configurações avançadas conforme necessário.

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

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

Atualize as configurações de Appearance conforme necessário.

• Use as opções de disposição para exibir os botões na horizontal ou na vertical no contêiner:

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Opção	Descrição
  Inline	Organiza os botões horizontalmente.
  Stacked	Organiza os botões verticalmente.

• Defina a opção All buttons are same size de acordo com sua preferência.

  Quando definido como Yes, todos os botões no contêiner têm um tamanho consistente, com base no comprimento do texto mais longo do botão.

Conclua as Configurações avançadas conforme necessário.

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

Para controlar o posicionamento no contêiner pai, escolha a Alignment:

Defina o estilo Border aplicado a todos os quatro lados do botão ou contêiner de botões:

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

(Opcional) Especifique os nomes de CSS classes da folha de estilos atual para aplicar ao botão ou contêiner de botões.

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

Insira valores, em pixels, para que Margins and Padding determine as margens externas e o preenchimento interno do botão ou contêiner de botões.

Insira os valores correspondentes no diagrama.