Quase todas as páginas acabam precisando de uma linha de pequenos cartões que emparelham um ícone com um título curto e uma linha de texto Recursos, serviços, etapas, detalhes de contato, todos da mesma forma O gratuito Widget de caixa de informações em Complementos Mestres para Elementor constrói esse cartão Você escolhe um ícone ou imagem, digita um título e uma descrição, escolhe uma predefinição de estilo (cinco são gratuitos, dez com Pro) e estiliza cada parte do painel Elementor.
É um daqueles widgets que você acaba alcançando constantemente, já que um ícone, um título e uma frase cobrem tantas seções de um site Abaixo está um passeio por cada configuração, desde as predefinições de estilo até os controles de ícone, título e descrição.
O que o widget Info Box faz #
Uma caixa de informações empilha um ícone ou imagem em cima de um título e uma breve descrição As predefinições de estilo significam que o mesmo conteúdo pode parecer um cartão preenchido, um cartão delimitado ou um bloco centralizado limpo, e você pode alinhar vários lado a lado para fazer uma linha de recursos.
O título pode vincular em qualquer lugar, o ícone pode ser trocado por uma imagem carregada e o cartão pode carregar sua própria animação de fundo, borda e hover Existem três guias: Conteúdo para o ícone, título e texto, Estilo para cores e espaçamento e Avançado para as opções usuais do Elementor.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- Um ícone em mente, ou uma imagem para carregar, mais o texto do título e da descrição.
Como adicionar o widget Info Box #
No editor Elementor, abra o Elementos painel e pesquisa Caixa de informações, ou vá até a seção Master Addons. arraste-o para sua página Ele carrega com um ícone de amostra, um título “Infobox,” e uma descrição de espaço reservado, para que você comece com um cartão de trabalho em vez de um em branco.
Configure o conteúdo #
Abrir o Conteúdo guia. O Conteúdo seção detém tudo o que o cartão mostra, e é onde a maior parte da sua edição acontece.
- Predefinição de estilo: escolha Variação Um a Cinco no plugin gratuito ou Seis a Dez com Master Addons Pro. Cada um apresenta o ícone, o título e a descrição de maneira diferente (mais sobre estes abaixo).
- Imagem ou Ícone: um alternador de três vias para Nenhum, Ícone ou Imagem Escolha Ícone para usar a biblioteca de ícones ou Imagem para fazer upload da sua própria.
- Ícone: quando o ícone estiver selecionado, escolha qualquer ícone da biblioteca Font Awesome ou carregue um SVG.
- Título: o texto do título, com uma opção Escrever com IA ao lado.
- URL do título: transforme o título em um link para qualquer página ou URL externo.
- Descrição: a ou duas linhas de texto sob o título, também com Escrever com IA.
- Leia mais Texto e leia mais Link: estes aparecem apenas com a Variação Seis, que precisa de Pro.
Sob aqueles você encontrará um Documentos de ajuda link e a Link do invólucro seção do gratuito Extensão do link Wrapper isso torna todo o cartão clicável.
Escolha uma predefinição de estilo #
As predefinições alteram todo o visual sem tocar no seu conteúdo, portanto, alternar entre elas é uma maneira rápida de encontrar o layout que se encaixa na seção.
- Variação Um a Cinco (gratuita): cada um organiza o ícone, o título e a descrição de forma diferente A variação Dois e Três adicionam uma grande cópia desbotada do ícone atrás do cartão, e a variação Cinco define o ícone em forma de hexágono.
- Variação Seis a Dez (Pro): mais cinco layouts A Variação Seis adiciona o botão Ler Mais e uma opção de fundo de ícone gradiente.
Usar uma imagem em vez de um ícone #
Se uma foto ou logotipo se encaixa melhor do que um ícone, defina Imagem ou Ícone para Imagem e escolha um arquivo da Biblioteca de Mídia O widget então mostra sua imagem no slot de ícones, que funciona bem para logotipos de parceiros, miniaturas de produtos ou cartões de recursos ilustrados Defina-o de volta para Nenhum quando você deseja uma caixa somente de texto.
Estilo a caixa #
O Estilo a guia é dividida em Estilos Gerais, Estilo Ícone, Título, Descrição, e Padrões (a partir da extensão Patterns gratuita).Estilos Gerais controla o próprio recipiente do cartão.
- Tipo, largura e cor da borda: o contorno em torno do cartão.
- Raio Fronteiriço: contornar os cantos.
- Preenchimento e margem: espaçamento dentro e ao redor da caixa.
- Antecedentes: defina um fundo Normal e um Hover, seja uma cor sólida ou uma imagem.
- Animação Hover: adicione um efeito de movimento integrado como Bob ou Grow quando alguém passar o cartão.
Estilo de ícone, título e descrição #
O Estilo Ícone a seção define o tamanho, a cor e o plano de fundo do ícone, com estados normais e de pairar separados, além de alinhamento.
O Título e Descrição as seções lidam com tipografia, cor, alinhamento e espaçamento para o texto Cada uma tem seus próprios estados Normal e Hover, para que o cartão possa mudar à medida que os visitantes se movem sobre ele.
Opções de cores e imagens de fundo #
De volta aos estilos gerais, o Fundo o controle assume um sólido Cor ou um Imagem. Um fundo colorido com texto branco, como o cartão “About Us” preenchido, é uma maneira fácil de fazer uma caixa se destacar em uma fileira de caixas simples.
O resultado na página #
Publique ou visualize e as caixas sejam renderizadas com seus ícones, títulos e descrições no lugar Aqui está uma linha de três caixas de informações, cada uma em uma predefinição de estilo diferente, o tipo de layout que se encaixa em uma seção de recursos ou serviços.
Casos de uso comum #
- Destaques destaque em uma linha de três ou quatro colunas sob o herói.
- Serviços ou ofertas cada um com um ícone e um resumo de uma linha.
- Etapas de como funciona com um ícone numerado ou temático por passo.
- Detalhes contato como telefone, e-mail e endereço como caixas vinculadas.
- Sobre ou chamadas de equipe usando a predefinição de fundo preenchida para se destacar.
Dicas para trabalhar com o widget Info Box #
- Mantenha as descrições curtas. Uma ou duas linhas são as melhores lidas e mantêm uma fileira de cartas uniforme.
- Combine os tamanhos dos ícones em uma linha. Defina o mesmo Tamanho do Ícone em cada caixa para que eles se alinhem Isso é o que geralmente fica fora quando as cartas não combinam bem.
- Use uma predefinição por linha. Misturar predefinições na mesma linha tende a parecer irregular; em vez disso, alterne a cor de fundo quando quiser destacar uma.
- Vincule o título ou o invólucro. Envie pessoas para algum lugar útil com o URL do título ou torne todo o cartão clicável com o Wrapper Link.
- Adicione uma animação de hover sutil. Um pequeno Bob ou Grow on hover sinaliza que o cartão é interativo sem atrapalhar.
Para predefinições, demonstrações e uma comparação com a Elementor Icon Box, consulte o Página do widget da caixa de informações.
Perguntas frequentes #
O que é o widget Info Box em Master Addons?
É um widget Elementor que combina um ícone ou imagem, um título e uma breve descrição em um cartão de estilo Você obtém cinco predefinições de estilo livre (dez com Pro) e controle sobre cores, espaçamento e efeitos de hover, para que você possa construir linhas de recursos, listas de serviços e chamadas diretamente do painel.
Quantas predefinições de estilo a Info Box possui?
Dez. variação Um a Cinco são gratuitos, e Variação Seis a Dez precisam Master Addons Pro. Cada um organiza e decora o ícone, título e descrição de forma diferente Você alternar entre eles a partir do dropdown Predefinição de estilo sem refazer o seu conteúdo.
Posso usar uma imagem em vez de um ícone?
Sim. na guia Conteúdo, defina Imagem ou Ícone para Imagem e escolha um arquivo da Biblioteca de Mídia O widget mostra sua imagem no lugar do ícone, que funciona bem para logotipos, fotos de produtos ou cartões ilustrados Escolha Nenhum para uma caixa somente de texto.
Posso fazer a caixa de informações clicável?
Você pode vincular o título com o campo URL do título na guia Conteúdo Para tornar todo o cartão clicável, use a opção Wrapper Link, da extensão gratuita Wrapper Link Ambos permitem que os visitantes toquem na caixa para chegar a outra página ou seção.
Posso adicionar um efeito hover à caixa de informações?
Sim. Estilos Gerais tem um dropdown de Animação Hover com efeitos embutidos como Bob e Grow, e as seções Ícone, Título e Descrição cada um tem seus próprios estados Hover para cor e fundo Juntos eles deixam a carta reagir quando alguém se move sobre ela.
Embrulhando #
O widget Caixa de informações transforma um ícone, um título e uma frase em um cartão limpo que você pode repetir em qualquer seção Escolha uma predefinição, escolha um ícone ou imagem, adicione seu texto e links e, em seguida, estilize a caixa para combinar com sua página Para ferramentas de layout relacionadas, consulte o Widget flipbox e o Widget de membro da equipe, navegue por completo Widgets e extensões Master Addons, e verifique o página preços para o que cada plano inclui.
