Neste novo tutorial, mostraremos como criar um botão multilinha com ícone em Elementor.
Deve-se notar que você não precisará de nenhum plugin adicional para fazer isso. A versão Elementor Pro lhe dará tudo o que você precisa para chegar lá
Para ter uma ideia do que faremos neste tutorial, o vídeo a seguir mostrará uma prévia do que faremos juntos.
Agora vamos trabalhar.
Descubra também Como criar uma página personalizada para WooCommerce em Ele.mentor
Vamos criar uma nova seção escolhendo aquela com uma coluna.
Em seguida, no painel lateral, vamos selecionar Altura Mínima para o hauteur e Altura mínima vamos clicar em VH e defina o controle deslizante para 100.
Agora arraste o Widget de botão em nossa área de trabalho
Na aba Conteúdo na barra lateral, vamos mudar o campo texto inserindo Baixe na App Storeem seguida, no alignement vamos clicar em Centro
Em seguida, clique no botão da biblioteca de ícones, digite apple na barra de pesquisa, selecione o ícone de seu interesse e clique no botão inserir.
De volta à barra lateral, vamos alterar o espaçamento entre ícones para 14
Leia também: Como criar um cartão de efeito a partir de um portfólio em Elementor
Na aba Style, vamos modificar o cor de fundo botão ligado Preto
Vamos mudá-lo Tamanho tipografia em 25
em raio da borda, vamos pegar 20 para todos os raios de borda. Para o margens internas, vamos pegar 14-36-14-36 para as margens Cima, Direita, Baixo e Esquerda.
Veja também: Como alterar a imagem com o clique de um botão em Elementor
Agora vamos para a aba Conteúdo e vamos transformar o texto do botão em duas linhas.
Para fazer isso, copie e cole o seguinte código no campo de texto:
<span class="top-small-text">TEXTE DE PREMIERE LIGNE</span> <br> TEXTE DE DEUXIEME LIGNE
Vamos então alterar o texto TEXTO DE PRIMEIRA LINHA para Baixar em e o texto do TEXTO DA SEGUNDA LINHA em app Store
Agora precisamos ter mais controle sobre a primeira e a segunda linha
Para fazer isso, vamos para a guia avançado então na seção CSS customizado, copie e cole o seguinte código:
selector .elementor-button-icon{
font-size: 62px;
}
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
NOTA: Se você não tiver esta seção, deverá atualizar rapidamente para a versão Pro.
Então, para personalizar seu botão o suficiente, você pode, por exemplo, aumentar o ícone modificando o valor de font-size da seção de código:
selector .elementor-button-icon{
font-size: 62px;
}
Leia também: Como exportar e importar modelos Elementor
Para personalizar a cor da primeira linha basta alterar o valor de color e se você quiser alterar o valor do tamanho da fonte, você deve alterar o font-size da seguinte seção de código:
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
E aqui você acabou de criar um botão de várias linhas com ícone. Você pode visualizá-lo.
Obtenha o Elementor Pro agora !!!
Conclusão
Então ! Isso é tudo neste artigo que mostra como criar um botão multilinha com ícone no Elementor. Se você tiver alguma dúvida sobre como chegar lá, adoraríamos ouvi-lo no 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.
...
