Erstellen von „Haftnotizen“ mit erweiterbaren Inhalten mit Divi

Mit den integrierten Optionen von Divi gibt es viele Möglichkeiten, Dienste und/oder Prozessschritte auf Ihrer Website zu präsentieren. Damit Sie sich inspirieren lassen können, zeigen wir Ihnen, wie Sie nur mit den integrierten Optionen von Divi Haftnotizen mit erweiterbarem Inhalt erstellen. Dies ist eine unterhaltsame Möglichkeit, zusätzliche Inhalte zu teilen, sobald der Besucher eine Interaktion auslöst. Sie können dieses Design für jede Website verwenden, an der Sie arbeiten, und Sie können die JSON-Datei auch kostenlos herunterladen!

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 Haftnotizen-Layout KOSTENLOS herunter

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

Beginnen wir mit der Neuerstellung!

Abonnieren Sie unseren Youtube-Kanal

Einen neuen regulären Abschnitt hinzufügen

Als erstes müssen Sie der Seite, an der Sie gerade arbeiten, einen neuen regulären Abschnitt hinzufügen.

Eine neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie auch eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Übergangszeit

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen. Wir erstellen einen sofortigen Übergang, indem wir die Übergangsdauer auf der Registerkarte „Erweitert“ ändern.

• Übergangsdauer: 0ms

Textmodul Nr. 1 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie in der ersten Spalte der Zeile ein neues Textmodul hinzu und geben Sie den H2-Inhalt ein, der im Haftnotiz-Design erscheinen soll.

Hintergrundfarbe

Gehen Sie dann zu den Hintergrundeinstellungen und ändern Sie die Hintergrundfarbe entsprechend:

• Hintergrundfarbe: #ffd800

H2-Texteinstellungen

Gehen Sie zu den H2-Texteinstellungen und nehmen Sie auch dort einige Änderungen vor:

• Überschrift 2 Schriftart: Indie Flower
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #3a0cf2
• Überschrift 2 Textgröße: 40px

Abstand

Um das Erscheinungsbild einer Haftnotiz zu erstellen, fügen wir dem Modul einige benutzerdefinierte Füllwerte hinzu:

• Obere Polsterung: 150px
• Untere Polsterung: 150px
• Linke Polsterung: 20px
• Rechte Polsterung: 20px

Grenze

Wir fügen auch einen oberen Rand mit den folgenden Einstellungen hinzu:

• Breite des oberen Rands: 20px
• Farbe des oberen Rands: #ffc300

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Das nächste Modul, das wir in der ersten Spalte benötigen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

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

• Farbe: #ffc300

Stile

Ändern Sie auch die Stileinstellungen des Teilers.

• Teilerstil: Gestrichelt

Größe

Und ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 5px
• Höhe: 0px

Abstand

Um etwas Platz zwischen dem vorherigen Modul und diesem zu schaffen, fügen wir etwas oberen Rand hinzu.

• Oberer Rand: 150px

Transformieren Drehen

Wie Sie in der Vorschau dieses Beitrags feststellen können, möchten wir eine vertikale Trennlinie anstelle einer horizontalen erstellen. Um dies zu erreichen, ändern wir den linken Wert in den Transformationsdreheinstellungen des Divider-Moduls:

• Links: 270 Grad

Sichtweite

Wir möchten auch sicherstellen, dass das Divider-Modul unter dem Textmodul angezeigt wird. Dazu verringern wir den Z-Index des Teilers auf der Registerkarte „Erweitert“.

• Z-Index: -99

Textmodul #2 zu Spalte 1 hinzufügen

Symbol zum Inhaltsfeld hinzufügen

Das nächste und letzte Modul, das wir in der ersten Spalte benötigen, ist ein weiteres Textmodul. Fügen Sie dem Inhaltsfeld das Zeichen '●' hinzu.

Texteinstellungen

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Texteinstellungen.

• Textschriftart: Open Sans
• Textfarbe: #3a0cf2
• Textgröße: 100px
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte

Abstand

Erstellen Sie die gewünschte Überlappung, indem Sie als nächstes einen negativen oberen Rand hinzufügen.

• Oberer Rand: -50px

Textmodul #3 zu Spalte 2 hinzufügen

H3-Inhalt hinzufügen

Kommen wir zur zweiten Spalte. Hier benötigen wir als erstes Modul ein Textmodul. Geben Sie H3-Inhalte Ihrer Wahl ein.

H3-Texteinstellungen

