Elemento Botão

O processo de Elemento de botão é um elemento interativo que solicita aos usuários que realizem ações específicas em seu site. No entanto, se sua ação desejada for adicionar itens ao carrinho, recomendamos usar o Elemento Botão do carrinho ao invés.

Sobre o elemento Button

O processo de Elemento de botão é um elemento interativo que solicita aos usuários que realizem ações específicas no seu site, como navegar para outra página, abrir um pop-up ou entrar em contato com você.

Se a ação desejada for adicionar itens ao carrinho, recomendamos usar o Elemento do botão do carrinho ao invés.

Adicione o elemento de botão à sua página.

Etapa 1 - Acesso a Painel GemPages > PÁGINASe localize a página de destino para abrir o editor.

Etapa 2 - Na barra lateral esquerda, digite “Botão” na barra de pesquisa para encontrar o elemento Botão. 

Você pode escolher entre dois estilos de botão, um com um símbolo e outro sem, e depois arrastá-lo e soltá-lo na posição desejada.

Quando o elemento for selecionado, você encontrará todas as opções de configuração na barra lateral esquerda, abaixo do Configurações e Avançado Guias.

Configurar a guia Configurações

O processo de Configurações A guia permite que você controle totalmente a aparência, o layout e o comportamento do elemento Botão, incluindo:

Dimensões:

Controle as dimensões gerais do botão com opções flexíveis de largura e altura:

Largura: Escolha como o botão deve ser dimensionado horizontalmente:

• Conteúdo adequado: O botão se ajustará ao tamanho do seu conteúdo (texto e ícone).
• Auto: Herdar tamanho com base no contêiner pai ou outros estilos.
• Completo (100%): O botão será expandido para preencher toda a largura do seu contêiner.

Altura: Defina a altura para Ajustar conteúdo (Automático) ou um valor de pixel fixo.

Acolchoamento: Defina o espaçamento interno dentro do botão.

Contexto

Definir um fundo de cor sólida ou gradiente para o seu botão de adicionar ao carrinho. Você pode ajustar a cor:

• Digite o código de cor
• Arraste ou selecione nas amostras de cores
• Use o seletor de cores para selecionar qualquer cor na sua página atual
• Escolha um dos Cores recentes  or Sugerido para você listas

Se você preferir um fundo da imagem, carregue uma nova imagem ou escolha na sua galeria para defini-la como plano de fundo do elemento e, em seguida, configure a imagem:

• Escala: Cobrir, conter ou automático
• Posição: Definir alinhamento da imagem (centralizado, superior esquerdo, etc.)
• Repetir: Alternar configurações de repetição
• Anexo: Escolha entre Rolagem ou Fixo
• SEO: Adicione texto alternativo e título de imagem para acessibilidade e SEO
• Pré-carregamento: Alterne o pré-carregamento para melhorar a Largest Contentful Paint (LCP)

Shape

• Fronteira: Você pode alterar a cor, a espessura e o traço da borda.
• Corner: O canto da seção pode ser quadrado, redondo ou em formato de pílula. Além disso, você pode inserir um raio exato para personalizar o canto do elemento à sua maneira.
• Shadow: Adicione uma sombra e ajuste sua exibição (tamanho, cor, desfoque e distância).

ícone

Ative esta alternância para exibir um ícone dentro do botão:

• ícone: Escolha entre ícones integrados ou carregue ícones .SVG personalizados.
• Posição: Coloque o ícone no esquerda or certo do texto.
• lacuna: Ajuste o espaçamento entre o ícone e o texto usando o controle deslizante ou a entrada numérica.

Texto

Esta seção permite que você personalize a tipografia e a aparência do rótulo do botão:

