Divi Design Showcase : nouvelles soumissions à partir de juin 2020

C'est à nouveau l'heure de notre Divi Showcase mensuel, où nous jetons un coup d'œil à dix sites Web Divi incroyables créés par les membres de notre communauté. Chaque mois, nous présentons les meilleurs sites Web Divi qui ont été soumis par notre communauté et nous souhaitons aujourd'hui partager avec vous les dix meilleurs sites Web du mois de juin. Tout au long de cet article, je soulignerai certaines de mes caractéristiques de conception préférées qui m'attirent vers chacun des sites Web.

J'espère que tu les aimes!

Divi Design Showcase : nouvelles soumissions à partir de juin 2020

1. Preston sourit

Ce site a été soumis par Christian Mauerer. La section des héros affiche du texte animé avec un effet de frappe utilisant une police sophistiquée et un CTA d'un côté et le sujet de l'image d'arrière-plan de l'autre. Le défilement révèle un curseur de logo montrant les médias dans lesquels l'entreprise a été vue. Un CTA pour les livres affiche les logos des magasins en ligne au milieu avec des flèches pointant vers les bords extérieurs avec des photos des livres. Les livres se déplacent vers le centre au fur et à mesure que vous faites défiler. Une section sur le propriétaire du site affiche une grande photo sur la gauche et des informations sur la droite. La photo défile plus rapidement lorsque vous faites défiler la page pour voir une galerie d'images qui se chevauchent. Plusieurs sections incluent des vidéos stylisées. J'aime particulièrement la section témoignages, qui montre une grande image du propriétaire, des témoignages de Facebook et des photos d'événements.

Visitez le site Web

2. WebDevXd

Ce site a été soumis par Steph de Web Dev Xd. Un CTA s'affiche sur la gauche avec des boutons rouges sur une image d'arrière-plan d'une carte du monde et une superposition blanche. Un menu pleine largeur se trouve sous cette section et reste en haut lorsque vous faites défiler. La section suivante affiche un exemple de travail sur un écran d'ordinateur d'un côté et une description de l'autre, chacune utilisant les couleurs rouge et blanche de la marque. Les services sont affichés dans des textes de présentation avec des icônes rouges. La section des projets montre des images qui sont empilées. Les images font un zoom arrière et les images à l'arrière se déplacent sur les côtés en survol. Une section pour les livrables utilise un arrière-plan rouge avec des textes de présentation affichant du texte et des icônes en blanc. Le titre se trouve verticalement sur le côté. Le pied de page affiche un curseur de publication et plusieurs widgets sur un fond rouge.

Visitez le site Web

3. Munis

Ce site a été soumis par Lethicia Diniz. Il utilise des couleurs bleues et vertes et des styles de police qui correspondent parfaitement au genre. L'en-tête affiche des boutons empilés pour les CTA. La section des héros comprend une image d'arrière-plan avec le sujet d'un côté et de grandes puces de l'autre. Les plans sont affichés sous forme de blocs de texte avec des arrière-plans de couleurs différentes qui zooment au survol. J'aime le CTA plein écran construit avec des calques. Il affiche une photo d'un côté, un titre qui couvre les deux tiers, une liste des avantages de l'autre côté et une grande case qui chevauche les deux autres avec un fond bleu et des motifs avec le CTA lui-même. Un curseur de témoignage s'affiche avec un motif d'arrière-plan à l'extrême droite. Le pied de page affiche deux lignes. Le premier contient des CTA pour en savoir plus, de différentes couleurs et tailles, des informations de contact, puis la rangée du bas affiche des widgets. Les deux lignes s'affichent sur un motif de fond de parallaxe.

Visitez le site Web

4. SAMCARA

Ce site a été proposé par Xavier Ferré. Le menu de navigation s'affiche verticalement sur la gauche et reste à l'écran pendant que vous faites défiler. La section héros affiche le titre du site dans d'énormes polices, suivi d'une liste de services et d'un CTA de contact cliquable d'un côté et d'une petite image de l'autre. Les informations sont fournies dans deux grandes cartes avec des couleurs d'arrière-plan et des positions d'image différentes. Les deux chevauchent la section suivante qui affiche un terrain de basket stylisé plus grand d'en haut avec un design similaire à celui des deux premières cartes. D'autres cartes suivent et sont introduites avec une grande colonne de texte. Cette section comprend un formulaire de contact et une liste de collaborateurs. Les articles de blog sont introduits avec une flèche stylisée qui se met en place lorsque vous faites défiler. La section blog conduit également le lecteur vers le formulaire de connexion.

Visitez le site Web

5. Assurance tampon

Ce site a été soumis par Sean Turner. Le site fait un excellent usage de la couleur et des images. La section héros affiche deux images d'arrière-plan. Le plus grand côté a une superposition bleue et le petit côté a une superposition verte. Une image de premier plan est placée là où les deux se rencontrent et est placée sur un arrière-plan en forme de bouclier. Un CTA est placé de l'autre côté. Le premier plan comprend également des formes dans des motifs qui apparaissent dans tout le site. La section suivante affiche les services dans de grandes cases avec les mêmes conceptions. Les deux sections suivantes affichent de grands textes de présentation d'un côté et une image de l'autre dans une disposition alternée sur une image d'arrière-plan avec des superpositions blanches ou bleues. Les textes de présentation affichent des puces. Les images utilisent le même bouclier que la section héros. Un curseur de publication pleine largeur affiche le titre et le texte des publications les plus récentes. Il comprend également un méga menu avec des liens texte.

Visitez le site Web

6. Curli

