Springe zum Hauptinhalt

So fügen Sie Ihren Titeln auf Divi eine Textblockanimation hinzu

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]

Ihr Titel ist einer der wichtigsten Teile Ihrer Homepage. Dies ist normalerweise das, was Sie zuerst sehen und daher den ersten Eindruck bestimmen. Wie bei jedem anderen ersten Eindruck möchten Sie, dass es gut ist. Wenn Sie nun nach einer kreativen Möglichkeit suchen, Ihren Titel zu präsentieren, wird Ihnen dieses Tutorial gefallen. Wir zeigen Ihnen, wie Sie Ihrem Titel CSS-Textblockanimationen hinzufügen können, und Sie können die Layout-JSON-Datei auch kostenlos herunterladen!

Übersicht

Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.

Animierte Titelvorschau Divi Tutorial

Beginnen wir mit dem Design

Fügen Sie Abschnitt 1 hinzu

Hintergrund mit Farbverlauf

Beginnen Sie, indem Sie einer neuen Seite oder der Seite, an der Sie arbeiten, einen regulären Abschnitt hinzufügen. Öffnen Sie die Abschnittseinstellungen und wenden Sie den folgenden Verlaufshintergrund an:

  • Farbe 1: # f0f2b
  • Farbe 2: # c10b1a
  • Verlaufstyp: linear
  • Steigungsrichtung: 63deg
Konfiguration von Divi-Abschnitten

Abstand

Wechseln Sie zur Registerkarte "Abschnittsdesign" und wenden Sie die folgenden benutzerdefinierten Werte für die obere und untere Füllung auf verschiedene Bildschirmgrößen an:

  • Obere Polsterung: 7vw (Desktop), 20vw (Tablet), 25vw (Telefon)
  • Bodenpolsterung: 7 VW (Schreibtisch), 20 VW (Tablet), 25 VW (Telefon)
Konfiguration des Abstandsabschnitts

Grenze

Fügen Sie dem Abschnitt auch einen Rahmen hinzu.

  • Randbreite: 2vw (oben, links, rechts)
  • Breite des unteren Randes: 0vw
  • Randfarbe: #ffffff
Konfiguration des Divi-Abschnittsrandes

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie dem Abschnitt weiterhin eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Konfiguration des Divi-Spaltenlayouts

Sizing

Öffnen Sie die Linienparameter und ändern Sie die Bemaßungsparameter entsprechend:

  • Breite: 100%
  • Maximale Breite: 100%
Konfiguration der Divi-Spaltenbreite

Fügen Sie der Spalte einen Textbaustein hinzu

Fügen Sie H1-Inhalte hinzu

Fügen Sie dann ein Textmodul mit einem H1-Titel Ihrer Wahl hinzu.

Fügen Sie der Spalte 1 ein Textmodul hinzu

Fügen Sie jedem Wort im H1-Titel Div-Tags hinzu

Wechseln Sie zur Textregisterkarte Ihrer Titelkopie und fügen Sie jedem Wort in Ihrem Titel ein anderes div hinzu. Die CSS-ID muss für jedes Wort unterschiedlich sein.

Bereit
beim
Bauen
Wunderschönen
Websites?

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]

Fügen Sie Divi-Textmodul-Tags hinzu

H1-Texteinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die H1-Texteinstellungen entsprechend:

  • Titelschrift: Work Sans
  • Schriftgröße des Titels: mittel
  • Kopfzeilentextfarbe: #ffffff
  • Kopfzeilentextgröße: 4vw (Desktop), 5vw (Tablet), 6vw (Telefon)
  • Kopfzeilenhöhe: 1,4 em
Parametertitel 1 divi

Abstand

Ändern Sie dann die Randwerte auf verschiedenen Bildschirmgrößen.

  • Linker Rand: 20 VW (Schreibtisch und Tablet), 15 VW (Telefon)
  • Rechter Rand: 35vw (Desktop), 20vw (Tablet), 15vw (Telefon)
Abstand Konfiguration des Divi-Textmoduls

Fügen Sie der Spalte ein Codemodul hinzu

Fügen Sie den CSS-Code ein

Damit die Textblockanimation auf unseren Titel angewendet werden kann, benötigen wir CSS-Code. Wir werden diesen CSS-Code einem neuen Codemodul hinzufügen.

<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>

Fügen Sie den CSS-Divi-Code ein

Abstand

Wechseln Sie zur Registerkarte Moduldesign und entfernen Sie alle Standard-Bodenpolster.

  • Unterer Rand: 0px
Passen Sie die Magier der Divi-Module an

Fügen Sie der Spalte ein Schaltflächenmodul hinzu

Kopie hinzufügen

Das nächste Modul, das wir brauchen, ist ein Tastenmodul. Geben Sie eine Kopie Ihrer Wahl ein.

