So verwenden Sie die neuen Animationseffekte von Divi

Willkommen zu Teil 1 dieser 6-teiligen Serie, in der Sie erfahren, wie Sie mit den neuen Animationsoptionen von Divi tolle Seitenabschnitte gestalten. Ich werde Sie durch den Aufbau der verschiedenen Abschnitte unserer Live-Demo-Seite führen, um Ihnen Techniken zum Hinzufügen von Animationen zu Ihrer Website zu zeigen. Die Animationsfunktionen machen wirklich Spaß und sind einfach zu bedienen. Und mit dem Visual Builder können Sie sehen, wie Ihre Kreation in jeder Phase zum Leben erweckt wird. Kommen Sie und begleiten Sie mich, während wir die Kraft der Divi-Animation erkunden.

Animationen können eine Seite zum Leben erwecken. Wenn dies effektiv getan wird, kann der Benutzer engagierter werden und eher dazu neigen, den Inhalt Ihrer Seite zu erkunden. Schlecht gemachte Animationen können den Benutzer komplett ablenken und ihn in einen Zustand der benommenen Enttäuschung vertreiben. Die Geschwindigkeit, das Timing und die Intensität der Animation spielen bei dieser Symphonie der Bewegung eine bedeutende Rolle, wenn der Benutzer die Seite nach unten scrollt.

Mit den erweiterten Animationsfunktionen von Divi können Sie jedem Element Ihrer Website Animationen hinzufügen. Und Sie können diese animierten Elemente kombinieren, um unzählige Bewegungskombinationen zu erstellen, die Ihre Abschnitte lebendig werden lassen.

In Teil 1 dieser Serie zeige ich Ihnen, wie Sie mit dem Visual Builder die ersten beiden Abschnitte unserer Live-Demoseite erstellen und animieren, die die Leistungsfähigkeit der Animationsfunktionen von Divi demonstrieren.

Lass uns anfangen.

Hier ist ein kleiner Vorgeschmack auf das, was wir in dieser Serie bauen werden

Teil 1 der Serie

Abschnitt 1

Sektion 2

Teil 2 der Serie

Sektion 3

Sektion 4

Teil 3 der Serie

Abschnitt 5

Teil 4 der Serie

Abschnitt 6

Teil 5 der Serie

Abschnitt 7

Teil 6 der Serie

Sektion 8

Abschnitt 9

Vorbereiten der Designelemente

Für den ersten Abschnitt benötigen Sie zwei Bilder. Das erste ist Ihr Vollbild-Hintergrundbild mit Abmessungen von etwa 1280 × 800. Hier ist der, den ich verwende:

Das zweite Bild ist eine bearbeitete Version desselben Bildes, das vertikal gespiegelt und nach unten ausgeblendet wurde. Dieses zweite Bild dient als Hintergrund für Ihre Hauptüberschrift und sollte etwa 800×400 groß sein.

Um das auf dem Kopf stehende Bild zu erstellen, öffnen Sie entweder das Bild in der Vorschau und wählen Sie Extras > Vertikal spiegeln oder öffnen Sie das Bild in Photoshop, wählen Sie Bild > Bilddrehung > Leinwand vertikal spiegeln. Um den Ausblendeffekt am unteren Bildrand hinzuzufügen, habe ich das Radiergummi-Werkzeug im Pinselmodus mit einer Größe von 800px und 0% Härte verwendet. Dann hielt ich die Umschalttaste gedrückt und zog den Pinsel am unteren Rand entlang.

Stellen Sie sicher, dass Sie es als PNG-Datei exportieren.

Wenn Sie kein Photoshop haben, können Sie eine kostenlose Fotobearbeitungslösung wie gimpshop ausprobieren, um viele der gleichen Designbearbeitungen durchzuführen. Wenn Sie nicht wissen, wie man eine Fotobearbeitungssoftware verwendet (und an dieser Stelle nicht lernen möchten), können Sie das zweite Bild vorerst weglassen oder das untenstehende verwenden (klicken Sie darauf und ziehen Sie es auf Ihr Desktop).

