Ir para o conteúdo principal

Como adicionar funcionalidade com ícone caixas no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

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

Deseja adicionar uma caixa de recurso com um ícone na sua página inicial?

Esse recurso exibe informações importantes sobre seus produtos e serviços. Foi provado ser uma técnica envolvente na apresentação de produtos a clientes em potencial.

Neste tutorial, mostrarei como adicionar esse recurso ao seu blog WordPress.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog

Então, voltemos ao porquê de estarmos aqui.

featureboxes

Qual é a caixa de recursos com ícones?

A maioria das pessoas que visitam um site não o lê completamente. Como seres humanos, nos tornamos scanners profissionais.

Isso significa que, como proprietário de uma empresa on-line, você precisa apresentar informações importantes de uma maneira que seja simples o suficiente para analisar e interagir.

É por isso que a maioria dos sites corporativos geralmente oferece uma imagem no controle deslizante com um botão de call to action.

Logo abaixo, você pode usar uma caixa de recursos que permite exibir informações importantes sobre seus produtos e serviços. Cada caixa de recurso pode ter seu botão de call to action para permitir que os usuários aprendam mais.

Aqui está um exemplo concreto:como adicionar caixas de ícones do wordpress

Como adicionar uma caixa de recurso na página inicial do seu blog WordPress

A primeira coisa que você precisa fazer é instalar e ativar o plugin Colunas Avançada WP. Para mais detalhes, consulte o nosso guia em Como instalar ou adicionar um plugin no WordPress

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Depois de ativar o plug-in, você precisa acessar o " Configurações> Colunas WP avançadas Para configurar o plugin.

Basta rolar para baixo até a opção " Classe coluna E insira um texto como "minhascolunas" (Voltaremos). Não se esqueça de clicar no botão Salvar para salvar suas configurações.

colclass

Tudo o que você precisa fazer é adicionar ícones SVG às suas caixas de recursos. Para isso, convido você a instalar e ativar o plugin Ícones SVG WP.

Agora você está pronto para criar suas caixas de recursos. Você pode começar editando a página em que deseja que a caixa de recursos apareça.

Você observará duas novas opções no editor de artigos. O primeiro permite adicionar um ícone e ele está localizado acima da barra de ferramentas do editor. O segundo está localizado na barra de ferramentas do editor visual.

Se não conseguir ver esta opção, você deve estender os botões da barra de ferramentas.

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]

newbuttons

A primeira coisa que você precisa fazer é clicar no botão " Colunas Avançada WP" Isso exibirá um pop-up no qual você pode clicar "Vazio" e selecione o número de colunas que você deseja adicionar.

Criando colunasVocê pode clicar em cada área e adicionar o texto de sua escolha. Se você não adicionar texto agora, não poderá ver a diferença entre as colunas posteriormente. Quando terminar, clique no botão Adicionar Colunas No fundo.

Você notará que as colunas foram adicionadas ao editor visual. O próximo passo é adicionar ícones acima do texto.

Pegue o cursor e adicione-o ao início da caixa de texto e adicione uma nova quebra de linha. Isso adicionará um novo espaço onde você pode adicionar o ícone. Agora clique no botão Adicionar novo ícone", E você verá uma nova janela na qual poderá escolher um ícone.

addingicons

Nesta janela, você poderá selecionar o ícone que deseja adicionar. Em seguida, clique no botão "extensão" para que seu conteúdo seja adicionado ao elemento "<span>".

Por fim, clique no botão ícone insert"Você notará que o ícone SVG foi adicionado no editor. Dependendo do nome do ícone, o código de acesso ficará assim:

ícone [wp-svg-icons = "rocket" wrap = "span"]

Repita o processo todas as vezes nas outras caixas. Quando terminar, não esqueça de salvar suas configurações.

Você está pronto para concluir o trabalho, no entanto, se notar que os ícones são muito pequenos.

featureboxes-SmallIcons

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. [Recomendado]

Tudo o que você precisa fazer é adicionar um código CSS para corrigir o problema. Aqui está um exemplo de código CSS que você pode adicionar no arquivo de estilo do seu tema filho.

span.wp-svg-rocket.rocket {font-size: 100px; Span.wp-svg-cloud.cloud} {font-size: 100px; } Span.wp-svg-headphones.headphones {font-size: 100px; .mycolumns} {fronteira: #eee 1px sólido; min-altura: 250px; padding-top: 20px importante; }

Lembre-se de que a classe do ícone deve corresponder à que você adicionou. Nesse caso, usei os seguintes ícones: foguete, nuvem, fones de ouvido.

featureboxesfinal

Não esqueça que escrevemos um tutorial que permitirá que você melhore suas habilidades de CSS. Você também pode usar uma página de construtor mais avançada, como o Visual Composer, para a qual escrevemos um tutorial bastante detalhado.

É isso neste tutorial. Espero que ajude você a criar boas caixas de recursos em seu blog WordPress. Não hesite em propor este tutorial para seus amigos. Aproveito esta oportunidade para lhe desejar os melhores votos de toda a equipe do BlogPasCher.

Este artigo contém comentários 0

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
2 ações
ação
chilrear
Enregistrer2