• Estilos: Escolha uma predefinição de texto, como Parágrafo 1, Título ou estilos de texto personalizados.
• Fonte: Selecione entre as famílias de fontes disponíveis (por exemplo, Ui-sans-serif) para combinar com a marca da sua loja.
• Tamanho Ajuste o tamanho do texto usando os controles +/–.
• Formatação: Aplique os estilos Negrito, Itálico ou Sublinhado, conforme necessário.
• Cor: Defina a cor da fonte usando o código HEX ou o seletor de cores.
• Espessura da fonte: Escolha entre Normal, Médio, Semi-negrito, Negrito, etc.
• Altura da linha: Controle o espaço vertical entre as linhas de texto (por exemplo, 160%).
• Espaçamento entre letras: Ajuste o espaço entre as letras (por exemplo, 0.6).
• Transformar: Escolha como o texto aparece: 
  • AA: MAIÚSCULAS
  • Aa: Coloque cada palavra em maiúscula
  • aa: minúscula
• Sombra: Aplique uma sombra de texto para adicionar contraste ou profundidade visual.

pairar Efeito

Personalize como o botão reage quando o mouse passa sobre ele:

• Contexto: Altera a cor de fundo ao passar o mouse.
• Imagem: Adicione uma imagem de fundo para o estado de foco.
• Cor do texto: Altera a cor do texto ao passar o mouse.
• Fronteira: Adicione ou personalize o estilo da borda quando o mouse passar (cor, espessura, traço).
• Corner: Ajuste o raio do canto ao passar o mouse para deixar as bordas mais arredondadas ou quadradas.
• Shadow: Aplique um efeito de sombra para dar mais profundidade ao botão quando ele for passado pelo mouse.

de vidrio

Transforme seu botão em um elemento clicável habilitando o de vidrio alternar. Uma vez habilitado, você pode definir o que acontece quando os usuários clicam no botão:

Depois de clicar: Escolha a ação acionada pelo botão:

• Abrir página: Redirecione o usuário para uma página ou URL específica.
• Role até: Role suavemente até uma seção específica na mesma página usando uma ID de âncora (por exemplo, #recursos).
• Abrir pop-up: Acione uma janela pop-up criada usando GemPages.
• Enviar email: Abra o cliente de e-mail do usuário com um endereço de destinatário pré-preenchido.
• Fazer chamada telefônica: Inicie uma chamada telefônica em dispositivos móveis usando um Tel: link.

Página/Link: Clique em "+ Acrescentar…" botão para pesquisar ou colar uma URL diretamente na barra de pesquisa

• Selecione entre suas páginas existentes do Shopify 
• Use o filtro suspenso (por exemplo, “Páginas de destino”) para restringir seus resultados
• Clique em Exibir para visualizar a página antes de confirmar

Alinhar

Defina o alinhamento horizontal do botão dentro de seu contêiner: Esquerdo, Centralização de, ou Certo.

Configurar a guia Avançado

Para uma personalização mais avançada, navegue até o Guia Avançado e siga as instruções em Este artigo.

Perguntas

1. Como altero a cor do botão?

Vou ao Guia Configurações > Contexto > Cor. Use o seletor de cores ou insira um código HEX para atualizar a cor de fundo do botão.

2. Por que a cor do meu botão não muda ao passar o mouse?

Verifique o pairar Efeito Configurações. Certifique-se de que a cor de fundo ou a cor do texto ao passar o mouse esteja definida com um valor diferente do estado normal.

3. Posso adicionar um gradiente ou uma imagem de fundo ao botão em vez de uma cor sólida?

Sim. Sob o Guia Configurações > Plano de fundo, você pode carregar uma imagem e ajustar a escala, a posição e as opções de repetição. Para gradientes, você pode adicionar CSS personalizado no Guia Avançado.

4. Por que meu botão não está mostrando a nova cor na página ativa?

Certifique-se de clicar Publicar após a edição. Se o problema persistir, limpe o cache do navegador ou desative o código personalizado conflitante.

5. Como conecto meu botão a uma categoria de produto (coleção) no Shopify?

Etapa 1 - Adicionar uma Elemento de botão para a página do seu produto (ou qualquer página onde você queira que o botão de categoria apareça).

Etapa 2 - Vou ao Configurações guia> de vidrio > Depois de clicar, Em seguida, escolha Abrir página.

Etapa 3 - De acordo com o relatório Página/Link campo, seja:

• Selecione o seu desejado coleção (categoria) da lista de páginas do Shopify, ou
• Cole o link da coleção para a qual você deseja redirecionar.

Etapa 4 - Clique Economize e Publicar suas mudanças.