Springe zum Hauptinhalt

So erstellen Sie eine Superheld-Zone mit animiertem Text

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]

Dieses Tutorial ergänzt ein Tutorial, das wir vor einigen Tagen erstellt haben. Wir haben Ihnen in der Tat gezeigt, wie Sie einen Bildlauftext in eine Spalte auf Divi einfügen. Heute zeigen wir Ihnen, wie Sie dieselbe Technik anwenden, um einen Abschnitt "Superheld" hinzuzufügen (Ausdruck, der verwendet wird, um einen großen Bereich einer Webseite zu beschreiben, der Aufmerksamkeit erregen und bestimmte Elemente hervorheben soll). .

Lassen Sie uns beginnen.

Fügen Sie das vordefinierte Layout hinzu

Um das Layout zu Ihrer Seite hinzuzufügen, öffnen Sie das Einstellungsmenü unten im Divi Builder und klicken Sie auf das Pluszeichen. Wählen Sie im Popup-Fenster Upload from Library das Job Recruiter Layout Pack aus. Klicken Sie dann auf, um das Layout der Startseite zu verwenden.

Modellvorlage divi

Entfernen Sie zusätzlichen Inhalt mit dem Layout

Sobald die Präsentation auf die Seite geladen wurde, stellen Sie die Drahtgitteransicht bereit und entfernen Sie den gesamten Inhalt aus der Präsentation mit Ausnahme des Headers in voller Breite und des Abschnitts direkt darunter.

Design Modification Section Divi

Erstellen der Auswahltextanimation

Wie Sie sehen, wird das Wort "eingestellt" bereits im zweiten Abschnitt als großes Textgestaltungselement in einem Textmodul verwendet. Wir werden dieses Textmodul in ein responsives Textlautsprecher-Designelement verwandeln. Der Schlüssel, um das Textrechteck ansprechbar zu machen, besteht darin, sicherzustellen, dass die Linie und das Textmodul die gesamte Breite des Browserfensters abdecken. Wir können dies mit 100% Breite tun. Dann können wir die Längeneinheit vw für die Textgröße verwenden. Dadurch wird der Text gut an die Breite des Browsers angepasst. Danach wenden wir dieselben Prinzipien an, die wir zuvor verwendet haben, um unser einfaches Beispiel für einen Bildlauftext zu veranschaulichen.

Hier ist, wie es geht.

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]

Aktualisieren Sie die Parameter der Linie

Wie bereits erwähnt, muss die Zeile 100% sein, damit das Design dieser reaktionsschnellen Textauswahl funktioniert. Dadurch kann unser Textmodul Längeneinheiten vw relativ zur Breite des Browsers verwenden. Da unser vordefiniertes Layout bereits eine Linie mit 100% Breite hat, müssen wir nichts tun.

Konfiguration der Breite des Divi-Linienmoduls

Wir müssen jedoch die restlichen Einstellungen wie folgt anpassen.

  • Margin: -24vw down
  • Y-Achse der Transformationsverschiebung: -24vw
  • Horizontaler Überlauf: versteckt
  • Vertikaler Überlauf: versteckt

Konfiguration der Divi-Leitungseinstellungen

Der negative untere Rand dient zum Entfernen des negativen Leerzeichens, das jedes Mal verbleibt, wenn wir die Zeile mit dem Befehl transform translate verschieben. Und wir müssen den Zeilenüberlauf für unseren Auswahltexteffekt ausblenden.

Aktualisieren Sie das Textdesign des Textbausteins

Jetzt müssen Sie nur noch das Textmodul aktualisieren, um es in ein großes Textdesignelement zu konvertieren.

Öffnen Sie den Textbaustein und aktualisieren Sie Folgendes:

  • Text Textfarbe: rgba (255,255,255,0.16)
  • Text Textgröße: 36vw
  • Rand: -100% links, 100% rechts

Die Textgröße verwendet eine Längeneinheit vw, sodass der Text gut zur Breite des Browsers passt.

Konfiguration des Divi-Textmoduls

Fügen Sie dem Textmodul eine Animation hinzu

  • Animationsstil: Folie
  • Animationsrichtung: links
  • Animationsdauer: 10000ms
  • Animationsintensität: 100%
  • Animation der Geschwindigkeitskurve: linear
  • Animation wiederholen: Loop

Konfiguration der Divi-TextanimationEndgültiges Design

Überprüfen Sie nun das endgültige Design.

Angestellte AnimationsabteilungAbschließende Gedanken

Textfelder können ein praktisches Werkzeug für das Webdesign sein. Sie sind nicht darauf beschränkt, nur als Ferndrucker zu fungieren. Sie können Ihrem Webdesign auch ein interessantes Animationselement hinzufügen. Und das Beste daran ist, dass Divi es einfach macht, alle Arten von schönen Dingen zu kreieren und zu entwerfen. Ich hoffe, dieses Tutorial hilft Ihnen dabei, einfache Auswahltexte zu erstellen, wann immer Sie sie benötigen.

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]

Ich hoffe, von Ihnen in den Kommentaren zu hören.

Ihrer Gesundheit zuliebe!

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