Ir para o conteúdo principal

Como criar botões com ícones no Divi

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Botões com ícones de fontes têm muitos usos no mundo do web design. Como as fontes dos ícones permanecem nítidas em cores e design à medida que elas evoluem para tamanhos diferentes, é uma boa ideia usá-las em botões. E crie um botão com ícones de fontes Divi é realmente muito fácil usando as fontes na biblioteca " ElegantIcons". Neste Tutoriel, Vou mostrar como você pode usar fontes de ícones com o módulo de botão Divi para criar um único botão de ícone.

Alguns dos destaques deste tutorial incluem:

  • Como usar ElegantIcons adicionar um ícone como um texto de botão
  • Como adicionar preenchimento e um raio de borda para que o botão assuma a forma de um quadrado ou círculo perfeito
  • Como substituir o ícone do botão por um ícone diferente ao sobrevoar
  • Como posicionar um ícone de botão para sobrepor uma imagem
  • e mais ...

exame

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

botões de fonte de ícone

altere o tamanho de um botão divi image.gif

botão de demonstração divi list delements.png

O que você precisa?

Para este tutorial, usarei o seguinte:

  • Tema Divi (obviamente)
  • Ícones de fontes elegantes, um tutorial sobre Tema elegante é muito mais preciso. Depois de baixar o arquivo zip da postagem do blog, ele será arrastado para o arquivo de fonte eleganticons.ttf para ser usado como uma fonte personalizada para o nosso módulo de botão.
  • A página inicial da Bed & Breakfast (disponível gratuitamente no Divi Builder)

Vamos começar!

Adicionando a fonte Elegant Icons ao seu módulo de botão

Adicione um módulo de botão

Para começar, crie uma nova página e implemente o construtor visual. Escolha "Gerar a partir do zero" e, depois que o gerador visual for implantado, adicione uma linha de coluna à seção e adicione um módulo de botão à linha.

adicione um botão divi builder.jpg

Arraste a fonte do ícone elegante

Para pegar o jogo de cores ElegantFontsvocê pode baixar este pacote de fontes através deste link. Extraia o conteúdo do arquivo zip e procure os elegantes arquivos de fonte de ícones, navegando até a classe elegant_font> CSS CSS>. Em seguida, arraste o arquivo "ElegantIcons.ttf" para o seu computador e solte-o no gerador visual.

extrair o arquivo zip divi.jpg

Isso fará com que o modal faça o download da fonte automaticamente. Basta clicar no botão de download para baixar a fonte para o Divi Builder.

colocar online divi.jpg

Agora você terá acesso à fonte de ícones elegante ao personalizar uma 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 fonte Elegant Icon que você acabou de baixar. Ele aparecerá na lista de ícones em "Fontes personalizadas".

botão font divi.jpg

Você pode notar que o texto do seu botão foi transformado em um monte de ícones. De fato, cada caractere inserido na caixa de texto do botão agora tem um ícone correspondente à letra / caractere atualmente usado.

uso do ícone button.jpg

Como só precisamos de um ícone para o nosso botão, você pode selecionar qualquer caractere no teclado para gerar o ícone associado a esse caractere. Por exemplo, insira o número 5 do texto do seu botão para obter uma seta divisa à direita.

ícone botão divi 5.jpg

Troca de ícones de botão no hover

Como você sabe, o módulo de botão inclui a opção de adicionar ícones ao passar o mouse. Podemos usar esse recurso para substituir a fonte do ícone pelo ícone de foco para obter um bom efeito de foco. Tudo o que precisamos fazer é alterar as configurações dos botões da seguinte maneira:

Texto do botão Tamanho: Ícone Botão 30px Ver imagem (este será o ícone que irá substituir a fonte ícone usado para o botão) de cor Ícone da tecla: # 0c71c3 (que deve combinar com a cor usada para o texto do botão ) Ícone do botão de posicionamento: Botão esquerdo Cor do texto do flyover: rgba (255,255,255,0) (isso é totalmente transparente para ocultar a fonte do ícone do botão suspenso). Preenchimento personalizado: 1em à esquerda, 1em à direita (esse preenchimento substituirá o hover expandido)

botão de personalização divi.jpg

Agora, tudo o que precisamos fazer é substituir a margem do item inicial no CSS personalizado. Vá para a guia Avançado e insira o seguinte código CSS na caixa antes de:

A margem esquerda: 0 ! Importante;

adicione uma margem de botão diiv.png

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Agora, o ícone do seu botão será substituído pelo ícone de sobrevoo.

botão de demonstração substituído em hover.gif

Criando botões de ícones com o círculo dimensionado com o tamanho do texto do botão

Os botões de círculo funcionam muito bem para botões de ícones únicos. E, se você entender o funcionamento interno do espaçamento do módulo de botão, poderá criar botões perfeitamente circulares que se ajustam ao tamanho do texto do botão.

O truque é espaciar seu botão usando a unidade de comprimento "em". Esta unidade de comprimento é relativa ao tamanho do texto do seu botão. Portanto, se o tamanho do texto do botão for 30px, 1em também vale 30px (2em valerá 60px e assim por diante ...). Sabendo disso, só precisamos garantir que nosso estofamento em torno do nosso botão será o mesmo em lados 4. Mas o que você pode não ter considerado é que a altura da linha do texto do botão é 1.7em por padrão. Isto significa que temos de levar isso em consideração quando somamos nossos valores de preenchimento superior e inferior.

