Verwandeln Sie das Divi Shop-Modul in dynamische Produktkarten auf Mobilgeräten

Verwandeln Sie das Divi Shop-Modul in dynamische Produktkarten auf Mobilgeräten

[Vc_row content_placement = "middle" css = "vc_custom_1508940533685 {background-color: #f8f6f6 Wichtig;}." El_id = "themeforestpro"] [vc_column width = "3 / 4" css = „vc_custom_1502759058885 {margin-bottom: 0px. wichtig; border-bottom-width: 0px signifikant; padding-bottom: 0px signifikant;} „] [vc_column_text]!

Divi: das am einfachsten zu verwendende WordPress-Theme

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DOWNLOAD [/vcex_button][/ vc_column][/vc_row]

Wenn Sie eine Zielseite für bestimmte Produkte erstellen, unabhängig davon, ob es sich um eine Neueinführung oder einen Verkauf handelt, auf den Sie sich vorbereiten, ist die Wahrscheinlichkeit hoch, dass Sie das Shop-Modul irgendwann verwenden. Mit dem Shop-Modul von Divi können Sie Produkte dynamisch aus dem WooCommerce-Plugin extrahieren und mithilfe der integrierten Optionen von Divi formatieren. 

Standardmäßig enthält das Shop-Modul einige Spaltenstrukturen, die alle auf kleineren Bildschirmgrößen in zwei Spalten übersetzt werden. Dies bedeutet, dass je mehr Produkte Sie anzeigen möchten, desto mehr vertikales Scrollen erforderlich ist, um zum nächsten Teil Ihrer Zielseite zu gelangen.

Im modernen Webdesign wird häufig die Verwendung von Magnetkarten verwendet, um das vertikale Scrollen und Anzeigen von Elementen entsprechend den Vorlieben Ihrer Besucher einzuschränken. In diesem Tutorial zeigen wir Ihnen, wie Sie das Divi Store-Modul ohne Verwendung eines Plugins in dynamische Produktkarten auf kleineren Bildschirmgrößen umwandeln können. 

Wir beginnen mit der Vorbereitung der verschiedenen Elemente unseres Produktbereichs und verwenden eine kleine Menge CSS-Code, um den Sweep-Effekt zu aktivieren. Dies ist eine großartige Möglichkeit, eine breite Palette von Produkten auf Ihrer Zielseite zu präsentieren, ohne Ihre Besucher zu überwältigen. 

Mögliches Ergebnis

Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis an. Wir aktivieren die Magnetkarten des Produkts nur auf Tablets und Handys. Auf dem Desktop behalten wir die Spaltenstruktur bei, die wir im Shop-Modul festlegen.

Divi Produktmodul Shop Animation

1. Konfigurieren Sie die WooCommerce- und Produktseiten

Bevor Sie den Divi-Teil dieses Tutorials aufrufen, ist es wichtig, dass das WooCommerce-Plugin auf Ihrer Website installiert und aktiviert ist. Wenn Sie dies noch nicht getan haben, fügen Sie abhängig von der Anzahl der Produkte, die Sie in Ihrem Shop-Modul anzeigen möchten, mehrere Produkte hinzu.

Erstellen Sie Woocommerce-Produkte

2. Erstellen Sie eine neue Seite und laden Sie das Seitenlayout des Briefpapiers herunter

Erstellen Sie eine neue Seite

Sobald die Produkte installiert sind, fügen Sie eine neue Seite in Ihr WordPress-Backend ein. Geben Sie Ihrer Seite einen Titel, veröffentlichen Sie die Seite und aktivieren Sie den Divi Visual Builder.

Erstellen Sie eine Divi-Seite
Erstellen Sie eine neue Divi-Seite

Laden Sie das Zielseitenlayout herunter

Navigieren Sie auf Ihrer neuen Seite zu Ihren voreingestellten Layouts und laden Sie das Layout der Landingpage für Schreibwaren herunter. Obwohl wir dieses spezielle Layout verwenden, können Sie jedes andere gewünschte Layout verwenden, solange Sie ein Speichermodul in diesem Layout hinzufügen oder suchen.

Wählen Sie ein Divi-Layout

3. Ändern Sie den Shop-Bereich

Suchen Sie den Abschnitt mit dem Shop-Modul

Wenn wir nach unten zu unserer neuen Seite scrollen, die wir mit dem Layout der Briefpapier-Startseite erstellt haben, werden wir auf einen Abschnitt mit einem Shop-Modul stoßen. Wir werden diesen Abschnitt in den nächsten Schritten dieses Tutorials verwenden.

Suchen Sie das Shop-Modul

Leitungseinstellungen

Responsive Dimensionierung

Öffnen Sie zunächst die Zeileneinstellungen der Zeile, die das Shop-Modul enthält. Wie bereits erwähnt, behalten wir das gleiche Design auf dem Desktop bei. Wir aktivieren die Magnetkarten des Produkts nur auf kleineren Bildschirmgrößen. 

Um ein müheloses Erlebnis zu schaffen, können wir der Reihe erlauben, die linke und rechte Seite unseres Bildschirms zu berühren, indem wir die Breite in den Größeneinstellungen ändern.

  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: 1
  • Breite: 80% (Desktop), 100% (Tablet und Telefon)
Responsive Designänderung

Sichtbarkeit

Wir werden auch sicherstellen, dass nichts über den Zeilencontainer hinausgeht, indem wir die Sichtbarkeitseinstellungen auf ausgeblendet setzen.

  • Horizontaler Überlauf: versteckt
  • Vertikaler Überlauf: versteckt
Divi Sichtbarkeitskonfiguration

Shop-Moduleinstellungen

Wählen Sie die Anzahl der Produkte und die Bürosäulenstruktur Ihrer Wahl

Als nächstes öffnen wir die Shop-Moduleinstellungen. Die Änderungen, die wir an unserem CSS-Code vornehmen (den wir später hinzufügen werden), hängen von der Anzahl der Produkte ab, die wir anzeigen. 

Zunächst zeigen wir Ihnen, wie Sie aus einem Shop-Modul mit 8 Produkten Produktkarten machen. Sie können ein beliebiges Spaltenlayout für den Desktop auswählen.

  • Anzahl der Produkte: 8
  • Spaltenlayout: 4 Spalten
Ändern Sie das Design der Divisäulen

Responsive Dimensionierung

Um unser Shop-Modul zu vergrößern, ändern wir die Größenparameter auf der Registerkarte Design. Beachten Sie, dass wir dies nur für das Tablet und das Telefon tun.

  • Breite: 100% (Desktop), 250% (Tablet und Telefon)
  • Maximale Breite: 100% (Schreibtisch), 250% (Tablet und Telefon)
Responsive Design-Konfiguration

CSS-Klasse

Wir werden unserem Geschäftsmodul auch eine CSS-Klasse hinzufügen. Wenn wir später den CSS-Code hinzufügen, können wir das Shop-Modul transformieren, das nur diese CSS-Klasse enthält. Mit anderen Worten, wenn Sie möchten, dass ein anderes Shop-Modul im normalen Zustand angezeigt wird, können Sie dies tun, indem Sie diese CSS-Klasse weglassen.

  • CSS-Klasse: Produkt-Swipe-Karten
Ändern Sie das Attribut css module store divi

Reaktive Überläufe

Wir werden die Linieneinstellungen ergänzen, indem wir die Sichtbarkeitseinstellungen auf verschiedenen Bildschirmgrößen ändern. Wie Sie in den Einstellungen sehen können, soll der Bildlaufeffekt nur bei kleineren Bildschirmgrößen auftreten.

  • Horizontaler Überlauf: versteckt (Schreibtisch), Scrollen (Tablet und Telefon)
  • Vertikaler Überlauf: versteckt
Überlaufkonfiguration

Fügen Sie unter dem Shop-Modul ein Codemodul hinzu

Nachdem Sie das Shop-Modul geändert haben, können Sie direkt darunter ein Codemodul hinzufügen.

Fügen Sie unter divi shop module das Codemodul hinzu

Fügen Sie dem Modul CSS-Code hinzu

Der folgende CSS-Code wandelt unser Geschäftsmodul mit 8 Produkten automatisch in reaktive Magnetkarten um:

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

Fügen Sie CSS-Divi-Code hinzu

Ordnen Sie verschiedene Produktkonten zu

Wenn Sie Ihrem Geschäftsmodul weniger (oder mehr) Produkte hinzufügen möchten, ändert sich der Code an zwei Stellen geringfügig. Diese beiden Positionen müssen manuell geändert werden, um dem gewünschten Ergebnis zu entsprechen. Lassen Sie uns zum Beispiel die Anzahl der Produkte in unserem Shop-Modul auf '4' ändern.

  • Anzahl der Produkte: 4
Passen Sie ein anderes Produktkonto an

Wenn wir zu unserem Code zurückkehren, müssen wir zwei Änderungen vornehmen. Zuerst müssen wir die Spalten der Rastervorlage ändern. Anstelle von 8 verwenden wir 4 (dieselbe Anzahl wie unsere Anzahl von Produkten). Wir erhöhen auch die prozentuale Größe, die diese Produkte in unseren Produktblättern einnehmen (je mehr Produkte, desto weniger Platz).

Raster-Vorlagen-Spalten: Wiederholen (4, 14%)! wichtig;

Dann ändern wir auch die Breite des Behälters, in den die Produkte gestellt werden. Für 4 Produkte entspricht dies 150%. Diese Werte sind nicht festgelegt, sondern werden durch Spielen und Finden einer Harmonie zwischen den Spalten des Gittermodells und der Breite des Containers erhalten. 

Um die richtige Balance zu finden, wechseln Sie in Visual Builder zur mobilen Ansicht und passen Sie die Werte sorgfältig an, während Sie das Ergebnis dieser Änderungen anzeigen.

