Projete uma seção de recurso exclusivo em Divi com ícones animados por contadores de círculo

A maioria dos sites precisa de uma seção de recursos bem projetada para exibir os recursos de produtos ou serviços. Portanto, neste tutorial, mostrarei como criar uma seção de recurso exclusiva no Divi. Para fazer isso, vamos ser um pouco criativos com o módulo Contador de círculo do Divi para adicionar animação aos ícones do blurb. E usando um espaçamento personalizado, mostrarei como você pode posicionar facilmente suas sinopses para coincidir bem com um fundo divisor. O design final é limpo e exclusivo. E com alguns pequenos toques, pode ser um ótimo complemento para seu próximo projeto.

Vamos começar!

Espiada

Aqui está uma pequena amostra do design e do GIF para ajudar a ilustrar o elemento de animação.

Criação de uma nova página e implantação do Visual Builder

Para começar, vá para o painel do WordPress e vá para Páginas> Adicionar novo. Em seguida, dê um título à página e clique para usar o Divi Builder. Em seguida, clique em para usar o Visual Builder. Você verá três opções. Escolha a opção “Construir do zero”.

Sua tela em branco o aguarda!

Criando o Cabeçalho da Seção de Característica

O cabeçalho superior de sua seção de recursos é bastante simples. O elemento único é a sombra de caixa sutil exibida abaixo para dar um pouco de profundidade ao design.

Para criá-lo, insira uma linha de uma coluna em sua seção regular.

Em seguida, adicione um módulo de texto à linha e atualize as configurações da seguinte maneira:

Contente:

<h1>Our Features</h2>
Everything you need.

Fonte do texto: Montserrat
Peso da Fonte do Texto: Semi Negrito
Tamanho do texto do texto: 22px
Orientação do Texto: Centro
Peso da fonte do cabeçalho: Ultra negrito
Tamanho do texto do título: 6vw (desktop), 50px (tablet), 30px (smartphone)

Agora salve suas configurações e vá para as configurações de seção e adicione uma sombra de caixa da seguinte maneira:

Sombra da caixa: veja a imagem
Posição vertical da sombra da caixa: 19 px
Força do desfoque de sombra da caixa: 80 px
Força de propagação da sombra da caixa: -16px
Cor da sombra: rgba (136,150,171,0,13)

Salvar configurações.

Coisas muito simples. Agora vamos para a parte divertida.

Criando a seção de recurso principal e o design do plano de fundo

Precisamos adicionar uma nova seção para manter nossos recursos. Normalmente, você seria capaz de simplesmente adicionar uma nova linha à seção anterior, mas, neste caso, precisamos adicionar um fundo Divider que está disponível no elemento Section.

Vá em frente e adicione uma nova seção diretamente abaixo da seção que acabou de terminar. Em seguida, adicione um layout de quatro colunas à linha.

Estaremos adicionando sinopses a essas colunas, mas por enquanto vamos atualizar nossas configurações de seção.

Para esta seção, precisamos dar a ele uma largura máxima personalizada. Isso é importante para manter o design no lugar em navegadores maiores. Também precisamos adicionar um divisor de seção para servir de plano de fundo que coincide com a disposição de nossas sinopses (mais sobre isso mais tarde).

Vá para as configurações da seção e atualize o seguinte:

Largura: 1080px
Alinhamento de Seção: Centro
Divisores: Top
Estilo do divisor: veja a captura de tela
Cor do divisor: rgba (136,150,171,0,07)
Altura do divisor: 52%

Salvar configurações.

Dar à seção uma largura personalizada (ou largura máxima) de 1080px é basicamente como suas linhas são configuradas por padrão dentro de uma seção. Então, essencialmente, estamos tornando nossa seção inteira do tamanho de uma linha padrão.

Adicionando Blurbs à linha de quatro colunas

