Springe zum Hauptinhalt

So zeigen Sie animierte Banner auf Divi an

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]

Ein herausragender Titel soll sicherstellen, dass Sie die Aufmerksamkeit Ihrer Besucher auf sich ziehen können. Überschriften bleiben aufgrund ihrer Größe und zentralen Position normalerweise nicht unbemerkt. Wenn Sie jedoch noch einen Schritt weiter gehen und die Überschrift buchstäblich anzeigen möchten, sind Sie hier genau richtig.

In diesem Tutorial kombinieren wir die Animationseinstellungen von Divi, um einen Titel zu erstellen, der auffällt und die Aufmerksamkeit Ihrer Besucher auf sich zieht.

Endgültiges Ergebnis

Beispiel Endergebnis divi

Teil Eins: Design

Abschnitt Konfiguration

Hintergrundfarbe

Beginnen wir mit dem Entwerfen! Erstellen Sie eine neue Seite und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

  • Hintergrundfarbe: #EEE

Divi Abschnitt Einstellung

Abstand

Wechseln Sie dann zu den Einstellungen für den Abschnittsabstand und fügen Sie benutzerdefinierte Füllränder hinzu.

  • Polsterung unten: 10vw

Interne Polsterung

Fügen Sie die Zeile 1 hinzu

Spaltenstruktur

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

Fügen Sie einer Divi-Spalte eine Zeile hinzu

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe der Zeile, ohne noch Module hinzuzufügen.

  •  Hintergrundfarbe: #DDD

Divi Texthintergrund

Sizing

Gehen Sie dann zu den Größeneinstellungen und lassen Sie die Zeile die gesamte Breite des Bildschirms ausfüllen.

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

Divi Texthintergrund 1

Abstand

Entfernen Sie außerdem den standardmäßigen oberen und unteren Innenabstand für die Linie.

  • Polsterung oben: 0px
  • Polsterung unten: 0px

Konfiguration der internen Polsterung

Fügen Sie ein Textmodul hinzu

Es ist Zeit, Module hinzuzufügen! Das erste Modul, das wir brauchen, ist ein Textmodul. Geben Sie den ersten Teil Ihres Titels im Inhaltsbereich mit dem Absatztextstil 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]

Ihr Inhalt kommt hierher

Hintergrundfarbe

Gehen Sie dann zu den Hintergrundeinstellungen des Moduls und fügen Sie eine Hintergrundfarbe hinzu.

  • Hintergrundfarbe: #ccc

Farbdivi-Textmodul

Texteinstellungen

Ändern Sie auch die Texteinstellungen auf der Registerkarte Design.

  • Schrifttext: Didact Gothic
  • Schriftgewicht des Textes: fett
  • Textfarbe: #000000
  • Textgröße: 10vw
  • Höhe der Textzeile: 0.9em
  • Textausrichtung: Mitte

Ändern Sie das Textstilmodul

Abstand

Erstellen Sie dann die gewünschte Form mit benutzerdefinierten Polstern oben und unten.

  • Polsterung oben: 10vw
  • Polsterung unten: 3vw

Titelabstand ändern

Animation

Zu guter Letzt werden wir einige Animationen hinzufügen. Es ist wichtig sicherzustellen, dass die Animationsdauer und die Startopazität Null sind. Dadurch kann das Textmodul mit einem Flash-Effekt angezeigt werden.

  • Animationsstil: Verblassen
  • Animation wiederholen: Einmal
  • Animationsdauer: 0ms
  • Animationsverzögerung: 1000ms

Konfigurieren Sie den Text des Animations-Divi-Moduls

Klonen Sie das x4-Textmodul

Sobald Sie das erste Textmodul bearbeitet haben, können Sie es je nach Länge Ihres Titels beliebig oft klonen. Für jeden Teil des Titels, den Sie mit einem Flash-Effekt anzeigen möchten, benötigen Sie ein separates Textmodul. Für dieses Beispiel benötigen wir zusätzliche 4-Module.

Aktualisieren Sie das Modul

Hintergrundfarbe

Mit der Hintergrundfarbe.

  • Kopie 1 = Hintergrundfarbe: # 5900ff, Textfarbe: #FFF
  • Kopieren 2 = unverändert lassen, Animationsdauer ändern (Animationsverzögerung): 1500 ms
  • Kopie 3 = Hintergrundfarbe: # ffb200, Textfarbe: #FFF, Animationsdauer ändern: 2000 ms
  • Kopie 4 = Hintergrundfarbe: # 000, Textfarbe #FFF, Animationsdauer ändern: 2500 ms

Fügen Sie jedem Textmodul mit Ausnahme des ersten einen negativen Rand hinzu

Sobald Sie alle Textmodule angepasst haben, können Sie eine Überlappung erstellen. Um diese Überlappung zu erzeugen, fügen wir jedem der doppelten Textmodule einen negativen oberen Rand hinzu. Mit anderen Worten, wir stellen sicher, dass alle Module, die auf das erste Modul folgen, über diesem ersten Textmodul angezeigt werden.

  • Oberer Rand: -31.98vw

Passen Sie den Rand des Divi-Textmoduls an

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]