width: 150%!important;

Fügen Sie zusätzlichen Divisionscode hinzu

Fügen Sie der Schriftrolle einen Snap hinzu

Wenn Sie die Benutzererfahrung beim Design Ihrer Swipe-Karte weiterentwickeln möchten, können Sie auch einen Scroll-Snap hinzufügen. Mit der Bildlauferfassung können Ihre Besucher einen Bildlauf durchführen, indem sie auf den Start eines neuen Produkts starren.

 Dies bedeutet, dass der Scan nicht exakt sein muss. Der Scroll-Slam wird irgendwann die Kontrolle übernehmen und seine Position innerhalb des seitlichen Scroll-Mechanismus anpassen. 

Fügen Sie jedem Produkt einzeln im CSS-Code eine Zeile CSS-Code hinzu, um die Bildlauferfassung auf den Magnetkarten Ihres Produkts zu aktivieren (siehe Druckbildschirm unten).

Scroll-Snap-Align: Start

Wir werden auch die Scroll-Erfassung in unserem Shop-Modul aktivieren, indem wir die folgende Zeile CSS-Code hinzufügen:

Scroll-Snap-Typ: x obligatorisch

Passen Sie den CSS-Code an

Verwenden Sie das Werkstattmodul erneut, um andere Kategorien anzuzeigen

Klonen Sie einmal eine ganze Zeile

Sobald Sie den ersten Satz Magnetkarten fertiggestellt haben, können Sie die gesamte Zeile einmal klonen.

Verwenden Sie das Divi-Workshop-Modul erneut

Entfernen Sie das Codemodul in doppelter Zeile

Solange Ihr Geschäftsmodul dieselbe CSS-Klasse wie das vorherige enthält, reicht ein Codemodul aus. Fahren Sie fort und entfernen Sie das Codemodul in Ihrer doppelten Zeile.

Duplizieren Sie das Divi-Code-Modul

Klonen Sie die doppelte Zeile so oft Sie möchten

Und klonen Sie die doppelte Zeile jetzt so oft wie nötig, abhängig von der Anzahl der Swipe-Kartensätze, die Sie auf Ihrer Zielseite anzeigen möchten!

Klonen Sie das Modul so oft wie nötig
Dupliziertes Divi-Modul

4. Speichern Sie Seitenänderungen und zeigen Sie die Ergebnisse auf einem mobilen Gerät an

Stellen Sie sicher, dass Sie nach dem Hinzufügen der Produkt-Swipe-Karten Ihre Seite speichern, bevor Sie Visual Builder beenden, und fertig sind!

Demovorschau auf Mobilgerät

Übersicht

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Divi Produktmodul Shop Animation

Abschließende Gedanken

In diesem Artikel haben wir Ihnen gezeigt, wie Sie das integrierte Divi Shop-Modul auf kleineren Bildschirmgrößen in Produktmagnetkarten verwandeln können. Auf dem Desktop haben wir die ursprüngliche Spaltenstruktur beibehalten, die dem Shop-Modul zugewiesen wurde. 

Durch die Verwendung von Produkt-Swipe-Maps können Sie einem horizontalen Swipe-Mechanismus endlose Produkte hinzufügen, ohne Ihre Besucher mit vertikalem Bildlauf zu überfordern.

Dies ist ein Trend, der im modernen Website-Design häufig verwendet wird, da er sich auf das Benutzerverhalten konzentriert und den Zugriff auf eine Vielzahl von Elementen auf kleineren Bildschirmen erleichtert.

 Sie können diese Produktblätter auf jeder Seite verwenden, sie sind jedoch besonders praktisch für alle von Ihnen erstellten Produktzielseiten. Sie konnten auch die Layout-JSON-Datei kostenlos herunterladen! 

Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.

So fügen Sie dem Scrollen auf Divi einen animierten Zähler hinzu

So fügen Sie dem Scrollen auf Divi einen animierten Zähler hinzu

[Vc_row content_placement = "middle" css = "vc_custom_1508940533685 {background-color: #f8f6f6 Wichtig;}." El_id = "themeforestpro"] [vc_column width = "3 / 4" css = „vc_custom_1502759058885 {margin-bottom: 0px. wichtig; border-bottom-width: 0px signifikant; padding-bottom: 0px signifikant;} „] [vc_column_text]!

Divi: das am einfachsten zu verwendende WordPress-Theme

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DOWNLOAD [/vcex_button][/ vc_column][/vc_row]

Animierte Nummernzähler sind im Internet beliebt, um numerische Daten anzuzeigen und den Wert von Diensten, Fallstudien usw. hervorzuheben. Divi verfügt über ein spezielles Nummernzählermodul, mit dem auf einfache Weise animierte Nummernzähler generiert werden können.

In diesem Tutorial zeigen wir Ihnen jedoch, wie Sie digitale Zähler erstellen, die beim Scrollen mit Divi animiert werden. Mit den Positionsoptionen und Bildlaufeffekten von Divi entwerfen wir ein einfaches Layout, um ein Datum mit Bildlaufnummern anzuzeigen.

Teil 1: Erstellen des Titelabschnitts

In diesem ersten Teil erstellen wir einen einfachen Titel für das Layout.

Fügen Sie dem Abschnitt zunächst eine Zeile mit einer Spalte hinzu.

Registrieren Sie ein Divi-Section-Modul

Fügen Sie dann der Zeile ein neues Textmodul hinzu.

Aktualisieren Sie den Inhalt des Textmoduls wie folgt:

Merken Sie den Termin vor
Speichern Sie das Datum 1

Aktualisieren Sie dann den Header-Textstil wie folgt:

  • Überschrift 2 Schriftart: Prata
  • Punkt 2 Textgröße: 130px (Desktop), 70px (Tablet), 40px (Telefon)
Änderung des Divi-Titels

Teil 2: Erstellung von Zählern mit Bildlaufanimation

In diesem nächsten Teil erstellen wir die drei Zähler, die die Bildlaufnummern animieren, bis sie anhalten, um ein Datum (Monat, Tag und Jahr) anzuzeigen. Jeder Zähler wird aus insgesamt 5 Textmodulen und einem Trennmodul aufgebaut. Das erste Textmodul dient als Beschriftung des Zählers (d. H. Monat, Tag, Jahr). Die nächsten vier Textmodule enthalten jeweils eine andere Nummer (in Bearbeitung), die beim Scrollen mithilfe der vertikalen Bewegungsversätze in Divi animiert wird. Das untere Trennmodul hilft dabei, den Überlauf von Zahlen zu verbergen.

So geht's

Fügen Sie eine zweite Zeile hinzu

Fügen Sie unterhalb der vorhandenen Zeile einer Spalte eine weitere Zeile hinzu.

Leitungseinstellungen

Aktualisieren Sie die Zeilenparameter wie folgt, bevor Sie ein Modul hinzufügen:

  • Dachrinnenbreite: 1
  • Auffüllen: 0px hoch, 0px niedrig
Divi Border Konfiguration

Spaltenparameter

Öffnen Sie dann die Spalteneinstellungen und aktualisieren Sie die Füllung wie folgt:

  • Polsterung (Schreibtisch): 100px niedrig
  • Polsterung (Tablet und Telefon): 0px niedrig
Konfiguration des Divi-Spaltenabstands

Fügen Sie ein Textmodul hinzu

Fügen Sie dann der Spalte ein Textmodul hinzu.

Fügen Sie ein Divi-Textmodul hinzu

Inhalt / Label

Fügen Sie für den Inhalt des Textmoduls das Wort "Monat" hinzu.

Geben Sie die Monatsdivi an

Einstellungen für das Textdesign

Aktualisieren Sie nach dem Hinzufügen von Inhalten die Designeinstellungen wie folgt:

  • Hintergrundfarbe: #ffffff
  • Textschrift: Sprechen
  • Textgröße: 40px
  • Höhe der Textzeile: 2em
  • Breite: 100%
  • Auffüllen: 20 Pixel oben, 20 Pixel unten, 20 Pixel links, 20 Pixel rechts
  • Breite des unteren Randes: 5px
  • Farbe des unteren Randes: #eeeeee
Position

Aktualisieren Sie dann auf der Registerkarte "Erweitert" die Positionsoptionen wie folgt:

  • Position: Relativ
  • Z-Index 1
Prata WordPress-Modul

Fügen Sie ein Textmodul für die erste Ausgabe hinzu

Sobald das erste Textmodul vorhanden ist, können wir die Zahlen hinzufügen, die sich auf der Schriftrolle bewegen. Um die erste Nummer hinzuzufügen, fügen Sie ein neues Textmodul unter dem vorhandenen Textmodul "Monat" hinzu.

Fügen Sie ein Storyteller-Textmodul hinzu

Nummer / Inhalt hinzufügen

Aktualisieren Sie dann die Beschriftung des Textmoduls, um zur leichteren Bezugnahme „num1“ zu lesen. Aktualisieren Sie dann den Inhalt mit der Nummer „01“.

Divi-Nummernmodul hinzufügen

Designeinstellungen für Nummer

Aktualisieren Sie auf der Registerkarte Design Folgendes:

  • Textschrift: Prata
  • Text Textfarbe: # 8ab2d3
  • Text Textgröße: 70px
  • Textbuchstabenabstand: 4px
  • Textzeilenhöhe: 1.5em
  • Polsterung: 20px übrig
Divi Farbkonfiguration

HINWEIS: Die Zahlen haben eine Textgröße von 70 Pixel und eine Zeilenhöhe von 1.5 Pixel. Dies bedeutet, dass die Gesamthöhe des Textmoduls nahe 100 Pixel liegt. Dies ist wichtig, wenn Sie mit dem Hinzufügen der vertikalen Bewegungsversätze beginnen. Wenn Sie beispielsweise dem Textmodul einen vertikalen Versatz von „1“ hinzufügen, wird das Textmodul genau um 100 Pixel verschoben, was der Höhe des Textmoduls entspricht.