Gehen Sie zur Registerkarte Design und ändern Sie die H3-Texteinstellungen entsprechend:

• Überschrift 3 Schriftart: Indie Flower
• Überschrift 3 Textfarbe: #3a0cf2
• Überschrift 3 Textgröße: 30px

Abstand

Fügen Sie als nächstes einen benutzerdefinierten oberen Rand hinzu:

• Oberer Rand: 400 Pixel (Desktop), 200 Pixel (Tablet), 150 Pixel (Telefon)

Textmodul #4 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Weiter zum nächsten Modul, das ein weiteres Textmodul ist. Geben Sie einen Absatzinhalt Ihrer Wahl ein.

Texteinstellungen

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

• Textschriftart: Open Sans
• Textgröße: 13px
• Textzeilenhöhe: 2em

Größe

Ändern Sie als nächstes die Breite des Moduls.

• Breite: 78%

Abstand

Und fügen Sie etwas oberen und unteren Rand hinzu.

• Oberer Rand: 10px
• Unterer Rand: 50px

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir in der zweiten Spalte benötigen, ist ein Button-Modul. Geben Sie eine Kopie Ihrer Wahl ein.

Tasteneinstellungen

Gehen Sie dann zur Registerkarte Design und gestalten Sie die Schaltfläche.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 20px
• Schaltflächentextfarbe: #3a0cf2
• Schaltflächenhintergrundfarbe: #ffd800
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Button-Schriftart: Abhaya Libre

Abstand

Fügen Sie auch einige benutzerdefinierte Füllwerte hinzu.

• Obere Polsterung: 20px
• Untere Polsterung: 20px
• Linke Polsterung: 60px
• Rechte Polsterung: 60px

Zeile zweimal klonen

Sobald Sie alle Module hinzugefügt haben, können Sie die Zeile zweimal klonen.

Doppelte Zeile Nr. 1 ändern

Hintergrundfarbe für Textmodul Nr. 1 ändern

Wir ändern die Farbpalette beider Duplikate, beginnend mit dem ersten. Öffnen Sie den ersten Textbaustein in Spalte 1 und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #00ffee

Ändern Sie die Farbe des oberen Rands von Textmodul Nr. 1

Ändern Sie auch die obere Randfarbe.

• Farbe des oberen Rands: #00e0c2

Teilerfarbe ändern

Verwenden Sie dann den folgenden Farbcode für den Teiler:

• Teilerfarbe: #00e0c2

Hintergrundfarbe des Schaltflächenmoduls ändern

Und ändern Sie die Hintergrundfarbe der Schaltfläche.

• Hintergrundfarbe der Schaltfläche: #00ffee

Doppelte Zeile Nr. 2 ändern

Hintergrundfarbe für Textmodul Nr. 1 ändern

Gehen Sie zur zweiten doppelten Zeile, öffnen Sie das erste Textmodul in Spalte 1 und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #42ff21

Ändern Sie die Farbe des oberen Rands von Textmodul Nr. 1

Ändern Sie auch die obere Rahmenfarbe.

• Farbe des oberen Rands: #1de524

Teilerfarbe ändern

Öffnen Sie dann das Teilermodul und verwenden Sie die folgende Teilerfarbe:

• Teilerfarbe: #1de524

Hintergrundfarbe des Schaltflächenmoduls ändern

Und zu guter Letzt ändern Sie die Hintergrundfarbe der Schaltfläche:

• Schaltflächenhintergrundfarbe: #42ff21

Erweiterbaren Inhalt erstellen

Standardzeilengröße zu allen Zeilen hinzufügen

Nachdem wir nun alle Zeilen in unserem Abschnitt angepasst haben, ist es an der Zeit, den Inhalt erweiterbar zu machen. Öffnen Sie dazu jede der Zeilen und wenden Sie die folgende maximale Höhe an:

• Maximale Höhe: 397px

Hover-Zeilengröße zu allen Zeilen hinzufügen

Ändern Sie die maximale Höhe beim Schweben in '100%'. Dadurch nimmt die Zeile wieder ihre ursprüngliche Größe an.

• Maximale Höhe: 100%

Überlauf für alle Zeilen ändern

Stellen Sie sicher, dass Sie auch die Überläufe jeder der Zeilen ausblenden, und Sie sind fertig!

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

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 nur mit den integrierten Optionen von Divi Haftnotizen mit erweiterbaren Notizen erstellen. Dies ist eine kreative und spielerische Möglichkeit, Dienstleistungen auf Ihrer Website zu präsentieren. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.