So erstellen Sie ein Flussdiagramm-Layout in Divi

Zu wissen, wie man ein Flussdiagramm-Layout in Divi erstellt, eröffnet viele Möglichkeiten, Prozesse und Ideen auf einer Website zu kommunizieren. In einigen Fällen können Flussdiagramme verwendet werden, um sehr komplexe Ideen mit einer großen Anzahl von Elementen zu erklären. Auf einer Website können diese komplexeren Flussdiagramme jedoch schwierig zu erreichen sein, insbesondere wenn Sie möchten, dass sie reaktionsschnell ist.

In diesem Tutorial zeigen wir Ihnen, wie Sie ein praktisches Flussdiagramm-Layout erstellen, das Sie auf Ihrer Website verwenden können, das einfach, effektiv und reaktionsschnell ist. Grundsätzlich werden wir kreativ mit Divi-Rahmen, Teilern, Klappen und Transformationsoptionen, um ein Flussdiagramm-Layout zu erstellen, das Sie ganz einfach an Ihre eigenen Bedürfnisse anpassen können. Außerdem werden wir nur die integrierten Optionen von Divi verwenden, um es zu erstellen, sodass Sie sich keine Gedanken über das Hinzufügen von benutzerdefiniertem Code oder Plugins machen müssen.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Flussdiagrammdesign, das wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

So erstellen Sie ein Flussdiagramm-Layout in Divi

Schritt 1: Erstellen einer Zeile mit einem zentrierten Blurb

Um mit der Erstellung des Flussdiagramm-Layouts in Divi zu beginnen, erstellen wir zunächst eine Zeile, die einen zentrierten Klappentext enthält. Dies ist das erste Element im Flussdiagramm.

Die Abschnittspolsterung

Öffnen Sie zunächst die Abschnittseinstellungen für den Standardabschnitt und stellen Sie den unteren Abstand auf 0px ein.

Die Reihe

Fügen Sie innerhalb des Abschnitts eine einspaltige Zeile hinzu.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie die folgenden Designeinstellungen:

• Dachrinnenbreite: 1
• Padding: 0px oben, 0px unten

Diese beiden Designeinstellungen werden für alle Zeilen in diesem Flussdiagramm-Layout verwendet, um sicherzustellen, dass kein zusätzlicher Platz zwischen Modulen und Zeilen hinzugefügt wird.

Das Blurb-Moduldesign

Um unser erstes Flussdiagrammelement zu erstellen, verwenden wir ein Klappenmodul.

Fügen Sie der Zeile ein neues Klappenmodul hinzu.

Blurb-Einstellungen

Öffnen Sie die Klappeneinstellungen. Auf der Registerkarte Inhalt können Sie den Standardtitel und den Textkörper beibehalten.

Aktualisieren Sie dann das Bild mit einem kleinen Symbolbild oder verwenden Sie eines der integrierten Divi-Symbole. Für dieses Tutorial verwende ich Symbole aus dem Crowdfunding Layout Pack.

Geben Sie dem Klappentext dann eine Hintergrundfarbe:

• Hintergrundfarbe: #f8f8f8

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Textausrichtung: Mitte
• Max. Breite: 400px (Desktop und Tablet), 90% (Telefon)
• Modulausrichtung: Mitte
• Polsterung: 6 % oben, 6 % unten, 3 % links, 3 % rechts

HINWEIS: Diese Klappengröße wird von allen Klappen im Flussdiagramm-Layout verwendet. Diese Größe funktioniert für dieses Layout, da das Flussdiagramm nie mehr als zwei benachbarte (nebeneinander) Klappentexte enthält. Dies ermöglicht es uns, das Design reaktionsschnell zu halten und auch auf Tablets und Telefonen gut auszusehen.

Geben Sie dem Klappentext als Nächstes einen Rahmen wie folgt:

• Rahmenbreite: 2px

Schritt 2: Erstellen der Verbindungszeile mit vertikaler Linie und Pfeil

Für den nächsten Teil unseres Flussdiagramm-Layouts erstellen wir eine Verbindungszeile mit einer zentrierten vertikalen Linie und einem Pfeil. Diese Zeile wird verwendet, um Zeilen mit Flussdiagramminhalten zu verbinden, die auf der Seite fortgesetzt werden müssen.

