Möchten Sie ein Organigramm in Divi erstellen?
Wissen, wie man ein Flussdiagramm-Layout in erstellt Divi eröffnet viele Möglichkeiten, Prozesse und Ideen auf einem zu kommunizieren Website. In einigen Fällen können Flussdiagramme verwendet werden, um äußerst komplexe Ideen mit einer großen Anzahl von Elementen zu erklären.
Auf einem Website, diese komplexeren Flussdiagramme können jedoch schwierig zu erreichen sein, insbesondere wenn Sie möchten, dass sie reaktionsschnell sind.
In diesem Tutorial zeigen wir Ihnen, wie Sie ein praktisches Flussdiagramm-Layout erstellen, das Sie auf Ihrem Computer verwenden können Website, einfach, effektiv und reaktionsschnell.
Außerdem verwenden wir zum Erstellen nur die integrierten Optionen von Divi, sodass Sie sich keine Gedanken über das Hinzufügen von benutzerdefiniertem Code oder Plugins machen müssen.
Lassen Sie uns beginnen!
Übersicht
Hier ist ein kurzer Blick auf das Flussdiagrammdesign, das wir in diesem Tutorial erstellen werden.
Erstellen Sie eine neue Seite mit Divi Builder
Um zu beginnen, müssen Sie Folgendes tun:
Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.
Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie Divi Builder
klicken Sie dann auf Beginnen Sie mit dem Bauen (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 Sie eine Reihe mit zentriertem Klappentext
Um mit der Erstellung des Flussdiagramm-Layouts in Divi zu beginnen, erstellen wir zunächst eine Zeile mit zentriertem Klappentext. Dies ist das erste Element des Flussdiagramms.
Abschnittspolsterung
Öffnen Sie zunächst die Abschnittseinstellungen für den Standardabschnitt und stellen Sie die untere Polsterung auf 0px ein.
- Polsterung (unten): 0px
Linie
Fügen Sie innerhalb des Abschnitts einer Spalte eine Zeile hinzu.
Öffnen Sie die Linieneinstellungen und aktualisieren Sie die folgenden Designeinstellungen:
- Dachrinnenbreite: 1
- Polsterung (oben und unten): 0px
Klappentext-Mod-Design
Um unser erstes Flussdiagrammelement zu erstellen, verwenden wir ein Blurb-Modul.
Fügen Sie ein Blurb-Modul inline ein.
Modulparameter
Öffnen Sie die Einstellungen des Blurb-Moduls. Unter 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 verwenden wir Symbole aus der Crowdfunding-Layoutpaket .
Dann geben Sie dem Modul eine Hintergrundfarbe:
- Hintergrund: #f8f8f8
Unter der Registerkarte Design, aktualisieren Sie Folgendes:
- Textausrichtung: Zentriert
- Maximale Breite: 400 Pixel (Desktop und Tablet), 90 % (Telefon)
- Ausrichtungsmodul: Mitte
- Polsterung: 6 % (oben und unten), 3 % (links und rechts)
Als Nächstes geben Sie dem Blurb-Modul wie folgt einen Rahmen:
- Randbreite: 2px
Schritt 2: Erstellen der Verbindungslinie mit einer vertikalen Linie und einem Pfeil
Für den nächsten Teil unseres Flussdiagramm-Layouts erstellen wir eine Reihe von Anschlüssen mit einer zentrierten vertikalen Linie und einem Pfeil. Diese Linie wird verwendet, um die Linien von zu verbinden Inhalt des Organigramms, das sich bis zum Ende der Seite fortsetzen sollte.
In diesem Fall möchten wir das Flussdiagramm beginnen, indem wir eine Linie und einen Pfeil unterhalb der vorherigen Linie hinzufügen, wobei das Blurbn-Modul zentriert ist.
Erstellen Sie eine neue Zeile und kopieren/fügen Sie die Stile aus der vorherigen Zeile ein
Fügen Sie dazu eine neue Zeile zu einer Spalte unterhalb der vorherigen Zeile hinzu.
Verwendung der " Andere Moduleinstellungen (oder Rechtsklick-Optionen), kopieren Sie die Stile aus der vorherigen Zeile oben und fügen Sie sie in die neue Zeile ein.
Erstellen eines vertikalen Linientrenners
Um den vertikalen Linientrenner zu erstellen, fügen Sie der Linie ein neues Teilermodul hinzu.
Aktualisieren Sie unter den Teilereinstellungen die Designeinstellungen wie folgt:
- Linienfarbe: #333333
- Zeilenposition: Unten
- Teilergewicht: 150px
- Breite: 2 Pixel
- Ausrichtungsmodul: Mitte
- Rand: -1px (unten)
Unter der Registerkarte Fortgeschrittener, blenden Sie den Überlauf wie folgt aus:
- Horizontaler Überlauf: Ausgeblendet
- Vertikaler Überlauf: Ausgeblendet
Erstellen Sie einen Pfeil mit einem Blurb-Modul
Als Nächstes erstellen wir mithilfe eines Präsentationsmoduls ein Pfeilsymbol, das sich über der Trennlinie befindet.
Um den Pfeil zu erstellen, fügen Sie unterhalb der Trennlinie ein neues Blurb-Modul hinzu.
Blurb-Mod-Einstellungen
Entfernen Sie unter den Moduleinstellungen den Standardtitel und den Textkörper und klicken Sie auf Symbol verwenden, Wählen Sie dann das Pfeilsymbol (siehe Screenshot).
Unter der Registerkarte Design, aktualisieren Sie Folgendes:
- Symbolfarbe: #bbbbbb
- Bild-/Icon-Ausrichtung: zentriert
- Symbolschriftgröße verwenden: JA
- Symbolschriftgröße: 50 Pixel (Desktop), 40 Pixel (Tablet und Telefon)
- Maximale Breite: 50 %
- Ausrichtungsmodul: Mitte
- Höhe: 50 Pixel (Desktop), 40 Pixel (Tablet und Telefon)
Unter der Registerkarte Fortgeschrittener, fügen Sie das folgende CSS hinzu Blurb-Bild :
margin-bottom: 0px;
background: #ffffff;
Um den Pfeil über der Linie zu positionieren, aktualisieren Sie Folgendes:
- Position: Absolut
- Ort: Zentrum
- Z-Index: 10
Schritt 3: Erstellen einer Linie für benachbarte Teile des Flussdiagramms
Sobald die Reihe der Konnektoren fertig ist, fügen wir eine weitere Reihe mit mehreren benachbarten Blurb-Modulen hinzu, um das Design des Flussdiagramms fortzusetzen.
Um die Linie hinzuzufügen, kopieren Sie einfach die erste Linie (die Linie mit dem zentrierten Klappentext, die wir oben im Layout erstellt haben) und fügen Sie sie unterhalb der Verbindungslinie ein.
Öffnen Sie die Leitungseinstellungen und aktualisieren Sie Folgendes:
- Maximale Breite: 50 %
- Randbreite: 2px
Linke Seite des Flussdiagramms
Nachdem unsere Umrandung nun der Linie hinzugefügt wurde, positionieren wir das Blurb-Modul über der linken Umrandungslinie.
Aktualisieren Sie dazu die folgenden Designeinstellungen:
- Ausrichtungsmodul: links
- Rand: 70px (oben und unten)
- Transformieren X-Achse übersetzen: -50 %
Dies ist der Schlüssel, damit das Blurb-Modul horizontal über der Begrenzungslinie zentriert wird.
Rechte Seite des Flussdiagramms
Um ein weiteres Blurb-Modul an der rechten Randlinie hinzuzufügen, duplizieren Sie den vorhandenen Klappentext.
Um den Klappentext an der rechten Begrenzungslinie zu positionieren, gehen Sie auf die Registerkarte Fortgeschrittener und ihm eine absolute Position geben:
- Position: Absolut
- Ort: Mitte rechts
Aktualisieren Sie als Nächstes die folgenden Optionen:
- Ränder: keine
- Transformieren Y-Achse verschieben: -50 %
- Transformieren X-Achse übersetzen: 50 %
Pfeile an den Ecken jeder Grenzlinie hinzugefügt
Um das Flussdiagramm klarer über die Richtung zu machen, in der die Zeilen fortschreiten, fügen wir zusätzliche Pfeilsymbole zu den Zeilenbegrenzungszeilen hinzu.
Pfeil oben links
Um einen Pfeil zur oberen linken Randzeile hinzuzufügen, duplizieren Sie das Pfeil-Blurb-Modul, das wir in der Verbindungszeile erstellt haben, und ziehen Sie es in die Zeile mit den angrenzenden Blurb-Modulen.
Öffnen Sie das Duplicate Arrow Blurb-Modul und ändern Sie das Symbol in einen nach links zeigenden Pfeil.
Aktualisieren Sie als Nächstes den Speicherort der Modulposition:
- 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 Begrenzungslinie sitzt, duplizieren Sie den Pfeil " oben links die wir gerade erstellt haben. Öffnen Sie dann die Einstellungen und ändern Sie den Positionsort:
- Ort: Oben rechts
Aktualisieren Sie auch das Pfeilsymbol mit einem nach rechts zeigenden Pfeil.
Pfeil nach unten links
Um einen Pfeil zu erstellen, der sich auf der unteren linken Begrenzungslinie befindet, duplizieren Sie den Pfeil " oben rechts die wir gerade erstellt haben.
Öffnen Sie dann die Einstellungen und ändern Sie den Positionsort:
- Ort: unten links
Aktualisieren Sie als Nächstes die Option Transform Translate:
- Transformieren Y-Achse verschieben: 50 %
Pfeil nach unten rechts
Um einen Pfeil zu erstellen, der auf der unteren rechten Begrenzungslinie sitzt, duplizieren Sie den Pfeil " unten links die wir gerade erstellt haben.
Öffnen Sie dann die Einstellungen und ändern Sie den Positionsort:
- Ort: Unten rechts
Aktualisieren Sie auch das Pfeilsymbol mit einem nach links zeigenden Pfeil.
Sobald alle Pfeile platziert sind, können Sie die Beschriftungen für jeden mithilfe von aktualisieren Ebenenansicht .
Schritt 4: Hinzufügen einer weiteren Verbindungslinie
Nachdem wir die Linie mit den beiden angrenzenden Teilen des Flussdiagramms und allen Pfeilen vervollständigt haben, können wir das Flussdiagramm fortsetzen, indem wir eine weitere Verbindungslinie hinzufügen.
Duplizieren Sie dazu die oben erstellte Verbindungslinie und fügen Sie sie unterhalb der Zeile mit den Blurb-Modulen aus dem angrenzenden Teil des Flussdiagramms ein.
Schritt 5: Anpassen des Flusses mit einem geraden Kantenlinienverbinder
Im bestehenden Flussdiagrammdesign beginnt der Fluss mit dem obersten Element, verzweigt sich dann zu den rechts und links angrenzenden Elementen, kehrt dann zur Mitte zurück und geht zum nächsten mittleren Element.
Um den Fluss anzupassen, duplizieren wir den Abschnitt, sodass wir das Flussdiagramm so anpassen können, dass es bei den angrenzenden Präsentationselementen auf der linken Seite stoppt und mit dem Präsentationselement auf der rechten Seite fortfährt.
Abschnitt duplizieren
Duplizieren Sie dazu zunächst den gesamten Abschnitt, der das Flussdiagramm enthält.
Fügen Sie ein weiteres linkes Klappentext-Modul hinzu
Suchen Sie im Duplikatbereich (unten) das linke Blurb-Modul in der Reihe mit den beiden angrenzenden Modulen. Als nächstes duplizieren Sie den Klappentext auf der linken Seite, um direkt darunter einen neuen zu erstellen.
Untere Pfeile und Rahmen entfernen
Löschen Sie als Nächstes den unteren linken Pfeil und den unteren rechten Pfeil.
Öffnen Sie die Linieneinstellungen für die Linie mit den mehreren Klappentexten und entfernen Sie den unteren Rand:
- Breite des unteren Randes: 0px
Erstellen Sie eine Linie mit einem geraden Grenzlinienverbinder
Jetzt möchten wir das Flussdiagrammdesign mit einem rechten Randlinienverbinder anpassen, der die rechte Randlinie der Linie mit der darunter liegenden Verbindungslinie verbindet.
Dazu erstellen wir eine weitere Linie und fügen auf der rechten Seite eine benutzerdefinierte Trennlinie und einen Umrisspfeil hinzu.
Fügen Sie eine neue Zeile eine Spalte unter der vorhandenen Zeile mit den drei Layouts hinzu.
Aktualisieren Sie die Zeileneinstellungen wie folgt auf der Registerkarte Design :
- Rinnenbreite: 1
- Maximale Breite: 50 %
- Polsterung: 0px (oben und unten)
Als nächstes fügen Sie der Linie einen geraden Rand hinzu.
- Rechte Randbreite: 2px
Fügen Sie der Linie dann ein Teilermodul hinzu.
Aktualisieren Sie die Teilereinstellungen wie folgt:
- Linienfarbe: #333333
- Zeilenposition: Unten
- Teilergewicht: 2px
- Breite: 50 %
- Rand: -2px (unten)
Aktualisieren Sie auf der Registerkarte „Erweitert“ die Position des Trennzeichens:
- Position: Absolut
- Ort: Unten rechts
Kopieren Sie mit der Trennlinie das Blurb-Modul aus dem unteren rechten Pfeil der dritten Reihe des ersten Abschnitts und fügen Sie es in die Reihe mit der rechten Trennlinie ein.
Öffnen Sie die Blurb-Moduleinstellungen des Pfeils, den Sie gerade dupliziert und verschoben haben, und aktualisieren Sie Folgendes:
- Position: Standard
- Ausrichtungsmodul: rechts
Flussstopp der linken Grenzlinie
Derzeit ist ein Teil des linken Rands unterhalb des Klappentexts unten links sichtbar. Um es auszublenden, entfernen Sie einfach den unteren Rand dieses unteren Klappentexts.
Schritt 6: Aktualisieren der Linie mit einem Linienverbinder am linken Rand
Ihr Flussdiagramm benötigt möglicherweise auch einen Verbindungspunkt für die linke Grenzlinie. Um es zu erstellen, können wir die Linie mit dem rechten Grenzlinienverbinder wie folgt aktualisieren:
- Linke Randbreite: 2px
- Rechte Randbreite: 0
Aktualisieren Sie das Trennzeichen innerhalb der Zeile mit einer neuen Position:
- Ort: unten links
Aktualisieren Sie als Nächstes die Pfeilausrichtung:
- Ausrichtungsmodul: links
Und ändern Sie das Symbol in einen Rechtspfeil.
Endergebnis
Schauen Sie sich das Endergebnis an.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Tutorial haben wir ein nützliches Flussdiagramm-Layout erstellt, das jeder verwenden kann, um Prozesse und Ideen zu kommunizieren Besucher mit einem atemberaubenden responsiven Design.
Verwenden Sie es, um die Dienstleistungen oder den Designprozess zu präsentieren, eine Infografik zu erstellen oder Kunden durch den Prozess zu führen Inhalt auf eine neue Art und Weise.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.
Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
