So verwandeln Sie Divi-Layouts in wiederverwendbare Wireframes

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben.

Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie Layouts mit dem Food Catering Layout Pack von Divi in ​​wiederverwendbare Wireframes umwandeln. Wireframes eignen sich hervorragend für den Startprozess zum Erstellen einer Website. Sie helfen Ihnen bei der Entscheidung über die Gesamtstruktur und den Designstil einer Website. Sie können auch dazu beitragen, die Meinung eines Kunden zu einem Designstil einzuholen, ohne alles im Voraus anpassen zu müssen.

Lasst uns anfangen!

Vorschau

Bevor wir uns darauf einlassen, werfen wir einen Blick auf das Endergebnis, das wir erstellen werden.

Verwandeln Sie das Layout in Wireframe

Öffnen Sie die Landingpage für Food Catering mit Visual Builder

Fahren Sie fort und öffnen Sie die Landing Page, die Sie mit Divis Food Catering Layout Pack erstellt haben.

Entfernen Sie Abschnitts- und Vollbreiten-Header-Hintergrundbilder, Hintergrundfarben und Verlaufshintergründe

Der erste Schritt zum Erstellen eines Wireframes besteht darin, alle Hintergrundbilder, Verlaufshintergründe und Hintergrundfarben der Abschnitte auf Ihrer Seite und des Fullwidth Header-Moduls im Hero-Bereich zu entfernen.

Geben Sie abwechselnden Abschnitten stattdessen eine graue Hintergrundfarbe

Um die verschiedenen Abschnitte in Ihrem Seitendesign besser zu bestimmen, geben Sie jedem der abwechselnden Abschnitte die Hintergrundfarbe '#f9f9fb'. Wenn Sie später ein Drahtmodell zum Erstellen einer Seite verwenden, können Sie die Funktion zum Suchen und Ersetzen verwenden, um die Farbpalette nahtlos zu Ihrer Seite hinzuzufügen.

Entfernen Sie alle Farben in Designelementen mit dem Filter für geänderte Stile

Filter für geänderte Stile im Schaltflächenmodul aktivieren

Wir werden auch die verwendete Farbpalette entfernen. Auf diese Weise werden wir beim Erstellen einer Seite davon nicht beeinflusst. Öffnen Sie eines der Schaltflächenmodule auf Ihrer Seite und aktivieren Sie den Filter für geänderte Stile, um alle aktuellen Einstellungen anzuzeigen.

Geben Sie dem Tastenmodul eine dunkle Hintergrund- und Rahmenfarbe

Ändern Sie sowohl die Schaltflächenhintergrundfarbe als auch die Schaltflächenrandfarbe in '#2b2b2b'.

Schaltflächenstile kopieren und auf andere Schaltflächen anwenden

Fahren Sie fort, indem Sie die Schaltflächenstile kopieren, indem Sie mit der rechten Maustaste auf die Schaltflächeneinstellungen klicken und auf "Schaltflächenstile kopieren" klicken. Fügen Sie dann die Schaltflächenstile zu jedem der verbleibenden Schaltflächenmodule auf der Seite hinzu.

Entfernen zusätzlicher Designeinstellungen (z. B. Boxschatten)

Buttonbox-Schatten entfernen

Wir entfernen auch zusätzliche Elemente wie Box Shadow. Öffnen Sie das gleiche Schaltflächenmodul, an dem Sie gearbeitet haben, und entfernen Sie den Boxschatten vollständig.

Schatteneinstellungen des Schaltflächenmoduls kopieren

Kopieren Sie die Box Shadow Styles dieses Schaltflächenmoduls und fügen Sie sie auch den restlichen Schaltflächenmodulen hinzu.

Boxschatten manuell im Helden- und Kontaktbereich entfernen

Die einzigen beiden Schaltflächen, bei denen der Box Shadow manuell entfernt werden muss, sind die im Fullwidth Header Module und Contact Module enthaltenen. Diese Schaltflächen sind Teil eines Moduls mit mehreren Designelementen, deshalb müssen wir sie manuell entfernen.

Hervorgehobenen Abschnitt dieselbe Hintergrundfarbe wie CTAs geben

Scrollen Sie dann nach unten, bis Sie auf den Abschnitt "hervorgehoben" stoßen. Verwenden Sie hier die Hintergrundfarbe des Abschnitts '#2b2b2b'. Die gleiche Farbe wurde für die CTAs verwendet.

Bildabmessungen bestimmen

Gehe zur Medienbibliothek

Um das Layoutthema unseres Layouts vollständig zu entfernen, werden wir alle Bildmodule durch Platzhalter ersetzen, die die erforderlichen Bildabmessungen enthalten. Um diese Abmessungen zu finden, gehen Sie zu Ihrer Medienbibliothek.

Verwendete Bilder einzeln öffnen

Öffnen Sie jedes der Bilder, die auf Ihrer Seite enthalten sind, separat.

Notieren Sie die verschiedenen Abmessungen der Bilder auf der Seite

Sobald Sie dies getan haben, können Sie insbesondere die Abmessungen dieses Bildes sehen. Behalten Sie alle benötigten Abmessungen auf Ihrer Seite im Auge, indem Sie sie irgendwo aufschreiben, bevor Sie mit dem nächsten Schritt fortfahren.

Platzhalter mit Bemaßungen erstellen

Öffnen Sie Photoshop