In diesem Fall möchten wir das Flussdiagramm beginnen, indem wir eine Linie und einen Pfeil unterhalb der vorherigen Zeile mit dem zentrierten Klappenmodul hinzufügen.

Neue Zeile erstellen und Zeilenstile aus der vorherigen Zeile kopieren/einfügen

Fügen Sie dazu eine neue einspaltige Zeile unter der vorherigen Zeile hinzu.

Kopieren Sie über das Menü "Weitere Optionen" (oder Rechtsklickoptionen) die Zeilenstile aus der vorherigen Zeile oben und fügen Sie sie in die neue Zeile ein.

Erstellen eines vertikalen Linienteilers

Um den vertikalen Linienteiler zu erstellen, fügen Sie der Reihe ein neues Teilermodul hinzu.

Aktualisieren Sie unter den Trennereinstellungen die Designeinstellungen wie folgt:

• Linienfarbe: #333333
• Linienposition: Unten
• Teilergewicht: 150px
• Breite: 2px
• Modulausrichtung: Mitte
• Rand: -1px unten

Blenden Sie den Überlauf auf der Registerkarte "Erweitert" wie folgt aus:

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Erstellen eines Pfeils mit einem Blurb-Modul

Als Nächstes erstellen wir mit einem Klappenmodul ein Pfeilsymbol, das über der Trennlinie sitzt.

Um den Pfeil zu erstellen, fügen Sie ein neues Klappenmodul unter dem Teiler hinzu.

Einstellungen für Pfeilblurb

Nehmen Sie unter den Klappeneinstellungen den Standardtitel und den Haupttext heraus und klicken Sie, um das untere Pfeilsymbol zu verwenden (siehe Screenshot).

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Symbolfarbe: #bbbbbb
• Bild-/Symbolausrichtung: Mitte
• Symbolschriftgröße: 50px (Desktop), 40px (Tablet und Telefon)

• Maximale Breite: 50%
• Modulausrichtung: Mitte
• Höhe: 50px (Desktop), 40px (Tablet und Telefon)

Fügen Sie auf der Registerkarte "Erweitert" das folgende CSS zum Blurb-Bild hinzu:

margin-bottom: 0px;
background: #ffffff;

Dadurch wird der Standardrand des Klappentextes entfernt und ein weißer Hintergrund hinzugefügt, um den Eindruck eines Raums zwischen dem Symbol und der Linie zu erzeugen, sobald wir das Symbol über der Linie positionieren.

Um den Pfeil über der Linie zu positionieren, aktualisieren Sie Folgendes:

• Position: Absolut
• Ort: Zentrum
• Z-Index: 10

Schritt 3: Erstellen einer Zeile mit angrenzenden Flussdiagramm-Blurbs und -Pfeilen

Sobald die Konnektorzeile fertig ist, fügen wir eine weitere Zeile mit mehreren angrenzenden Klappentexten hinzu, um das Flussdiagrammdesign fortzusetzen.

Um die Zeile hinzuzufügen, kopieren Sie einfach die erste Zeile (die Zeile mit einem zentrierten Klappentext, die wir oben im Layout erstellt haben) und fügen Sie sie unter die Verbindungszeile ein.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Maximale Breite: 50%
• Rahmenbreite: 2px

Die maximale Breite von 50 % ist wichtig, damit das Layout reaktionsschnell funktioniert. Es stellt sicher, dass die Klappentexte, die rechts und links der Zeile überlaufen, die Browserbreite nicht überschreiten.

Erstellen eines Flussdiagramm-Blurbs auf der linken Randlinie

Nachdem unser Rand der Zeile hinzugefügt wurde, positionieren wir den Klappentext über der linken Randlinie.

Aktualisieren Sie dazu die folgenden Designeinstellungen:

• Modulausrichtung: Links
• Rand: 70 Pixel oben, 70 Pixel unten

• Transformieren Übersetzen X-Achse: -50%

Dies ist der Schlüssel, um den Klappentext horizontal zentriert über der Grenzlinie zu platzieren.