Für den zweiten Abschnitt benötigen Sie zwei Bilder. Der erste sollte etwa 730 × 490 wie dieser sein.

Und die zweite sollte ungefähr 525 × 660 betragen, wie die folgende.

Verstehen der Animationsterminologie

Wenn Sie es noch nicht getan haben, lesen Sie den Beitrag zum Funktionsupdate, in dem erweiterte Animationen vorgestellt werden. Am Ende des Beitrags gibt Nick eine hilfreiche Definition/Beschreibung jeder der Animationsfunktionen, die Sie im gesamten Builder finden. Für den Erstellungsprozess ist es wichtig zu verstehen, was diese Animationsfunktionen tatsächlich tun.

Sobald Sie wissen, was diese Animationsfunktionen sind, tauchen wir ein.

So verwenden Sie die neuen Animationseffekte von Divi

Abonnieren Sie unseren Youtube-Kanal

Fügen Sie Ihre neuen Seiteneinstellungen hinzu

Gehen Sie im WordPress-Dashboard zu Seiten > Neu hinzufügen. Fügen Sie dann Ihrer Seite einen Titel hinzu. Suchen Sie als Nächstes die Divi-Seiteneinstellungen im Feld oben rechts auf der Seite und wählen Sie Punktnavigation „EIN“. Wählen Sie im Feld Seitenattribute die Option Leere Seite für Ihre Seitenvorlage aus. Klicken Sie abschließend auf die Schaltfläche „Use Divi Builder“ und stellen Sie den Visual Builder bereit, um mit der Erstellung Ihres Layouts zu beginnen.

Bauabschnitt 1: Vollbild-Header-Design und -Animation

Dieser Header-Abschnitt verhält sich ähnlich wie ein Header-Modul mit voller Breite, das auf Vollbild eingestellt ist. Mit anderen Worten, wenn die Site geladen wird, füllt der Abschnitt die gesamte Breite und Höhe des Browserfensters aus, unabhängig von der Größe des Fensters. Aber anstatt das Header-Modul mit voller Breite zu verwenden, werden wir einen Standardabschnitt verwenden und die Höhe auf 100 Vh setzen. Auf diese Weise können wir ein Textmodul darin hinzufügen.

Klicken Sie im Visual Builder auf , um die Abschnittseinstellungen des Standardabschnitts zu bearbeiten, die bereits standardmäßig beim Starten des Builders angezeigt werden. Aktualisieren Sie Folgendes:

Unter der Registerkarte Inhalt…

Hintergrundbild: [Geben Sie Ihr 1280×800 Hintergrundbild ein]
Verwenden Sie den Parallax-Effekt: JA
Parallaxenmethode: Echte Parallaxe

Unter der Registerkarte Design…

Benutzerdefinierte Polsterung: 5 % oben, 0 Pixel rechts, 5 % unten, 0 Pixel links

Unter der Registerkarte Erweitert…

Fügen Sie im Feld Hauptelement das folgende benutzerdefinierte CSS hinzu:

min-height: 100vh

Diese eine CSS-Zeile weist den Abschnitt an, 100 % der Ansichtsfensterhöhe anzuzeigen.

Einstellungen speichern

Fügen Sie als Nächstes eine einspaltige Struktur in Ihre Zeile ein und fügen Sie der Spalte einen Textbaustein hinzu. Aktualisieren Sie die Textmoduleinstellungen wie folgt:

Unter der Registerkarte Inhalt... .

Fügen Sie einfach das Wort „Divi“ in das Inhaltsfeld ein.

Unter der Registerkarte Design…

Textschriftart: Oswald, Großbuchstaben (TT)
Schriftgröße des Textes: 14px
Text Textfarbe: #08408e
Text Buchstabenabstand: 1,5 em (Sie müssen dies eingeben)
Textausrichtung: Mitte
Benutzerdefinierter Spielraum: 2%
Animationsstil: Flip
Animationswiederholung: Einmal
Animationsrichtung: Rechts
Animationsdauer: 2000 ms
Animationsverzögerung: 1100 ms
Animationsintensität: 100%
Anfangsdeckkraft der Animation: 0%
Animationsgeschwindigkeitskurve: Ease-In-Out

