Springe zum Hauptinhalt

So behalten Sie feste Module in Ihrem Spaltencontainer bei Divi

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]

Wenn auf Ihrer Seite mehrere Handlungsaufforderungen angezeigt werden, kann es hilfreich sein, einen interaktiven Bildlaufeffekt zu erstellen, der verschiedene Elemente vereint. Eine Lösung besteht darin, die Module in feste Elemente umzuwandeln, während sie sich in ihrem Spaltencontainer bewegen. Im heutigen Tutorial zeigen wir Ihnen, wie Sie ein schönes Design erstellen, das mit dieser Technik umgeht. Sie können die JSON-Datei auch kostenlos herunterladen!

Gehen wir.

Übersicht

Bevor wir uns mit dem Tutorial befassen, werfen wir einen letzten Blick darauf, wie es mit verschiedenen Bildschirmgrößen funktioniert hat.

Übersicht über Container-Divi mit festem Abschnitt

Beginnen wir mit der Neuerstellung!

Einen neuen Abschnitt hinzufügen

Fügen Sie der Seite, an der Sie arbeiten, zunächst einen neuen regulären Abschnitt hinzu.

Auswahl eines Divi-Abschnitts

Abstand

Öffnen Sie die Abschnittseinstellungen und ändern Sie den unteren und oberen Rand für verschiedene Bildschirmgrößen.

  • Polsterplatte: 7vw (Desktop), 10vw (Tablet), 15vw (Telefon)
  • Polsterung unten: 20vw (Desktop), 7vw (Tablet), 10vw (Telefon)
Konfiguration des Abstandsabschnitts

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:

Wählen Sie das Layout der Divi-Spalten

Sizing

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie sie die gesamte Breite des Abschnitts einnehmen. er ist auch sehr wichtig  Aktivieren Sie die Option 'Spaltenhöhen ausgleichen'. Auf diese Weise erstellen Sie in den Spalten einen leeren Bereich, in dem sich die stationären Module beim Scrollen der Seite frei bewegen können.

  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 1
  • Spaltenhöhen ausgleichen: Ja
  • Breite: 100%
  • Maximale Breite: 100%
Konfiguration der Divi-Parameterleitung

Spalte 2 obere Polsterung

Öffnen Sie dann die Einstellungen für die 2-Spalte und fügen Sie auf dem Desktop einen oberen Füllstoff hinzu.

  • Obere Polsterung: 20vw (Desktop), 0vw (Tablet und Telefon)
Divi-Konfiguration mit hohem Rand

Spalte 3 obere Polsterung

Fügen Sie außerdem der dritten Spalte einen benutzerdefinierten Wert für die obere Füllung hinzu.

  • Beste Polsterung: 40vw (Desktop), 0vw (Tablet und Telefon)
Konfiguration Spalte 3 mit hohem Rand divi

Spalte 4 obere Polsterung

Vervollständigen Sie die Parameter der Zeile, indem Sie der 4-Spalte auch einen höheren Füllwert hinzufügen.

  • Obere Polsterung: 60vw (Desktop), 0vw (Tablet und Telefon)
Spaltenbehälter

Fügen Sie der 1-Spalte CTA hinzu

Inhalt hinzufügen

Es ist Zeit, Module hinzuzufügen! Das erste Modul, das wir in Spalte 1 benötigen, ist ein CTA-Modul (Call to Action). Fügen Sie Inhalte Ihrer Wahl ein.

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]

Konfiguration des Divi-Aktionsaufrufs

Pfandrecht

Fügen Sie der Schaltfläche auch einen Link hinzu. Dadurch kann die Schaltfläche im Design angezeigt werden.

  • URL des Links der Schaltfläche: #
Konfiguration der Call-to-Action-Taste

Hintergrundfarbe

Ändern Sie anschließend die Hintergrundfarbe des Moduls.

  • Hintergrundfarbe: #ffffff
Divi Hintergrundfarben

Texteinstellungen

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

  • Textausrichtung: Mitte
  • Textfarbe: dunkel
Konfigurationsausrichtung des Textaufrufs auf die Divi-Aktion

Einstellungen für den Titeltext

Ändern Sie auch die Texteinstellungen des Titels.

  • Titel Titelstufe: H3
  • Texttitel: Spectral
  • Farbtexttitel: # 000000
  • Text Titelgröße: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)
Bearbeiten Sie den Titel, um einen Aufruf zum Handeln zu erhalten

Body-Text-Einstellungen

Mit den Parametern des Textkörpers.

  • Body-Schriftart: Fira Sans
  • Gewicht der Schrift: Light
  • Text in Körperfarbe: # 000000
  • Körpertextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Körpergröße: 1.8em
Textkörper divi

Tasteneinstellungen

Vergessen Sie nicht, auch Ihre CTA-Modulschaltfläche zu gestalten.

  • Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
  • Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Knopftextfarbe: #ffffff
  • Hintergrundfarbe der Schaltfläche: #444eff
  • Breite des Schaltflächenrandes: 0px
Konfiguration im Call-to-Action-Button-Stil
  • Randradius der Schaltfläche: 50vw
  • Button Schriftart: Fira Sans
