Ícones e texto, cada um por direito, têm pontos fortes e falhas que os tornam um par perfeito ao criar um site. Um ícone sozinho pode ser muito ambíguo, sem qualquer contexto ou significados fixos. O texto pode parecer sem graça e certamente não atrairá tanta atenção. Junte os dois e você terá o melhor dos dois mundos. Freqüentemente, você verá o emparelhamento ao listar recursos, serviços ou quaisquer outros elementos que precisam ser mostrados como distintos, mas como parte do grupo.
Esse emparelhamento é tão predominante que muitos temas premium vem com um shortcode para inserir rapidamente um ícone com texto como um elemento de design. Se o seu tema não mudar, não se preocupe. Graças a Complementos Qi para Elementor , a maior coleção da web de complementos Elementor gratuitos, você poderá para adicionar todos os ícones com texto que você precisa em nenhum momento. Tudo que você precisa é o Elementor e o widget Ícone com texto .
Precisa de inspiração para começar? Sem problemas. Aqui está um vídeo que mostra como você pode criar facilmente um grupo de ícones com texto igual ao que temos na página do widget:
Se você preferir ler sobre isso, este artigo o levará através das etapas que seguimos para criar uma bela exibição de ícones com texto. Esperançosamente, você usará o que leu aqui para criar alguns designs incríveis em seu próprio site!
Cobriremos:
Adicionando ícones com texto no WordPress Editando o conteúdo do ícone com texto Estilo do ícone com texto Toques finais Complementos Qi gratuitos Ver mais 
Adicionando ícones com texto no WordPress
A primeira etapa adicionar ícones com texto no WordPress usando o plugin Qi Addons for Elementor é baixar e instalar o Elementor . Como um dos principais criadores de páginas do mundo, você pode já tê-lo, mas se não tiver, basta baixá-lo e ativá-lo.
A próxima etapa seria baixar e ativar Complementos Qi para Elementor. Você pode fazer isso acessando Plug-ins> Adicionar novo , pesquisando por ele, instalando e ativando-o assim que o vir nos resultados.
Feito isso, a melhor maneira de se familiarizar com o widget seria navegar para uma página onde você pode considerar adicionar um ícone com texto e-chegar até ele. De nossa parte, criamos uma seção de três colunas porque acabamos criando três ícones com texto. Basta pesquisar o widget e arrastá-lo para a coluna mais à esquerda- nós teve nosso primeiro ícone com texto pronto para edição.
Editando o conteúdo do ícone com texto
A seção Conteúdo da opção de plug-in tem muitos de guias nele, mas não se preocupe-isso apenas significa que você será capaz de personalizar seu design até os mínimos detalhes. A primeira guia, Geral, é onde você pode ir para escolher o layout do ícone e do texto, se deseja adicionar um link para o ícone e algumas opções associadas.
Aqui também é onde você’Vou escolher o tipo de ícone que deseja usar, se deseja usar um separador ou não, bem como algumas regras de resposta da coluna. A primeira alteração que fizemos foi mudar para o layout Superior. Mudamos o ícone para o ícone Cog que estava incluído na biblioteca de ícones e estávamos prontos para prosseguir.
A guia Conteúdo é onde você pode alterar o bloco do texto em a coluna-ou removê-la completamente-bem como alterar o próprio texto e aplicar algumas opções de estilo limitadas. Você também terá a chance de escolher o alinhamento do texto.
O título que demos a este ícone e combinação de texto foi “Opções ilimitadas”. Mudamos o texto para “Centenas de fontes para escolher e opções para usar ícones personalizados ou SVGs.”
As guias Botão e Ícone de botão são onde você poderá escolha como você deseja que seu botão fique, quão grande ele deve ser, se deve ter um ícone e onde, como para qual link ele deve apontar.
A opção mais interessante nessas duas guias é o botão Opção de texto na guia Botão. Ao apagar o texto, você pode remover completamente o botão. É assim que fizemos.
As demais guias nas opções de Conteúdo tratam do separador e da animação exibida. Você poderá escolher o layout do separador, sua posição, imagem da borda e ícone. Você também terá a opção de alternar entre diferentes estilos de animação e definir seus atrasos.
Já que não usamos um separador na criação de nosso ícone com texto, e não queríamos incluir animação, não temos mais nada para mostrar a você na seção Conteúdo e podemos prosseguir para ver as opções de estilo.
Estilizando o ícone com texto
Ao definir o estilo do seu ícone com texto, a guia Estilo será a primeira a ser exibida. As opções que você encontrará lá permitem que você escolha a tag de título, a cor normal do título e a cor ao passar o mouse, bem como opções de tipografia de título, como fonte, tamanho e peso. Para o texto, você poderá escolher a cor e a opção de tipografia.
Fizemos algumas alterações mínimas nos padrões aqui. Alteramos a tag de título para H5, a cor do título para preto usando o código hexadecimal # 000000 e definimos o tamanho do título para 21 pixels.
No estilo de espaçamento guia, é tudo sobre como definir as margens. Você poderá escolher a margem superior do título, a margem superior do texto, a margem ao redor do ícone e, se você tiver um botão, a margem superior do botão.
Mais uma vez, optamos pelo mínimo mude aqui definindo a margem superior do título para 22 pixels.
Na guia Estilo do ícone, as opções que você verá variam muito se você deseja colocar seu ícone em uma caixa ou não. Se você fizer isso, poderá escolher uma variedade de opções de formato, tamanho e cor da caixa. Do contrário, você ficará limitado às opções que tratam do ícone em si-seu tamanho, cor e animação ao passar o mouse.
Optamos por não colocar nosso ícone no uma caixa. Porém, mudamos o tamanho do nosso ícone para 60 pixels e sua cor para #ecec. Ao pairar, demos a ele um leve movimento vertical.
As guias restantes permitem que você faça grandes coisas com a aparência e o estilo dos botões, ícones de botão, bordas, sublinhados, separadores e ícones separadores. Optamos por não usar qualquer um desses elementos em nosso design , mas se você escolher um caminho diferente, saiba que aqui você encontrará todas as opções de tamanho, cor, margem e foco que você precisa fazer os botões e separadores de seu ícone e texto aparecerem.
Toques finais
O toque final envolve a duplicação do design que criamos e fazendo algumas alterações nele. Essa capacidade de simplesmente duplicar um design com todas as suas opções é excelente depois de passar horas aperfeiçoando as configurações em um elemento e, em seguida, você precisa repeti-lo em alguns outros, mas com apenas pequenas alterações.
Para duplicar o desenho, clicamos com o botão direito sobre ele, escolhemos as opções de duplicação e fizemos isso mais uma vez. O Elementor empilhará essas duplicatas sob o original-simplesmente arraste-as para suas colunas.
O que resta a fazer é mudar os ícones, os títulos e o texto. Alteramos o ícone do meio para Marcador de mapa alt, seu título para “Totalmente ajustável” e seu texto para “Responsivo e otimizado para celular, este widget será uma estrela na página”. O terceiro tem uma tag para seu ícone, “Estilos flexíveis” para o título e “Escolha diferentes cores, estilos, animações de exibição e muito mais com este widget” para o texto.
Vamos embrulhar Up!
Graças aos Complementos Qi para Elementor, adicionar designs interessantes e úteis ao seu site, como o ícone com texto, pode ser fácil e interessante. Há uma variedade de opções à sua escolha-muitas mais do que as que exploramos nesta demonstração, e você deve se sentir à vontade para explorar todas e encontrar a melhor combinação de elementos que este complemento oferece.
