Springe zum Hauptinhalt

So passen Sie das Klappentextmodul an, um sich auf Inhalte auf Divi zu konzentrieren

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Die Verwendung von Präsentationssymbolen als ästhetische Details kann Ihrem Layout ein einzigartiges Design verleihen, an das Sie vorher vielleicht noch nicht gedacht haben. Neben der Positionierung des Symbols eines Präsentationsmoduls zur Abdeckung eines Textmoduls können Sie den Hintergrund und den Rand des Textmoduls zum Gestalten des Symbols verwenden. Dies schafft einen schönen Designakzent, der den Inhalt umrahmt und Ihren Symbolen ein völlig einzigartiges Design verleiht.

In diesem Tutorial zeige ich Ihnen, wie Sie Präsentationssymbole als Designakzente für Ihre Inhalte in Divi stilisieren.

Übersicht

Hier sind einige Beispiele für das Design, das wir in diesem Tutorial erstellen werden.

Designübersicht Klappentext-Divi-Modul

Laden Sie die Beispiellayouts für dieses Tutorial herunter

Um das Akzentmuster-Layout des kostenlosen Klappentextmoduls in den Griff zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um auf den Download zugreifen zu können, müssen Sie unsere Divi Daily-Mailingliste über das unten stehende Formular abonnieren. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits in der Liste aufgeführt sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Herunterladen. Sie werden nicht "neu registriert" oder erhalten keine zusätzlichen E-Mails.

Download

Beginnen Sie mit dem Design von Grund auf neu

Erstellen Sie zunächst eine neue Seite und geben Sie Ihrer Seite einen Titel. Stellen Sie dann den Divi Builder auf dem öffentlichen Teilesystem bereit. Fügen Sie einen regulären Abschnitt mit einer Zeile aus einer Spalte hinzu. Aktualisieren Sie vor dem Hinzufügen Ihres ersten Moduls die Zeileneinstellungen wie folgt:

Verwenden Sie die benutzerdefinierte Rinnenbreite: JA
Benutzerdefinierte Dachrinnenbreite: 1

Dadurch werden benutzerdefinierte Ränder zwischen Modulen entfernt.

Textbaustein erstellen

Fügen Sie dann ein Textmodul in die Zeile ein.

Fügen Sie ein Divi-Textmodul hinzu

Aktualisieren Sie den Textbaustein mit dem folgenden Fülltext:

Unsere Leistungen In diesem Abschnitt wird die Liste der verschiedenen Dienstleistungen angezeigt, die wir unseren Kunden anbieten.

Fügen Sie einen Divi-Abschnitt hinzuStilisieren Sie das Textmodul

Aktualisieren Sie jetzt den Rest des Textmodulparameters wie folgt:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • Hintergrundfarbe: #ffffff
  • Überschrift 2-Schriftart: Nunito
  • Titel 2 Schriftgewicht: Fett
  • Titel 2-Schriftstil: TT
  • Titel 2 Textfarbe: #f24a5b
  • Titel 2-Textgröße: 42-Pixel (Desktop), 32-Pixel (Tablet), 22-Pixel (Telefon)
  • Titel 2 Buchstabenabstand: 16px
  • Titel 2 Zeilenhöhe: 1.3em
Divi-Modul-Header-Einstellung

  • Breite: 500px (Desktop), 490px (Tablet)
  • Ausrichtung des Moduls: Mitte
  • Benutzerdefiniertes Auffüllen (Desktop): 40px oben, 40px unten, 50px links, 50px rechts
  • Benutzerdefinierte Polsterung (Telefon): 20px links, 20px rechts
  • Breite des Rahmens: 10px
  • Rahmenfarbe: #ffffff

Größe und Abmessung des modularen Konfigurationstextabschnitts

Da wir das Textmodul mit Präsentationssymbolen überlappen, müssen wir sicherstellen, dass sich das Textmodul in der Z-Raum-Reihenfolge über den Symbolen befindet. Dazu müssen wir zunächst das folgende CSS-Snippet im CSS-Bereich des Hauptelements des Textmoduls hinzufügen:

Position: relativ;

Setzen Sie dann den Z-Indexwert auf 1.

Benutzerdefinierte WordPress CSS

Dieser Textbaustein wird nun über alle anderen überlappenden Bausteine ​​gelegt, was für das Design wichtig ist.

Erstellen Sie das Klappentext-Symbol

