Haben Sie schon einmal versucht, einen vertikalen Fortschrittstracker anstelle einer herkömmlichen Bildlaufleiste zu erstellen? Wenn nicht, lesen Sie diesen Artikel bis zum Ende, um herauszufinden, wie Sie ihn erstellen können Elementor Pro.
Aber bevor wir uns mit dem Hauptthema befassen, erinnern wir uns zunächst daran, was ein Fortschrittstracker ist.
Ein Fortschrittstracker ist eine Fortschrittsanzeige, die den Benutzer über den Fortschritt eines laufenden Prozesses informiert, z. B. das Installieren einer Anwendung, das Aktualisieren, das Lesen eines Artikels usw. . Und es gibt zwei Arten:
- le linearer Fortschrittstracker
- le kreisförmiger Fortschrittstracker
Sie können auch lesen: Elementor: So erstellen Sie eine Effektkarte aus einem Portfolio
In diesem Tutorial zeigen wir Ihnen, wie Sie Schritt für Schritt eine vertikale Fortschrittsanzeige in einen Abschnitt einfügen, der die Postarchive enthält.
Erstellen Sie einen Fortschrittstracker
In der Registerkarte Elemente aus der WerkzeugleisteElementor, geben Sie in die Suchleiste ein Fortschrittsanzeige. Ziehen Sie dann das Widget in einen Abschnitt.
Anschließend erscheint eine Fortschrittsanzeige. Standardmäßig ist es horizontal ausgerichtet. Aber keine Sorge, Sie werden später sehen, wie Sie es vertikal anordnen.
Nachdem die Fortschrittsanzeige erstellt wurde, nehmen wir die notwendigen Änderungen vor, um das gewünschte Ergebnis zu erzielen.
Siehe auch: Elementor: So erstellen Sie eine Effektkarte aus einem Portfolio
Inhalt des Fortschrittstrackers bearbeiten
Hier wählen Sie die Art des Trackers und womit er zusammenhängt.
Die wichtigsten Einstellungen sind:
- typischer Verfolger: Hier ist der Standardwert Horizontale. Wenn Sie jedoch in der Liste nach unten scrollen, wird der Typ Zirkulation wird Ihnen ebenfalls angeboten. Behalten Sie die Vorgabe bei.
- Fortschritt relativ zu: Wählen Sie in dieser zweiten Einstellung den Wert aus Wähler. Diese Auswahl bringt eine zusätzliche Einstellung hervor: Schalthebel .
- Schalthebel : Dieses Feld soll die Kennung des Objekts erhalten, an dem der Tracker angebracht wird.
Wählen wir das Archiv der Veröffentlichungen aus, da es das Element ist, an das unser Tracker angehängt ist.
Gehen Sie im Einstellungsfenster zur Registerkarte Erweitert und geben Sie dann einen Wert in das Feld ein CSS-ID.
Kehren Sie als Nächstes zum Tracker-Panel zurück und füllen Sie das Auswahlfeld im Menü aus Inhalt.
Stellen Sie abschließend die Ausrichtung der Fortschrittsanzeige nach rechts ein.
Ändere den Stil des Fortschrittstrackers
In diesem Schritt konfigurieren wir die Parameter der Fortschrittsanzeige sowie deren Hintergrund.
Beginnen Sie mit dem Einstellen der Fortschrittsanzeige.
Lesen Sie auch: Elementor: So erstellen Sie eine Bildergalerie
- Einstellung Fortschrittsfarbe können Sie zwischen einem klassischen Verlauf und einem Gradientenverlauf wählen. Wählen Sie in unserem Beispiel die erste Option. Unabhängig von der Auswahl erscheint jedoch die Einstellung couleur.
- Setze lhat Farbe Verwenden Sie die globale Farbpalette oder den Farbwähler.
- Die Art der Grenze: Sie haben hier sechs Vorschläge (keine, voll, doppelt, gepunktet, gepunktet, Groove). Entscheiden Sie sich für eine vollständige Grenze.
- die Breite: Dies dient dazu, den Rand Ihrer Fortschrittsanzeige dicker zu machen.
- Der Grenzradius: Standardmäßig sieht die Fortschrittsanzeige wie ein Rechteck aus. Durch die Änderung seines Radius werden seine Enden abgerundet.
Stellen Sie abschließend die Piste Hintergrundeinstellungen. Sie bemerken, dass fast die gleichen Einstellungen zurückkommen. Beschränken Sie sich daher auf die zuvor genannten.
Ändern Sie die erweiterten Optionen des Fortschrittstrackers
Um unsere Arbeit abzuschließen, werden wir die folgenden Registerkarten festlegen: Bewegungseffekte, Transformation und benutzerdefiniertes CSS.
Beginnen wir zuerst mit der Registerkarte Benutzerdefiniertes CSS. Wählen Sie es aus und fügen Sie dann den folgenden Code in das entsprechende Feld ein. Damit kann die Breite des Trackers definiert werden. Die Breite wird also auf 50 % der Höhe des Fensters festgelegt.
Drehen Sie als Nächstes den Tracker in vertikaler Richtung. Wählen Sie dazu das Untermenü Transformator, Drehung aktivieren und dann 90 in das leere Feld eingeben. Dadurch wird unser Widget um 90 Grad gedreht, wodurch Sie die gewünschte vertikale Position erhalten.
Um unser Widget auf der gleichen Ebene wie die ersten Beiträge auszurichten, wenden Sie einen Versatz von 145 an.
Wenn wir auf dieser Ebene durch unsere Seite scrollen, werden Sie feststellen, dass unsere Fortschrittsanzeige verschwindet, während wir durch unsere Seite scrollen Inhalt.
Um dieses Problem zu lösen, öffnen Sie die Registerkarte Bewegungseffekte, und lassen Sie dann den Befehl fallen Stift und wählen Sie en bas.
Wenn wir dieses Mal nach unten scrollen, können wir sehen, wie sich unser Fortschrittstracker allmählich füllt, während wir uns durch unser Archiv von Beiträgen bewegen.
Holen Sie sich jetzt Elementor Pro!
Zusammenfassung
So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie einen vertikalen Fortschrittstracker erstellen.
Hinzufügen interaktiver Elemente wie der vertikalen Fortschrittsanzeige beim Erstellen Ihrer Webseite kann es wirklich auf die nächste Ebene bringen, indem es intuitiver gestaltet wird. Darüber hinaus kann es auf eine ganze Seite oder auf die verlinkt werden Inhalt einer Publikation und sogar auf jedes andere spezifische Element einer Seite. Daher wäre es ein zusätzlicher Vorteil, wenn man wüsste, wie man es benutzt.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