Erstellen eines angrenzenden Flussdiagramm-Blurbs auf der rechten Randlinie

Um einen weiteren Klappentext an der rechten Randlinie hinzuzufügen, duplizieren Sie den vorhandenen Klappentext.

Um den Klappentext an der rechten Randlinie zu positionieren, gehen Sie auf die Registerkarte Erweitert und geben Sie ihm eine absolute Position:

• Position: Absolut
• Ort: Rechte Mitte

Aktualisieren Sie dann die Optionen für die Rand- und Transformationsübersetzung wie folgt:

• Rand: keine
• Transformieren Y-Achse verschieben: -50%
• Transformieren X-Achse verschieben: 50%

Hinzufügen von Pfeilunschärfen zu den Ecken jeder Grenzlinie

Um das Flussdiagramm klarer zu machen, in welche Richtung sich die Linien bewegen, fügen wir zusätzliche Pfeilsymbole an den Randlinien der Reihe hinzu.

Pfeil oben links

Um der oberen linken Randlinie einen Pfeil hinzuzufügen, duplizieren Sie den von uns erstellten Pfeiltext in der Verbindungszeile und ziehen Sie ihn in die Zeile mit den angrenzenden Klappentexten.

Öffnen Sie den Klappentext des doppelten Pfeils und ändern Sie das Symbol in einen linken Pfeil.

Aktualisieren Sie dann die Position der Pfeilübersicht:

• Ort: Oben links

Aktualisieren Sie abschließend die Transformationsübersetzungsoption wie folgt:

• Transformieren Y-Achse verschieben: -50%

Pfeil oben rechts

Um einen Pfeil zu erstellen, der auf der oberen rechten Grenzlinie sitzt, duplizieren Sie den gerade erstellten Pfeil „oben links“. Öffnen Sie dann die Einstellungen und ändern Sie den Positionsort:

• Ort: Oben rechts

Aktualisieren Sie außerdem das Pfeilsymbol mit einem Rechtspfeil.

Pfeil unten links

Um einen Pfeil zu erstellen, der auf der unteren linken Randlinie sitzt, duplizieren Sie den gerade erstellten Pfeil „oben rechts“.

Öffnen Sie dann die Einstellungen und ändern Sie den Positionsort:

• Ort: Unten links

Aktualisieren Sie als Nächstes die Transformationsübersetzungsoption:

• Transformieren Y-Achse verschieben: 50%

Pfeil unten rechts

Um einen Pfeil zu erstellen, der auf der unteren rechten Randlinie sitzt, duplizieren Sie den gerade erstellten Pfeil „unten links“.

Öffnen Sie dann die Einstellungen und ändern Sie den Positionsort:

• Ort: Unten rechts

Aktualisieren Sie außerdem das Pfeilsymbol mit einem Linkspfeil.

Nachdem alle Pfeile platziert wurden, können Sie die Beschriftungen der einzelnen Pfeile in der Ebenenansicht aktualisieren.

Schritt 4: Hinzufügen einer weiteren Anschlusszeile

Nachdem wir die Zeile mit den beiden angrenzenden Flussdiagramm-Klappen und allen Pfeilen abgeschlossen haben, können wir das Flussdiagramm fortsetzen, indem wir eine weitere Konnektorzeile hinzufügen.

Duplizieren Sie dazu die oben erstellte Konnektorzeile und fügen Sie sie unterhalb der Zeile mit den angrenzenden Flussdiagramm-Klappentexten ein.

Schritt 5: Anpassen des Flows mit einem rechten Randlinien-Konnektor

Im bestehenden Flussdiagrammdesign beginnt der Fluss mit dem obersten Element und verzweigt sich dann zu den rechts und links angrenzenden Elementen und kommt dann zur Mitte zurück und geht zum nächsten zentrierten Element weiter. Um den Ablauf anzupassen, werden wir den Abschnitt duplizieren, sodass wir das Ablaufdiagramm so anpassen können, dass es bei den links angrenzenden Klappenelementen anhält und vom rechten Klappenelement aus fortfährt.

Abschnitt duplizieren

