So erstellen Sie einen Stammbaum mit den Transformationseinstellungen von Divi

Haben Sie schon einmal versucht, einen Stammbaum für Ihre Website zu erstellen, wussten aber nicht genau, wie Sie damit umgehen sollen? Nun, im heutigen Divi-Tutorial zeigen wir Ihnen genau, wie das geht. Neben der Erstellung des Stammbaums stellen wir auch sicher, dass er auf allen Bildschirmgrößen reagiert. Sobald Sie mit der Erstellung des Stammbaums fertig sind, können Sie die Bilder, den Text und das Design jederzeit nach Ihren eigenen Wünschen ändern und ihn live schalten! Möchten Sie sofort mit diesem Stammbaum-Design beginnen? Sie können die JSON-Datei kostenlos herunterladen und zu jeder Website hinzufügen, die Sie erstellen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Stammbaum-Layout KOSTENLOS herunter

Um das kostenlose Stammbaum-Layout 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!

Abonnieren Sie unseren Youtube-Kanal

Positionierung von Familienmitgliedern

Neuen Abschnitt hinzufügen

Abstand

Beginnen wir mit dem Erstellen! Als erstes müssen wir der Seite, an der wir arbeiten, einen neuen regulären Abschnitt hinzufügen. Öffnen Sie die Abschnittseinstellungen und fügen Sie mithilfe der Ansichtsfensterbreite benutzerdefinierte obere und untere Abstände hinzu.

• Obere Polsterung: 8vw
• Untere Polsterung: 8vw

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie die erste Zeile zu Ihrem Abschnitt hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Abschnitts und des Bildschirms einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Um auf dem Desktop links und rechts der Zeile Leerraum hinzuzufügen, fügen wir mithilfe der Breiteneinheit des Ansichtsfensters einige benutzerdefinierte linke und rechte Auffüllungen hinzu.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Linke Polsterung: 15vw (Desktop), 0vw (Tablet & Telefon)
• Rechte Polsterung: 15vw (Desktop), 0vw (Tablet & Telefon)

Bildmodul zur Spalte hinzufügen

Bild hochladen

Zeit, Module hinzuzufügen! Das erste, was wir brauchen, ist ein Image-Modul. Laden Sie ein Bild mit einer Breite und Höhe von '180px' hoch.

Ausrichtung

Gehen Sie dann zur Registerkarte Design und ändern Sie die Bildausrichtung.

• Bildausrichtung: Mitte

Größe

Ändern Sie als nächstes die Größeneinstellungen.

• Breite: 49%
• Modulausrichtung: Mitte

Grenze

Und verwandeln Sie das Bild in einen Kreis, indem Sie in den Randeinstellungen jeder Ecke einen hohen Wert hinzufügen. Wir verwenden '20vw', aber Sie können eine beliebige hohe Zahl verwenden.

Textmodul zur Spalte hinzufügen

Inhalt hinzufügen

Weiter zum nächsten Modul, das ein Textmodul ist. Fügen Sie hier den Namen des Familienmitglieds hinzu.

Hintergrundfarbe

Gehen Sie dann zu den Hintergrundeinstellungen und ändern Sie die Hintergrundfarbe in Weiß.

• Hintergrundfarbe: #ffffff

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen. Wenn Sie ein anderes Erscheinungsbild für den Stammbaum erstellen möchten, können Sie mit diesen Einstellungen herumspielen.

• Textschriftart: Open Sans
• Textfarbe: #000000
• Textgröße: 0,8 vw (Desktop), 1,2 vw (Tablet), 1,9 vw (Telefon)
• Textzeilenhöhe: 0.4em
• Textausrichtung: Mitte

Abstand

Fahren Sie mit den Abstandseinstellungen fort und fügen Sie einige benutzerdefinierte Werte für Rand und Abstand hinzu. Diese Werte helfen uns, das Textmodul zu formen und es leicht mit dem Bildmodul zu überlappen.

• Obere Marge: -0.5vw
• Linker Rand: 1vw
• Rechter Rand: 1vw
• Obere Polsterung: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)
• Untere Polsterung: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)

Grenze

Gehen Sie zu den Randeinstellungen und fügen Sie auch einen oberen Rand hinzu.

• Breite des oberen Rands: 5px
• Farbe des oberen Rands: #000000

Box Schatten

Zusammen mit einem Box Shadow, um Tiefe auf der Seite zu erzeugen.

• Vertikale Position des Kastenschattens: 10px
• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.17)

Z-Index

Um sicherzustellen, dass das Textmodul über dem Bildmodul bleibt, erhöhen wir den Z-Index in den Sichtbarkeitseinstellungen des Textmoduls.

• Z-Index: 2

Zeile dreimal klonen

Nachdem Sie die erste Zeile erstellt und alle darin enthaltenen Module geändert haben, können Sie die Zeile dreimal klonen. Dies wird uns helfen, bei den nächsten Schritten des Tutorials Zeit zu sparen. Jede dieser Zeilen wird verwendet, um eine andere Ebene im Stammbaum zu erstellen.

Zeile 1 anpassen

Beide Module 7 Mal klonen