Time Out… Lassen Sie uns eine Minute pausieren, damit ich Ihnen zeigen kann, was nötig wäre, um diese ähnliche Animation manuell hinzuzufügen.

Hier ist der HTML-Code mit Inline-Styling, der für die Animation benötigt wird:

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

Und hier ist das CSS, das für die Animation benötigt wird:

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

Und dies beinhaltet nicht den Code, der erforderlich ist, um die Animation zu aktivieren, wenn sie im Browserfenster sichtbar wird. Wie auch immer, all dies zu sagen, dass diese integrierten Animationsfunktionen eine enorme Zeitersparnis sind. Und die Möglichkeit, die Animation live zu sehen, während Sie die Animationsoptionen bearbeiten, ist ein beträchtlicher Bonus.

Fahren wir nun mit der Aktualisierung unserer Textmoduleinstellungen fort:

Unter der Registerkarte Erweitert…

Fügen Sie die folgende Zeile mit benutzerdefiniertem CSS zum Feld „Hauptelement“ hinzu:

text-indent: 1.5em

Einstellungen speichern

Fügen Sie als nächstes ein weiteres Textmodul direkt unter dem gerade erstellten hinzu und aktualisieren Sie die Einstellungen wie folgt:

Unter der Registerkarte Inhalt…

Fügen Sie im Textregister des Inhaltsfelds den folgenden HTML-Code hinzu:

<p><span>Believing</span><br />is  Seeing</p>

Unter der Registerkarte Design…

Textfarbe: Hell
Textschriftart: Oswald, Großbuchstaben (TT)
Text-Schriftgröße: 8vw (Sie müssen dies eingeben; dies macht die Schriftgröße 8% der Breite des Darstellungsbereichs)
Text Textfarbe: rgba(255,255,255,0.79)
Textzeilenhöhe: 1,4 em
Textausrichtung: Mitte
Animationsstil: Falten
Animationsrichtung: Nach oben
Animationsdauer: 1800 ms
Animationsverzögerung: 0ms
Animationsintensität: 60%

Einstellungen speichern

Dieser Animationseffekt enthüllt die Hauptüberschrift, indem sie aus einer scheinbar flachen Position gefaltet (oder aufgerichtet) wird. Nachdem wir nun mit unserem Hauptüberschriftstext fertig sind, fügen wir der Zeile unser umgekehrtes Hintergrundbild hinzu.

Gehen Sie nun zu den Zeileneinstellungen der Zeile mit den beiden soeben erstellten Textbausteinen und aktualisieren Sie die Einstellungen wie folgt:

Unter der Registerkarte Inhalt…

Hintergrundbild: [fügen Sie Ihr 800×440-Bild ein]
Hintergrundbildgröße: Fit
Position des Hintergrundbilds: Oben Mitte
Hintergrundbild wiederholen: Keine Wiederholung

Unter der Registerkarte Design…

Benutzerdefinierte Breite verwenden: JA
Einheit: %
Benutzerdefinierte Breite: 50%
Benutzerdefinierte Polsterung: 12 % oben, 0 % rechts, 5 % unten, 0 % links
Animationsstil: Folie
Animationsrichtung: Nach oben
Animationsverzögerung: 300ms
Animationsintensität: 20%

Dieser Animationseffekt schiebt das Bild nach oben, fast so, als würde es hinter den Bergen aufsteigen.

Das war's für den ersten Abschnitt. Schauen wir uns unser endgültiges Design und unsere Animation an.