Konfiguration der Divi-Tastenparameter
  • Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Polsterung unten: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Linke Polsterung: 3vw (Desktop), 7vw (Tablet), 13vw (Telefon)
  • Polsterung rechts: 3vw (Desktop), 7vw (Tablet), 13vw (Telefon)
Konfiguration der Ausrichtung der Divi-Tasten

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie benutzerdefinierte innere und untere Ränder hinzu.

  • Spitzenauffüllen: 8vw
  • Polsterung unten: 8vw
Call-to-Action-Modul zur Konfiguration des Divi-Abstands

Grenze

Fügen Sie dem Modul auch abgerundete Winkel hinzu.

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]

  • Runde Ecken: 1vw (alle Ecken)
Call-to-Action-Modul für die Konfiguration abgerundeter Grenzen

Schattenkiste

Beenden Sie das Modul-Design, indem Sie einen subtilen Box-Schatten hinzufügen.

  • Schatten der Box Horizontale Position: 10px
  • Box Shadow Blur Force: 50px
  • Schattenfarbe: rgba (0,0,0,0,08)
Divi-Modul zur Konfiguration der Schattenbox

CSS-Klasse

Damit der Sticky-Scroll-Effekt funktioniert, müssen wir am Ende dieses Tutorials einige Zeilen CSS-Code hinzufügen. Zur Vorbereitung fügen wir dem CTA-Modul eine CSS-Klasse hinzu.

  • CSS-Klasse: sticky-cta
Konfigurations-ID und Klassen für den Modulaufruf zur Aktion

Fügen Sie Spalte 1 ein Bildmodul hinzu

Bild hochladen

Fahren wir mit dem nächsten und letzten Mod fort, den wir in Spalte 1 benötigen. Dies ist ein Bild-Mod. Laden Sie ein PNG-Bild Ihrer Wahl hoch.

Fügen Sie ein Bildmodul mit einem Donot hinzu

Ausrichtung

Ändern Sie als nächstes die Bildausrichtung.

  • Bildausrichtung: Mitte
Ausrichtungsbildmodul divi

Sizing

Stellen Sie sicher, dass Sie dem Modul auch die volle Breite aufzwingen.

  • Volle Breite erzwingen: Ja
Abstand Konfiguration des Divi-Bildmoduls

Abstand

Vervollständigen Sie die Moduleinstellungen, indem Sie zu den Abstandseinstellungen gehen und benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzufügen.

  • Oberer Rand: -5vw (Tablet und Telefon)
  • Unterer Rand: -12vw (Desktop), 5vw (Tablet und Telefon)
  • Linke Polsterung: 3vw (Desktop), 10vw (Tablet), 25vw (Telefon)
  • Polsterung rechts: 3vw (Desktop), 10vw (Tablet), 25vw (Telefon)
Konfigurationsabstandsmodul Divi Image Donut

Klonen Sie die beiden Module dreimal und platzieren Sie die verbleibenden Spalten

Nachdem Sie beide Module in der 1-Spalte ausgefüllt haben, können Sie sie dreimal duplizieren und die Duplikate in die verbleibenden Spalten der Zeile einfügen.

Spaltenbehälter

Bilder ändern

Stellen Sie sicher, dass Sie das Bild in jedem doppelten Bildmodul ändern.

Ändern Sie den Inhalt des CTA und die Hintergrundfarben der Schaltflächen

Ändern Sie auch den CTA-Inhalt mit den Hintergrundfarben der Schaltfläche.

  • CTA-Modul #2: #89ffb4
  • CTA-Modul #3: #ff89f1
  • CTA-Modul #4: #ffd389
Ändern Sie die Farben der zum Handeln aufgerufenen Module

Fügen Sie den Bildmodulen in den Spalten 1, 2 und 3 eine CSS-Klasse hinzu

Um sicherzustellen, dass der Sticky-Effekt auch bei Bildern funktioniert, müssen wir den Bildmodulen in den Spalten 1, 2 und 3 eine CSS-Klasse hinzufügen.

  • CSS-Klasse: Sticky-Image
Bearbeiten Sie Bilder für jede Spalte

Fügen Sie die 2-Zeile hinzu

Spaltenstruktur

Sie müssen lediglich den CSS-Code hinzufügen. Fügen Sie dazu eine neue Zeile hinzu.

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]

Fügen Sie einer Spalte auf divi eine Zeile hinzu

Fügen Sie ein Codemodul mit CSS-Code hinzu

Fügen Sie der Zeile ein Codemodul hinzu, fügen Sie den folgenden CSS-Code ein und fertig!

<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>

Fügen Sie das Codemodul auf divi hinzu

Übersicht

Nachdem alle Schritte ausgeführt wurden, werfen wir einen letzten Blick darauf, was mit verschiedenen Bildschirmgrößen passiert ist.

Letzter Animationsaufruf zum Aktionsbereich
Spaltenbehälter

Abschließende Gedanken

In diesem Artikel haben wir Ihnen gezeigt, wie Sie Module in ihrem Spaltencontainer fixieren. Mit dieser Technik können beeindruckende Bildlaufeffekte erzielt werden, mit denen Sie die verschiedenen Handlungsaufforderungen auf Ihrer Seite hervorheben können. Sie können die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.

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
1 Aktien
Aktie1
tweet
Registrieren