So erstellen Sie gestaltete Inhaltsfelder in Divi für Tipps, Informationen, Warnungen und mehr (KOSTENLOSER Download)

Formatierte Inhaltsfelder für Dinge wie Tipps, Warnungen und andere wichtige Informationen sind praktische Elemente für jede Website oder jeden Blog. Sie sind eine effektive und bequeme Möglichkeit, wichtige Inhalte mit einem einheitlichen Design zu präsentieren, das die Benutzer zu schätzen wissen. Beispielsweise benötigen Sie möglicherweise ein Inhaltsfeld-Design, um einen wichtigen Tipp in einem Tutorial hervorzuheben oder Benutzer vor einem potenziellen Problem zu warnen.

In diesem Tutorial zeigen wir Ihnen, wie Sie 3 Content-Box-Designs in Divi erstellen. Diese Inhaltsbox-Designs können leicht mit neuen Symbolen, Farbschemas und/oder Inhalten an jeden Bedarf angepasst werden. Nachdem wir Ihnen gezeigt haben, wie Sie die Boxen entwerfen, zeigen wir Ihnen, wie Sie die globalen Voreinstellungen von Divi verwenden können, um die Bereitstellung einer neuen vorgefertigten Inhaltsbox mit nur wenigen Klicks zu vereinfachen. Es wird kein Plugin benötigt!

Lass uns anfangen!

Vorgeschmack

Heute werden wir diese 3 wichtigsten Inhaltsbox-Designs in Divi erstellen.

Mit diesen 3 wichtigsten Inhaltsbox-Designs können Sie einfache Anpassungen (wie Symbol, Farbe und Text) vornehmen, um endlose Inhaltsbox-Designs für jeden Anlass zu erstellen.

Hier sind 36 Beispiele, die wir unten in unseren KOSTENLOSEN Download aufnehmen.

Laden Sie das Layout KOSTENLOS herunter

Um alle 36 Content-Box-Designs in die Hände zu bekommen, müssen Sie zuerst das Layout ü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.

Erstellen der Inhaltsbox-Designs in Divi

Bevor wir mit dem Entwerfen unserer Inhaltsboxen beginnen, fügen wir dem Standardabschnitt im Divi Builder eine neue einspaltige Zeile hinzu.

Inhaltsbox-Design #1

Um das erste Inhaltsfeld zu erstellen, fügen Sie der Spalte ein Klappenmodul hinzu.

Aktualisieren Sie auf der Registerkarte "Inhalt" Folgendes:

• Symbol verwenden: JA
• Symbol: siehe Screenshot
• Hintergrundfarbe: #ffffff
• Hintergrundfarbe links: #00529b
• Hintergrund mit Farbverlauf rechts: #bde5f8
• Verlaufsrichtung: 90deg
• Startposition: 3em
• Endposition: 0%

Aktualisieren Sie auf der Registerkarte Design den Symbolstil wie folgt:

• Symbolfarbe: #ffffff
• Bild-/Symbolausrichtung: Links
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 2em

Aktualisieren Sie als Nächstes die Textstile wie folgt:

• Titeltextfarbe: #00529b
• Titeltextgröße: 1.5em
• Höhe der Titelzeile: 2em
• Textkörperfarbe: #bde5f8
• Körpertextgröße: 1em
• Körperlinienhöhe: 2em

Sobald die Textstile vorhanden sind, aktualisieren Sie die Größe und den Abstand wie folgt:

• Inhaltsbreite: 100%
• Maximale Breite: 700px
• Modulausrichtung: Mitte
• Polsterung: 2em oben, 2em unten, 5em links, 2em rechts

Fügen Sie dann dem Klappentext wie folgt einen subtilen Box-Shadow hinzu:

• Box Shadow: siehe Screenshot
• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenunschärfe: 88px
• Stärke der Box-Schattenausbreitung: -10px
• Schattenfarbe: rgba(0,0,0,0.17)