Zu den drei animierten Elementen gehören hier die Reihe (die nach oben geschoben wird), der Textbaustein mit dem Text „Believing is Seeing“ (der aus der Mitte herausgeklappt wird) und der Textbaustein mit dem Text „Divi“ (der verzögert wird .). nach rechts aufklappen, nachdem die anderen Elemente zum Stillstand gekommen sind). Die Kombination fesselt den Besucher wirklich, indem sie verschiedene Inhalte zielgerichtet und rechtzeitig enthüllt.

Bauabschnitt 2

Dieser zweite Abschnitt unserer Animations-Demoseite zeigt eine subtile, aber extrem coole Möglichkeit, Inhalte auf Ihrer Seite anzuzeigen. Tatsächlich ist es fast unmöglich, alle Bewegungen auf den ersten Blick zu erkennen.

Um den zweiten Abschnitt zu erstellen, fügen Sie einen regulären Abschnitt unter dem vorherigen Abschnitt hinzu. Fügen Sie im Abschnitt eine zweispaltige (halbe, halbe) Zeile hinzu.

Fügen Sie in der linken Spalte einen Textbaustein mit den folgenden Einstellungen hinzu:

Unter der Registerkarte Inhalt…

Geben Sie den folgenden HTML-Code in die Textregisterkarte des Inhaltsfelds ein:

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

Unter der Registerkarte Design…

Textfarbe: Hell
Textschriftart: Montserrat
Schriftgröße des Textes: 18px
Textzeilenhöhe: 1.8em
Header-Schriftart: Montserrat, Fett (B), Großbuchstaben (TT)
Header-Schriftgröße: 39px (Desktop)
Höhe der Kopfzeile: 2.2em
Rand-unten: 50px
Animationsstil: Folie
Animationsrichtung: Nach oben
Animationsintensität: 10%

Dieser Animationseffekt enthüllt den Textblock, indem er nach oben geschoben wird.

Einstellungen speichern

Fügen Sie als Nächstes ein Schaltflächenmodul unter dem soeben erstellten Textmodul hinzu. Aktualisieren Sie die Einstellungen des Tastenmoduls wie folgt:

Unter der Registerkarte Inhalt…

Schaltflächentext: Erfahren Sie mehr
Schaltflächen-URL: # (oder was immer Sie wollen)

Unter der Registerkarte Design…

Tastenausrichtung: Links
Textfarbe: Hell
Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Schaltflächentextgröße: 15px
Knopfrandradius: 0
Tastenabstand der Buchstaben: 3px
Tastenschrift: Montserrat, Fett (B), Großbuchstaben (TT)
Schaltflächensymbol anzeigen: JA
Benutzerdefinierte Polsterung: 10 Pixel oben, 30 Pixel rechts, 10 Pixel unten, 30 Pixel links
Animationsstil: Folie
Animationsrichtung: Unten
Animationsverzögerung: 100ms
Animationsintensität: 10%

Um den Effekt des vorherigen Textes auszugleichen, wird dieser Animationseffekt die Schaltfläche enthüllen, indem sie mit einer leichten Verzögerung nach unten geschoben wird.

Sie können Ihren Text und Ihre Schaltfläche noch nicht sehen, da es sich derzeit um weißen Text auf weißem Hintergrund handelt. Das ist okay. Wir werden unseren Hintergrund bald hinzufügen.

Als nächstes fügen Sie ein Teilermodul in die rechte Spalte ein.

Aktualisieren Sie dann die Einstellungen wie folgt:

Unter der Registerkarte Design…

Höhe: 260px

Unter der Registerkarte Erweitert…

Sichtbarkeit auf dem Desktop deaktivieren

Wenn Sie hier eine Trennlinie hinzufügen, bleibt das Hintergrundbild auf mobilen Geräten sichtbar.

Einstellungen speichern

Jetzt fügen wir unseren Hintergründen zu jeder unserer Spalten hinzu. Gehen Sie zu den Zeileneinstellungen und aktualisieren Sie Folgendes:

Unter der Registerkarte Inhalt…

