Tudo o que você precisa saber sobre o módulo da lista de ícones do Divi 5

Uma das mais recentes atualizações do Divi 5 introduziu carrosséis e animações lottas, bem como algo que todo site pode usar: o novo módulo de lista de ícones. Em vez de pontos de bala simples, você pode criar listas estilizadas com ícones significativos que adicionam clareza e apelo visual.

Pense nos recursos em uma página de produto, etapas em um processo, serviços em uma tabela de preços ou até mesmo benefícios em uma página de destino. O módulo da lista de ícones torna tudo isso mais fácil de projetar e mais atraente para os visitantes.

Nesta postagem, abordaremos tudo o que você precisa saber sobre o módulo da lista de ícones, desde recursos até casos de uso prático, para que você possa atualizar suas listas e melhorar seus sites de divi.

Qual é o módulo da lista de ícones?

O módulo da lista de ícones no Divi 5 foi projetado para criar listas estruturadas e atraentes que melhoram o design do seu site. Ao permitir que você emparelhar cada item de lista com um ícone exclusivo, este módulo transforma o texto simples em conteúdo profissional e envolvente.

Antes do Divi 5, a criação de listas estilizadas no Divi exigia o texto de formatação ou os módulos de blurb, o que era menos eficiente. O módulo da lista de ícones preenche essa lacuna, oferecendo uma solução dedicada que é fácil de usar e altamente personalizável.

Principais recursos

O módulo da lista de ícones possui recursos que o tornam um ótimo complemento para o Divi 5. Aqui estão seus principais recursos:

Criação de lista fácil

Crie listas rapidamente adicionando itens e atribuindo ícones da extensa biblioteca de ícones da Divi ou carregando ícones personalizados. A interface intuitiva do módulo permite criar listas polidas em minutos, economizando tempo em comparação com a formatação manual.

Extensas opções de personalização

Escolha entre centenas de ícones embutidos, ajuste seu tamanho, cor e posicionamento para criar uma aparência coesa que se alinha ao design do seu site.

Aproveite as poderosas configurações de design da Divi para personalizar fontes, cores de texto, espaçamento, alinhamento e fundos. Você também pode adicionar efeitos ou animações para tornar suas listas mais interativas.

Como usar o módulo da lista de ícones

Introdução ao módulo da lista de ícones da Divi 5 é fácil. Crie uma nova página ou abra uma existente. Clique para adicionar um novo módulo e escolha a lista de ícones .

Depois de adicionar o módulo, você verá três itens da lista de ícones na guia Conteúdo. Vamos começar clicando no primeiro para editá -lo.

Na guia Conteúdo, insira um título no campo de texto .

Em seguida, expanda a guia suspensa do ícone. Aqui, você pode escolher entre centenas de ícones na Biblioteca Divi. Você pode procurar ícones ou rolar para encontrar o que você gostaria de usar.

O módulo de lista de ícones permite adicionar links a itens de lista individuais, facilitando o vinculação a outras páginas, anexos e muito mais.

A guia Design é onde você pode estilizar os itens da sua lista de ícones. No menu suspenso do ícone, atribua uma cor e tamanho do ícone.

Na guia em segundo plano, você pode atribuir ao seu ícone uma cor de fundo, adicionar uma borda ou caixa de caixa e ajustar o espaçamento.

Algumas outras opções incluem texto, onde você controla o alinhamento do texto ou adiciona uma sombra de texto. No entanto, para estilizar o texto, escolha o menu suspenso de texto do corpo. Você pode atribuir uma fonte, peso, estilo, alinhamento de texto, cor, tamanho e muito mais lá.

Como todos os outros módulos Divi, você pode controlar o dimensionamento, espaçamento, borda e sombras e adicionar filtros, transições ou animações.

Depois de denominar o primeiro item da lista de ícones, você pode copiá -lo facilmente, alterar o ícone e atualizar o texto.

Adicionando espaço entre os itens da lista de ícones