Dazu duplizieren Sie zunächst den gesamten Abschnitt des Flussdiagramminhalts.

Weiteres linkes Klappenelement hinzufügen

Suchen Sie im Duplikatsabschnitt (unten) den linken Klappentext in der Zeile mit den beiden benachbarten Klappentexten. Dann duplizieren Sie den linken Klappentext, um direkt darunter einen neuen zu erstellen.

Untere Pfeile und Rahmen löschen

Löschen Sie als Nächstes den unteren linken Pfeil und den unteren rechten Pfeil.

Öffnen Sie die Zeileneinstellungen für die Zeile mit den mehreren Klappentexten und entfernen Sie den unteren Rand:

• Breite des unteren Rands: 0px

Erstellen Sie eine Zeile mit einem rechten Randlinienverbinder

Jetzt möchten wir das Design des Flussdiagramms mit einem rechten Randlinien-Konnektor anpassen, der die rechte Randlinie der Reihe mit der darunter liegenden Konnektorreihe verbindet.

Dazu erstellen wir eine weitere Zeile und fügen auf der rechten Seite eine benutzerdefinierte Trennlinie und einen Pfeiltext hinzu.

Fügen Sie unterhalb der vorhandenen Zeile mit den drei Klappentexten eine neue einspaltige Zeile hinzu.

Aktualisieren Sie die Designeinstellungen der Zeile wie folgt:

• Dachrinnenbreite: 1
• Maximale Breite: 50%
• Padding: 0px oben, 0px unten

Fügen Sie als Nächstes einen rechten Rand zur Zeile hinzu.

• Breite des rechten Rands: 2px

Fügen Sie dann der Reihe ein Trennmodul hinzu.

Aktualisieren Sie die Teilereinstellungen wie folgt:

• Linienfarbe: #333333
• Linienposition: Unten
• Teilergewicht: 2px
• Breite: 50%
• Rand: -2px unten

Aktualisieren Sie auf der Registerkarte "Erweitert" die Trennerposition:

• Position: Absolut
• Ort: Unten rechts

Sobald die Trennlinie angebracht ist, kopieren Sie den Klappentext mit dem unteren rechten Pfeil aus der dritten Reihe im ersten Abschnitt und fügen Sie ihn in die Reihe mit der rechten Trennlinie ein.

Öffnen Sie die Einstellungen des gerade duplizierten und verschobenen Pfeils und aktualisieren Sie Folgendes:

• Position: Standard

• Modulausrichtung: rechts

Den Fluss der linken Grenzlinie stoppen

Im Moment ist etwas von der linken Grenzlinie unter dem linken unteren Klappentext freigelegt. Um es auszublenden, nehmen Sie einfach den unteren Rand dieses unteren Klappentextes heraus.

Schritt 6: Aktualisieren der Zeile mit einem linken Randlinienverbinder

Ihr Flussdiagramm muss möglicherweise auch einen Anschluss für die linke Grenzlinie haben. Um es zu erstellen, können wir die Zeile mit dem rechten Randlinien-Konnektor wie folgt aktualisieren:

• Breite des linken Rands: 2px
• Breite des rechten Rands: 0

Aktualisieren Sie die Trennlinie innerhalb der Reihe mit einer neuen Position:

• Ort: Unten links

Aktualisieren Sie dann die Ausrichtung des Pfeil-Klappentexts:

• Modulausrichtung: Links

Und ändern Sie das Symbol in einen Rechtspfeil.

Endergebnis

Sehen Sie sich das Endergebnis an. Ich habe den zweiten Abschnitt dupliziert und den linken Randlinienverbinder hinzugefügt, damit Sie beide sehen können.

Abschließende Gedanken

In diesem Tutorial haben wir ein nützliches Flussdiagramm-Layout erstellt, das jeder verwenden kann, um den Besuchern Prozesse und Ideen mit einem beeindruckenden responsiven Design zu kommunizieren. Verwenden Sie es, um den Prozess von Dienstleistungen oder Design zu präsentieren, eine Infografik zu erstellen oder Kunden auf neue Weise durch Inhalte zu führen. Hoffentlich wird es für Ihr nächstes Projekt nützlich sein.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!