Sobre o elemento do botão Enviar
O botão Enviar é um elemento-chave usado exclusivamente em formulários de contato para permitir que os visitantes enviem suas informações ou respostas.
O botão de envio foi projetado especificamente para enviar e submeter dados de formulário. Ele não pode funcionar como um botão para redirecionar para outro link ou como um Adicionar ao Carrinho Botão.
Como adicionar um elemento de botão de envio à sua página?
Para adicionar o botão Enviar à sua página, siga estas etapas:
Etapa 1 - Acessar o Painel GemPages > PÁGINAS, em seguida, clique na página de destino para localizar o editor.
Etapa 2 - Na barra lateral esquerda, pesquise por “botão de envio”, Em seguida arraste e solte-o em um elemento de boletim informativo ou formulário de contato.
Se você ainda não tiver nenhum deles, adicione um primeiro na sua página e depois aninhe o botão Enviar dentro dele.
Etapa 3 - Clique no elemento para abrir suas configurações para maior personalização.
Configurar a guia Configurações
Sob o Guia Configurações, você pode ajustar as seguintes seções:
Dimensões:
Largura: Escolha como o botão será dimensionado horizontalmente:
- Ajustar conteúdo (Automático): O botão se ajustará ao tamanho do seu conteúdo (texto e ícone).
- Completo (100px): O botão será expandido para preencher toda a largura do contêiner.
- Largura personalizada: Se preferir outros valores, insira um número específico na caixa (em %) para ajustar a largura do botão da sua maneira.
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 sólido or fundo de cor gradiente para o seu botão Enviar. 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
ícone
Para adicionar um ícone no elemento do botão Enviar, ative o ícone seção e personalize o ícone do seu jeito nas configurações.
- Ícone: Escolha um ícone entre as opções disponíveis do GemPages ou carregue o seu próprio (somente arquivo .SVG).
- Posição: Selecione a posição do ícone para ficar à esquerda ou à direita com o texto do botão.
- Gap = Vão: Ajuste o espaçamento entre o ícone e o texto do botão
Estilos de texto
Sob o Estilos de texto seção, modifique o texto do botão como preferir:
- Conteúdo: Altere o texto do botão como forma de incentivar os clientes a agirem.
- Sessão de Fotos: Escolha o estilo de texto de Título 1-6 or Parágrafo 1-3 como o estilo global.
- fonte: Selecione um estilo de fonte que corresponda à identidade da sua marca.
- Dimensões:: Ajuste o tamanho da fonte para deixar o texto em destaque.
- Cor: Escolha uma cor que complemente seu design.
Clique Mostre mais para expandir as configurações completas do Estilos de texto seção:
- Peso da fonte: Controle a espessura do texto.
- Altura da linha: Ajuste o espaço entre as linhas para melhor legibilidade.
- Espaçamento entre Letras: Crie uma aparência mais moderna ou compacta alterando o espaço entre as letras.
- Transformam: Converta o texto para maiúsculas, minúsculas ou coloque a primeira letra de cada palavra em maiúscula.
- Sombra: Aplique efeitos de sombra projetada para aumentar a profundidade visual.
Efeito
Personalize como o botão Enviar reage quando o cursor passa sobre ele:
Contexto: Selecione a cor de fundo que o botão adotará quando você passar o mouse sobre ele.
Cor do texto: Altera a cor do texto ao passar o mouse.
Shape: Personalize o formato do botão quando o cursor passar sobre ele:
- 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.
Alinhar
Quando o botão a largura está definida como 100% ou mais, o alinhamento horizontal será desativado. Caso contrário, você pode alinhar o botão à esquerda, ao centro ou à direita.
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.