Bildlaufeffekte für die erste Zahl

Fügen Sie dem Textmodul die folgenden Bildlaufeffekte hinzu.

Aktualisieren Sie auf der Registerkarte "Vertikale Bewegung" Folgendes:

  • Vertikale Bewegung aktivieren: JA
  • Startoffset: 1 (bei 10%)
  • Durchschnittlicher Offset: 0 (bei 20%)
  • Endversatz: -1 (bei 30%)

Aktualisieren Sie auf der Registerkarte Einblenden und Ausblenden Folgendes:

  • Ein- und Ausblenden aktivieren: JA
  • Anfangsopazität: 0% (bei 10%)
  • Durchschnittliche Deckkraft: 100% (bei 20%)
  • Endopazität: 0% (bis 30%)

Stellen Sie sicher, dass der Auslöser für den Bewegungseffekt oben im Clip eingestellt ist:

  • Bewegungseffekt-Trigger: Element oben
Konfiguration des Divi-Textes des Animationsmoduls

Erstellen Sie das Textmodul für die zweite Nummer

Dupliziere die erste Nummer

Sobald die erste Nummer erstellt wurde, duplizieren Sie sie, um das Textmodul für die zweite Nummer zu erstellen. Aktualisieren Sie dann die Beschriftung in der Ebenenansicht, um eine bessere Referenz zu erhalten.

Duplizieren Sie das Divi 1-Textmodul

Nummer / Inhalt aktualisieren

Öffnen Sie die Parameter des zweiten digitalen Textmoduls und aktualisieren Sie den Inhalt mit der Nummer "02".

Speichern Sie Nummer 2 Divi

Position aktualisieren

Aktualisieren Sie dann die Positionsoptionen wie folgt:

  • Position: Absolut
  • Vertikaler Versatz: 126px
Position des Divi-Textmoduls ändern

Aktualisieren Sie die Bildlaufeffekte

Aktualisieren Sie dann die Bildlaufeffekte wie folgt:

Aktualisieren Sie auf der Registerkarte Vertikale Bewegung Folgendes:

  • Startoffset: 1 (bei 20%)
  • Durchschnittlicher Offset: 0 (bei 30%)
  • Endversatz: -1 (bei 40%)

Aktualisieren Sie auf der Registerkarte Einblenden und Ausblenden Folgendes:

  • Anfangsopazität: 0% (bei 20%)
  • Durchschnittliche Deckkraft: 100% (bei 30%)
  • Endopazität: 0% (bis 40%)
Animation Scroll Effekt Divi

Erstellen Sie ein Textmodul für die dritte Ausgabe

Dupliziere die zweite Nummer

Um das Textmodul für die dritte Nummer zu erstellen, duplizieren Sie das Textmodul für die zweite Nummer.

Duplizieren Sie das Textmodul Nummer 3

Nummer / Inhalt aktualisieren

Aktualisieren Sie den Inhalt mit der Nummer "03".

Ändern Sie das Divi-Textmodul

Aktualisieren Sie die Bildlaufeffekte

Aktualisieren Sie dann die Bildlaufeffekte:

Aktualisieren Sie auf der Registerkarte Vertikale Bewegung Folgendes:

  • Startoffset: 1 (bei 30%)
  • Durchschnittlicher Offset: 0 (bei 40%)
  • Endversatz: -1 (bei 50%)

Aktualisieren Sie auf der Registerkarte Einblenden und Ausblenden Folgendes:

  • Anfangsopazität: 0% (bei 30%)
  • Durchschnittliche Deckkraft: 100% (bei 40%)
  • Endopazität: 0% (bis 50%)
Bearbeiten Sie die Animation des Textmoduls

Erstellen Sie ein Textmodul für die vierte Ausgabe

Dritte doppelte Ausgabe

Um die vierte Nummer für den Bildlaufzähler zu erstellen, duplizieren Sie das Textmodul für die dritte Nummer.

Doppelte Textmodul-Divi Nummer 4

Nummer / Inhalt aktualisieren

Aktualisieren Sie den Inhalt mit der Nummer "04".

Konfigurieren Sie den Wert des Divi-Textmoduls

Aktualisieren Sie die Bildlaufeffekte

Aktualisieren Sie dann die Bildlaufeffekte:

Aktualisieren Sie auf der Registerkarte Vertikale Bewegung Folgendes:

  • Startoffset: 1 (bei 40%)
  • Durchschnittlicher Offset: 0 (bei 50%)
  • Endversatz: 0 (bei 60%)

Aktualisieren Sie auf der Registerkarte Einblenden und Ausblenden Folgendes:

  • Anfangsopazität: 0% (bei 40%)
  • Durchschnittliche Deckkraft: 100% (bei 50%)
  • Endopazität: 100% (bis 60%)
Animationskonfigurationsmodul 4 divi

Fügen Sie ein unteres Trennzeichen hinzu

Fügen Sie unter dem letzten Textmodul ein neues Trennmodul hinzu. Dies wird verwendet, um den unteren Überlauf des angezeigten Bildlauftextes auszublenden.

Divi Separator Modul hinzufügen

Wählen Sie dann NEIN, um das Trennzeichen anzuzeigen.

Zeigen Sie das Divi-Trennzeichen nicht an

Stil- und Positionseinstellungen

Aktualisieren Sie das Separator-Design wie folgt:

  • Hintergrundfarbe: #ffffff
  • Breite: 100%
  • Höhe: 100px
  • Breite des oberen Randes: 5px

Aktualisieren Sie auf der Registerkarte Erweitert Folgendes:

  • Deaktivieren auf: Telefon und Tablet
  • Position: Absolut
  • Ort: unten links

WICHTIG: Der Platz, den das Trennzeichen einnimmt, wurde zuvor erstellt, indem der Spalte eine untere Auffüllung von 100 Pixel hinzugefügt wurde. Wenn Sie diese Auffüllung nicht hinzufügen, überlappt das Trennzeichen die Ziffern.

Erstellung zusätzlicher Zähler und Spalten

Duplizieren Sie Spalte 1 und aktualisieren Sie den Inhalt

Um einen neuen Zähler zu erstellen, duplizieren Sie Spalte 1. Dadurch wird automatisch eine zweite Spalte mit allen Elementen erstellt.

Dann müssen Sie nur noch den Inhalt aller Textmodule mit neuen Texten und Zahlen aktualisieren.

Doppelte ganze Spaltenteilung

Duplizieren Sie Spalte 2 und aktualisieren Sie den Inhalt

Sobald der Inhalt aller Textmodule in Spalte 2 aktualisiert wurde, duplizieren Sie Spalte 2, um einen dritten Zähler für das Jahr zu erstellen. Aktualisieren Sie dann den Inhalt jedes Textmoduls nach Bedarf.

Endergebnis

Hier ist das Endergebnis.

Andere Ressourcen

Abschließende Gedanken

Dieses einfache Layout mit animierten Bildlaufzählern sollte nützlich sein, um digitale Daten auf eine neue und einzigartige Weise anzuzeigen. Zögern Sie nicht, das Konzept des Datums aufzugeben und die Zähler für alles zu verwenden, wovon Sie träumen können!

So erstellen Sie animierte Schubladen auf Divi

So erstellen Sie animierte Schubladen auf Divi

[Vc_row content_placement = "middle" css = "vc_custom_1508940533685 {background-color: #f8f6f6 Wichtig;}." El_id = "themeforestpro"] [vc_column width = "3 / 4" css = „vc_custom_1502759058885 {margin-bottom: 0px. wichtig; border-bottom-width: 0px signifikant; padding-bottom: 0px signifikant;} „] [vc_column_text]!

Divi: das am einfachsten zu verwendende WordPress-Theme

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DOWNLOAD [/vcex_button][/ vc_column][/vc_row]

Fußzeilenschubladen sind nützliche Ergänzungen zu jeder Website, da sie zusätzlichen Inhalt speichern, auf den Benutzer leicht zugreifen können. Fußzeilenschubladen sind Webinhaltscontainer (wie ein Divi-Bereich), die durch Klicken auf eine Schaltfläche oder Bewegen des Mauszeigers geöffnet und geschlossen werden können. Es ist wie ein kleiner Vorrat für Premium-Inhalte.

In diesem Tutorial werden wir eine schwebende Fußzeilenschublade in Divi entwerfen. Wir werden die Fußzeilenschublade zum gesamten Fußzeilenbereich der Website-Vorlage hinzufügen, sodass die Fußzeilenschublade mit dem normalen Fußzeileninhalt auf der gesamten Website zugänglich ist.

Mit dem Prozess, den wir verwenden werden, kann jeder Divi-Abschnitt (und sein Inhalt) in wenigen Minuten in eine Fußzeilenschublade konvertiert werden.

So fügen Sie die Footer Drawer-Vorlage zu Ihrer Divi-Site hinzu

Durch Hinzufügen dieser Vorlage wird die Standard-Website-Vorlage (falls vorhanden) auf Ihrer Divi-Site ersetzt. Wir empfehlen, dass Sie es einer Test-Site hinzufügen, damit Sie auf einer Live-Site nichts durcheinander bringen.

Um das Schubladenmodell mit fester Fußzeile in Ihre eigene Website zu importieren, entpacken Sie die Download-Zip-Datei, um auf die JSON-Datei zuzugreifen.

Gehen Sie dann zum WordPress-Dashboard und gehen Sie zu Divi> Theme Builder.

Klicken Sie dann oben rechts auf der Seite auf das Portabilitätssymbol.

