Como criar botões de fonte de ícone com Divi

Os botões de fonte de ícone têm muitos usos no mundo do web design. Como os ícones de fonte permanecem nítidos em cores e design à medida que são redimensionados para tamanhos diferentes, faz sentido usá-los em botões. E, criar um botão de fonte de ícone no Divi é realmente muito fácil usando a fonte de ícone elegante. Neste tutorial, vou mostrar como você pode usar fontes de ícone com o módulo de botão do Divi para criar um único botão de ícone.

Alguns dos destaques deste tutorial incluem:

• Como usar a fonte elegante para adicionar um ícone como texto do botão
• Como adicionar preenchimento e raio de borda para garantir que o botão tenha a forma de um quadrado ou círculo perfeito
• Como substituir o ícone do botão por um ícone diferente ao passar o mouse
• Como posicionar um ícone de botão para sobrepor uma imagem
• e mais…

Espiada

Aqui está uma prévia do que está por vir ...

O que você precisa

Para este tutorial, usarei o seguinte:

• Tema Divi (obviamente)
• Os ícones de fonte elegantes - Depois de baixar o arquivo zip da postagem do blog, estaremos arrastando o arquivo de fonte eleganticons.ttf para ser usado como uma fonte personalizada para nosso módulo de botão.
• Layout da página inicial do Bed & Breakfast (disponível gratuitamente no Divi Builder)

Vamos começar!

Adicionando a fonte do ícone elegante ao seu módulo de botão

Adicionar um Módulo de Botão

Para começar, crie uma nova página e implemente o construtor visual. Escolha “Construir do zero” e, em seguida, uma vez que o construtor visual seja implantado, adicione uma linha de uma coluna à seção e, em seguida, adicione um módulo de botão à linha.

Arraste na fonte do ícone elegante

Para obter a fonte do ícone elegante, vá para a postagem no blog da fonte do ícone elegante e baixe o arquivo da fonte. Extraia o conteúdo do arquivo zip e encontre os arquivos de fontes de ícones elegantes navegando para elegant_font> HTML CSS> fonts. Em seguida, arraste o arquivo “ElegantIcons.ttf” do arquivo do seu computador e solte-o no construtor visual.

Isso abrirá o modal Carregar fonte automaticamente. Basta clicar no botão de upload para fazer o upload da fonte para o Divi Builder.

Agora você terá acesso ao elegante Icon Font ao personalizar qualquer fonte de módulo no construtor visual.

Vá para as configurações do módulo de botão e atualize a fonte do botão com a nova Elegant Icon Font que você acabou de enviar. Ele aparecerá na lista de ícones em “Fontes personalizadas”.

Você pode notar que agora o texto do botão foi transformado em um monte de ícones. Isso ocorre porque cada caractere inserido na caixa de entrada de texto do botão agora tem um ícone que corresponde à letra / caractere que está sendo usado no momento.

Como precisamos apenas de um ícone para ser usado para o nosso botão, você pode selecionar qualquer caractere no teclado para gerar o ícone associado a esse caractere. Por exemplo, digite o número 5 para o texto do botão para obter uma seta em forma de divisa à direita.

Ícones do botão de troca ao pairar

Como você sabe, o módulo de botão inclui a opção de adicionar ícones ao pairar. Podemos usar esta funcionalidade para substituir a fonte do ícone com o ícone de foco para um efeito de foco agradável. Tudo o que precisamos fazer é modificar as configurações do botão da seguinte maneira:

Tamanho do texto do botão: 30 px
Ícone do botão: veja a captura de tela (este será o ícone que substituirá a fonte do ícone usada para o botão)
Cor do ícone do botão: # 0c71c3 (deve corresponder à cor usada para o texto do botão)
Posicionamento do ícone do botão: Esquerda
Botão ao passar o mouse Cor do texto: rgba (255,255,255,0) (isso é completamente transparente para ocultar a fonte do ícone do botão ao passar o mouse)
Preenchimento personalizado: 1em à esquerda, 1em à direita (esse preenchimento substituirá o preenchimento padrão do botão e evitará que ele se expanda ao passar o mouse)

Agora tudo o que precisamos fazer é substituir a margem do elemento antes no css personalizado. Vá para a guia Avançado e digite o seguinte CSS na caixa antes:

