Springe zum Hauptinhalt

So erstellen Sie einen animierten Heldenbereich in 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]

Die meisten Websites haben einen Abschnitt „Helden“, der nicht mehr bewiesen werden muss. Ihre Aufgabe ist es, nicht nur hervorzuheben, sondern auch in mehrere Elemente zu unterteilen, die den bestehenden Aufruf zum Handeln verstärken. Die leicht verständlichen strukturierten Heldenbereiche mit geteiltem Inhalt sind sehr beliebt und werden häufig von verschiedenen Arten von Websites verwendet.

Auch wenn das Erstellen von Heldenabschnitten mit geteiltem Inhalt für den Desktop unkompliziert erscheint, können Sie sich nicht immer von den Erscheinungen täuschen lassen. Hier wird dieses Tutorial nützlich sein. Wir werden einen hoch interaktiven Bereich für geteilte Helden in Mobilgeräten erstellen, der nicht nur auf Mobilgeräten, sondern unabhängig von der Bildschirmgröße gut aussieht. Wir kombinieren auch großartige Animationen, um sie perfekt an den Designstil von 2019 anzupassen. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, Ihre eigenen Bereiche für mobile Helden mit geteiltem Inhalt zu erstellen.

Lassen Sie uns gehen!

Übersicht

Bevor wir uns mit dem Tutorial befassen, werfen wir einen Blick darauf, was Sie nach Abschluss dieses Tutorials erhalten können.

Beispiel Design Design Divi

Schnittstellen-Design

Einen neuen Abschnitt hinzufügen

Abstand

Erstellen Sie zunächst eine neue Seite oder öffnen Sie eine vorhandene. Fügen Sie einen neuen regulären Abschnitt hinzu, gehen Sie zu den Abstandseinstellungen und entfernen Sie alle Standardränder für den oberen und unteren Abstand.

  • Beste Polsterung: 0px
  • Polsterung unten: 0px

Parameterabschnitt diviFügen Sie eine neue Zeile hinzu

Struktur der Spalte

Wir werden weiterhin eine neue Zeile hinzufügen und die folgende Spaltenstruktur verwenden:

Fügen Sie einen zweispaltigen Abschnitt hinzuHintergrundfarbe

Öffnen Sie die Leitungseinstellungen, ohne weitere Module hinzuzufügen, und fügen Sie eine vollständig schwarze Hintergrundfarbe hinzu.

  • Hintergrundfarbe: #000000

Divi-Linienparameter

Spalte 1-Hintergrundfarbe

Fügen Sie auch der ersten Spalte eine schwarze Hintergrundfarbe hinzu.

  • Spalte 1-Hintergrundfarbe: #000000

Einstellungen Zeilenteilung Spalte 1Spalte 2-Hintergrundfarbe

Gleiches gilt für die zweite Spalte.

  • Spalte 2-Hintergrundfarbe: #000000

Spalte 2 Hintergrund

Sizing

Gehen Sie dann zu den Größeneinstellungen und lassen Sie die Zeile und ihre Spalten die gesamte Breite des Bildschirms einnehmen.

  • Machen Sie diese Linie in voller Breite: Ja
  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 1
  • Spaltenhöhen ausgleichen: Ja

Designkonfiguration für Divi-LiniengrößenAbstand

Wir entfernen auch alle oberen und unteren Standardränder der Linie.

  • Polsterung oben: 0px
  • Polsterung unten: 0px
  • Polster rechts: 1vw

Konfigurieren Sie die Aufteilung der Divi-LinienAnzeige

Schließlich stellen wir sicher, dass die beiden Spalten auf kleineren Bildschirmen nebeneinander angezeigt werden. Dazu müssen wir der Registerkarte Erweitert der Zeile eine einzelne Zeile CSS-Code hinzufügen.

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]

display: flex;

CSS-Einstellungen des Hauptelements

Fügen Sie Spalte 1 ein Bildmodul hinzu

Lassen Sie den Bildbereich leer

Wir haben jetzt alle Module, die wir brauchen! Sie müssen mit dem Bildmodul in der ersten Spalte beginnen. Anstatt ein Bild in den Bildbereich hochzuladen, laden wir das Bild in den nächsten Schritten in die Hintergrundeinstellungen hoch, sodass wir das standardmäßig hinzugefügte Bild entfernen müssen. So können wir damit spielen, wie das Bild positioniert ist und wie viel Platz es in unserer Reihe einnimmt.