Wählen Sie im Portabilitätsfenster die JSON-Datei aus, die Sie gerade entpackt haben, und wählen Sie die Option "Backup vor dem Import herunterladen", falls Sie zuvor etwas in der Standard-Website-Vorlage hatten, das Sie nicht hatten. wollte nicht ersetzen.

Klicken Sie dann auf die Schaltfläche Importieren.

Modell Divi importieren

Speichern Sie abschließend die Änderungen am Themengenerator und zeigen Sie eine Live-Seite an, um die feste Fußzeilenleiste anzuzeigen.

Speichern Sie die Änderungen am Divi-Layout

Nun zum Tutorial, okay?

Teil 1: Hinzufügen einer globalen Fußzeile

Mit dem Divi-Themengenerator können Sie die Standardfußzeile durch eine neue ersetzen, indem Sie die Standardwebsite-Vorlage aktualisieren.

Um eine globale Fußzeile zu erstellen, rufen Sie das WordPress-Dashboard auf und gehen Sie zu Divi> Theme Builder. Klicken Sie dann in der Standard-Website-Vorlage auf den Bereich "Globale Fußzeile hinzufügen".

Auswahl des Divi-Editors

Wählen Sie dann die Option "Globale Fußzeile erstellen" aus der Dropdown-Liste.

Fügen Sie eine Divi-Modell-Fußzeile hinzu

Fügen Sie einem globalen Fußzeilenlayout ein vordefiniertes Layout hinzu

Dadurch wird der Modelllayout-Editor bereitgestellt, in dem Sie sofort mit den drei Auswahlmöglichkeiten für den Baubeginn aufgefordert werden. Wählen Sie die Option "Vordefiniertes Layout auswählen".

Wählen Sie ein vorkonstruiertes Divi-Modell

Suchen Sie im Popup-Fenster Aus Bibliothek laden das Layout der Zielseite des Briefpapiers. Klicken Sie dann auf "Dieses Layout verwenden".

Verwenden Sie ein Divi-Modell

Entfernen Sie unerwünschte Inhalte aus dem vorgefertigten Layout

Erweitern Sie nach dem Laden des Layouts in den Editor das Popup-Feld Ebenen, indem Sie im Einstellungsmenü auf das Ebenensymbol klicken. Löschen Sie dann alle Abschnitte des Layouts mit Ausnahme der letzten beiden.

Unnötigen Abschnitt löschen

Verschieben und beschriften Sie die beiden Abschnitte

Sobald die Abschnitte entfernt wurden, sollten Sie zwei Abschnitte haben, einen mit dem Titel "Fußzeile" und einen mit dem Titel "Wie es funktioniert". Verschieben Sie den Abschnitt "Fußzeile" an den Anfang des Layouts.

Divi Fußzeile

Ändern Sie den Wortlaut im unteren Bereich in "Fußzeilenschublade". Dies ist der Abschnitt, den wir als Inhalt unserer Fußzeilenschublade verwenden werden.

Ändern Sie die Beschriftung der Divi-Fußzeile

Teil 2: Erstellen der festen Fußzeilenschublade

Nachdem wir einen der Abschnitte als Fußzeile und den anderen als Fußzeilenschublade festgelegt haben, können wir mit dem Bau unserer festen Fußzeilenschublade beginnen. Beginnen wir mit der Erstellung des Klappentext-Symbols, mit dem wir die Fußzeilenschublade umschalten.

Erstellung des Footer Drawer Buttons

Fügen Sie eine neue Zeile hinzu

Fügen Sie im unteren Fußzeilenbereich einer Spalte eine neue Zeile hinzu.

feste Fußschublade

Beschriften Sie die neue Zeile mit "Schubladenschaltfläche", da diese Zeile die Schaltfläche enthält, mit der die Schublade geöffnet und geschlossen wird. Verschieben Sie dann die Linie an den oberen Rand des Abschnitts.

Auswahllayout divi

Zeilenauffüllung

Öffnen Sie vor dem Hinzufügen eines Moduls die Zeileneinstellungen und aktualisieren Sie den Abstand wie folgt:

  • Auffüllen: 0px hoch, 0px niedrig
Confiuration Divi Abstand

Abschnittsauffüllung

Öffnen Sie dann die Einstellungen im Abschnitt "Fußzeilenschublade" und aktualisieren Sie die Polsterung wie folgt:

Konfiguration des Abstandsabschnitts

Um die anklickbare Schaltfläche zum Umschalten der Fußzeilenschublade zu erstellen, verwenden wir ein Klappentextmodul mit einem Symbol. Und wir werden ihm eine einzigartige Tropfenform geben, indem wir die quadratische Form des Klappentextbehälters mit dem Kreissymbol kombinieren.

So geht's

Fügen Sie ein Klappentext-Modul hinzu

Fügen Sie der Zeile "Schublade" oben im Abschnitt ein Präsentationstextmodul hinzu.

Fußzeile Schublade Divi
Klappentext Inhalt / Symbol

Entfernen Sie dann den Standardtitel und den Textinhalt und wählen Sie das Pfeilsymbol aus, das auf die obere linke Ecke zeigt (siehe Screenshot). Wir verwenden das teilweise gedrehte Symbol, da wir es später drehen werden.

Wählen Sie Icon Footer Drawer Divi
Klappentext Design

Geben Sie dann den Präsentationstext wie folgt ein:

  • Hintergrundfarbe: # 081540
Ändern Sie den Divi-Hintergrund

Aktualisieren Sie dann die Entwurfsparameter wie folgt:

  • Symbolfarbe: #eeeeee
  • Kreissymbol: JA
  • Kreisfarbe: # 081540
  • Verwenden Sie die Schriftgröße des Symbols: JA
  • Symbol Schriftgröße: 17 Pixel
Passen Sie Klappentext-Divi-Taste an
Größe des Präsentationstextes

Geben Sie dem Modul nun eine Höhe und Breite wie folgt:

  • Breite: 30px
  • Höhe: 30px

Dadurch läuft das Kreissymbol in den Textbehälter über, um die Wassertropfenform zu erstellen.

Bearbeiten Sie das Design der Divi-Schaltflächen
Klappentextposition

Geben Sie dem Präsentationstext dann eine absolute Position in der oberen Mitte des Abschnitts.

  • Position: Absolut
  • Ort: Top Center
Ändern Sie die Position der Divi-Taste
Klappentext-Transformationseinstellungen

Jetzt können wir die Transformationsoptionen verwenden, um den Klappentext / das Symbol nach oben zu drehen und direkt über dem Abschnittscontainer zu positionieren. Wenn wir nun den Abschnitt unter dem Browserfenster ausblenden, bleibt das Symbol sichtbar / anklickbar.

Aktualisieren Sie die folgenden Elemente:

  • Transformieren X-Achse übersetzen: -50%
  • Translation der Y-Achsen-Translation: -250%
  • Drehung der Z-Achse transformieren: -45 Grad

Entfernen Sie dann die Standard-Symbolanimation:

  • Bild- / Symbolanimation: Keine Animation
Divi-Taste zurückgeben

Wir werden JQuery verwenden, um die Schublade umzuschalten. Daher müssen wir den Text / das Symbol als anklickbares Element mit einer CSS-Klasse ausrichten, die wir später im Code verwenden werden. Fügen Sie die folgende CSS-Klasse hinzu:

  • CSS-Klasse: Zielschublade
Definieren Sie einen Divi-Selektor

Einstellungen für den Fußzeilen-Schubladenabschnitt

Jetzt werden wir den Abschnitt "Fußzeile Schublade" mit der Option "Übersetzung übersetzen" ausblenden. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

  • Transformieren Y-Achse übersetzen: 100%

Das Schöne an der Verwendung der Transformation ist, dass die Prozentwerte auf der tatsächlichen Größe des Elements basieren. Somit sind 100% auf der Y-Achse direkt relativ zur Höhe des Abschnitts (nomatter, was es zu einem bestimmten Zeitpunkt ist). Mit anderen Worten, das Element wird genau um seine eigene Höhe nach unten bewegt.

Transformationsabschnitt divi

Um die "Fußzeilen-Schublade" wieder sichtbar zu machen, müssen wir die Transformationsübersetzung, die wir gerade dem Abschnitt hinzugefügt haben, umkehren. Dazu müssen wir das Element mit einer CSS-Klasse als Ziel festlegen und die Übersetzungstransformation deaktivieren, indem wir auf das Symbol klicken (den gesamten Abschnitt an seine ursprüngliche Position zurückbringen).

Fügen Sie dem Fußzeilen-Schubladenabschnitt eine CSS-Klasse hinzu

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse hinzu:

  • CSS-Klasse: has-transform
Klasse hinzufügen hat Transformations-Divi

Fußzeilenschubladenbereich Feste Position

Für den letzten Schritt müssen wir die Fußzeilenschublade so fixieren, dass sie (mit dem Symbol) am unteren Rand des Browserfensters schwebt.

Aktualisieren Sie die Position des Abschnitts "Fußzeilenschublade" wie folgt:

  • Position: fest
  • Ort: unten links
  • Z-Index: 13
Ändern Sie die Position in der Divi-Ecke

Deaktivieren Sie mobile Inhalte

Da Sie nur eine begrenzte Menge an Inhalten für Fußzeilenschubladen haben, die sowohl für Tablets als auch für Telefone geeignet sind (aufgrund der begrenzten Bildschirmhöhe), müssen Sie nicht wesentliche Elemente auf dem Display deaktivieren / ausblenden. In diesem Beispiel wird die mittlere Zeile des Abschnittslayouts ausgeblendet.

Abschnitt auf dem Handy ausblenden