Ce site a été soumis par Anthea A. Ancalade. La section héros affiche une image d'arrière-plan en plein écran avec une zone de recherche au centre qui vous permet de sélectionner un emplacement ou d'utiliser votre emplacement actuel. Les services sont affichés avec des images qui incluent des titres et des superpositions à côté d'un CTA. Les styles présentés sont affichés dans un curseur à 6 colonnes et incluent une image, un titre, un classement par étoiles et un emplacement. Le curseur comprend à la fois la navigation par flèches et par points. En cliquant sur l'un des styles, vous accédez à sa page de produit. Les nouveaux styles sont affichés dans 6 colonnes, mais sans le curseur. La section blog affiche les deux articles les plus récents et place une ligne sous les articles avec un lien pour en voir plus sous la ligne. Les tutoriels du blog sont placés dans trois colonnes et suivent le même design. Il comprend également un flux Instagram avec 6 colonnes et 2 lignes et un pied de page avec un formulaire de courrier électronique stylisé.

Visitez le site Web

7. Typogénie

Ce site a été soumis par Eugenia Janakow. Il utilise beaucoup de jaune audacieux dans les graphiques. Les titres sont créés comme s'ils avaient été créés avec une étiqueteuse, ce qui rend les arrière-plans noirs et le texte blanc avec un aspect 3D. Un CTA est placé au milieu du menu. La section des héros affiche un écran partagé avec un CTA à gauche et une image à droite. Un CTA utilise un graphique dessiné à la main qui s'anime lors du défilement et du survol. Les informations sur le propriétaire du site affichent une image encerclée avec un CTA pour en savoir plus. J'aime particulièrement la section témoignages. Il affiche les avis de Google avec des notes par étoiles et un graphique cliquable qui vous amène à la page À propos. Les services sont affichés dans des textes de présentation et comprennent de grands graphiques dessinés à la main. Le blog utilise la marque jaune pour la méta, et le formulaire de contact l'utilise pour l'arrière-plan de toute la section.

Visitez le site Web

8. Artisan du bush

Ce site a été soumis par Simone Talamo. La section héros affiche une image plein écran avec le sujet au centre. Le premier plan affiche un slogan avec un CTA et des boutons sociaux. Plusieurs sections pleine largeur suivent une conception similaire. Chaque section a un séparateur dentelé qui fonctionne parfaitement pour le genre. La section suivante affiche de grandes images pour plus d'informations avec du texte et des icônes dans la superposition. La plupart ont des arrière-plans sombres ou se fondent dans des arrière-plans sombres. Un pour un manuel affiche la couverture du livre avec le texte. Les derniers articles de blog affichent les articles sous forme de cartes avec des ombres de boîte. Le pied de page affiche les produits avec leurs noms, images, notes et prix. Les pages du cours suivent le même design et ajoutent un compte à rebours et des bascules stylisées.

Visitez le site Web

9. KWALT numérique

Ce site a été proposé par Nicolas Peigner. Celui-ci contient de nombreuses animations intéressantes, du texte stylisé, des graphiques et des flèches sur tout le site. Le jaune est utilisé comme couleur de marque et il est utilisé de manière créative. La section héros affiche le texte d'un côté avec un effet de frappe. Un bar se trouve en dessous et répertorie les services. Sur le côté droit se trouvent plusieurs éléments graphiques indépendants qui survolent et répondent au curseur. La section suivante affiche un titre avec un graphique animé d'un côté et de simples CTA de l'autre. Le dernier travail suit cela et présente des captures d'écran du travail sur des arrière-plans de différentes couleurs et motifs. Une section expliquant les avantages place les textes de présentation de côté avec des icônes bicolores. Une image se trouve de l'autre côté et conduit le lecteur vers les textes de présentation. Un simple curseur de témoignage est placé sur un fond gris foncé pour se démarquer.

Visitez le site Web

10. Exploruns

Ce site a été soumis par Ava Charpentier. Il utilise beaucoup de nuances de bronzage pour les couleurs de marque. La barre supérieure disparaît lors du défilement, le logo chevauche l'en-tête et la section héros, et l'en-tête comprend des animations de survol. L'image principale affiche le titre, la description et le bouton pour passer une commande. Une autre image est placée comme une fenêtre sur l'image du héros en vraie parallaxe. Les informations sont affichées avec des textes de présentation avec des graphiques personnalisés. Les produits sont affichés avec une couleur d'arrière-plan derrière le haut de l'image du produit. Un design d'arrière-plan similaire est utilisé pour la section blog. Un CTA pour lire sur l'entreprise affiche du texte d'un côté et une image de l'autre. Les témoignages sont présentés sous forme de cartes avec la citation en haut sur fond blanc et le nom en bas sur fond beige. Le site comprend également un flux Instagram et un pied de page personnalisé avec animation de survol.

Visitez le site Web

En clôture

Ce sont nos 10 meilleures soumissions de sites Web Divi communautaires pour le mois de juin. Ces sites sont incroyables et comme toujours, nous tenons à remercier tout le monde pour vos contributions !

Si vous souhaitez que votre propre design soit pris en compte, n'hésitez pas à envoyer un e-mail à notre éditeur à nathan à thèmes élégants point com. Assurez-vous de faire l'objet de l'email « SOUMISSION DU SITE DIVI ».

Nous aimerions également avoir de vos nouvelles dans les commentaires! Dites-nous ce que vous aimez sur ces sites Web et s'il y a quelque chose qu'ils ont fait, vous voulez que nous l'enseignions sur le blog.

Image en vedette via domonku / shutterstock.com