Caixa de informações

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 Caixa de informações widget 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 um dos quatro layouts prontos 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 quatro 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 a variação um a quatro. 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.

Sob aqueles você encontrará um Documentos de ajuda link e a Link do invólucro opção (um recurso Pro) que torna todo o cartão clicável.

Escolha uma predefinição de estilo #

As quatro predefinições alteram todo o visual sem tocar no conteúdo, portanto, alternar entre elas é uma maneira rápida de encontrar o layout que se encaixa na seção.

• Variação Um: um cartão centralizado com o ícone, título e descrição empilhados, geralmente em um fundo preenchido.
• Variação Dois: um cartão delimitado com o ícone alinhado à esquerda acima do título.
• Variação Três: um cartão com o ícone definido em um bloco quadrado colorido acima do título.
• Variação Quatro: um layout centralizado com o ícone dentro de um emblema circular.

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 (uma opção Pro).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.

Perguntas frequentes #

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.