Erstellen Sie eine Kopie des Boton Divi-Moduls

Tasteneinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Tasteneinstellungen entsprechend:

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]

  • 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: # 000000
  • Schaltflächenrandbreite: 0px
Parameter des Divi-Tastenmoduls
  • Tastenschrift: Work Sans
Ändern Sie die Schriftart der Divi-Schaltfläche

Abstand

Gehen Sie dann zu den Abstandseinstellungen und wenden Sie benutzerdefinierte Rand- und Füllwerte auf verschiedene Bildschirmgrößen an.

  • Oberer Rand: 3vw (Büro),
  • Linker Rand: 20 VW (Schreibtisch und Tablet), 15 VW (Telefon)
  • Obere Polsterung: 1.2vw (Desktop), 2vw (Tablet), 4vw (Telefon)
  • Bodenpolsterung: 1.2 VW (Schreibtisch), 2 VW (Tablet), 4 VW (Telefon)
  • Linke Polsterung: 1.8vw (Desktop), 3vw (Tablet), 6vw (Telefon)
  • Rechte Polsterung: 1.8vw (Schreibtisch), 3vw (Tablet), 6vw (Telefon)
Konfiguration des Divi-Tastenabstands

Animation

Passen Sie auch die Animationseinstellungen an.

  • Animationsstil: Flip
  • Animationsrichtung: nach unten
  • Animationsverzögerung: 2000 ms
  • Animationsintensität: 100%
  • Deckkraft des Animationsstarts: 100%
  • Animationsgeschwindigkeitskurve: Easy-In-Out
  • Animation wiederholen: einmal
Anpassung der Divi-Textmodulanimation

Fügen Sie Abschnitt 2 hinzu

Fahren Sie fort, indem Sie einen neuen regulären Abschnitt direkt unter dem vorherigen hinzufügen.

Fügen Sie einen neuen Divi-Abschnitt hinzu

Abstand

Öffnen Sie die Abschnittseinstellungen und entfernen Sie die standardmäßige obere Polsterung.

  • Obere Polsterung: 0px
Konfigurieren Sie den Abstand der Teilabschnitte

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

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

Fügen Sie eine neue Divi-Spalte für Abschnitte hinzu

Sizing

Öffnen Sie die Zeilenparameter, ohne weitere Module hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen.

  • Breite: 100%
  • Maximale Breite: 100%
Größenabschnitt divi

Fügen Sie der Spalte einen Textbaustein hinzu

Inhalt hinzufügen

Fügen Sie dann ein Textmodul mit einem Beschreibungsinhalt Ihrer Wahl hinzu.

Texteinstellungen des Divi-Moduls

Hintergrundfarbe

Fügen Sie eine weiße Hintergrundfarbe hinzu.

  • Hintergrundfarbe: #ffffff
Divi-Schriftfarbenkonfiguration

Texteinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Texteinstellungen entsprechend:

  • Textschrift: Work Sans
  • Textfarbe: # 9b9b9b
  • Textgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
  • Höhe der Textzeile: 2.6em
Konfiguration der Divi-Titelschriftart

Abstand

Fügen Sie außerdem benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen 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]

  • Oberer Rand: -5vw (Desktop), -20vw (Tablet), -27vw (Telefon)
  • Linker Rand: 20 VW (Schreibtisch), 13 VW (Tablet), 8 VW (Telefon)
  • Rechter Rand: 20vw (Desktop), 13vw (Tablet), 8vw (Telefon)
  • Obere Polsterung: 5vw (Desktop), 7vw (Tablet und Telefon)
  • Bodenpolsterung: 5vw (Schreibtisch), 7vw (Tablet und Telefon)
  • Linke Polsterung: 3vw (Desktop), 5vw (Tablet), 6vw (Telefon)
  • Rechte Polsterung: 3vw (Schreibtisch), 5vw (Tablet), 6vw (Telefon)
Konfiguration des Abstandsabschnitts des Divi-Moduls

Schattenkiste

Vervollständigen Sie die Moduleinstellungen, indem Sie einen subtilen Kastenschatten anwenden. Das ist es!

  • Stärke der Schattenunschärfe: 50px
  • Schattenfarbe: rgba (0,0,0,0,1)
Divi-Textmodul für die Schattenkonfiguration

Übersicht

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

Endergebnis Divi Tutorial

Abschließende Gedanken

In diesem Artikel haben wir Ihnen gezeigt, wie Sie Ihrem Titel CSS-Textblockanimationen hinzufügen. Es ist wichtig sicherzustellen, dass Ihr Titel von Anfang an sichtbar und lesbar ist. Das Hinzufügen von Animationen zu Ihrem Titel kann definitiv helfen! Sie konnten die Layout-JSON-Datei auch kostenlos herunterladen. Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.

Übersetzt von: ElegantThemes

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
2 Aktien
Aktie2
tweet
Registrieren