Öffnen Sie die Einstellungen von der vorletzten Zeile im Abschnitt „Fußzeile“. Aktualisieren Sie auf der Registerkarte "Erweitert" die Sichtbarkeitsoption, um die Leitung auf dem Telefon und Tablet auszuschalten.

Kontrollieren Sie den Sichtbarkeitsbereich

Benutzerdefinierten Code hinzufügen

Um die Funktionen zum Klicken und Umschalten in der Fußzeilenschublade hinzuzufügen, müssen Sie der Seite benutzerdefiniertes CSS und JQuery hinzufügen. Erstellen Sie dazu unter dem für die Schaltfläche verwendeten Blurb-Modul ein neues Codemodul.

Modulcode hinzufügen

Fügen Sie dann den folgenden Code in den Codebereich ein:

.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;}  .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation');      $('.has-transform').toggleClass('toggle-drawer-animation');   });    });})( jQuery );   
Divi-Code-Modul hinzufügen

Änderungen speichern

Denken Sie daran, das Layout zu speichern, bevor Sie den Editor verlassen.

Speichern Sie Divi-Änderungen

Speichern Sie auch die Änderungen im Themengenerator.

Änderungen speichern

Endergebnis

Jetzt können wir zu jeder Seite Ihrer Website gehen, um das Endergebnis zu sehen.

Abschließende Gedanken

Ich hoffe, die schwebende Fußzeilenschublade hilft Ihnen dabei, den Inhalt auf unterhaltsame und zugängliche Weise zu bewerben. Wie jede Schublade können Sie sie mit fast allem füllen, was Sie sich vorstellen können.

Andere Ressourcen

Hier finden Sie eine Liste von Tutorials, mit denen Sie mit den internen Funktionen von Divi mehr erreichen können.

Übersetzt von: Elegant Themes

Erstellen Sie einen schwebenden Kontaktbereich mit Bildlaufeffekten auf Divi

Erstellen Sie einen schwebenden Kontaktbereich mit Bildlaufeffekten auf Divi

[Vc_row content_placement = "middle" css = "vc_custom_1508940533685 {background-color: #f8f6f6 Wichtig;}." El_id = "themeforestpro"] [vc_column width = "3 / 4" css = „vc_custom_1502759058885 {margin-bottom: 0px. wichtig; border-bottom-width: 0px signifikant; padding-bottom: 0px signifikant;} „] [vc_column_text]!

Divi: das am einfachsten zu verwendende WordPress-Theme

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DOWNLOAD [/vcex_button][/ vc_column][/vc_row]

Jede Website benötigt einen Kontaktbereich, aber das bedeutet nicht, dass Sie sich für ein Standarddesign entscheiden müssen. Mit den Scroll-Effekten von Divi können Sie einen schwebenden Kontaktbereich erstellen, der auffällt. Verbessern Sie Ihre Benutzerinteraktion mit einem vertikal scrollenden Kontaktbereichslayout, das Besucher zur Interaktion mit Ihrem Kontaktformular einlädt. In diesem Artikel zeigen wir Ihnen, wie Sie einen schwebenden Kontaktabschnitt in voller Breite erstellen, den Sie jeder Seite hinzufügen können. Mit dem Divi Theme Builder können Sie es sogar oben in einer Fußzeile auf der gesamten Website hinzufügen.

Unten finden Sie eine kostenlose herunterladbare Datei mit dem JSON-Layout, die Sie in Ihre eigene Divi-Bibliothek hochladen können. Wir haben auch eine PSD-Vorlage hinzugefügt, mit der Sie den Kartenhintergrund neu erstellen können, sowie eine Karten-Pin-SVG, mit der Sie sie mit Ihren eigenen Farben anpassen können.

Erstellen Sie eine Elementstruktur

In diesem Entwurf verwenden wir ein Hintergrundbild, das auf Google Map den Ort darstellt, den Sie hervorheben möchten. Sie können dies mit Photoshop oder einem anderen Bildeditor tun.

Einen neuen Abschnitt hinzufügen

Jetzt ist es an der Zeit, den schwebenden Kontaktbereich mit dem Divi Builder zu erstellen! Als erstes öffnen wir eine neue oder vorhandene Seite und fügen einen neuen Abschnitt hinzu.

Fügen Sie auf der Registerkarte "Inhalt" den Hintergrund der Karte hinzu, die Sie in Photoshop erstellt haben.

  • Hintergrundbild: Ihre geänderte Karte
Divi Hintergrundbild

Abstand

Passen Sie als Nächstes die Einstellungen für den Abschnittsabstand auf der Registerkarte Entwurf an.

  • Oberer und unterer Rand: 50vh
  • Polsterung unten: 0vw
Divi 1 Abschnitt Abstandskonfiguration

Sichtbarkeit

Stellen Sie dann die Überläufe auf sichtbar ein.

  • Horizontaler und vertikaler Überlauf: sichtbar
schwimmender Kontaktabschnitt

Position

Stellen Sie abschließend den Z-Index des Abschnitts auf 10 ein.

  • Z-Index: 10
Divi Abschnitt Position

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Jetzt ist die Zeit gekommen, ein paar Dinge hinzuzufügen. Fügen Sie zunächst eine Zeile mit 2 Spalten hinzu.

Zeile hat zwei Spalten divi

Sizing

Öffnen Sie die Linienparameter und passen Sie die Größe wie folgt an.

  • Breite
    • Büro: 90%
    • Tablet und Telefon: 80%
  • Maximale Breite: 90%
Divi-Linienparameter

Sichtbarkeit

Klicken Sie auf die Registerkarte Erweitert und passen Sie die Überläufe an.

  • Horizontaler und vertikaler Überlauf: sichtbar
Divi Line Overflow Konfiguration

Position

Schließen Sie die Zeileneinstellungen ab, indem Sie die Positionseinstellungen ändern.

  • Position: Relativ
  • Versetzter Ursprung: Oben links
  • Vertikaler Versatz
    • Desktop: -8vw
Konfigurieren Sie die Position der Teilleitung

Einstellungen für Spalte 1

Hintergrund

Bevor wir Module hinzufügen, müssen wir die einzelnen Spalten formatieren. Fügen Sie Spalte 1 eine Hintergrundfarbe hinzu.

  • Einfarbig: # 25274d
Spaltenfarbe 1 Divi

Abstand

Passen Sie als nächstes die Abstandseinstellungen an.

  • Polsterung oben und unten
    • Desktop und Tablet: 7vw
  • Linke und rechte Polsterung
    • Desktop: 3 vw
    • Tablet und Telefon: 6vw
Konfiguration mit zwei Spaltenabständen

Grenze

Fügen Sie dann den Rahmeneinstellungen einige abgerundete Ecken hinzu.

  • Abgerundete Ecken: 10px alle vier Ecken
Divi-Abschnitt mit abgerundeten Kanten

Bildlaufeffekte

Verwenden Sie in den Einstellungen für Bildlaufeffekte eine vertikale Bewegung. Dies wird uns helfen, einen schwebenden Effekt zu erzeugen.

  • Bildlauftransformationseffekte: Vertikale Bewegung
  • Vertikale Bewegung / Desktop-Set
    • Startversatz: 4
    • Mittlerer Versatz: 0 (bei 50%)
    • Endversatz: -4
  • Vertikale Bewegung / Tablet und Telefon
    • Startversatz: 4
    • Mittlerer Versatz: 0 (bei 40% und 60%)
    • Endversatz: -3
  • Bewegungseffekt auslösen: Mitte des Elements
Passen Sie den Bildlaufeffekt für Divi-Abschnitte an

Einstellungen für Spalte 2

Position

Kommen wir nun zu den Parametern der zweiten Spalte. Passen Sie die Positionseinstellungen entsprechend an.

  • Position: Relativ
  • Ursprung des Versatzes: oben links
  • Vertikaler Versatz
    • Büro: 25vw
Anpassung der Divi-Spalte

Scroll-Effekte

Wir fügen dieser Spalte auch eine vertikale Bewegung hinzu.

  • Scroll-Transformationseffekte: vertikale Bewegung
  • Definieren Sie die vertikale / Desktop-Bewegung
    • Startoffset: 2
    • Durchschnittlicher Offset: 0 (bei 50%)
    • Endversatz: -2
  • Definieren Sie vertikale Bewegung / Tablet und Telefon
    • Startoffset: 0
    • Durchschnittlicher Offset: 0 (bei 50%)
    • Endversatz: -2
  • Bewegungseffekt-Trigger: Element oben
Divi-Scrolling-Effekt

Fügen Sie der 1-Spalte einen Textbaustein hinzu

Inhalt

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Textmodul in Spalte 1. Fügen Sie den gewünschten H2-Inhalt hinzu.

Inhaltsmodul für Spalte 1

Titeltext

Gehen Sie zur Registerkarte Design und gestalten Sie den H2-Text wie folgt.

  • Titelstufe: H2
  • Schriftart: Palanquin Dark
  • Schriftgewicht: fett
  • Schriftstil: TT
  • Farbe: gelb # ffd868
  • Größe
    • Büro: 5vw
    • Tablette: 10vw
    • Telefon: 12vw
  • Buchstabenabstand: 4px
Personalisierung der Divi-Schriftarten

Fügen Sie Spalte 1 ein Kontaktformularmodul hinzu

Inhalt

Fügen Sie unter dem Textmodul ein Kontaktformular hinzu. Dies sind die Felder, die wir verwenden:

  • Name
  • E–Mail
  • Material
  • Nachricht
Divi Kontaktformular hinzufügen

SPAM-Schutz

Vor dem Stylen des Kontaktformularmoduls. Aktivieren Sie den Spam-Schutz und verbinden Sie Ihr ReCaptcha-Konto.

  • Verwenden Sie einen Spam-Schutzdienst: Ja
  • Dienstleister: ReCaptcha
  • Wählen Sie ein Konto
