Divi Design Showcase: novas inscrições de junho de 2020

Chegou a hora do nosso Divi Showcase mensal, onde damos uma olhada em dez incríveis sites Divi feitos por membros da nossa comunidade. A cada mês, apresentamos os melhores sites Divi que foram enviados por nossa comunidade e hoje queremos compartilhar com vocês os dez melhores sites do mês de junho. Ao longo da postagem, destacarei alguns dos meus recursos de design favoritos que me atraem para cada um dos sites.

Espero que você goste deles!

Divi Design Showcase: novas inscrições de junho de 2020

1. Preston sorri

Este site foi enviado por Christian Mauerer. A seção do herói exibe texto animado com um efeito de digitação usando uma fonte extravagante e um CTA de um lado e o assunto da imagem de fundo do outro. A rolagem revela um controle deslizante de logotipo mostrando a mídia na qual a empresa foi vista. Um CTA para livros exibe logotipos de lojas online no meio com setas apontando para as bordas externas com fotos dos livros. Os livros se movem em direção ao centro conforme você rola. Uma seção sobre o proprietário do site exibe uma grande foto à esquerda e informações à direita. A foto rola mais rápido conforme você rola a página para baixo para ver uma galeria de imagens que se sobrepõem. Várias seções incluem vídeos estilizados. Gosto especialmente da seção de depoimentos, que mostra uma grande imagem do proprietário, depoimentos do Facebook e fotos de eventos.

Visite o site

2. WebDevXd

Este site foi enviado por Steph do Web Dev Xd. Um CTA é exibido à esquerda com botões vermelhos sobre uma imagem de fundo de um mapa-múndi e uma sobreposição branca. Um menu de largura total fica sob esta seção e fica no topo conforme você rola. A próxima seção exibe um exemplo de trabalho em uma tela de computador de um lado e uma descrição do outro, cada um usando as cores vermelha e branca da marca. Os serviços são mostrados em sinopses com ícones vermelhos. A seção de projetos mostra as imagens empilhadas. As imagens diminuem o zoom e as imagens posteriores movem-se para os lados ao passar o mouse. Uma seção para entregas usa um fundo vermelho com sinopses exibindo texto e ícones em branco. O título fica verticalmente ao lado. O rodapé exibe um controle deslizante de postagem e vários widgets sobre um fundo vermelho.

Visite o site

3. Muni

Este site foi enviado por Lethicia Diniz. Ele usa as cores azul e verde e estilos de fonte que combinam perfeitamente com o gênero. O cabeçalho exibe botões empilhados para CTAs. A seção do herói inclui uma imagem de fundo com o assunto de um lado e grandes marcadores do outro. Os planos são mostrados como blocos de texto com fundos de cores diferentes que ampliam ao pairar. Eu gosto do CTA de tela inteira que é construído com camadas. Ele exibe uma foto de um lado, um título que cobre os segundos dois terços, uma lista de benefícios do outro lado e uma grande caixa que se sobrepõe às outras duas com um fundo azul e padrões com o próprio CTA. Um controle deslizante de depoimento é exibido com um padrão de fundo à direita. O rodapé exibe duas linhas. O primeiro contém CTAs para ler mais em cores e tamanhos diferentes, informações de contato e, em seguida, a linha inferior exibe widgets. As duas linhas são exibidas sobre um padrão de fundo de paralaxe.

Visite o site

4. SAMCARA

Este site foi enviado por Xavier Ferre. O menu de navegação é exibido verticalmente à esquerda e permanece na tela enquanto você rola. A seção hero exibe o título do site em fontes enormes, seguido por uma lista de serviços e um CTA de contato clicável de um lado e uma pequena imagem do outro. As informações são fornecidas em dois grandes cartões com diferentes cores de fundo e posições de imagem. Ambos se sobrepõem à próxima seção que exibe uma quadra de basquete estilizada maior vista de cima com um design semelhante às duas primeiras cartas. Mais cartões seguem este e são introduzidos com uma grande coluna de texto. Esta seção inclui um formulário de contato e uma lista de colaboradores. As postagens do blog são apresentadas com uma seta estilizada que se aproxima conforme você rola. A seção do blog também leva o leitor ao formulário de login.

Visite o site

5. Seguro Buffer

Este site foi enviado por Sean Turner. O site faz excelente uso de cores e imagens. A seção do herói exibe duas imagens de fundo. O lado maior tem uma sobreposição azul e o lado menor tem uma sobreposição verde. Uma imagem de primeiro plano é colocada onde as duas se encontram e é colocada sobre um fundo em forma de escudo. Um CTA é colocado do outro lado. O primeiro plano também inclui formas em padrões que aparecem em todo o site. A próxima seção exibe os serviços em grandes caixas com os mesmos designs. As próximas duas seções exibem sinopses altas de um lado e uma imagem do outro em um layout alternado sobre uma imagem de plano de fundo com sobreposições brancas ou azuis. As sinopses exibem marcadores. As imagens usam o mesmo escudo da seção do herói. Um controle deslizante de postagem de largura total mostra o título e o texto das postagens mais recentes. Também inclui um mega menu com links de texto.

Visite o site

6. Curlee

