Divi est un des meilleur thèmes WordPress en 2020. Très flexible, Divi est un puissant éditeur visuel qui permet de créer des mises en page et des design dans les pages de votre site Web WordPress. Obtenir un discount sur Divi. Il peut également être utilisé en tant que plugin, conjointement avec un autre thème WordPress. Qu’est-ce que Divi ?

Exemple de site fait avec Divi

Montrer un exemple de site Divi a peu de sens, puisqu’il est possible de faire quasiment tout ce qu’on veut avec Divi en terme de mise en page. En effet, en plus de proposer des systèmes préconçus de grille de mise en page et des modules (module vidéo, module Call to action, et des dizaines d’autres modules), Divi est évidemment ouvert au code sur mesure, et vous pourrez y ajouter vos propres codes HTML et CSS (ainsi que l’étendre avec du PHP comme n’importe quel thème WordPress).

Jolis sites WordPress et Divi

Voici 22 exemples de sites jolis réalisés avec Divi :

Magie moléculaire

site restaurant divi

Ce site Web a été inclus car il s’agit d’un site Web soigné et élégamment exécuté avec une typographie propre, de belles photographies et l’option de menu plein écran peu utilisée.

Voir le site

VI Dimensions

VI Dimensions

Ce site Web a été inclus dans la vitrine d’aujourd’hui car, et bien, il est juste magnifique dans sa simplicité. J’aurais du mal à trouver un détail que je n’aime pas, alors je vous recommanderais simplement d’aller le visiter et d’apprécier le tout!

Voir le site

Formation Découvrir Divi

Prenez le contrôle de votre site Web

  • Réalisez seul votre site Internet
  • Une approche pédagogique et pratique
  • Pour débutants et confirmés

Voir le plan de la formation

Klic Samurai Digital

Digital agency

Autre exemple de site Divi, celui-là a des animations intéressantes. J’aime particulièrement les animations coulissantes dans l’en-tête, les éléments étant animés individuellement et les effets de survol dans la grille de projet qui zoome l’image et révèle le texte.

Voir le site

Stroops

site fitness

Ce site Web a des couleurs et les polices utilisées sur ce site. La conception des sections produit et blog minimise les distractions qui les entourent avec un espace blanc, suivi de la section vidéo. Les animations de survol se distinguent. Il fait également une utilisation intéressante de la conception de menus avec un menu sous l’en-tête jusqu’à ce que le visiteur défile l’en-tête.

Voir le site

The Wandering Bride

exemple site Divi mariage

Ce site encadre la mise en page avec des illustrations florales. L’en-tête place le menu hamburger à gauche et un CTA à droite. Un curseur affiche des photos des paramètres et inclut une navigation placée verticalement. Un module de texte chevauche cela et fournit des informations sur l’entreprise avec un lien de style en dessous pour voir les services. En dessous se trouve une section avec un slogan dans une police élégante. Une section contenant des informations À propos inclut une image qui chevauche la section précédente. Les témoignages sont présentés dans une section pleine largeur avec le nom sur un côté. J’aime le CTA en bas qui suit le même design que le reste du site et comprend un module de texte qui dit comme une carte. Un pied de page personnalisé comprend un flux Instagram intégré.

Voir le site

Site de golf réalisé avec Divi

site de golf

Ce site Web a été inclus dans cette vitrine aujourd’hui car ce n’est pas souvent que nous voyons des sites Divi utiliser la navigation verticale. Ce site Divi est un excellent exemple à suivre pour d’autres dans ce domaine.

Voir le site

Obtenir un nom de domaine, hébergement Web et WordPress

Guide pratique pour l’achat de votre hébergement et de votre installation de WordPress

  • Mettez seul en place l’hébergement de votre site
  • Une approche pédagogique et pratique
  • Commencez à travailler sur votre site aujourd’hui

Voir le guide

Un comptable

La première chose que j’ai remarquée sur ce site Web, c’est le menu. Les éléments d’en-tête de ce joli site Divi sont bloqués et il comprend un CTA, mais ce qui ressort, c’est le méga menu. Le survol d’un élément de menu affiche une section pleine largeur avec une image d’un côté, une description avec un bouton et plusieurs colonnes de liens de texte. La section des héros montre une image plein écran avec un slogan en gros caractères avec une description et un CTA. Le défilement montre un grand graphique avec un CTA. J’aime la section Emplacements qui montre les photos sous forme de cartes avec le nom dans la superposition. Plusieurs sections plein écran ont des images d’un côté et des informations de l’autre. Les témoignages sont affichés dans un curseur plein écran. Il a également une section de contact stylée et un pied de page personnalisé avec une image.