Spalte 1 Hintergrund-Verlaufsfarben: #fe8840, rgba(238,78,78,0.9)
Spalte 1 Gradientenrichtung: 135deg
Spalte 2 Hintergrundbild: [Geben Sie Ihr 730 × 490-Bild ein]
Spalte 2 Position des Hintergrundbilds: Oben links
Spalte 2 Hintergrundbild wiederholen: Keine Wiederholung

Unter der Registerkarte Design…

Benutzerdefinierte Breite verwenden: JA
Benutzerdefinierte Breite: 1366 px
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 1
Spaltenhöhen ausgleichen: JA
Benutzerdefiniertes Auffüllen: 0 Pixel oben, 0 Pixel rechts, 0 Pixel unten, 0 Pixel links
Spalte 1 Benutzerdefinierte Polsterung: 5 % oben, 7 % rechts, 5 % unten, 7 % links
Animationsstil: Falten
Animationsrichtung: Nach oben
Animationsdauer: 800 ms

Dieser Animationseffekt zeigt die gesamte Reihe, indem Sie sie zusammenklappen (oder aufstellen).

Unter der Registerkarte Erweitert…

Fügen Sie das folgende benutzerdefinierte CSS zum Feld "Hauptelement" hinzu:

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

Einstellungen speichern

Fügen Sie als nächstes eine zweispaltige (ein Drittel, zwei Drittel) Zeile unter der Zeile hinzu, die Sie gerade fertig erstellt haben.

Fügen Sie in der linken Spalte ein Trennmodul hinzu und aktualisieren Sie die Einstellungen wie folgt:

Unter der Registerkarte Design…

Höhe: 400px

Unter der Registerkarte Erweitert…

Sichtbarkeit auf dem Desktop deaktivieren

Wenn Sie hier eine Trennlinie hinzufügen, bleibt das Hintergrundbild auf mobilen Geräten sichtbar.

Einstellungen speichern

Um Zeit zu sparen, klicken Sie mit der rechten Maustaste und kopieren Sie das Textmodul in die linke Spalte der Zeile oben, das den Text „Zeit ist Geld“ enthält. Fügen Sie es dann in die rechte (zwei Drittel) Spalte der Zeile darunter ein.

Aktualisieren Sie die neuen Textmoduleinstellungen wie folgt:

Unter der Registerkarte Inhalt…

Ändern Sie den h1-Header-Text im Inhaltsfeld in „Commute Like a Pro“.

Unter der Registerkarte Design…

Text Textfarbe: #a8a8a8
Kopfzeilentextfarbe: #414159
Animationsstil: Folie
Animationsrichtung: Unten
Animationsintensität: 10%

Dieser Animationseffekt enthüllt den Textblock, indem er nach unten in die Ansicht geschoben wird.

Klicken Sie nun mit der rechten Maustaste und kopieren Sie das Schaltflächenmodul in die linke Spalte der oberen Zeile und fügen Sie es unter das gerade bearbeitete Textmodul ein.

Aktualisieren Sie die Tastenmoduleinstellungen wie folgt:

Schaltflächentextfarbe: #ff4823
Farbe des Knopfrahmens: #ff4823
Schaltflächen-Hover-Textfarbe: #ff2323

Einstellungen speichern

Bearbeiten Sie im letzten Schritt Ihre Zeileneinstellungen, indem Sie Folgendes aktualisieren:

Unter der Registerkarte Inhalt…

Hintergrundfarbe: #ffffff
Spalte 1 Hintergrundbild: [fügen Sie Ihr 525 × 660-Bild ein]
Spalte 1 Hintergrundbildposition: Oben links
Spalte 1 Hintergrundbild wiederholen: Keine Wiederholung
Spalte 2 Hintergrundverlaufsfarben: rgba(255,255,255,0.91), #ffffff
Spalte 2 Gradientenrichtung: 135deg

Unter der Registerkarte Design…