Este site foi enviado por Anthea A. Ancalade. A seção do herói exibe uma imagem de fundo em tela inteira com uma caixa de pesquisa no centro que permite selecionar um local ou usar seu local atual. Os serviços são exibidos com imagens que incluem títulos e sobreposições ao lado de um CTA. Os estilos apresentados são exibidos em um controle deslizante de 6 colunas e incluem imagem, título, classificação por estrelas e localização. O controle deslizante inclui navegação com setas e pontos. Clicar em um dos estilos leva você à página do produto. Novos estilos são exibidos em 6 colunas, mas sem o controle deslizante. A seção do blog exibe as duas postagens mais recentes e coloca uma linha abaixo das postagens com um link para ver mais abaixo da linha. Os tutoriais do blog são colocados em três colunas e seguem o mesmo design. Ele também inclui um feed do Instagram com 6 colunas e 2 linhas e um rodapé com um formulário de e-mail estilizado.

Visite o site

7. Typogenia

Este site foi enviado por Eugenia Janakow. Ele usa muito amarelo forte nos gráficos. Os títulos são criados como se tivessem sido feitos por uma etiquetadora, tornando os fundos pretos e o texto branco com uma aparência 3D. Um CTA é colocado no meio do menu. A seção do herói exibe uma tela dividida com um CTA à esquerda e uma imagem à direita. Um CTA usa um gráfico desenhado à mão que é animado ao rolar e pairar. As informações sobre o proprietário do site exibem uma imagem circulada com um CTA para ler mais. Gosto especialmente da seção de depoimentos. Ele exibe comentários do Google completos com classificações por estrelas e um gráfico clicável que o leva à página Sobre. Os serviços são exibidos em sinopses e incluem grandes gráficos desenhados à mão. O blog usa a marca amarela como meta e o formulário de contato a usa para o plano de fundo de toda a seção.

Visite o site

8. Bushcrafter

Este site foi enviado por Simone Talamo. A seção do herói exibe uma imagem em tela inteira com o assunto no centro. O primeiro plano exibe um slogan com um CTA e botões sociais. Várias seções de largura total seguem um design semelhante. Cada seção possui um separador irregular que funciona perfeitamente para o gênero. A próxima seção exibe imagens grandes para informações com texto e ícones na sobreposição. A maioria tem fundos escuros ou mescla-se com fundos escuros. Um para um manual exibe a capa do livro junto com o texto. As últimas postagens do blog exibem as postagens como cartões com sombras de caixa. O rodapé exibe produtos com seus nomes, imagens, avaliações com estrelas e preços. As páginas do curso seguem o mesmo design e incluem um cronômetro de contagem regressiva e alternadores estilizados.

Visite o site

9. KWALT Digital

Este site foi enviado por Nicolas Peigner. Este tem muitas animações interessantes, texto estilizado, gráficos e setas em todo o site. O amarelo é usado como a cor da marca e é usado de maneiras criativas. A seção do herói exibe o texto de um lado com um efeito de digitação. Uma barra fica embaixo dela e lista os serviços. No lado direito estão vários elementos gráficos independentes que pairam e respondem ao cursor. A próxima seção exibe um título com um gráfico animado de um lado e CTAs simples do outro. O trabalho mais recente segue isso e apresenta capturas de tela do trabalho sobre fundos de cores e padrões diferentes. Uma seção que explica os benefícios coloca sinopses de um lado com ícones de duas cores. Uma imagem fica do outro lado e leva o leitor às sinopses. Um controle deslizante de testemunho simples é colocado sobre um fundo cinza escuro para se destacar.

Visite o site

10. Exploruns

Este site foi enviado por Ava Charpentier. Ele usa muitos tons de bronzeado para as cores da marca. A barra superior desaparece na rolagem, o logotipo se sobrepõe ao cabeçalho e à seção do herói e o cabeçalho inclui animações flutuantes. A imagem principal exibe o título, a descrição e o botão para fazer um pedido. Outra imagem é colocada como uma janela na imagem do herói em verdadeira paralaxe. As informações são exibidas com sinopses com gráficos personalizados. Os produtos são mostrados com uma cor de fundo atrás da parte superior da imagem do produto. Um design de plano de fundo semelhante é usado para a seção do blog. Um CTA para ler sobre a empresa exibe um texto de um lado e uma imagem do outro. Os depoimentos são apresentados como cartões com a citação na parte superior com fundo branco e o nome na parte inferior com fundo bege. O site também inclui um feed do Instagram e um rodapé personalizado com animação flutuante.

Visite o site

No Fechamento

Estas são as nossas 10 melhores inscrições para o site da comunidade Divi no mês de junho. Esses sites estão incríveis e, como sempre, queremos agradecer a todos por seus envios!

Se você gostaria que seu próprio design fosse considerado, por favor, sinta-se à vontade para enviar um e-mail para nosso editor em nathan em elegant themes dot com. Certifique-se de deixar o assunto do e-mail “DIVI SITE SUBMISSION”.

Também gostaríamos de ouvir de você nos comentários! Conte-nos o que você gosta nesses sites e se há algo que eles fizeram que você gostaria que ensinássemos no blog.

Imagem em destaque via domonku / shutterstock.com