Como definir um tamanho para o ícone do botãoElementor ? Neste tutorial, mostraremos como conseguir isso com CSS personalizado
Todos devem ficar felizes se tiverem liberdade/flexibilidade para criar algo, porque mais flexibilidade significa mais produtividade. Falando em flexibilidade, neste artigo mostraremos como definir o tamanho personalizado no ícone do botão. Elementor.
Discover Como instalar o Elementor no WordPress
Por padrão, o widget de botão Elementor pode personalizar o tamanho do ícone. Mas esta escolha está limitada a cinco tamanhos de opções fixas (extrapequeno, pequeno, médio, grande e extragrande). Não se limita apenas a cinco opções selecionadas, mas a configuração não é individual. Isso significa que quando você quiser definir o tamanho, isso impactará dois elementos do botão (ícone e texto).
Talvez você esteja se perguntando: “É possível definir o tamanho personalizado para o ícone do botão Elementor? ”. Bem, tudo é possível com o Elementor. Sem a ajuda de complementos, você pode fazer isso facilmente.
Como definir o tamanho do ícone personalizado do botão Elementor
Antes de iniciar este tutorial, queremos informar que este tutorial funcionará com o CSS personalizado do Elementor. A funcionalidade CSS personalizada só está disponível em Elementor Pro.
Bem, vamos começar!
Vá para o seu editor Elementor. Vamos começar tudo do zero, então crie uma seção com apenas uma coluna. Em seguida, selecione o widget de botão no painel de widgets, arraste e solte-o na área de edição.
Leia também: Elementor: como criar formas personalizadas
Depois de adicionar o widget de botão, você pode editar e estilizar o widget de acordo com suas preferências. Como adicionar um ícone, cor de fundo do texto, etc….
Como você pode ver na imagem acima, os tamanhos do ícone e do texto são os mesmos. Quando você deseja alterar o tamanho do ícone apenas configurando-o na opção Tamanho das configurações do widget, isso também afetará o texto.
Ok, agora vamos resolver este problema. Nas configurações do widget, navegue até a guia avançado -> CSS personalizado.
Copie o snippet CSS abaixo e cole-o no campo CSS personalizado.
selector .elementor-button-icon { font-size:100px; color: inherit;
}
selector .elementor-button-text {margin:auto;}
Você pode personalizar o tamanho do ícone alterando o valor do snippet CSS (veja a imagem abaixo).
Lá!. Não se esqueça de salvar ou publicar seu projeto, se desejar.
Obtenha o Elementor Pro agora !!!
Conclusão
Este artigo mostra como definir o tamanho personalizado do ícone do botão Elementor usando CSS personalizado. Mas, se você quiser uma maneira mais fácil de personalizar o tamanho do ícone do botão porque não gosta de trabalhar com códigos, sugerimos usar um Elementor add-on.
O complemento Elementor que recomendamos é JetElements por Crocoblock. JetElements tem mais de 40 widgets Elementor. Você encontrará um widget de botão que permite personalizar o tamanho do ícone do botão.
Com o widget Bouton da JetElements, personalizar o tamanho do ícone do botão é muito simples e transparente.
Então ! É isso para este artigo que mostra como definir um tamanho para o ícone do botão do Elementor. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