Voir le site

Exemple de site Internet photographie Divi

site divi photographe

Ce site a une disposition simple et unique. La héro section est divisée en quatre colonnes. Le premier affiche le logo. Les trois prochaines affichent des images pour les catégories. Les noms des catégories apparaissent au-dessus d’eux. En cliquant sur le nom ou l’image, vous accédez à une galerie pour cette catégorie. La section suivante fournit des informations sur le photographe et comprend une image encerclée avec un masque de texte. Après cela, un flux Instagram intégré, puis le logo avec les boutons de suivi social. Les pages de la galerie affichent les images dans une mosaïque et incluent des filtres qui ressemblent à un menu secondaire sous le menu principal.

Voir le site

Constructeur de proximité

constructeur

Ce site a La section des héros affiche des images et des graphiques en plusieurs couches qui suivent le curseur de la souris lorsque vous vous déplacez sur l’écran. Une section En savoir plus sur nous comprend des informations et un bouton qui renvoie à la page À propos et montre le processus de travail avec eux à l’aide de textes de présentation numérotés. Une autre section de textes de présentation montre les avantages de l’utilisation de l’entreprise. La section des services présente un CTA et des images de travail. Il comprend également un CTA pour demander un devis juste au-dessus d’un pied de page personnalisé. Une demande CTA apparaît également dans le menu. La page Blog montre un curseur de publication des derniers articles. La page Services affiche de nombreuses images qui se chevauchent dans une disposition alternée.

Voir le site

Coach pour femmes

coach pour femmes

Cet exemple de site Divi site a un design de magazine intéressant. La section des héros affiche une image en plein écran avec le titre du site et les slogans entourant l’image, les emplacements sont répertoriés verticalement et un triangle crée un témoignage en encart. Le défilement révèle le menu et une section avec des logos de médias où les clients sont présentés, un bouton, un témoignage et une image du propriétaire du site. La section suivante montre une image avec un grand titre imprimé verticalement et une citation du propriétaire. Plusieurs sections incluent de grands titres et de nombreuses images dans des dispositions à plusieurs colonnes ou se chevauchant, et des CTA. J’aime la section des témoignages avec les images encadrées, les lettrines, le texte qui crée un véritable arrière-plan de parallaxe et un bouton pour en savoir plus.

Voir le site

Des jolis robots

jolis robots

Ce site WordPress propose un écran est divisé en deux couleurs tout au long de la page, avec du noir à gauche et du blanc à droite. La section des héros affiche un robot à 6 axes au centre avec le nom du produit sur l’image. Le texte qui apparaît sur le côté noir est en blanc et le texte qui apparaît sur le côté blanc est en noir. La section suivante affiche un autre robot au centre avec des textes de présentation des deux côtés et des modules de texte au centre sur l’image pour les descriptions. Un autre robot est suspendu à celui-ci (style GLaDOS) et mène au pied de page avec des icônes de médias sociaux, qui apparaissent également en haut du menu lorsque vous cliquez sur l’icône du hamburger. La page des produits montre chacun des robots avec des arrière-plans noirs et blancs qui alternent. Les pages produits montrent le robot avec son contrôleur d’un côté et les spécifications de l’autre.

Voir le site

Sites immobiliers pour condos

sites immobilier pour condos

Ce site Web affiche un dégradé d’arrière-plan pleine largeur avec un CTA d’un côté et une image dans un appareil mobile de l’autre. Le défilement révèle des informations d’un côté avec un CTA et des images de propriétés de l’autre avec une image placée dans un contour d’ordinateur portable. Des conceptions similaires continuent sur tout le site. Mon préféré est la section sur la communauté. Il comprend une disposition à deux colonnes avec une image d’arrière-plan avec un texte de présentation qui la chevauche, qui comprend une image, du texte et un bouton, ainsi que des informations de l’autre côté. La page Comment ça marche montre chaque étape en plein écran avec une couleur d’arrière-plan différente pour chacune. J’aime aussi la page de blog, qui comprend une section de héros, du texte pour information, un séparateur, puis les articles de blog. Les messages ajoutent une ombre de boîte à l’image sélectionnée. Le menu comprend un CTA.

Voir le site

Association caritative

