10 sites Divi avec des pages de projet impressionnantes

Les pages de projet sont idéales pour montrer aux clients potentiels le type de travail que vous effectuez. Ils incluent souvent des études de cas, ce qui aide à montrer votre expertise et leur donne une idée réaliste de ce à quoi s'attendre. Il existe plusieurs façons de créer des pages de projet avec Divi. Dans cet article, nous examinerons 10 sites Divi avec des pages de services impressionnantes pour vous inspirer pour votre prochain site Web Divi.

Les pages de projet incluent généralement des éléments tels que des images, des galeries, des curseurs, des vidéos, des témoignages et des appels à l'action. Je vais montrer une image de la section que j'aime et discuter de ce que j'ai aimé à ce sujet. Les sites Web ne sont pas dans un ordre particulier. Attendez jusqu'à la fin pour quelques liens pour vous aider à mettre à niveau votre propre page de projet unique.

1. BCBD

Celui-ci montre une capture d'écran du projet sur un écran d'ordinateur portable d'un côté et une capture d'écran plus grande de l'autre. Sous les images se trouve une section à deux colonnes avec un titre, une description et un lien vers le site Web dans une colonne, et une liste de services fournis dans l'autre colonne. En dessous se trouve une section avec des captures d'écran du site Web telles qu'elles sont affichées sur différents appareils, un témoignage du client, un diviseur et un bouton pour voir le prochain projet.

Voir le site Web

2. Jupper

Cette page de projet affiche une image du projet suivie du nom du client, du nom du projet et d'un séparateur. La section suivante montre une description dans la colonne de gauche et une image du produit fini sur la droite en utilisant une ombre de boîte. Plus d'images avec des ombres de boîte montrent le produit fini dans une seule colonne suivie d'un appel à l'action. Le CTA utilise des séparateurs pour le haut et le bas et utilise du texte avec un e-mail cliquable.

Voir le site Web (Le site Web est en panne.)

3. Partenariat de conception de communication

Celui-ci affiche un en-tête pleine largeur avec une image d'arrière-plan, un logo, un menu, un slogan, un séparateur et une description de l'entreprise. Le défilement révèle une ligne 2/3, 1/3 avec une grande image du projet dans la plus grande colonne et une description dans la plus petite colonne. La description comprend une ventilation du projet, y compris un titre, le nom du client, une brève description, des solutions et des liens pour télécharger le projet au format PDF, vers un formulaire de contact et revenir à la page du portfolio. Un ensemble d'images du projet ainsi que du texte stylisé sont utilisés comme CTA.

Voir le site Web

4. Renard cubique

Cette page de projet affiche une image du projet sur un écran d'ordinateur posé sur un bureau. Le texte est placé à côté de l'image et indique le nom du projet, le client, l'année, le CMS, les services fournis et un lien pour afficher le site Web. En dessous se trouvent trois exemples de capture d'écran du projet. Cliquer sur l'une des images les ouvre dans une lightbox. J'aime la capture d'écran parce que c'est un exemple du monde réel.

Voir le site Web

5. Kim Vestergaard

Ce site montre une petite section en noir avec des liens vers différentes zones du site. Le défilement révèle les images du projet dans une seule colonne. Les images montrent la police de caractères utilisée, la palette de couleurs, la conception du projet (qui est un logo), puis de nombreux exemples d'utilisation. Les exemples montrent le logo sur différentes couleurs, comme arrière-plan de bureau, dans un en-tête, sur un site Web utilisant différents appareils, dans des exemples d'affiches publicitaires et sur les réseaux sociaux.

Voir le site Web

6. Apprentissage

Celui-ci utilise un design épuré avec une image pleine largeur et un titre de projet en parallaxe. Sous ceci se trouve un titre puis deux colonnes. La première colonne est du texte et fournit la description du projet et comprend un témoignage en gras. La deuxième colonne utilise un fond gris pour se démarquer et fournit les informations sur l'école. Sous cette section se trouve un lien pour télécharger les informations du projet au format PDF. Une autre section pleine largeur fournit des liens vers des projets connexes suivis d'un CTA pleine largeur.