margin-left: 0 !important;

Agora, o ícone do botão será substituído pelo ícone de foco ao passar o mouse.

Criação de botões de ícone perfeitamente circulares que se dimensionam com o tamanho do texto do botão

Os designs dos botões circulares funcionam muito bem para botões com um único ícone. E, se você entender o funcionamento interno do espaçamento do módulo do botão, poderá criar botões perfeitamente circulares que se dimensionam de acordo com o tamanho do texto do botão.

O truque é espaçar o botão usando a unidade de comprimento “em”. Esta unidade de comprimento é relativa ao tamanho do texto do botão. Portanto, se o tamanho do texto do botão é 30px, 1em também é 30px (2em seria 60px e assim por diante ...). Sabendo disso, só precisamos ter certeza de que nosso preenchimento ao redor do botão será o mesmo em todos os 4 lados. Mas o que você pode não ter considerado é que a altura da linha do texto do botão é 1.7em por padrão. Isso significa que precisamos levar isso em consideração ao adicionar nossos valores de preenchimento superior e inferior.

Para aqueles que desejam saber a matemática por trás dos valores de preenchimento necessários para criar botões de círculo, aqui vai:

Para o preenchimento esquerdo e direito, defina-os como 1em. Isso significa que a largura total de nosso botão será de 90 px (ou 3em) porque ...

30 px de preenchimento esquerdo + 30 px da fonte do ícone + 30 px de preenchimento direito = 90 px no total

A altura da linha do texto do botão é 1.7em, o que equivale a 170% do tamanho do texto do botão (30px), que é igual a 51px.

Para o preenchimento superior e inferior, defina-os como 0,65em. 0,65em é o equivalente a 65% do tamanho do texto do botão (30px), o que equivale a 19,5px.

Portanto…

19,5 px do preenchimento superior + 51 px da altura da linha + 19,5 px do preenchimento inferior = 90 px no total

Isso significa que quando o texto do botão é definido como 30 px, o tamanho total do botão será 90 px por 90 px (um quadrado perfeito). Na verdade, você pode pensar dessa maneira. Qualquer que seja o tamanho do texto do botão definido, o tamanho total do botão será 3x esse valor. Portanto, um texto de botão de 40 px criará um botão de 120 px por 120 px e assim por diante.

No momento, o botão tem as dimensões corretas, mas ainda é quadrado. Tudo o que precisamos fazer é adicionar um raio de borda de 50% para transformar o botão quadrado em um botão de círculo perfeito.

Aqui está o que você precisa para transformar seu botão em um botão de círculo:

Raio da borda do botão: 50%
Preenchimento personalizado: 0,65em superior, 0,65em inferior, 1em à direita, 1em à esquerda

Não se esqueça, você pode ajustar o tamanho do texto do botão e o botão permanecerá perfeitamente circular, pois o preenchimento se ajusta ao tamanho do texto.

Adicionando botões de ícone ao seu layout Divi

Divi torna mais fácil adicionar e personalizar botões com um único ícone para se adequar ao design de qualquer layout predefinido.

Para este exemplo, vou mostrar como adicionar um único botão de ícone ao layout da página inicial do Bed & Breakfast.

Para adicionar o layout à sua página, abra o menu de configurações clicando no ícone roxo na parte inferior da página (certifique-se de que o construtor visual esteja ativado). Em seguida, clique no ícone Carregar da Biblioteca. Selecione o layout da página inicial do Bed & Breakfast e clique no botão “Usar este layout” para implantar o layout na página.

Adicionando um botão de ícone a uma imagem

Digamos que você queira adicionar um pequeno botão de ícone para sobrepor o canto de uma imagem para um CTA adicional que vincula a um determinado produto ou serviço. Tudo o que você precisa fazer é adicionar um módulo de botão sob a imagem e personalizá-lo para incluir a fonte do ícone e fazer com que ele se sobreponha à imagem com algum espaçamento personalizado.

Encontre a seção “Sobre nós” no layout da página inicial. Em seguida, adicione um módulo de botão diretamente sob uma das imagens usadas para caracterizar o “Quarto Duplo” (é o primeiro na primeira coluna da linha de três colunas).