Divi Kontaktformular Spam-Schutz

Felder

Wechseln Sie zur Registerkarte "Design" und gestalten Sie die Felder wie folgt.

  • Hintergrundfarbe: Dunkelblau # 25274d
  • Textfarbe: hellgrau # d1d1d1
  • Fokus Hintergrundfarbe: Dunkelblau # 25274d
  • Fokustextfarbe: hellgrau # d1d1d1
  • Schriftart: Sänfte
  • Stil: TT
  • Textgröße
    • Büro: 0.9vw
    • Tablette: 2vw
    • Telefon: 3vw
  • Buchstabenabstand: 1px
Farbfelder anpassen 1

Taste

Stilisieren Sie dann die Schaltfläche.

  • Benutzerdefinierte Stile: Ja
  • Textgröße: 20px
  • Textfarbe: dunkelblau # 25274d
  • Hintergrundfarbe: Gelb # ffd868
  • Randradius: 7px
  • Symbolfarbe: Dunkelblau # 25274d
  • Oberer Rand: 5px
Anpassen des Divi-Button-Stils 1
Farbkonfiguration der Divi-Schaltfläche

Sizing

Wir ändern dann die Größenparameter.

  • Breite: 100%
  • Maximale Breite: 100%
Aufteilungskonfiguration

Abstand

Wir werden auch Top-Polster hinzufügen.

  • Obere Polsterung: 4vw
Divi Abstand

Grenze

Vervollständigen Sie die Modulparameter, indem Sie die Rahmenparameter anpassen.

  • Eingänge mit abgerundeten Ecken: 6px an den vier Ecken
  • Einträge Rahmenstile: alle vier Seiten
  • Eingangsrandbreite: 2px
  • Einträge Rahmenfarbe: gelb # ffd868
Divi Border Konfiguration

Fügen Sie das Social Media Tracking-Modul zu Spalte 2 hinzu

Inhalt

Gehen Sie zu Spalte 2 und fügen Sie ein Social Media-Modul hinzu. Nutzen Sie alle sozialen Netzwerke, die Sie benötigen.

  • Facebook
  • Twitter
  • Linkedin
Modul folgen Sie uns in sozialen Netzwerken

Pfandrecht

Fügen Sie vor dem Stylen Links zu den entsprechenden Netzwerken hinzu.

Kontext des Artikels

Öffnen Sie nun das erste soziale Netzwerk und ändern Sie die Hintergrundfarbe.

  • Farbe: Dunkelblau # 25274d
Ändern Sie den Hintergrund von Divi 1

Elementsymbol

Ändern Sie auf der Registerkarte "Design" desselben Elements die Symboleinstellungen wie folgt.

  • Farbe: gelb # ffd868
  • Symbol Schriftgröße
    • Schreibtisch und Tablet: 31 px
    • Telefon: 26 px
Farbdivi anpassen

Artikelabstand

Fügen Sie dann einen kleinen Rand hinzu, um die Symbole voneinander zu trennen.

  • Rechter Rand: 1vw
Konfiguration des Social-Sharing-Abstands

Kopieren und Einfügen von Elementstilen

Um die verbleibenden sozialen Netzwerke zu formatieren, kehren Sie zum Hauptinhaltsfenster zurück und kopieren Sie die Elementstile vom ersten Symbol. Fügen Sie dann die Elementstile in die verbleibenden sozialen Netzwerke ein.

Stilelement kopieren
Stilelement divi einfügen

Ausrichtung

Wechseln Sie zur Registerkarte Hauptdesign und stellen Sie sicher, dass das Modul linksbündig ausgerichtet ist.

  • Ausrichtung des Moduls: links
Wählen Sie die Ausrichtung

Sizing

Passen Sie dann die Größe des Moduls an.

  • Breite: 100%
Konfigurieren Sie die Teilung

Abstand

Löschen Sie auch alle Standardfüllungen.

  • Obere, untere, linke und rechte Polsterung: 0vw
Konfigurieren Sie den Divi-Abstand

Grenze

Fügen Sie abschließend in den Rahmeneinstellungen abgerundete Ecken hinzu. Dadurch werden die Ränder aller Symbole gleichzeitig angepasst.

  • abgerundete Ecken
    • Oben links und rechts: 7 Pixel
    • Unten links und rechts: 0px
Konfiguration des Divi-Modulrahmens

Fügen Sie der 2-Spalte einen Textbaustein hinzu

Inhalt

Fügen Sie unter dem Social Media-Modul ein weiteres Textmodul hinzu. Fügen Sie Inhalte Ihrer Wahl hinzu. Wir haben zwei Adressen hinzugefügt, eine Telefonnummer und eine E-Mail. Verwenden Sie Fettdruck auf dem Titel jedes Elements in Großbuchstaben.

  • Hauptsitz: 1587 Sukhumvit Soi 21, Bangkok, Thailand.
  • Verkaufsstelle : Emporium Mall, 2. Stock
  • Telefon: (321) 564 2398
  • E-Mail: [E-Mail geschützt]
Konfiguration der Divi-Textmoduladresse

Kontext

Ändern Sie die Hintergrundfarbe des Moduls.

  • Farbe: Dunkelblau # 25274d
Hintergrundkonfiguration des Textmoduls

Text

Wechseln Sie zur Registerkarte Design und gestalten Sie den Text.

  • Schriftart: Sänfte
  • Farbe: gelb # ffd868
  • Größe: 18px
Divi Modul Textschrift

Abstand

Fügen Sie auch benutzerdefinierte Abstandswerte hinzu.

  • Oberer Rand
    • Büro: -60px
    • Tablet und Telefon: -50 Pixel
  • Obere, untere, linke und rechte Polsterung
    • Büro: 3vw
    • Tablette: 6vw
    • Telefon: 8vw
Divi Abstand Rand

Grenze

Vervollständigen Sie das Modul, indem Sie in den Rahmeneinstellungen abgerundete Ecken hinzufügen. Das ist es!

  • Abgerundete Ecken: 10 Pixel oben rechts, unten links und unten rechts.
Divi-Textmodul mit abgerundeten Rändern

Übersicht

Nachdem wir den Abschnitt mit den schwebenden Kontakten neu erstellt haben, sehen Sie sich das Ergebnis auf verschiedenen Bildschirmgrößen an.

schwimmender Kontaktabschnitt

Zusätzliche Ressourcen

Die Ressourcen können das, was Sie gerade gelesen haben, ergänzen. Sie können zusätzlich oder von Personen verwendet werden, die das Divi-Thema nicht haben.

zu beenden

Die Verwendung der neuen Divi-Bildlaufeffekte verwandelt jedes Standardlayout in ein schönes Design. Indem Sie Ihren eigenen Hintergrund erstellen, haben Sie mehr Kontrolle über das Erscheinungsbild des fertigen Designs. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

So erstellen Sie mit Divi eine farbenfrohe Text-Hintergrund-Bildlaufanimation

So erstellen Sie mit Divi eine farbenfrohe Text-Hintergrund-Bildlaufanimation

[Vc_row content_placement = "middle" css = "vc_custom_1508940533685 {background-color: #f8f6f6 Wichtig;}." El_id = "themeforestpro"] [vc_column width = "3 / 4" css = „vc_custom_1502759058885 {margin-bottom: 0px. wichtig; border-bottom-width: 0px signifikant; padding-bottom: 0px signifikant;} „] [vc_column_text]!

Divi: das am einfachsten zu verwendende WordPress-Theme

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DOWNLOAD [/vcex_button][/ vc_column][/vc_row]

Das Erstellen einer Bildlauf-Hintergrund-Bildlaufanimation ist eine einzigartige Möglichkeit, Ihrem Website-Text farbenfrohe animierte Texturen hinzuzufügen, während ein Benutzer die Seite scrollt. Mit Divi ist der Prozess überraschend einfach, wenn Sie einige Schlüsseltechniken gelernt haben.

In diesem Tutorial verwenden wir nur die Möglichkeiten der integrierten Einstellungen von Divi, um drei einzigartige Designs zu erstellen, die eine farbenfrohe Animation zum Scrollen des Texthintergrunds enthalten. Wir zeigen Ihnen sogar, wie Sie eine dunkle Version jedes Designs für einen ganz neuen Look erstellen.

Lassen Sie uns beginnen!

Mögliches Ergebnis

Hier ist ein Blick auf die Entwürfe, die wir heute bauen werden.

Design 1: Texthintergrundverlauf mit horizontalem Bildlaufeffekt

Dieses erste Design bietet einen horizontalen Bildlaufeffekt, der ein farbiges Trennmodul hinter einem Textmodul mit dem Bildschirmfilter animiert.

Fügen Sie eine Spalte hinzu

Fügen Sie dem Standardabschnitt zunächst eine einspaltige Zeile hinzu.

Wählen Sie das Layout der Divi-Spalte

Fügen Sie ein Textmodul hinzu

Fügen Sie dann der Spalte ein neues Textmodul hinzu.

Divi-Textmodul hinzufügen

Inhalt

Fügen Sie für den Inhalt der Spalte den folgenden HTML-Code in den Inhaltsbereich ein:

Fragmentcode speichern

Formatieren Sie den Text

Aktualisieren Sie dann das Textdesign wie folgt:

  • Hintergrundfarbe: #ffffff
  • Textschriftstil: TT
  • Textfarbe: # 000000
  • Textgröße: 100 px (Desktop), 40 px (Telefon)
  • Textbuchstabenabstand: 0.15 em
  • Höhe der Textzeile: 1em
  • Textausrichtung: Mitte
  • Titelschrift: Merriweather
  • Schriftgröße des Titels: fett
  • Titelschriftart: TT
  • Ausrichtung des Kopfzeilentextes: Mitte
  • Kopfzeilentextfarbe: # 000000
  • Header-Textgröße: 200px (Desktop), 80px (Telefon)
  • Titelbuchstabenabstand: 0.15 em
  • Höhe der Titelzeile: 1em