Para aqueles de vocês que querem saber a matemática por trás dos valores de preenchimento necessários para criar botões de círculo, aqui estão:

Para preenchimento esquerdo e direito, defina ambos para 1em. Isso significa que a largura total do seu botão será 90px (ou 3em) porque ...

30px padding left + 30px para o ícone de fonte + 30px padding right = 90px total

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

Para preenchimento superior e inferior, defina ambos para 0,65em. 0.65em é o equivalente a 65% do tamanho do texto do botão (30px), que é equivalente a 19.5px.

Então ...

Preenchimento superior 19.5px + Altura da linha 51px + Preenchimento 19.5px inferior = 90px total

Isso significa que quando o texto do botão estiver definido como 30px, o tamanho total do botão será 90px no 90px (um quadrado perfeito). De fato, você pode pensar assim. Independentemente do tamanho do texto do botão, o tamanho total do botão é 3 vezes o valor. Assim, um texto de botão de 40 pixels irá criar um botão de 120 pixels por 120 pixels, etc.

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

Veja o que você precisa para alterar o botão para um botão de círculo:

Botão Raio da Borda: 50%
Estofamento personalizado: 0.65em superior, 0.65em inferior, 1em reto, 1em esquerdo

modificar um button.png

Lembre-se, você pode ajustar o tamanho do texto do botão e o botão ficará perfeitamente em círculo, como preencher o tamanho do texto.

personalize o tamanho do button.gif

Adicionando botões no Divi

O Divi facilita a adição e personalização de botões de ícones exclusivos para ajustar o design de qualquer layout predefinido.

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

Para adicionar o layout da página à sua página, abra o menu de configurações clicando no ícone roxo na parte inferior da página (verifique se o gerador visual está ativado). Em seguida, clique no ícone Carregar na 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.

selecione um layout divi.png

Adicionando um botão de ícone a uma imagem

Suponha que você queira adicionar um pequeno botão de ícone para sobrepor o canto de uma imagem a um CTA adicional vinculado a um determinado produto ou serviço. Tudo que você tem a fazer é adicionar um módulo de botão abaixo da imagem e personalizá-lo para incluir o ícone da fonte e assegurar que este último se sobrepõe a imagem com espaçamento personalizado.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

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

botão divi.png

Em seguida, abra as configurações do botão e coloque uma letra maiúscula "P" na caixa de texto do botão. Isso mudará em nosso ícone quando você selecionar incríveis jogos de segundo plano, como a fonte do botão.

texto do botão divi.png

Para começar a combinar rapidamente o design do botão com o layout, salve as configurações do botão e encontre o botão "Reservar agora" na parte superior do layout. Abra as configurações dos botões e copie os estilos dos botões clicando com o botão direito do mouse no título Alternar título e selecionando a opção "Copiar estilos dos botões" na lista.

Agora, clique com o botão direito do mouse no módulo que você adicionou abaixo da imagem e selecione "Colar estilo do botão".

cole o módulo style.jpg

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

Botão de fonte: fonte impressionante
botão de fonte Largura da borda: 0px
Mostrar ícone do botão: NÃO

Em seguida, adicione nosso inteligente preenchimento personalizado para que o botão seja um quadrado perfeito:

Preenchimento personalizado: 0.65em superior, 0.65em inferior, 1em esquerdo, 1em direito

botões de fonte de ícone

Para posicionar o botão de modo que ele cubra o canto inferior direito da imagem, você deve primeiro remover a margem inferior do módulo de imagem acima. Abra as configurações do módulo de imagem a partir da imagem diretamente acima do botão e defina a margem inferior como 0px.

customização do button.png

Agora, temos que puxar o botão na imagem usando um valor de margem negativo personalizado igual à altura do botão. Para fazer isso, devemos determinar a altura do nosso botão.

Como mencionado anteriormente neste artigo, com o preenchimento personalizado, podemos saber o tamanho exato do nosso botão com base no tamanho atual do texto do botão. 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 o nosso botão da seguinte maneira:

Margem personalizada: -60px Top

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

mudar o alinhamento de um botão divi.png

Agora que temos um design funcional para nossa imagem e nosso 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 aplicar essa alteração a todas as imagens da seção usando a opção Estender estilos. Clique com o botão direito na imagem e selecione "Estender Estilos de Imagem".

estender a imagem style.jpg

Na caixa de diálogo Estender estilos, selecione "Esta seção" para a opção e clique no botão Expandir. Agora todas as imagens têm uma margem menor de 0px.

O último passo é simplesmente copiar e colar os módulos Button sob cada imagem.

Aqui está o desenho final.

final design button divi.png

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

botão de visualização no mobile.png

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

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

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

lista de ícones disponíveis divi.png

Se você achar esta lista não exaustiva, você sempre pode usar um módulo de texto para criar links de ícones usando os códigos Unic listados aqui .

Últimos pensamentos

Usar ícones elegantes com o Divi Button Module é uma maneira conveniente de criar botões exclusivos para o seu site. Isso abre a porta para a criatividade com configurações de módulo para personalizar seu botão com estilos de texto exclusivos, efeitos de sobreposição e muito mais. Eu particularmente gosto dos valores de espaçamento de botões personalizados que garantem que os botões assumam a forma de um quadrado ou círculo perfeito.

Há toneladas de usos para botões de ícones. Espero que o exemplo de uso abordado neste tutorial adicione alguma inspiração aos seus próprios projetos.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
6 ações
ação4
chilrear
Enregistrer2
Whatsapp