Beginnen wir mit der Anpassung der ersten Ebene des Stammbaums! Wechseln Sie in den Wireframe-Modus und klonen Sie die beiden Module in Ihrer Reihe 7 Mal. Wenn Sie fertig sind, sollte das Backend Ihrer Zeile so aussehen:

Spaltenhauptelement CSS

Wir verwandeln die gesamte Spalte in ein Raster. Insgesamt sollten sich 16 Module in Ihrer Spalte befinden. Wir werden diese 16 Module in 8 Rasterspalten platzieren. Dies bedeutet, dass jede der 8 Rasterspalten 2 Module enthält; ein Bildmodul und ein Textmodul. Öffnen Sie die Zeileneinstellungen der ersten Zeile und fügen Sie dem Spaltenhauptelement die folgenden Zeilen CSS-Code hinzu:

display: grid;
grid-template-columns: repeat(8, 12.5%);

Zeile 2 anpassen

Klonen Sie beide Module dreimal

Auf in die zweite Reihe! Hier werden wir beide Module dreimal klonen.

Spaltenhauptelement

Wir verwandeln die Spalte in ein Raster mit 4 Rasterspalten, indem wir dem Spaltenhauptelement der Zeile die folgenden Zeilen CSS-Code hinzufügen:

display: grid;
grid-template-columns: repeat(4, 25%);

Der Grund, warum wir diesen Ansatz verwenden, anstatt nur eine vorhandene Zeilen-Spalten-Struktur mit 4 Spalten zu wählen, ist, dass alles auf kleineren Bildschirmgrößen zu 100% reaktionsfähig bleibt.

Zeile 3 anpassen

Beide Module klonen

Auf in die dritte Reihe! Klonen Sie jedes Modul einmal.

Spaltenhauptelement

Fügen Sie dann dem Spaltenhauptelement die folgenden CSS-Codezeilen hinzu:

display: grid;
grid-template-columns: repeat(2, 50%);

Zeile 4 anpassen

Zeilenabstand

Auf in die nächste und letzte Reihe! Hier müssen wir nur die Werte für die Zeilenauffüllung ändern.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Linke Polsterung: 31vw
• Rechte Polsterung: 31vw

Verbinden von Familienmitgliedern mithilfe von Bildmodulen

Zeile 1 hinzufügen

Spaltenstruktur

Nachdem wir nun alle Familienmitglieder aufgereiht haben, können wir beginnen, sie zu verbinden! Fügen Sie dazu eine neue Zeile zwischen der ersten und zweiten Zeile hinzu.

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größenwerte.

• Breite: 100%
• Maximale Breite: 100%

Abstand

Gehen Sie als nächstes zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Linke Polsterung: 15vw (Desktop), 0vw (Tablet & Telefon)
• Rechte Polsterung: 15vw (Desktop), 0vw (Tablet & Telefon)

Bildmodul zur Spalte hinzufügen

Illustration hochladen

Fügen Sie dann ein Bildmodul hinzu und laden Sie die Illustration hoch, die Sie in dem Ordner finden, den Sie am Anfang dieses Beitrags heruntergeladen haben.

Größe

Gehen Sie zu den Größeneinstellungen des Bildmoduls und aktivieren Sie die Option 'Vollbreite erzwingen'.

• Volle Breite erzwingen: Ja

Abstand

Stellen Sie sicher, dass Sie die Option "Abstand unter dem Bild anzeigen" in den Abstandseinstellungen deaktivieren.

• Leerzeichen unter dem Bild anzeigen: Nein

Klonen Sie die Reihe zweimal und ändern Sie ihre Position

Sobald Sie mit dem Ändern der Zeile und des darin enthaltenen Bildmoduls fertig sind, klonen Sie es zweimal. Platzieren Sie die Duplikate entsprechend:

Zeile 1 anpassen

Bildmodul dreimal klonen

Gehen Sie zurück in die erste Reihe und klonen Sie das Modul dreimal.

Spaltenhauptelement

Platzieren Sie diese Bildmodule in einem Raster mit 4 Rasterspalten, indem Sie die folgenden CSS-Codezeilen zum Spaltenhauptelement der Zeile hinzufügen:

display: grid;
grid-template-columns: repeat(4, 25%);

Zeile 2 anpassen

Bildmodul klonen

Gehen Sie zur zweiten Reihe und klonen Sie das Image-Modul einmal.

Spaltenhauptelement

Platzieren Sie beide Module in einem Raster mit zwei Rasterspalten, indem Sie dem Spaltenhauptelement der Zeile die folgenden CSS-Codezeilen hinzufügen:

display: grid;
grid-template-columns: repeat(2, 50%);

Zeile 3 anpassen

Abstand ändern

Weiter zum nächsten und letzten Duplikat. Hier müssen Sie nur die benutzerdefinierten Padding-Werte ändern und fertig!

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Linke Polsterung: 27vw
• Rechte Polsterung: 27vw

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divi einen modernen Stammbaum erstellen! Der von uns neu erstellte Stammbaum sieht auf allen Bildschirmgrößen großartig aus. Zu Beginn dieses Tutorials konnten Sie die JSON-Datei auch kostenlos herunterladen und sofort loslegen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!