Wir sind jetzt bereit, das erste Klappentext-Symbol zu erstellen. Dazu müssen wir zuerst ein Klappentext-Modul hinzufügen und es an den oberen Rand des Textmoduls ziehen. Löschen Sie dann den fiktiven Inhalt (Titeltext und Textkörper) und klicken Sie, um ein Symbol anstelle eines Bildes für den Klappentext zu verwenden.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Aktualisieren Sie anschließend die folgenden Entwurfsparameter:

  • Symbolfarbe: # 2ea3f2
  • Verwenden Sie die Schriftgröße des Symbols: JA
  • Symbol Schriftgröße: 100px
  • Benutzerdefinierter Rand: 0px am unteren Rand (dies entfernt den standardmäßigen unteren Rand zwischen den Modulen, nicht erforderlich, wenn Sie die 1-Rinnenbreite verwenden)

Da wir dann keinen Text mit dem Modul verwenden (nur das Symbol), können wir den standardmäßigen unteren Rand unter dem Präsentationssymbol entfernen. Fügen Sie dazu den CSS-Bereich von Blurb Image den folgenden benutzerdefinierten CSS-Code hinzu:

Blurb Image CSS:

Rand unten: 0px

Klappentext-Divi-Einstellungen

Dupliziere das Klappentext-Symbol

Bevor wir mit der Positionierung des Klappentextes beginnen, duplizieren wir das Klappentextmodul und ziehen es unter das Textmodul. Sie sollten jetzt ein Präsentationssymbol über und unter dem Textmodul haben.

Konfiguration und Vervielfältigung von Cloud Blurb DiviPositionieren von Präsentationssymbolen mithilfe von Transform Translate

Um die Präsentationssymbole zu positionieren, verwenden wir die Transformationsoptionen von Divi, mit denen wir das Präsentationsmodul mit dem Symbol an einer beliebigen Stelle auf der Seite platzieren können.

Blurb-Symbol #1 positionieren

Öffnen Sie zum Positionieren des oberen Klappensymbols die Einstellungen des Klappmoduls und aktualisieren Sie Folgendes:

  • Umwandlung der X-Achse (Desktop): -242px
  • Y-Achse der Transformationsübersetzung (Desktop): 50 Pixel
  • X-Achse transformieren (Telefon): -170px

Sie können dies jedoch entsprechend den von Ihnen vorgenommenen Einstellungen hinzufügen.

Präsentationssymbole

Blurb-Symbol # 2 positionieren

Bevor Sie dieses Präsentationssymbol positionieren, vergrößern wir es. Öffnen Sie dazu die Einstellungen des Blurb-Moduls und ändern Sie die Schriftgröße des Symbols auf 150px.

Positionieren Sie dann das Präsentationssymbol, indem Sie die folgenden Transformationsoptionen aktualisieren:

  • Umwandlung der X-Achse (Desktop): 242px
  • Y-Achse der Transformationsübersetzung (Desktop): -100px
  • X-Achse transformieren (Telefon): 190px

Design Abschnitt blurd divi

Erstellung eines weiteren Abschnitts

Von nun an können wir uns von dem, was wir getan haben, inspirieren lassen, um eine weitere Zone mit einer anderen Anordnung zu schaffen. Sie müssen lediglich eine neue Spalte erstellen und die vorherigen Module kopieren. Um eine Mehrfachkopie durchzuführen, bewegen Sie den Mauszeiger über jedes Modul, während Sie die STRG-Taste auf Ihrer Tastatur gedrückt halten.

Divi-Modul kopieren

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Endergebnis

Nun sehen wir uns das Endergebnis an.

Divi Endergebnis

Abschließende Gedanken

Das Hinzufügen von Präsentationssymbolen als Designakzente zu Ihren Inhalten ist ein Beispiel dafür, wie zwei Module kombiniert werden können, um ein völlig einzigartiges Design zu erstellen. In diesem Fall dienen der Hintergrund und der Rand des Textmoduls als teilweise Überlagerung für die umgebenden Symbole. Das Ergebnis ist einzigartig und öffnet die Tür zur Erforschung verschiedener Designvarianten. Sie können verschiedene Symbole und Farbkombinationen erkunden, um etwas für Ihre eigenen Bedürfnisse zu erstellen.

Ich hoffe, von Ihnen in den Kommentaren zu hören.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
5 Aktien
Aktie5
tweet
Registrieren