Transformationslinie

Transform übersetzen

Fahren Sie fort, indem Sie die gesamte Zeile transformieren, beginnend mit den Transformationsparametern.

  • Unten: -35vw

Divi übersetzen Transformation

Rotation umwandeln

Ändern Sie auch die Rotationswerte der Transformation.

  • Links: 320deg

Transformationsrotations-Divi-Textmodule

Fügen Sie die 2-Zeile hinzu

Spaltenstruktur

Auf dem zweiten Platz! Nachdem der Titeleffekt aktiviert ist, können wir die verbleibenden Module hinzufügen. Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Konfigurieren Sie das Divi-Layout

Sizing

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile in den Größeneinstellungen die gesamte Bildschirmbreite ausfüllen:

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

Divi-Modul ändern

Abstand

Entfernt die Standardoberfüllung aus der nächsten Zeile.

  • Obere Polsterung: 0px

Fügen Sie der 2-Spalte ein Textbeschreibungsmodul hinzu

Fügen Sie H1-Inhalte hinzu

Es ist Zeit, Module hinzuzufügen. Das erste Modul wird ein Textmodul sein. Sie können beliebige Inhalte hinzufügen.

Fügen Sie einen speziellen Divi-Bereich hinzuH1-Texteinstellungen

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

  • Schriftart des Titels: Didact Gothic
  • Titelgewicht: Fett
  • Schriftgröße: 1.8vw (Computer), 3.8vw (Tablet), 4vw (Telefon)

Ändern Sie die Einstellung des Dehnungs-Divi-TextmodulsAbstand

Fügen Sie im Abstandsbereich benutzerdefinierte Ränder hinzu.

  • Oberer Rand: -4vw
  • Unterer Rand: 2vw
  • Linker Rand: 30vw
  • Rechter Rand: 30 VW (Computer), 15 VW (Tablets & Telefon)

Texteinstellungen Randabstand diviFügen Sie der 2-Spalte ein Trennmodul hinzu

Sichtbarkeit

Das nächste Modul ist das Trennmodul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

  • Trennzeichen anzeigen: Ja

Divider Divi KonfigurationFarbe

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

  • Farbe: #000000

Farbe des TrennzeichensDimentionnement

Ändern Sie auch die Abstandsoptionen.

  • Abstandsgewicht: 8px
  • Breite: 7%

Größeneinstellungen des SeparatormodulsAbstand

Immer mit Größenoptionen.

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]

  • Niedrige Marge: 1vw
  • Linker Rand: 30vw

Konfigurieren Sie den Divi-Abstand

Fügen Sie der 2-Spalte einen Textbaustein hinzu

Inhalt hinzufügen

Das nächste Modul wird ein weiteres Textmodul sein. Sie müssen den Inhalt Ihrer Wahl angeben.

Divi TextmodulTexteinstellung

Dann müssen Sie die Texteinstellungen auf der Registerkarte "Design" ändern.

  • Textgröße: 0.8vw (Computer), 1.3vw (Tablet), 1.6vw (Telefon)
  • Höhe der Linie: 2.2em

Textgröße Divi TextmodulAbstand

Fügen Sie auch im Abstandsbereich einige Ränder hinzu.

  • Niedrige Marge: 3vw
  • Linker Rand: 30vw
  • Rechter Rand: 30 VW (Computer), 15 VW (Tablets & Phones)

Divi AbstandFügen Sie der 2-Spalte ein Schaltflächenmodul hinzu

Einstellungen des Tastenmoduls

Für das letzte Modul, das ein Tastenmodul sein wird. Sie fügen den Inhalt Ihrer Wahl hinzu und ändern die Einstellungen wie folgt:

  • Benutzerdefinierten Stil verwenden: Ja
  • Schriftgröße: 1vw (Computer), 1.5vw (Tablet), 2vw (Telefon)
  • Breite des Schaltflächenrandes: 0px
  • Schaltflächenschriftart: Poppins
  • Textgewicht: Fett
  • Schriftart: Großbuchstaben

Einstellungen der Divi-ModultastenAbstand

Gehen Sie zu den Abstandseinstellungen und fügen Sie einen benutzerdefinierten Außenrand sowie einen Innenrand hinzu.

  • Linker externer Rand: 30vw
  • Innerer hoher Rand: 1vw
  • Innen niedriger Rand: 1vw
  • Linker innerer Rand: 3vw
  • rechter innerer Rand: 3vw

Konfiguration des Tastenmodulszu beenden

In diesem Tutorial haben wir gesehen, wie ein Titel mit animiertem Text entworfen wird, wobei nur die internen Optionen von Divi verwendet werden. Dies ist eine großartige Technik, mit der Sie die Aufmerksamkeit Ihrer Besucher auf sehr originelle Weise auf sich ziehen können.

Dieser Artikel enthält 1 Kommentar

  1. Hallo. Großartig, dein Tutorial, danke. Ich habe es getan, aber ich habe ein kleines Problem. Die Animation findet nur einmal statt und wird dann nicht wiederholt.

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
8 Aktien
Aktie8
tweet
Registrieren