Ce site Web a un dégradé d’arrière-plan pleine largeur avec un graphique d’un côté derrière un CTA et un ensemble d’images de l’autre côté qui montre l’application sur les téléphones mobiles. Les sections suivantes montrent du texte avec un séparateur et un titre bleu à gauche et un smartphone avec une image de l’application et des graphiques environnants à droite. Le texte et les graphiques glissent en place lorsque vous faites défiler. Un curseur affiche des logos sur un arrière-plan à motifs avec un dégradé. Un curseur de témoignage sur toute la largeur comprend l’image, le témoignage et la navigation par points et flèches sur le fond bleu qui correspond au site. Les informations sont fournies dans des bulles qui incluent des icônes encerclées qui correspondent au style du site. Le site fait un excellent usage des couleurs et des dégradés de marque bleue et verte.

Voir le site

Jeunesse, changez le futur

jeunesse, changez le futur

Ce site Web a une mise en page d’une page qui affiche une image d’arrière-plan plein écran en parallaxe avec une superposition très opaque. La superposition comprend un slogan et un graphique. Toutes les sections ont une disposition à deux colonnes avec du texte en arrière-plan en parallaxe avec un graphique au premier plan et du texte de l’autre côté. Cette conception alterne au fur et à mesure que vous faites défiler. L’une de ces sections comporte des bascules conçues pour correspondre au site. Les informations sur les personnes impliquées sont créées avec des textes de présentation qui ont une image miniature à gauche et leur nom et leur emplacement à droite. Les logos des partenaires sont affichés en niveaux de gris et changent de couleur au survol.

Voir le site

Communauté d’église

Communauté

Ce site lit une vidéo d’arrière-plan en plein écran avec un grand logo et le slogan dans la superposition. Le méga-menu est placé à gauche tandis que la droite comprend des liens de suivi social et quelques CTA avec des icônes au-dessus du texte. Des liens apparaissent en bas de la vidéo et incluent des superpositions de survol. Une section d’accueil affiche une vidéo intégrée et un événement avec un lien pour en voir plus. Les événements sont affichés sous forme de cartes dans un curseur. Les événements eux-mêmes sur la page Événements sont affichés en tant que types de publication personnalisés avec plus dans la barre latérale. Les croyances sont montrées dans les accordéons. J’aime les reflets rouges dans celui-ci.

Voir le site

Agence de communication

agence de communication

Ce site utilise beaucoup de jaune vif pour les icônes, les liens, les boutons, etc. Plusieurs arrière-plans ont des séparateurs incurvés tandis que la plupart des lignes et des modules ont des ombres de boîte pour se démarquer. La section des héros montre un CTA d’un côté et un graphique de l’autre. Une introduction est fournie avec une vidéo intégrée et un bloc de texte stylisé. Un ensemble de descriptifs numérotés montre les avantages de leur utilisation. Les numéros sont placés derrière les titres. Il comprend également une galerie stylée qui ouvre l’image sur Instagram, bascule pour créer la FAQ, un formulaire de newsletter stylisé et un pied de page stylisé avec un bouton qui se chevauchent.

Voir le site

Artisan qui travaille avec du verre

artisan verre

Une vidéo plein écran est lue en arrière-plan avec une superposition sombre qui met en valeur le texte. La superposition comprend le logo et le menu avec CTA, titre, slogan, description et bouton. Le défilement révèle un en-tête fixe et une conception similaire avec une image d’arrière-plan en véritable parallaxe. Les services et les informations sont affichés dans une bande mince avec des graphiques. Un CTA affiche une image circulaire en véritable parallaxe d’un côté. Un curseur de témoignage place du texte sur des images d’arrière-plan qui servent d’exemples de travail. Les services affichent des images hautes avec du texte et des boutons. J’adore la section projets. Il montre des projets dans une disposition à plusieurs colonnes avec des séparateurs latéraux stylisés et des effets de zoom pour les images. J’aime aussi le formulaire de contact qui utilise des champs de même taille.

Voir le site

Partenaire de marques

marques

Ce site a une conception d’une page avec des ancres dans le menu pour les différentes sections. Ce site utilise beaucoup de grandes images en noir et blanc, de gros texte et du jaune derrière les titres sur les images, en commençant par l’en-tête plein écran. Plusieurs sections incluent des images qui suivent cette conception. La section suivante affiche des informations en pleine largeur. Les services sont affichés dans des blocs de texte numérotés avec de grands titres, descriptions et séparateurs. Les témoignages incluent également de grands titres et suivent un design minimal. Une section À propos continue la conception minimale avec un grand titre, du texte et un séparateur suivi d’une section similaire qui se termine par un formulaire de contact minimal.

Voir le site

Développeur immobilier

développeur immobilier