Auf der Registerkarte "Erweitert" geben wir dem Klappensymbol einen benutzerdefinierten Stil, sodass es eine Kreisform mit Hintergrund- und Rahmenfarben hat, die der zuvor verwendeten linken Hintergrundfarbverlaufsfarbe entsprechen. Wir werden das Symbol auch mit einer absoluten Position positionieren, damit wir es genau an der gewünschten Stelle platzieren können, ohne tatsächlich Platz im Dokument einzunehmen.

Um den benutzerdefinierten Stil hinzuzufügen, fügen Sie den folgenden CSS-Code in das Feld Blurb Image CSS ein:

position:absolute;
margin-bottom: 0px;
border: 0.5em solid #00529b !important;
border-radius:50%;
background: #00529b;
transform: translateX(-3.75em);

HINWEIS: Wenn Sie das Farbschema des Inhaltsfelds (oder des Blurb-Moduls) ändern, müssen wir auch die Farben aktualisieren, die im Blurb-Image-CSS für den Rahmen und den Hintergrund des Symbols verwendet werden.

Schauen wir uns das Endergebnis an.

Inhaltsbox-Design #2

Um unser zweites Inhaltsbox-Design zu erstellen, duplizieren Sie das vorherige Klappenmodul, um das Design zu starten, damit wir einige Änderungen vornehmen können.

Für dieses Design werden wir das Symbol mithilfe der CSS-Grid-Eigenschaft vertikal auf der linken Seite des Klappentexts zentrieren.

Ersetzen Sie auf der Registerkarte "Design" das Blurb-Image-CSS durch Folgendes:

margin-bottom: 0px;

Fügen Sie dann das folgende CSS zum Inhalts-CSS-Feld von Blurb hinzu:

display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 5em auto;
grid-gap: 2em;

Die Breite der linken Spalte im Raster (die das Symbol enthält) ist auf 5em eingestellt , und die rechte Spalte mit dem Titel und dem Fließtext ist auf auto eingestellt . Wir müssen die Breite der linken Verlaufsfarbe an die Rasterspalte mit einer Breite von 5em anpassen, die das Symbol enthält. Aktualisieren Sie dazu Folgendes:

• Startposition: 5em

Aktualisieren Sie auf der Registerkarte Design die Ausrichtung und Größe des Symbols:

• Bild-/Symbolausrichtung: Mitte
• Symbolschriftgröße: 3em

Jetzt brauchen wir die linke Polsterung nicht, also nehmen Sie sie heraus.

Jetzt sollte alles schön aufgereiht sein. Sehen Sie sich das Endergebnis an.

Inhaltsbox-Design #3

Um das Design der dritten Inhaltsbox zu erstellen, duplizieren Sie das zweite Klappenmodul (Inhaltsbox), das wir gerade fertiggestellt haben.

Sobald der zweite Klappentext dupliziert wurde, öffnen Sie die Einstellungen für den doppelten Klappentext.

Ändern Sie auf der Registerkarte Design die Symbolfarbe:

• Symbolfarbe: rgba(255,255,255,0.3)

Als Nächstes fügen wir vertikalen Beschriftungstext über dem Symbol hinzu, indem wir benutzerdefiniertes CSS zum Vor-Pseudo-Element hinzufügen (was es Ihnen im Grunde ermöglicht, zusätzliches Design und/oder Inhalt vor dem Klappenmodul-Element hinzuzufügen).

Um das Label hinzuzufügen, fügen Sie das folgende CSS in das Feld Vor CSS ein:

content: 'key tip';
bottom:50%;
font-size: 1em;
line-height: 1em;
letter-spacing: 0.4em;
position:absolute;
transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important;
transform-origin: bottom left;
color: #fff;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
z-index:1;

Wir werden auch das Symbol drehen, damit es dem gedrehten vertikalen Text entspricht. Fügen Sie dazu das folgende CSS zum Feld Blurb Image CSS hinzu:

margin-bottom: 0px;
transform: rotateZ(-90deg);

Hier ist das Endergebnis.

Aktualisieren des Designs

Aktualisieren Sie die Größe von Inhaltsfeldelementen, indem Sie die Textgröße ändern

