10 Divi-Sites mit fantastischen Projektseiten

Projektseiten eignen sich hervorragend, um potenziellen Kunden die Art Ihrer Arbeit zu zeigen. Sie enthalten oft Fallstudien, die Ihr Fachwissen zeigen und ihnen eine realistische Vorstellung davon geben, was sie erwartet. Es gibt mehrere Möglichkeiten, mit Divi Projektseiten zu erstellen. In diesem Artikel sehen wir uns 10 Divi-Sites mit großartigen Serviceseiten an, um Sie für Ihre nächste Divi-Website zu inspirieren.

Projektseiten enthalten in der Regel Elemente wie Bilder, Galerien, Schieberegler, Videos, Erfahrungsberichte und Handlungsaufforderungen. Ich zeige ein Bild des Abschnitts, der mir gefällt, und bespreche, was mir daran gefallen hat. Die Websites sind in keiner bestimmten Reihenfolge. Warten Sie bis zum Ende, um ein paar Links zu finden, die Ihnen helfen, Ihre eigene einzigartige Projektseite zu verbessern.

1. BCBD

Dieses zeigt auf der einen Seite einen Screenshot des Projekts innerhalb eines Laptop-Bildschirms und auf der anderen Seite einen größeren Screenshot. Unter den Bildern befindet sich ein zweispaltiger Abschnitt mit Titel, Beschreibung und Link zur Website in einer Spalte und einer Liste der angebotenen Dienste in der anderen Spalte. Darunter befindet sich ein Abschnitt mit Screenshots der Website, wie sie auf verschiedenen Geräten angezeigt wird, ein Testimonial des Kunden, eine Trennlinie und eine Schaltfläche zum Anzeigen des nächsten Projekts.

Siehe Webseite

2. Jupper

Diese Projektseite zeigt ein Bild des Projekts gefolgt vom Namen des Kunden, dem Namen des Projekts und einer Trennlinie an. Der nächste Abschnitt zeigt in der linken Spalte eine Beschreibung und rechts ein Bild des fertigen Produkts mit einem Kastenschatten. Weitere Bilder mit Box-Schatten zeigen das fertige Produkt in einer einzigen Spalte, gefolgt von einem Call-to-Action. Der CTA verwendet Trennzeichen für oben und unten und verwendet Text mit anklickbaren E-Mails.

Siehe Webseite (Website ist down.)

3. Kommunikationsdesign-Partnerschaft

Dieser zeigt eine Kopfzeile in voller Breite mit einem Hintergrundbild, einem Logo, einem Menü, einem Slogan, einer Trennlinie und einer Firmenbeschreibung. Beim Scrollen wird eine 2/3, 1/3 Zeile mit einem großen Bild des Projekts in der größeren Spalte und einer Beschreibung in der kleineren Spalte angezeigt. Die Beschreibung enthält eine Aufschlüsselung des Projekts mit Titel, Kundenname, Kurzbeschreibung, Lösungen und Links zum Herunterladen des Projekts als PDF, zu einem Kontaktformular und zurück zur Portfolioseite. Als CTA wird eine Reihe von Bildern aus dem Projekt zusammen mit gestyltem Text verwendet.

Siehe Webseite

4. Kubischer Fuchs

Diese Projektseite zeigt ein Bild des Projekts auf einem Computerbildschirm auf einem Schreibtisch an. Text wird neben dem Bild platziert und zeigt den Projektnamen, den Kunden, das Jahr, das CMS, die erbrachten Dienstleistungen und einen Link zur Ansicht der Website. Darunter befinden sich drei Screenshot-Beispiele des Projekts. Ein Klick auf eines der Bilder öffnet es in einer Lightbox. Ich mag den Screenshot, weil es ein reales Beispiel ist.

Siehe Webseite

5. Kim Vestergaard

Diese Seite zeigt einen kleinen Abschnitt in Schwarz mit Links zu verschiedenen Bereichen der Website. Durch Scrollen werden Bilder aus dem Projekt in einer einzigen Spalte angezeigt. Die Bilder zeigen die verwendete Schriftart, die Farbpalette, das Projektdesign (das ist ein Logo) und dann viele Beispiele für die Verwendung. Die Beispiele zeigen das Logo in verschiedenen Farben, als Desktop-Hintergrund, in einem Header, auf einer Website mit verschiedenen Geräten, in Beispielen für Plakatwerbung und in sozialen Medien.

Siehe Webseite

6. Lernen

Dieser verwendet ein sauberes Design mit einem Bild in voller Breite und einem Projekttitel in Parallaxe. Darunter steht ein Titel und dann zwei Spalten. Die erste Spalte ist Text und enthält die Projektbeschreibung sowie ein fett gedrucktes Testimonial. Die zweite Spalte hebt sich durch einen grauen Hintergrund ab und enthält die Informationen über die Schule. Unter diesem Abschnitt befindet sich ein Link zum Download der Projektinformationen als PDF. Ein weiterer Abschnitt in voller Breite enthält Links zu verwandten Projekten, gefolgt von einem CTA in voller Breite.