Em seguida, abra as configurações do botão e coloque um “P” maiúsculo na caixa de texto do botão. Isso mudará para o nosso ícone assim que você selecionar a fonte Elegant como a fonte do botão.

Para começar a combinar o design do botão com o layout, salve as configurações do botão e localize o botão “Reservar agora” na seção superior do layout. Abra as configurações de botão e copie os estilos de botão clicando com o botão direito em Opções de botão Alternar título e selecionando a opção “Copiar estilos de botão” na lista.

Agora clique com o botão direito do mouse no módulo de botão adicionado sob a imagem e selecione “Colar estilos de botão”.

Em seguida, atualize as configurações do botão da seguinte forma:

Fonte do botão: Fonte elegante
Largura da borda do botão: 0 px
Mostrar ícone do botão: NÃO

Em seguida, vamos adicionar nosso belo preenchimento personalizado para garantir que o botão seja um quadrado perfeito:

Preenchimento personalizado: 0,65em superior, 0,65em inferior, 1em à esquerda, 1em à direita

Para posicionar o botão de forma que ele se sobreponha ao canto inferior direito da imagem, primeiro você precisa se livrar da margem inferior do módulo da imagem acima. Abra as configurações do módulo de imagem diretamente acima do botão e defina a margem inferior como 0px.

Agora precisamos puxar o botão para cima sobre a imagem usando um valor de margem negativa personalizado igual à altura do botão. Para fazer isso, precisamos determinar a altura do nosso botão. Conforme mencionado anteriormente neste post, com o preenchimento personalizado no lugar, podemos saber o tamanho exato do nosso botão com base no tamanho do texto do botão atual. Como o tamanho do texto do botão é 20px, sabemos que a altura do nosso botão é 3em (3 vezes o tamanho do texto do botão), que é 60px. Portanto, precisamos definir uma margem personalizada para nosso botão da seguinte maneira:

Margem personalizada: -60px superior

E então podemos posicionar nosso botão à direita ajustando o Alinhamento do botão para a direita.

Agora que temos um design funcional para nossa imagem e botão. Tudo o que precisamos fazer é adicionar o mesmo botão a todas as imagens da seção.

Como removemos a margem inferior da imagem, podemos facilmente aplicar essa alteração a todas as imagens na seção usando Estender Estilos. Clique com o botão direito na imagem e selecione “Estender estilos de imagem”.

No pop-up Estender estilos, selecione “Esta seção” para a opção Em toda a extensão e clique no botão estender. Agora todas as imagens têm uma margem inferior de 0 px.

A última etapa é simplesmente copiar e colar os módulos de botão em cada uma das imagens.

Aqui está o design final.

E porque usamos técnicas de espaçamento adequadas, o botão permanecerá no lugar no celular também ...

Ícones disponíveis usando o módulo de botão

Como o Texto do botão do Módulo de botão é limitado aos caracteres disponíveis no teclado, você precisará explorar essas teclas para encontrar os ícones disponíveis associados a cada tecla. Uma maneira fácil de fazer isso é criar um módulo de botão com a fonte do botão definida como Elegant Font e digitar os caracteres na caixa de texto do botão.

Aqui está a captura de tela dos personagens com seu ícone de fonte correspondente:

Se você achar que esse processo é limitante, você sempre pode usar um módulo de texto para criar links de ícone usando os unicodes listados aqui.

Pensamentos finais

Usar a fonte de ícone elegante com o módulo de botão do Divi é uma maneira conveniente de criar botões com um único ícone para o seu site. Isso abre algumas portas para ser criativo com as configurações do módulo para personalizar seu botão com estilos de texto exclusivos, efeitos de foco e muito mais. Gosto particularmente dos valores de espaçamento de botões personalizados que garantem que os botões tenham a forma de um quadrado ou círculo perfeito.

Existem muitos usos para os botões de ícone. Esperançosamente, o caso de uso de exemplo que cobri adicionará um pouco de inspiração para seus próprios projetos.

Para obter mais idéias, verifique como usar a fonte de ícone elegante ou como incorporar uma fonte de ícone em seu site.

Eu adoraria aqui algumas idéias suas nos comentários abaixo.

Saúde!