Divi-Line-Bildmodul hinzufügenFügen Sie eine Hintergrundfarbe hinzu

Gehen Sie zu den Hintergrundeinstellungen des Bildmoduls und fügen Sie eine Hintergrundfarbe hinzu. Im nächsten Schritt kombinieren wir diese Hintergrundfarbe und ein Hintergrundbild mithilfe eines Überblendungseffekts, um das Bild abzudunkeln.

  • Hintergrundfarbe: #686868

Bildeinstellungen des Divi-ModulbildesFügen Sie ein Hintergrundbild hinzu

Fügen Sie ein Hintergrundbild Ihrer Wahl hinzu und ändern Sie die Hintergrundeinstellungen entsprechend:

  • Hintergrundbildgröße: Cover
  • Position des Hintergrundbildes: Mitte
  • Hintergrundbild wiederholen: Keine Wiederholung
  • Hintergrundbildmischung: multiplizieren

Hintergrundkonfiguration des Divi-Modulbildes

Sizing

Wir haben zwei gleich große Spalten für die Zeile verwendet, an der wir arbeiten, aber das Ergebnis ist nicht dasselbe. Wir werden die Größe jedes hinzugefügten Moduls manuell ändern, damit es so aussieht, als würden wir eine andere Spaltenstruktur verwenden. Der Grund, warum wir dies tun (anstatt nur eine andere Spaltenstruktur zu wählen), besteht darin, alles reaktionsfähig zu machen.

 auf kleineren Bildschirmen. Greifen Sie auf die Größenparameter des Bildmoduls zu und ändern Sie die Breite.

  • Breite: 88%
  • Ausrichtung des Moduls: links

Konfiguration der Abstandsbreite des BildmodulsAbstand

Jetzt müssen wir die Größe unseres Bildes in den Abstandseinstellungen festlegen. Für diese Werte verwenden wir auch eine Anzeigeeinheit, um sicherzustellen, dass unser Design unabhängig von der Bildschirmgröße vollständig reagiert.

  • Obere Polsterung: 26.3vw (Desktop), 48vw (Tablet), 72vw (Telefon)
  • Polsterung unten: 26.3vw (Desktop), 48vw (Tablet), 72vw (Telefon)

Konfiguration des Bildmodulrandes

Animation

Schließlich fügen wir dem Bildmodul eine Folienanimation hinzu. Sobald Sie die Animation angewendet haben, werden Sie feststellen, dass das Bild erst in dem Moment angezeigt wird, in dem es in die erste Spalte gelangt. Die Hintergrundfarbe der zweiten Spalte bleibt oben im Bildmodul, während sie nach links gezogen wird.

  • Animationsstil: Folie
  • Animation wiederholen: Einmal
  • Animationsrichtung: links
  • Animationsdauer: 1450ms
  • Intensitätsanimation: 60%
  • Animation Startopazität: 100%

Animationseinstellung des Divi-Bildmoduls

Fügen Sie der 1-Spalte ein Schaltflächenmodul hinzu

Kopie hinzufügen

Das nächste Modul, das wir in Spalte 1 benötigen, ist ein Schaltflächenmodul. Geben Sie eine Kopie Ihrer Wahl ein.

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]

Einstellung der Divi-ModultasteTasteneinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Schaltflächeneinstellungen.

  • Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
  • Schaltflächentextgröße: 1.5vw (Desktop), 2.5vw (Tablet), 4vw (Telefon)
  • Knopftextfarbe: #ffffff
  • Hintergrundfarbe der Schaltfläche: #e02b20
  • Breite des Schaltflächenrandes: 0px
  • Radius des Randes der Schaltfläche: 1px
  • Schaltfläche Font: Poppins
  • Schriftgewicht: Fett

Kondiierung im Divi-Button-Stil

Abstand

Ändern Sie auch die Abstandswerte.

  • Oberer Rand: -3.3vw (Desktop), -6vw (Tablet), -9.1vw (Telefon)
  • Linke Polsterung: 8vw
  • Polster rechts: 8vw

Abstandseinstellungen des Divi-Tastenmoduls

Schattenkiste

Und fügen Sie einen subtilen Schatten hinzu, um Tiefe auf der Seite zu erzeugen.

  • Box Shadow Blur Force: 20px
  • Schattenfarbe: rgba (0,0,0,0.3)