Voir le site Web

7. Patti Houston

Celui-ci montre le titre et la description du projet suivis d'images du projet dans une mise en page à plusieurs colonnes, alternant d'une colonne à une colonne et des images courtes et hautes. Une section comprend du texte à côté d'une image pour fournir plus d'informations sur le projet. La navigation dans les messages fournit des liens vers les projets précédents et suivants. Un séparateur sépare le projet d'un CTA construit avec du texte et un bouton. J'adore la mise en page de celui-ci.

Voir le site Web

8. Constructeurs d'eau bleue

Cette page de projet affiche un en-tête pleine largeur avec une image d'arrière-plan avec une superposition et un titre. Les informations sur le projet sont fournies dans une section pleine largeur sous forme de texte divisé par des séparateurs verticaux. Deux colonnes montrent la galerie d'images du projet et les détails avec du texte. À la suite de cela se trouve une section avec les logos de l'entreprise pour voir d'autres projets, une carte pour voir le projet en personne et afficher la navigation vers le projet suivant et précédent.

Voir le site Web

9. Kenny Payero

Celui-ci affiche le projet sur deux colonnes. Le premier montre le titre, l'emplacement, une description, la navigation des articles pour passer au projet précédent et suivant, et un bouton composé de carrés qui vous amène à la page du portfolio. La deuxième colonne affiche des images du projet dans une grille. Cliquer sur n'importe quelle image l'ouvre dans une lightbox.

Voir le site Web

10. Le groupe Zimmerman

C'est l'un des plus élaborés de la liste. Il utilise un en-tête plein écran avec une image d'arrière-plan, un dégradé et le nom du client comme titre du projet. Le défilement révèle deux colonnes avec des informations sur le client et des textes de présentation des services fournis à côté d'une image. Suit une vidéo sur le client, des images du projet, y compris le site Web et les campagnes publicitaires (y compris une chronologie intéressante), un aperçu du projet sur un dégradé d'arrière-plan et un CTA.

Voir le site Web

Mettre fin aux pensées

C'est notre regard sur 10 sites Web Divi avec des pages de services intéressantes pour vous inspirer pour votre prochain design Divi.

Il existe de nombreux articles sur la conception et la procédure ici sur le blog ET qui sont parfaits pour créer des pages de projet. La page du projet est un type de publication personnalisé qui peut être créé avec Divi Builder et utilise souvent des éléments tels que des galeries et des conceptions de page telles que des articles de blog pour montrer le travail. J'ai inclus des liens vers des didacticiels qui couvrent à la fois les galeries et les articles de blog, ainsi que les mises en page générales.

• 3 belles mises en page de projet gratuites (et comment en créer plus avec Divi Builder)
• Comment utiliser un portfolio filtrable et une post-navigation pour organiser des études de cas avec Divi
• Comment créer une tablette d'aperçu de texte défilant avec Divi
• Ce que 11 des meilleurs sites Web de portfolio peuvent nous apprendre sur la présentation de notre travail
• Comment créer de superbes témoignages de galerie avec Divi
• Créer une galerie de niveaux de gris en couleurs avec le module Divi Gallery
• Pack gratuit de mise en page de la galerie de photos Divi: 5 superbes mises en page de galerie en un seul téléchargement pratique
• Utilisation du module Divi Gallery pour créer une galerie en mosaïque avec un rembourrage personnalisé
• Le pack gratuit de mise en page des articles de blog Divi fera passer vos articles optimisés par le constructeur au niveau supérieur
• Le secret pour concevoir des mises en page de grille brisées dans Divi
• Comment concevoir une disposition diagonale unique avec Divi

Nous voulons de vos nouvelles. Lequel de ces sites Web avec des pages de projet impressionnantes sont vos favoris ? Faites le nous savoir dans les commentaires.

Image en vedette via PODIS / shutterstock.com