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.
Laden Sie die Beispiellayouts für dieses Tutorial herunter
Um das Layout der Akzentmuster des Klappentextmoduls in die Hand zu nehmen kostenlos, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugriff auf den Download zu erhalten, müssen Sie sich über das in unsere Divi Daily-Mailingliste eintragen Formular unten. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Gutes und ein Divi-Layout-Paket kostenlos ! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf „Herunterladen“. Sie werden nicht „erneut eingeschrieben“ und erhalten keine zusätzlichen E-Mails.
Herunterladen
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.
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.
Stilisieren Sie das Textmodul
Aktualisieren Sie jetzt den Rest des Textmodulparameters wie folgt:
- 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
- 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
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.
Dieser Textbaustein wird nun über alle anderen überlappenden Bausteine gelegt, was für das Design wichtig ist.
Erstellen Sie das Klappentext-Symbol
Jetzt können wir das erste Klappentext-Symbol erstellen. Dazu müssen wir zunächst ein Blurb-Modul hinzufügen und es an den oberen Rand des Textmoduls ziehen. Dann löschen Sie die Inhalt Platzhalter (Titeltext und Haupttext) und Klicken Sie, um ein Symbol anstelle eines Bildes für den Klappentext zu verwenden.
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
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.
Positionieren 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.
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
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.
Endergebnis
Nun sehen wir uns das Endergebnis an.
Abschließende Gedanken
Fügen Sie Präsentationssymbole als Designakzente zu Ihrer Präsentation hinzu Inhalt ist ein Beispiel dafür, wie zwei Module zu einem völlig einzigartigen Design kombiniert werden können. In diesem Fall dienen Hintergrund und Rand des Textmoduls als teilweise Überlagerung für die umgebenden Symbole. Das Ergebnis ist einzigartig und eröffnet die Möglichkeit, verschiedene Designvarianten zu erkunden. Probieren Sie verschiedene Symbole und Farbkombinationen aus, um etwas für Ihre eigenen Bedürfnisse zu schaffen.
Ich hoffe, von Ihnen in den Kommentaren zu hören.