Benutzerdefinierte Breite verwenden: JA
Benutzerdefinierte Breite: 1040px
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 1
Spaltenhöhen ausgleichen: JA
Benutzerdefiniertes Auffüllen: 0 Pixel oben, 0 Pixel rechts, 0 Pixel unten, 0 Pixel links
Spalte 2 Benutzerdefinierte Polsterung: 5 % oben, 7 % rechts, 5 % unten, 7 % links
Animationsstil: Falten
Animationsrichtung: Unten
Animationsdauer: 800 ms

Dieser Animationseffekt zeigt die gesamte Reihe durch Herunterklappen in die Ansicht.

Unter der Registerkarte Erweitert…

Fügen Sie das folgende benutzerdefinierte CSS unter dem Hauptelementfeld hinzu:

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

Das war's für diesen Abschnitt. Sehen Sie sich Ihre Ergebnisse an.

Da die Animations- und Designelemente dieses Abschnitts subtil sind, denke ich, dass er ein großartiges Beispiel für die Art von Design und Animation ist, die auf den meisten Seiten verwendet werden könnten. Die obere und untere Reihe öffnen sich, als würden Sie ein Buch von hinten öffnen. Der Text und die Schaltflächen bewegen sich in der oberen Reihe leicht nach oben und in der unteren Reihe nach unten. Eine tolle Kombination.

Bonus: Laden Sie diese Abschnitte für den einfachen Import herunter

Als Bonus haben wir die Abschnitte des heutigen Tutorials in einen kostenlosen Download gepackt, den Sie mit dem untenstehenden E-Mail-Anmeldeformular erhalten können. Geben Sie einfach Ihre E-Mail-Adresse ein und der Download-Button wird angezeigt. Machen Sie sich keine Sorgen über das „erneute Abonnieren“, wenn Sie bereits Teil unseres Divi-Newsletters sind. Die erneute Eingabe Ihrer E-Mail-Adresse führt nicht zu weiteren E-Mails oder Duplikaten. Es wird einfach den Download enthüllen.

Genießen!

Laden Sie das Layout-Paket 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 diese Downloads zu verwenden, suchen Sie zunächst die gezippte Datei Animation_Effects_Part_1.zip in unserem Download-Ordner. Entpacken Sie es, um die folgenden Importe anzuzeigen.

Animationseffekte Teil 1 (Abschnitt 1).json

Animationseffekte Teil 1 (Abschnitt 2).json

Navigieren Sie in Ihrem WordPress-Admin zu Divi > Divi Library > Import & Export. Wenn das Portabilitäts-Modal angezeigt wird, klicken Sie auf die Registerkarte Import und die Schaltfläche mit der Bezeichnung Datei auswählen.

Wählen Sie die gewünschte json-Datei aus und klicken Sie auf „Divi Builder-Layouts importieren“. Navigieren Sie nach Abschluss des Imports zu dem Beitrag oder der Seite, zu der Sie einen der obigen Abschnitte hinzufügen möchten.

Aktivieren Sie den visuellen Builder. Navigieren Sie zu dem Teil der Seite, zu dem Sie einen der obigen Abschnitte hinzufügen möchten. Wenn Sie auf das Symbol zum Hinzufügen eines neuen Abschnitts klicken, wird die Option "Aus Bibliothek hinzufügen" angezeigt. Wählen Sie diese Option und wählen Sie das gewünschte Layout aus.

Einpacken

Ich hoffe, dass diese beiden Abschnitte als Inspiration für zukünftige Builds mit den Animationsfunktionen von Divi dienen. Alleine die Designkonzepte sind großartig und die Layouts lassen sich mit wenigen Handgriffen leicht an jede Website anpassen. Bleiben Sie dran, denn wir werden in dieser Serie noch viel mehr behandeln.

In Kürze

Im nächsten Teil dieser Serie werde ich unsere Erkundung der erweiterten Animationsfunktionen von Divi fortsetzen, indem ich die Abschnitte 3 und 4 unserer Animationsdemoseite erstelle.

Hier ist, was Sie erwarten können zu bauen.

Sektion 3:

Sektion 4:

Bitte hinterlassen Sie alle Kommentare, die Sie unten haben.

Danke schön!