La section des héros joue une vidéo derrière le titre et le slogan et mène à la section suivante avec un séparateur de section stylisé. La section suivante présente plusieurs CTA dans une disposition alternée. Le premier CTA affiche une image avec un grand titre, une courte description et un bouton, tandis que le second CTA comprend deux boutons. Un curseur de blog pleine largeur affiche les images en vedette presque en plein écran. Voici une section sur le propriétaire avec une image et un devis. J’aime la section À propos qui affiche des informations avec une bordure de style sur une image d’arrière-plan sombre. Le formulaire de contact utilise une forme similaire en miroir et comprend un arrière-plan uni. Les autres pages suivent un design similaire mais ajoutent de nombreuses informations de support dans les graphiques. La page de blog ajoute une barre latérale stylisée pour présenter les annonces. J’aime aussi la conception du billet de blog avec sa mise en page épurée et son gros texte.

Voir le site

Hébergeur sites Web

Ce site utilise beaucoup de rose vif comme couleur de surbrillance principale pour le texte et les superpositions et se démarque magnifiquement. La section des héros affiche un avion volant hors de l’écran avec un CTA de l’autre côté de l’écran. L’avion lui-même et le CTA sont de couleur rose vif. Une section avec des plans montre les plans et les prix dans les blocs. Ils incluent des animations de survol rose vif. Un CTA pleine largeur montre un guépard rose au centre avec le texte d’un côté, tandis qu’un autre montre un jeu d’échecs et du texte avec des éléments roses. Plusieurs sections montrent les avantages dans les présentations. L’un de mes favoris est la section qui traite des types d’entreprises qu’ils servent. Les images sont affichées dans une grille à 5 colonnes avec des superpositions alternées. Les images font un zoom arrière sur le survol et suppriment la superposition. Le menu dans le pied de page est également intéressant. Il affiche les titres avec une première lettre de style pour chacun.

Voir le site

Site Divi de Conseil

site web conseil

Ce site a une disposition propre avec beaucoup de couleurs pour les reflets. La section des héros montre une introduction d’un côté avec un graphique de l’autre qui se fond dans une rangée de textes de présentation. Les informations sont affichées dans une disposition à 2 colonnes avec des bulles pour créer des puces. Quelques informations sur le CTA affichent un graphique sur un côté dans une disposition alternée. Les services sont indiqués dans des cartes avec des graphiques et du texte. Plus d’informations sont fournies dans les présentations colorées qui créent un ensemble de blocs. Les compteurs numériques affichent chaque numéro avec une couleur différente pour se démarquer. Un témoignage en 2 colonnes correspond à la conception des couleurs du site. De nombreuses pages suivent une conception similaire, puis ajoutent du contenu avec une ombre de boîte pour se démarquer.

Voir le site

Espaces de travail

Ce site a une disposition propre avec un accent sur les produits. Le méga menu affiche 3 colonnes avec plusieurs liens d’un côté qui révèlent des informations et des images. La section des héros montre un ensemble de graphiques pour le mobilier de bureau. Le survol de l’un d’eux recouvre les autres d’une superposition et affiche une petite fenêtre contextuelle avec un titre pour décrire le mobilier. Les fenêtres contextuelles varient en couleur. Le produit présenté montre un grand graphique d’un côté et une description de l’autre. Après cela, un CTA de consultation complet, puis une section d’informations correspondant à la conception du produit présenté. Les pages de produits présentent des produits avec des titres similaires aux popups et incluent une liste à puces pour les fonctionnalités. La page des services est intéressante. Il montre beaucoup de graphiques des produits et affiche les avantages dans les présentations.

Voir le site

Pour conclure

Ces sites figurent dans les showcase d’Elegant Themes qui montrent des sites réalisés avec Divi : Source 1 Source 2.

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

Formation Divi WordPress

Divi est un logiciel qui s’apprend, qui s’apprivoise, avec le temps, de l’expérience et de la pratique. Les programmeurs spécialisés dans le développement Web peuvent apprendre Divi pour gagner du temps. Les graphistes Web peuvent se former à Divi. Tous les métiers du Web peuvent trouver un intérêt à une formation Divi. Comprendre comment Divi fonctionne

Il est également possible de faire de l’intégration Web avec Divi : prendre une maquette graphique, conçue avec Photoshop, Adobe XD, ou Illustrator, et la transformer en site Web et Divi.

Votre site WordPress utilise le Divi Builder ?

Découvrez nos tutoriels et formations Divi sur https://www.netologiste.com

OUI, JE VEUX CONNAÎTRE CETTE MÉTHODE

Vous allez recevoir les informations demandées par email.