Inhalt ist der König, sagen sie, aber Aussehen ist die Königin. Und das kann in dem Zustand der heutigen Web-Eigenschaften nicht wahrer sein. Ein auffälliges Design hilft Web-Besitzern, die Aufmerksamkeit ihrer Besucher zu gewinnen. Abgesehen von dem durchdachten Layout, der harmonischen Farbkombination und den schönen Schriftarten können Web-Besitzer die Aufmerksamkeit eines Besuchers auf bewegende, schreibmaschinenähnliche Texte lenken. Wenn Sie ein WordPress-Benutzer sind, können Sie diesen Effekt leicht mit einem Plugin namens Typed Js erreichen .

Hinweis : Da der Effekt Text bewegt und es schwierig ist, die "Coolness" mit Worten oder einem statischen Bild zu beschreiben, entschied ich mich, sie in meinem persönlichen Website-Projekt zu verwenden, und Sie können das Ergebnis dort sehen.

Installieren und Einrichten des Plugins

Die Installation eines Plugins in WordPress ist sehr einfach, besonders für diejenigen, die schon eine Weile mit der Plattform experimentiert haben. Alles, was Sie tun müssen, ist sich in Ihrem Admin-Bereich einzuloggen und das Menü "Plugins -> Add New" in der linken Seitenleiste zu verwenden. Suche nach "Typed Js" aus dem Plugin-Repository, dann installiere und aktiviere es.

Jetzt können Sie einen neuen Typed Js-Effekt hinzufügen. Der Prozess ähnelt mehr oder weniger dem Hinzufügen eines neuen Posts. Gehen Sie zunächst in der linken Seitenleiste zum Menü "Typ -> Neu hinzufügen" und geben Sie Ihrem neuen Typ-Effekt einen Namen.

Wichtig! Achten Sie auf den "Generated Shortcode". Es ist die Zeichenkette zwischen den "[eckigen Klammern]". Kopieren Sie alles einschließlich der Klammern und fügen Sie den Shortcode überall dort ein, wo er angezeigt werden soll. Ein anderer Satz von Strings wird einen anderen Shortcode haben.

Von den "typisierten Optionen" können Sie die Zeichenfolgen von Wörtern / Phrasen / Sätzen hinzufügen, die in der von Ihnen bevorzugten Reihenfolge angezeigt werden sollen. Verwenden Sie die Schaltfläche "Plus (+)", um eine neue Zeichenfolge hinzuzufügen, und die Schaltfläche "Minus (-)", um einen Eintrag zu löschen.

Unter den Saiten befinden sich die verschiedenen Einstellungen, um das Aussehen des Effekts anzupassen. Sie können die Eingabegeschwindigkeit, die Startverzögerung, die Rückgeschwindigkeit und die Rückverzögerung anpassen. Alle Zahlen sind in Millisekunden. Sie können die Zeichenfolgen auch so einstellen, dass sie in einer Schleife angezeigt werden, den Cursor anzeigen, ein Zeichen als Cursor auswählen und blinken lassen.

Eine andere Sache, die Sie einstellen können, ist das Display, wie Schriftart und Farbe.

Nachdem Sie alle Einstellungen vorgenommen haben, klicken Sie auf "Veröffentlichen" oder "Aktualisieren".

Verwenden Sie den Effekt in Ihrem WordPress

Wie bereits erwähnt, müssen Sie den Shortcode kopieren und an der Stelle einfügen, an der er angezeigt werden soll. Für meine Website werde ich sie auf der Zielseite verwenden, die ich mit SiteOrigin Page Builder erstellt habe.

Zuerst erstelle ich eine neue Seite über "Pages -> Add New". Dann wechsle ich zum "Page Builder" Tab, füge eine neue "Row" hinzu, setze es auf eine Spalte und füge das "SiteOrigin Hero" Widget in die Reihe.

Dann öffne ich den Rahmen und bearbeite den Inhalt genauso wie bei den üblichen WordPress Posts. Ich füge den Shortcode ein, der im vorherigen Post generiert wurde.

Um das Design zu vervollständigen, füge ich einen "Knopf" hinzu und passe ihn an, der mit der zuvor eingerichteten "Kontakt" Seite verlinkt wird, so dass ein Besucher, der meine Dienste benötigt, mit mir in Kontakt treten kann.

Und hier ist das Endergebnis. Wenn Sie ein Beispiel für den Effekt in Aktion in Echtzeit sehen möchten, können Sie meine Website besuchen.

Sie können so viele typisierte Js-Elemente erstellen, wie Sie möchten, und dann die Shortcodes kopieren und einfügen und den Effekt überall in Posts oder Seiten einfügen. Obwohl es sehr cool wäre, können Sie den Effekt nicht im Titel verwenden. Ich habe es versucht.

Was denkst du über Typed Js Effekt? Kannst du sehen, wie du es in deinen WordPress-Seiten verwendest? Teilen Sie Ihre Gedanken und Meinungen mit den unten stehenden Kommentaren.