Polsterung und Filter

Jetzt müssen wir dem Textmodul etwas Auffüllung und Bildschirmfilter hinzufügen. Der Filter wird benötigt, damit dieses Design funktioniert, da die Hintergrundfarben / Mods hinter dem Text angezeigt werden können.

Aktualisieren Sie Folgendes, um die Füllung und den Filter hinzuzufügen:

  • Polsterung: 15px hoch, 20px niedrig
  • Mischmodus: Bildschirm

Hinweis: Der Bildschirmmischmodus funktioniert am besten mit schwarzem Text auf weißem Hintergrund. Wenn wir weißen Text auf schwarzem Hintergrund verwenden möchten, verwenden wir den Mischmodus "Multiplizieren".

Abstand Konfiguration des Divi-Textmoduls

Oberer und unterer Separator

Sobald unser Textmodul fertig ist, fügen wir einige Trennzeichen (über und eines unter dem Textmodul) für ein zusätzliches Gestaltungselement hinzu.

Fügen Sie ein unteres Trennzeichen hinzu

Fügen Sie unter dem Textmodul ein neues Trennmodul hinzu.

Divi Separator Modul hinzufügen
Höhere Trennungseinstellungen

Öffnen Sie die Separatoreinstellungen und wählen Sie NEIN, um das Separator anzuzeigen.

Divi-Text-Hintergrund-Scrolling-Effekte

Aktualisieren Sie dann den Hintergrund und geben Sie dem Teiler den gleichen Mischmodus wie das Textmodul wie folgt:

  • Hintergrundfarbe des linken Farbverlaufs: # 000000
  • Hintergrundfarbe mit Farbverlauf rechts: #ffffff
  • Farbverlaufsrichtung: 90deg
  • Startposition: 48%
  • Endposition: 0%
  • Mischmodus: Bildschirm
Konfiguration des Farbseparators

Aktualisieren Sie dann die Höhe des Teilers auf dem Telefonbildschirm wie folgt:

  • Höhe: 15px (Telefon)
Divi Separator Konfiguration

Fügen Sie das obere Trennzeichen hinzu

Um den oberen Teiler zu erstellen, duplizieren Sie den vorherigen unteren Teiler und ziehen Sie ihn über den Anzeigebereich der Ebenen über das Textmodul.

Teilereinsatz

Invertieren Sie dann die Farben auf dem Verlaufshintergrund.

Hintergrundeinfügung mit Farbverlauf

Zeilenparameter aktualisieren

Sobald unsere oberen und unteren Trennzeichen vorhanden sind, aktualisieren Sie die Zeilenparameter wie folgt:

  • Dachrinnenbreite: 1 (um die unteren Ränder zwischen den Modulen zu entfernen)
  • Maximale Breite: 600 Pixel (um ein kohärentes Design auf dem Desktop und dem Tablet zu erhalten)
  • Linienausrichtung: Mitte
  • Auffüllen: 0px hoch, 0px niedrig
  • Horizontaler Überlauf: versteckt
  • Vertikaler Überlauf: versteckt
Passen Sie den Divi-Line-Parameter an

Erstellen Sie ein Trennzeichen für die Hintergrundfarbe des animierten Textes

Das letzte Element dieses ersten Entwurfs ist der Teiler, mit dem wir die Hintergrundfarbe des Textes auf der Schriftrolle animieren. Fügen Sie dazu ein neues Trennmodul unter dem unteren Teiler hinzu.

Einsetzen des Trenners

Wählen Sie dann NEIN, um das Trennzeichen anzuzeigen.

Divi-Seprator anzeigen

Hintergrundteilereinstellungen

Aktualisieren Sie das Trennzeichen mit einem Verlaufshintergrund wie folgt:

  • Hintergrundfarbe des linken Farbverlaufs: # e02b20
  • Farbe des rechten Hintergrundverlaufs: # 8300e9
  • Farbverlaufsrichtung: 90deg
  • Startposition: 30%
  • Endposition: 70%
Divi Heckteiler

Wir möchten, dass die Höhe des Trennzeichens hoch genug ist, um den gesamten Text im Textmodul sowie im oberen und unteren Trennzeichen einzufärben. Stellen Sie für dieses Design die Höhe auf 400px ein.

  • Höhe: 400px
Teiler Teilerhöhe

Geben Sie dem Teiler dann eine absolute Position, um ihn direkt über den anderen Modulen zu positionieren. Verwenden Sie den Z-Index, um den Teiler hinter den anderen Modulen zu platzieren.

  • Position: Absolut
  • Z-Index: -1
Indextrennzeichen
Hintergrund-Teiler-Scroll-Effekte

Wenn sich das Trennzeichen in Position befindet, müssen wir das Trennzeichen mithilfe der Bildlaufeffekte von Divi hinter den Text verschieben. Für dieses Design fügen wir der Schriftrolle nur eine horizontale Bewegung hinzu.

Aktualisieren Sie die folgenden Elemente:

Unter der Registerkarte Horizontale Bewegung ...

Büro

  • Horizontale Bewegung aktivieren: JA
  • Startoffset: 6 (bei 20%)
  • Durchschnittlicher Offset: 0 (bei 40% -60%)
  • Endversatz: -6 (bei 80%)

Telefon

  • Startoffset: 3
  • Endversatz: -3

Stellen Sie außerdem sicher, dass Sie den Auslöser für den Bewegungseffekt in der Mitte des Clips einstellen:

  • Bewegungseffekt auslösen: Mitte des Elements
Animationskonfiguration

Abschnittsabstand hinzufügen

Fügen Sie dem Abschnitt Folgendes hinzu, um einen temporären Bildlaufbereich zum Testen des Designs zu erstellen:

  • Rand: 80vh oben, 80vh unten
Konfigurationsgröße Abschnitt divi

Abschließende Gedanken

Die in diesem Artikel gezeigten Texthintergrund-Animationsdesigns funktionieren als statisches Design ohne die zusätzliche Bewegung auf der Schriftrolle. Die zusätzlichen Bildlaufeffekte bringen das Design jedoch auf eine ganz neue Ebene. Fühlen Sie sich frei, mit mehr Farben und Effekten zu experimentieren!

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

Ihrer Gesundheit zuliebe!

So erstellen Sie mit Divi eine feste Fußzeilenleiste

So erstellen Sie mit Divi eine feste Fußzeilenleiste

[Vc_row content_placement = "middle" css = "vc_custom_1508940533685 {background-color: #f8f6f6 Wichtig;}." El_id = "themeforestpro"] [vc_column width = "3 / 4" css = „vc_custom_1502759058885 {margin-bottom: 0px. wichtig; border-bottom-width: 0px signifikant; padding-bottom: 0px signifikant;} „] [vc_column_text]!

Divi: das am einfachsten zu verwendende WordPress-Theme

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DOWNLOAD [/vcex_button][/ vc_column][/vc_row]

Feste Fußzeilenleisten können eine praktische Möglichkeit sein, wichtige Informationen über die Vorderseite und das Zentrum Ihrer Website beizubehalten, wenn der Benutzer auf einem beliebigen Gerät mit Ihrem Seiteninhalt interagiert. 

Wie bei Divi befindet sich eine Fußzeilenleiste normalerweise als statisches Element ganz unten auf der Seite nach dem Hauptfußzeileninhalt. Dazu gehören beispielsweise Copyright-Text und Social-Media-Symbole. 

Wenn Sie jedoch den Inhalt der Fußzeilenleiste am unteren Rand der Seite nicht ausblenden, können Sie eine benutzerdefinierte Fußzeilenleiste erstellen, die beim Scrollen des Benutzers am unteren Bildschirmrand angezeigt wird.

In diesem Tutorial werden wir eine vollständig personalisierte feste Fußzeilenleiste mit dem Divi-Themengenerator entwerfen. Dies ist praktisch, damit Sie diese kleinen, aber wichtigen Inhalte jederzeit im Blick behalten.

Mögliches Ergebnis

Hier ist eine Übersicht über die feste Fußzeile, die wir entwerfen werden.

So fügen Sie die feste Fußzeilenleistenvorlage zum Herunterladen auf Ihre Divi-Site hinzu

WARNUNG!: Durch Hinzufügen dieser Vorlage wird die Standard-Website-Vorlage (falls vorhanden) auf Ihrer Divi-Site ersetzt. Wir empfehlen, dass Sie es einer Test-Site hinzufügen, damit Sie auf einer Live-Site nichts durcheinander bringen.

Entpacken Sie die Download-Zip-Datei, um auf die JSON-Datei zuzugreifen, um die feste Fußzeilenleistenvorlage auf Ihre eigene Website zu importieren.

Gehen Sie dann zum WordPress-Dashboard und gehen Sie zu Divi> Theme Builder.

Klicken Sie dann oben rechts auf der Seite auf das Portabilitätssymbol.

Wählen Sie im Portabilitätsfenster die JSON-Datei aus, die Sie gerade entpackt haben, und wählen Sie die Option "Backup vor dem Import herunterladen", falls Sie zuvor etwas in der Standard-Website-Vorlage hatten, das Sie nicht hatten. wollte nicht ersetzen.

Klicken Sie dann auf die Schaltfläche Importieren.

Speichern Sie abschließend die Änderungen am Themengenerator und zeigen Sie eine Live-Seite an, um die feste Fußzeilenleiste anzuzeigen.

Speichern Sie Divi-Änderungen

Nun zum Tutorial, okay?

Teil 1: Hinzufügen einer globalen Fußzeile