Jeder der Inhalt Boxen wird gebaut mit meist die em Längeneinheit (em ist relativ zum Stammkörper Schriftgröße des Elements). Aus diesem Grund wird die Größe der Inhaltsfelder nahtlos skaliert, wenn die Textgröße in den integrierten Designeinstellungen von Divi angepasst wird.

Benutzerdefinierte CSS-Farben aktualisieren

Für das Inhaltsfeld-Design Nr. 1 haben wir dem Symbol mit benutzerdefiniertem CSS eine benutzerdefinierte Hintergrund- und Rahmenfarbe hinzugefügt. Stellen Sie sicher, dass die für die Rahmen- und Hintergrundeigenschaft verwendeten Farben aktualisiert werden, damit sie dem Farbschema Ihres eigenen Designs entsprechen.

Aktualisieren des Etikettentexts

Für das Inhaltsfeld-Design Nr. 3 haben wir ein Label mit benutzerdefiniertem CSS zum Vorher- Pseudoelement hinzugefügt. Um den Text zu aktualisieren, ändern Sie einfach den Wert der content-Eigenschaft im Feld Vor CSS.

Inhaltsboxen in Divi . wiederverwendbar machen

Speichern Sie das Modul in der Divi-Bibliothek

Es gibt zwei Möglichkeiten, Module in Divi wiederverwendbar zu machen. Die erste Möglichkeit besteht darin, das Modul (oder ein beliebiges Element) in der Divi-Bibliothek zu speichern.

Nachdem das Element in der Bibliothek gespeichert wurde, können Sie es in der Divi-Bibliothek finden, wenn Sie einer Seite ein neues Element hinzufügen.

Globale Voreinstellungen verwenden

Die zweite Möglichkeit, ein Modul in Divi wiederverwendbar zu machen, besteht darin, ein globales Preset für dieses Modul zu erstellen. Nachdem Sie das Design eines Moduls als globale Vorgabe gespeichert haben, können Sie diese globale Vorgabe problemlos zu jeder anderen Instanz desselben Moduls hinzufügen.

In diesem Fall können wir die Einstellungen für jede unserer Inhaltsboxen (oder Klappenmodule) öffnen und für jede eine neue globale Voreinstellung erstellen. Öffnen Sie dazu die Einstellungen des Blurb-Moduls und klicken Sie oben auf die voreingestellte Option. Verwandeln Sie dann die Moduleinstellungen in eine neue Vorgabe aus benutzerdefinierten Stilen.

Benennen Sie die neue Voreinstellung nach Belieben und speichern Sie sie.

Wiederholen Sie diese Schritte für jede Blurb-Modulvorgabe, die Sie erstellen möchten.

Um in Zukunft weitere Inhaltsboxen zu erstellen, fügen Sie einfach ein neues Klappenmodul hinzu und wählen Sie das gewünschte Symbol aus. Aktivieren Sie dann eine der hochgeladenen Voreinstellungen, indem Sie oben auf das Dropdown-Menü für Voreinstellungen klicken und eine Voreinstellung Ihrer Wahl auswählen.

Endgültige Ergebnisse

Hier ist ein letzter Blick auf die 3 wichtigsten Designs der Inhaltsboxen, die wir erstellt haben.

Und hier sind 36 Designs, die Sie mit ein paar einfachen Anpassungen erstellen können, die wir oben in unserem KOSTENLOSEN Download enthalten.

Abschließende Gedanken

Die gestalteten Inhaltsboxen, die wir erstellt haben, können ein nützliches Design-Asset für jede Website oder jeden Blog sein. Sie können die leistungsstarken Designoptionen in Divi nutzen, um die Inhaltsboxen an jedes Design anzupassen. Mit der Möglichkeit, sie zu speichern und in die Divi-Bibliothek hochzuladen und/oder globale Voreinstellungen zu erstellen, können Sie diese Inhaltsboxen jederzeit mit nur wenigen Klicks bereitstellen. Hoffentlich werden diese nützlich sein.

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

Danke schön!