Neste ponto, podemos prosseguir e começar a adicionar nossas sinopses a cada uma das quatro colunas. Clique no ícone cinza na primeira coluna para adicionar sua primeira sinopse. Atualize o conteúdo na caixa para incluir menos texto (2 frases) e, em seguida, opte por usar um ícone em vez de uma imagem (escolhi o ícone de imagem).

Na guia de design, atualize o seguinte:

Cor do ícone: # 974450
Ícone de círculo: SIM
Cor do círculo: rgba (255,255,255,0,5)
Use o tamanho da fonte do ícone: SIM
Tamanho da fonte do ícone: 48 px
Orientação do Texto: Centro

Salvar configurações.

Agora copie e cole o módulo de sinopse em cada uma das colunas restantes para que você tenha uma sinopse em cada coluna.

Você pode voltar e atualizar os ícones se quiser neste ponto, mas não é necessário.

Adicionar contadores de círculo para sobrepor os ícones do Blurb

Para adicionar a animação aos nossos ícones de sinopse, vamos sobrepor cada ícone com um contador de círculo que tem um valor numérico diferente. Isso fará com que a animação do círculo aumente gradualmente com cada ícone para mostrar a progressão. No entanto, você pode usar qualquer valor nubmer que desejar com cada contador de círculo.

Clique no ícone cinza “Adicionar novo módulo” sob o módulo de sinopse na primeira coluna e, em seguida, adicione o módulo do contador.

Antes de começar a editar as configurações do módulo de círculo, vá em frente e arraste-o acima do módulo de sinopse. Agora você pode atualizar as configurações de conteúdo da seguinte maneira:

Exclua o texto na caixa do título
Número: 25

Em seguida, atualize as configurações da guia de design da seguinte maneira:

Cor de fundo da barra: # 974450 (mesma cor dos ícones do blurb)
Cor do texto do número: rgba (0,0,0,0) (completamente transparente para que oculte o número)
Tamanho do texto numérico: 0 px (para eliminar qualquer espaço de texto indesejado dentro do círculo)
Largura: 109px (isso foi definido com base no tamanho do ícone que se sobrepõe)
Alinhamento do Módulo: Centro
Margem inferior: -102 px (sobreporá perfeitamente o ícone)

Salvar configurações.

Agora tudo o que você precisa fazer é copiar e colar o módulo do contador de círculos em cada uma das colunas restantes e, em seguida, arrastá-lo para o topo de cada sinopse. Depois que os contadores de círculo duplicados estiverem no lugar, atualize o segundo número do contador de círculo para 50, o terceiro número do contador para 75 e o quarto número do contador para 100. O resultado deve ficar assim após a conclusão da animação.

Use o preenchimento de linha para posicionar os ícones para coincidir com o divisor

A última etapa deste projeto é posicionar os ícones para coincidir com o arco do fundo divisor. Para fazer isso, precisamos adicionar algum preenchimento personalizado na linha. Abra as configurações de linha e atualize o seguinte:

Tornar esta linha com largura total: SIM
Preenchimento personalizado da coluna 2: 9% superior (desktop), 0% superior (tablet)
Coluna 3 Preenchimento personalizado: 9% superior (desktop), 0% superior (tablet)

É isso!

Confira o resultado final.

Observe como os ícones agora são animados pelo contador de círculo com valores numéricos variados. E os ícones coincidem com o fundo divisor.

Como a seção de recursos se parece no celular

Aqui está uma olhada em como o design fica em telas de tablets e smartphones.

Pensamentos finais

Os elementos exclusivos deste design de seção de recursos são leves e sutis, o que deve facilitar a incorporação em seus próprios layouts com alguns pequenos ajustes. E se as animações do contador de círculo não são do seu agrado, fique à vontade para deixá-las de fora e simplesmente usar o ícone de círculo do módulo de sinopse. Ou você pode escolher usar apenas os contadores de círculo com os valores numéricos visíveis para um layout criativo para apresentar estatísticas. Espero que isso lhe dê algumas idéias para explorar por conta própria.

Estou ansioso para ouvir de você nos comentários.

Saúde!