Schatteneinstellung des Divi-Tastenmoduls

Fügen Sie den Textbaustein # 1 in die Spalte 2 ein

Fügen Sie H1-Inhalte hinzu

In der zweiten Spalte! Das erste Modul, das wir benötigen, ist ein Textmodul. Fügen Sie einen beliebigen H1-Inhalt Ihrer Wahl hinzu.

Konfiguration des Divi-Textmoduls

H1-Texteinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die H1-Texteinstellungen.

  • Schrift: Poppins
  • Titeltextfarbe: #ffffff
  • Text Titelgröße: 4vw (Desktop), 5vw (Tablet), 6vw (Telefon)

Parameter Modul Einstell DiviAbstand

Ändern Sie auch die Abstandswerte.

  • Oberer Rand: 12vw
  • Linker Rand: -20vw
  • Rechter Rand: 17vw (Desktop), 15vw (Tablet), 1vw (Telefon)

Konfiguration der Ränder des Divi-Textmoduls

Animation

Und füge eine subtile Animation hinzu.

  • Animationsstil: Folie
  • Animation wiederholen: Einmal
  • Animationsrichtung: Nach unten
  • Animationsdauer: 1450ms
  • Intensitätsanimation: 10%
  • Animation Startopazität: 100%

Conifgurer Animationsmodul Text Divi

Fügen Sie der 2-Spalte ein Divisionsmodul hinzu

Sichtbarkeit

Das nächste Modul, das wir in der zweiten Spalte benötigen, ist ein Teilungsmodul. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" aktiviert ist.

  • Teiler anzeigen: Ja

Divi-Trennzeichen anzeigenFarbe

Gehen Sie dann zur Registerkarte Design und ändern Sie die Farbe des Trennzeichens.

  • Farbe: #e02b20

Registerkarte "Stil des Divi-Trennmoduls"Animation

Fügen Sie dem Divisionsmodul als Nächstes eine Animation hinzu.

  • Animationsstil: Folie
  • Animation wiederholen: Einmal
  • Animationsrichtung: Rechts
  • Animationsdauer: 1450ms
  • Intensitätsanimation: 83%
  • Animation Startopazität: 100%

Divi Modul Separator Animation

Fügen Sie den Textbaustein # 2 in die Spalte 2 ein

Inhalt hinzufügen

Fahren wir mit dem nächsten und letzten Modul fort, das wir in der zweiten Spalte benötigen! Fügen Sie eine Beschreibung Ihrer Wahl 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 ein Divi-Textmodul hinzu

Texteinstellungen

Gehen Sie dann zu den Texteinstellungen auf der Registerkarte Design und nehmen Sie einige entsprechende Änderungen vor:

  • Textschrift: Poppins
  • Schriftgröße des Textes: Light
  • Textfarbe: #919191
  • Textgröße: 0.9vw (Desktop), 1.8vw (Tablet), 2.2vw (Telefon)
  • Abstand der Buchstaben: 0.1vw
  • Höhe der Textzeile: 2.2em

Textsteuerungsmodul Text diviAbstand

Ändern Sie auch die Abstandswerte.

  • Oberer Rand: 9vw (Desktop), 19vw (Tablet), 23vw (Telefon)
  • Unterer Rand: 12vw (Desktop), 19vw (Tablet), 23vw (Telefon)
  • Linker Rand: -3vw
  • Rechter Rand: 20vw (Desktop), 6vw (Tablet), 3vw (Telefon)

Abstandseinstellungen für Divi-TextmoduleAnimation

Und am Ende fügen Sie dem Modul eine Überblendanimation hinzu, und fertig!

  • Animationsstil: Verblassen
  • Animation wiederholen: Einmal
  • Animationsdauer: 1400ms
  • Animationsverzögerung: 1000ms
  • Animation Startopazität: 0%

Einstellungen für Divi-TextmoduleAbschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie mit Divi fantastische Heldenabschnitte mit geteiltem Inhalt erstellen. Heldenbereiche mit geteilten Inhalten sind sehr beliebt und werden häufig im Web verwendet. Es ist jedoch auch wichtig, dass sie sehr reaktionsschnell sind. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar und teilen Sie ihn gerne in den sozialen Medien!

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
4 Aktien
Aktie4
tweet
Registrieren