Zeit, die Platzhalter zu erstellen! Öffnen Sie Photoshop oder eine andere Bildbearbeitungssoftware.

Neue Projekte für Dimensionen erstellen

Erstellen Sie ein neues Projekt für jeden Satz von Dimensionen, die Sie auf Ihrer Seite haben. In unserem Fall benötigen wir für jede der folgenden Dimensionen ein separates Projekt:

• 800 x 1029
• 400 x 400
• 48 x 48

Wählen Sie graue Farbe

Wählen Sie '#e7e8ed' als Farbe.

Hintergrundebene entsperren

Entsperren Sie auch Ihre Hintergrundebene.

Wählen Sie das Farbeimerwerkzeug und fügen Sie der Ebene Farbe hinzu

Verwenden Sie dann das Farbeimerwerkzeug, um Ihre Leinwand grau zu färben.

Text mit Bemaßungen hinzufügen

Um Ihnen die Übersicht über die Bildabmessungen zu erleichtern, können Sie die Abmessungen auch in der Mitte Ihres Platzhalters hinzufügen. Auf diese Weise wissen Sie, welche Bildabmessungen Sie für Ihre Seite benötigen, wenn Sie die Bilder bearbeiten, durch die Sie sie ersetzen.

Für das Web speichern

Wenn Sie fertig sind, speichern Sie Ihren Bildplatzhalter für das Web.

Wiederholen Sie dies für jede der Bilddimensionen auf Seite

Wiederholen Sie diese Schritte für jeden der Dimensionen auf Ihrer Seite. Für diese Seite benötigen Sie insgesamt drei verschiedene Sets:

• 800 x 1029 (Über uns Abschnitt
• 400 x 400 (Galeriebereich)
• 48 x 48 (Symbole)

Bilder durch Platzhalter ersetzen

Nachdem Sie alle Ihre Bildplatzhalter exportiert haben, können Sie die Bilder ersetzen.

Das Wireframe leicht wiederverwendbar machen

Erstellen Sie eine Wireframe-Karte auf dem Computer

Nachdem Sie ein Drahtmodell erstellt haben, sollten Sie das Erscheinungsbild irgendwo speichern. Erstellen Sie irgendwo auf Ihrem Computer einen neuen Ordner.

Bildschirmaufnahme-Layout und lokal speichern

Verwenden Sie dann das Bildschirmaufnahme-Add-On/die Erweiterung Ihrer Wahl, um Ihre Seite zu erfassen. In den folgenden Bildern haben wir das FireShot-Add-on für Mozilla Firefox verwendet. Achten Sie beim Speichern Ihres Screenshots darauf, dass Sie ihm einen richtigen Namen geben.

Layout unter gleichem Namen in Bibliothek speichern

Verwenden Sie denselben Namen, den Sie für Ihren Screenshot verwendet haben, um das Drahtmodell-Layout in Ihrer Divi-Bibliothek zu speichern. Auf diese Weise können Sie sich das Wireframe auf Ihrem Computer ansehen, bevor Sie es auf eine Ihrer Seiten hochladen.

Designeinstellungen für personalisiertes Wireframe ändern

Abschnittstrenner hinzufügen

Sie sind nicht darauf beschränkt, ein Wireframe pro Seite zu erstellen. Sie können die Designeinstellungen ganz einfach anpassen, um neue Wireframes zu erstellen. Sie können zum Beispiel mit den Abschnittsteilern herumspielen, um einzigartige Designs zu erstellen.

Spielen Sie mit der Typografie herum

Aktivieren Sie Suchen und Ersetzen in Überschriftenschriftart

Oder Sie können auch mit der Typografie herumspielen. Öffnen Sie das Fullwidth Header Module in Ihrem Heldenbereich und klicken Sie mit der rechten Maustaste auf die Titelschrift. Fahren Sie fort, indem Sie die Funktion Suchen und Ersetzen aktivieren.

Schriftart ändern

Ändern Sie die Schriftart, die auf Ihrer Seite verwendet wird, in eine andere und Sie haben ein brandneues Wireframe!

Separate Designelemente mithilfe von Kategorien speichern

Klicken Sie auf das Symbol "Zur Bibliothek hinzufügen"

Sie können auch bestimmte Designelemente auf Ihrer Seite separat speichern. Wenn Sie beispielsweise eine Sammlung von Heldenabschnitten erstellen möchten, können Sie Ihren Heldenabschnitt ganz einfach zu Ihrer Divi-Bibliothek hinzufügen.

Neue Kategorie hinzufügen & Designelement einen Namen geben

Um eine besser organisierte Struktur zu haben, fügen Sie eine neue Kategorie von Abschnitten namens "Heldenabschnitte" hinzu, damit Sie leicht den Heldenabschnitt Ihrer Wahl finden und alle Designs erkunden können, die Sie auf Lager haben.

Vorschau

Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Endergebnis.

Abschließende Gedanken

In diesem Use-Case-Blog-Post haben wir Ihnen gezeigt, wie Sie Divi-Layouts in wiederverwendbare Wireframes umwandeln. Das Umwandeln von Layouts in Wireframes hilft Ihnen, den Gesamtüberblick darüber zu behalten, wie eine Website-Struktur aussehen soll. Sie eignen sich auch hervorragend, um einem Kunden in der ersten Phase des Website-Erstellungsprozesses den Designstil mitzuteilen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie unbedingt einen Kommentar im Kommentarbereich!