Siehe Webseite

7. Patti Houston

Dieses zeigt den Projekttitel und die Beschreibung, gefolgt von Bildern des Projekts in einem mehrspaltigen Layout, abwechselnd von zweispaltig zu einspaltig und kurzen und großen Bildern. Ein Abschnitt enthält Text neben einem Bild, um weitere Informationen zum Projekt bereitzustellen. Die Post-Navigation bietet Links zu den vorherigen und nächsten Projekten. Eine Trennlinie trennt das Projekt von einem CTA, der mit Text und einer Schaltfläche erstellt wurde. Ich liebe das Layout von diesem.

Siehe Webseite

8. Blauwasserbauer

Diese Projektseite zeigt eine Kopfzeile in voller Breite mit einem Hintergrundbild mit Überlagerung und Titel an. Projektinformationen werden in einem Abschnitt über die gesamte Breite als Text bereitgestellt, der durch vertikale Trennlinien unterteilt ist. Zwei Spalten zeigen die Projektbildergalerie und Details mit Text. Darauf folgt ein Abschnitt mit Firmenlogos, um andere Projekte zu sehen, eine Karte, um das Projekt persönlich zu sehen, und die Postnavigation zum nächsten und vorherigen Projekt.

Siehe Webseite

9. Kenny Payero

Dieser zeigt das Projekt in zwei Spalten an. Das erste zeigt den Titel, den Ort, eine Beschreibung, die Post-Navigation, um zum vorherigen und nächsten Projekt zu wechseln, und eine Schaltfläche aus Quadraten, die Sie zur Portfolio-Seite führt. In der zweiten Spalte werden Bilder des Projekts in einem Raster angezeigt. Wenn Sie auf ein Bild klicken, wird es in einer Lightbox geöffnet.

Siehe Webseite

10. Die Zimmermann-Gruppe

Dies ist einer der ausführlichsten auf der Liste. Es verwendet eine Vollbild-Kopfzeile mit Hintergrundbild, Farbverlauf und Kundenname als Projekttitel. Beim Scrollen werden zwei Spalten mit Informationen über den Client und Klappentexte der bereitgestellten Dienste neben einem Bild angezeigt. Es folgt ein Video über den Kunden, Bilder des Projekts inklusive Website und Werbekampagnen (inklusive einer coolen Timeline), eine Projektübersicht über einen Hintergrundverlauf und ein CTA.

Siehe Webseite

Gedanken beenden

Das ist unser Blick auf 10 Divi-Websites mit interessanten Service-Seiten, um Sie für Ihr nächstes Divi-Design zu inspirieren.

Hier im ET-Blog gibt es viele Design- und Anleitungsartikel, die sich perfekt zum Erstellen von Projektseiten eignen. Die Projektseite ist ein benutzerdefinierter Beitragstyp, der mit dem Divi Builder erstellt werden kann und häufig Elemente wie Galerien und Seitendesigns wie Blogbeiträge verwendet, um die Arbeit zu zeigen. Ich habe Links zu Tutorials eingefügt, die sowohl Galerien und Blogbeiträge als auch allgemeine Seitenlayouts behandeln.

• 3 kostenlose schöne Projektseitenlayouts (und wie Sie mit dem Divi Builder mehr erstellen)
• So verwenden Sie ein filterbares Portfolio und eine Post-Navigation, um Fallstudien mit Divi . zu organisieren
• So erstellen Sie ein scrollbares Textvorschau-Tablet mit Divi
• Was uns 11 der besten Portfolio-Websites über die Präsentation unserer Arbeit beibringen können
• So erstellen Sie atemberaubende Galerie-Testimonials mit Divi
• Erstellen einer Graustufen-zu-Farb-Galerie mit dem Divi-Galerie-Modul
• Kostenloses Divi Photo Gallery Layout Pack: 5 atemberaubende Galerieseitenlayouts in einem praktischen Download
• Verwenden des Divi-Galerie-Moduls zum Erstellen einer gekachelten Galerie mit benutzerdefiniertem Abstand
• Das kostenlose Divi-Blog-Post-Layout-Paket bringt Ihre Builder-basierten Artikel auf die nächste Stufe
• Das Geheimnis zum Entwerfen von Broken-Grid-Layouts in Divi
• So entwerfen Sie mit Divi . ein einzigartiges diagonales Layout

Wir wollen von dir hören. Welche dieser Websites mit tollen Projektseiten sind deine Favoriten? Lass es uns in den Kommentaren wissen.

Ausgewähltes Bild über PODIS / shutterstock.com