Na seção anterior, demonstramos como adicionar itens da lista de ícones. Nesta seção, revisaremos como ajustar as propriedades do layout usando o sistema de layout do Flexbox do Divi 5. Como você pode ver, poderíamos usar um pouco de espaço entre cada um de nossos itens da lista de ícones.

Nas configurações do módulo de listas de ícones principais, clique na guia Design. Localize o menu suspenso de layout e expanda -o para revelar as configurações.

Por padrão, o Flex é selecionado no estilo de layout. Isso permite que você use as configurações do Flexbox do Divi 5 para controlar o espaçamento, as direções do layout e o alinhamento. Para adicionar espaçamento entre cada item da lista de ícones, basta ajustar a lacuna vertical. Isso adiciona espaço para respirar entre cada item, dando à nossa lista mais apelo visual.

Configurações de design universal para todos os itens da lista de ícones

Além de estilar os itens da lista de ícones individualmente, você pode usar as configurações de design do módulo principal para adicionar estilos a cada item da lista de ícones de uma só vez. Por exemplo, se você deseja que todos os seus ícones tenham a mesma cor, texto ou estilos de fundo, poderá fazê -lo no nível do módulo.

Se você deseja estilizar itens de listar individualmente ou como um todo, o módulo da lista de ícones no Divi 5 fornece uma ótima maneira de mostrar informações de uma maneira mais amigável.

Exemplos práticos usando o módulo da lista de ícones

O módulo da lista de ícones é versátil e pode aprimorar diferentes áreas do seu site. Aqui estão alguns exemplos práticos para inspirar seus projetos.

Blogs de viagem

O módulo de lista de ícones oferece uma ótima maneira de criar conteúdo envolvente no seu blog de viagens. Você pode usá -lo para destacar categorias em seu blog, itinerários de viagem, dicas de embalagem ou destaques de destino. Além disso, você pode combinar efeitos de pairar e usar ícones diferentes para cada item da lista para apresentar informações de uma maneira clara e elegante.

Recursos em um site de negócios

Use o módulo da lista de ícones para mostrar os serviços da sua empresa. Atribua ícones relevantes e personalize as cores para combinar com sua marca. Você também pode adicionar links às páginas de serviço para facilitar a navegação.

Guia de processos passo a passo

Crie uma lista descrevendo as etapas de um processo, como "Como se inscrever". Use marcas de seleção para orientar visualmente os usuários em cada etapa, tornando as informações complexas mais digeríveis.

Páginas da loja de comércio eletrônico

Para sites de comércio eletrônico, use o módulo da lista de ícones para destacar os recursos da sua loja. Combine com os módulos Woo do Divi 5 para criar uma página de categoria de produto coesa.

Baixe os arquivos

Baixe gratuitamente

Junte -se ao boletim informativo Divi e enviaremos um e -mail para você uma cópia do pacote de layout da página de destino do Divi Ultimate, além de toneladas de outros recursos, dicas e truques incríveis e gratuitos. Siga adiante e você será um mestre em divi em pouco tempo. Se você já está inscrito, basta digitar seu endereço de e -mail abaixo e clique em Download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Verifique seu endereço de e -mail para confirmar sua assinatura e ter acesso a pacotes semanais de layout semanal gratuitos!

Use o módulo da lista de ícones no divi 5

O módulo de lista de ícones no Divi 5 oferece uma ótima maneira de criar listas elegantes e funcionais com pouco esforço. Sua facilidade de uso, opções de personalização robustas e integração perfeita com os novos recursos do Divi 5 o tornam um must-have para os usuários do DIVI. Esteja você destacando serviços, orientando os usuários por meio de um processo ou exibindo os recursos do produto, este módulo ajuda a fornecer resultados profissionais que envolvam seu público.

Pronto para experimentar? Faça o download do mais recente Divi 5 Public Alpha hoje e explore o módulo da lista de ícones você mesmo. Fique atento para mais atualizações do Divi 5, à medida que lançamos novos recursos.