Mit dem Divi-Themengenerator können Sie die Standardfußzeile durch eine neue ersetzen, indem Sie die Standardwebsite-Vorlage aktualisieren.

Um eine globale Fußzeile zu erstellen, rufen Sie das WordPress-Dashboard auf und gehen Sie zu Divi> Theme Builder. Klicken Sie dann in der Standard-Website-Vorlage auf den Bereich "Globale Fußzeile hinzufügen".

Wählen Sie dann die Option "Benutzerdefinierte Fußzeile erstellen" aus der Dropdown-Liste.

Dadurch wird der Modelllayout-Editor bereitgestellt, in dem Sie sofort mit den drei Auswahlmöglichkeiten für den Baubeginn aufgefordert werden. Wählen Sie "Von Grund auf neu erstellen".

Teil 2: Erstellen der festen Fußzeile

Nachdem wir den Vorlagenlayout-Editor bearbeitet haben, können wir mit dem Entwerfen der festen Fußzeile beginnen. Sobald Sie fertig sind, haben Sie eine feste Fußzeile mit drei Spalten, die für den Inhalt bereit sind.

Fügen Sie der Zeile ein dreispaltiges Layout hinzu

Fügen Sie der Zeile zunächst ein dreispaltiges Layout hinzu.

3-reihiger Abschnitt

Schnitthöhe

Nachdem die drei Spalten hinzugefügt wurden, geben wir dem Abschnitt eine definierte Höhe. Dies ist wichtig, um am unteren Rand der Seite Platz zu schaffen, an dem das Festnetz schließlich endet. Wir werden auch die Standardauffüllung oben und unten entfernen.

Öffnen Sie zum Einstellen der Höhe und der Polsterung die Abschnittseinstellungen und aktualisieren Sie Folgendes:

  • Höhe: 85px
  • Auffüllen: 0px hoch, 0px niedrig
Divi 1 Abschnitt Höhenkonfiguration

Leitungseinstellungen

Nachdem unser Abschnitt fertig ist, können wir die Zeile so anpassen, dass sie als feste Fußzeilenleiste dient. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Kontext

  • Hintergrundfarbe: # 1a1e36
Zugriff auf Leitungseinstellungen

Größe und Abstand

  • Dachrinnenbreite: 1
  • Breite: 100%
  • Maximale Breite: 100%
  • Polsterung: 0px nach oben, 0px nach unten, 3% links, 3% rechts
Passen Sie den Divi-Bereich an

Benutzerdefiniertes CSS

Obwohl die Zeile fest ist, soll die Höhe der Zeile mit der Höhe des übergeordneten Abschnitts übereinstimmen, damit der Platz am unteren Rand der Seite die Zeile ordnungsgemäß enthält. Und wir möchten sicherstellen, dass der Inhalt der Zeile vertikal ausgerichtet bleibt. Fügen Sie dazu dem Hauptelement der Zeile das folgende benutzerdefinierte CSS hinzu:

Büro

Höhe: erben! wichtig; Anzeige: flex; Elemente ausrichten: Mitte;

Telefon

Höhe: erben! wichtig; Anzeige: Block;
Fügen Sie einen CSS-Code hinzu

Feste Positionierung

Um die Linie so zu fixieren, dass sie am unteren Rand des Bildschirms schwebt, müssen Sie ihr wie folgt eine feste Position in der unteren mittleren Position geben:

  • Position: fest
  • Lage: untere Mitte
Fußzeilenposition

Teil 2: Erstellen des Inhalts der festen Fußzeile

Zu diesem Zeitpunkt haben wir eine feste Fußzeile für den Inhalt bereit. Wir können jeder der drei Spalten jeden gewünschten Inhalt hinzufügen. Da es sich jedoch um eine Fußzeilenleiste handelt, die auf eine Höhe von 85 Pixel begrenzt ist, müssen wir die Menge des Inhalts begrenzen. Aus diesem Grund werden wir in Spalte 4 ein kleines Menü mit einem dynamischen Logo und 1 Menüelementen hinzufügen. In Spalte 2 werden wir Copyright-Text mit einem dynamischen aktuellen Jahr hinzufügen. In Spalte 3 werden drei Social-Media-Tracking-Symbole hinzugefügt.

Fügen Sie Spalte 1 ein Menü hinzu

Fügen Sie in Spalte 1 ein Menümodul hinzu.

Wordpress-Menüauswahl

Wählen Sie das Menü

Wählen Sie dann eines der Menüs aus, die Sie bereits auf Ihrer Website erstellt haben. Stellen Sie sicher, dass die Menüpunkte bei 4 oder weniger liegen.

Auswahlmenü WordPress-Modul

Fügen Sie das Site-Logo als dynamischen Inhalt hinzu

Für das Logo-Menü fügen wir das Site-Logo dynamisch hinzu. Klicken Sie auf das Symbol "Dynamischen Inhalt verwenden", während Sie den Mauszeiger über den Logo-Vorschaubereich bewegen. Wählen Sie dann das Site-Logo aus der Dropdown-Liste.

Fügen Sie ein Logo hinzu

Hintergrund entfernen

Entfernen Sie dann den Standardmenühintergrund, damit er transparent ist.

Löschen Sie den Hintergrund

Menu Design

An diesem Punkt sind wir bereit, dem Menü ein Design hinzuzufügen. Für dieses Design werden wir es einfach und klein halten. Aktualisieren Sie die folgenden Designparameter:

  • Schriftmenü: Überführung
  • Menütextfarbe: # b59c61
  • Sepia Bild: 100%
  • Maximale Logohöhe: 50px
Ändern Sie die Schriftfarbe

Fügen Sie Spalte 2 Copyright-Text hinzu

Sobald das Menü eingerichtet ist, gehen Sie zu Spalte 2, um den Copyright-Text hinzuzufügen.

Fügen Sie ein Textmodul hinzu

Fügen Sie Spalte 2 ein neues Textmodul hinzu.

Auswahlmodul Text divi

Fügen Sie das aktuelle Datum dynamisch mit Vorher- und Nachher-Text hinzu

Hier werden wir mit dynamischen Inhalten kreativ, um das aktuelle Jahr im Copyright-Text anzuzeigen. Dadurch wird sichergestellt, dass das Jahr automatisch für die Lebensdauer der Website aktualisiert wird.

Klicken Sie dazu auf das Symbol "Dynamischen Inhalt verwenden" und wählen Sie "Aktuelles Datum" aus der Liste.

Auswahldatum

Aktualisieren Sie im Popup-Fenster "Aktuelles Datum" Folgendes:

  • vor:
  • 01Copyright &copy;
  • nach:
  • 01| Tous Droits Reservés
  • Datumsformat : benutzerdefiniert
  • Benutzerdefiniertes Datumsformat : 20 Jahre
Passen Sie das Datum an

Formatieren Sie den Text

Aktualisieren Sie das Textdesign und den Rand wie folgt:

  • Textschrift: Überführung
  • Textfarbe: # b59c61
  • Textausrichtung: Mitte
  • Rand (nur Telefon): 10 Pixel oben, 10 Pixel unten
Textmodul zur Auswahl von Divi-Schriftarten

Dies unterstützt Copyright-Text.

Fügen Sie Spalte 3 Social-Media-Tracking-Symbole hinzu

Fügen Sie in Spalte 3 ein Social-Media-Tracking-Modul hinzu.

Fügen Sie soziale Netzwerke hinzu

Fügen Sie auf der Registerkarte Inhalt der Site die erforderlichen sozialen Netzwerke hinzu. Für dieses Design verwenden wir drei davon.

Modul zur Überwachung sozialer Netzwerke hinzufügen

Social Media Tracking-Einstellungen

Aktualisieren Sie anschließend die Designeinstellungen für alle Social Media-Tracking-Symbole wie folgt:

  • Modulausrichtung: gerade (Desktop und Tablet), Mitte (Telefon)
  • Symbolfarbe: # 1a1e36
  • Verwenden Sie eine benutzerdefinierte Symbolgröße: JA
  • Symbol Schriftgröße: 16px (Desktop und Tablet), 14px (Telefon)
Personnalsier Polizei Divi

Aktualisieren Sie die Einstellungen für soziale Medien

Öffnen Sie die Einstellungen für das erste Netzwerk und aktualisieren Sie Folgendes, um das Design des einzelnen Symbols für soziale Netzwerke zu aktualisieren:

  • Hintergrundfarbe: #ffffff
  • Auffüllen: 8 Pixel rechts, 8 Pixel links
  • Abgerundete Ecken: 8px
feste Fußstange divi

Erweitern Sie die Einstellungen für soziale Medien auf alle

Öffnen Sie dann das Menü für zusätzliche Einstellungen für das erste Netzwerk und wählen Sie " Elementstile erweitern " In der Liste. Wählen Sie im Popup-Fenster "Stile erweitern" die Option "Stile erweitern in". Diese Spalte "Und klick Erweitern .

Dadurch wird das Design auf die übrigen Symbole in der Spalte erweitert.

Abschließende Gedanken

In einigen Fällen ist das Hinzufügen einer festen Fußzeile sinnvoll. Die Höhe der Stange ist klein genug, um nicht abzulenken oder zu viel Platz auf dem Handy einzunehmen. Außerdem können Sie wichtige CTAs hinzufügen, um bessere Conversions und eine reibungslosere Benutzererfahrung zu erzielen.

Bei diesem Entwurf wird der Platz am unteren Rand der Seite erstellt, indem eine feste Höhe für den Abschnitt festgelegt wird und die feste Linie dann die Höhe des Abschnitts erben kann (obwohl dieser fest ist). 

Andere Ressourcen

Hier finden Sie eine Liste zusätzlicher Ressourcen, die Sie beim Entwerfen Ihrer Website mit Divi unterstützen können.