Ihre eigene Website erstellen von A-Z

Suche

Nützliche Funktionen von Elementor

  1. Elementor
  2. Nützliche Funktionen
  3. Nützliche Funktionen -2-
  4. Nützliche Funktionen -3-

Seitenübergänge Pro in Elementor

Die Seitenübergänge Pro-Funktion in Elementor ermöglicht es Ihnen, ansprechende und fließende Übergänge zwischen verschiedenen Seiten Ihrer Website zu erstellen. Diese Funktion verbessert nicht nur das visuelle Erlebnis, sondern trägt auch dazu bei, die Benutzererfahrung zu optimieren, indem sie den Übergang zwischen Inhalten nahtlos gestaltet.

Vorteile von Seitenübergängen

  • Verbesserte Benutzererfahrung: Sanfte Übergänge können das Surfen auf Ihrer Website angenehmer machen und den Besuchern helfen, sich besser zurechtzufinden.
  • Visuelle Attraktivität: Ansprechende Animationen und Übergänge können das Design Ihrer Website aufwerten und die Aufmerksamkeit der Benutzer auf wichtige Inhalte lenken.
  • Markenidentität: Durch die Verwendung von konsistenten Übergängen können Sie eine starke Markenidentität schaffen, die sich durch Ihre gesamte Website zieht.

 

Seitenübergänge in Elementor Pro einstellen

Um die Seitenübergänge in Elementor Pro zu konfigurieren, folge diesen Schritten: Nützliche Funktionen 09

  1. Elementor Editor öffnen:
    Gehe zu deiner WordPress-Seite und öffne die Seite, die du bearbeiten möchtest, mit Elementor. Klicke auf „Mit Elementor bearbeiten“.
  2. Einstellungen aufrufen:
    Klicke auf das Zahnrad-Symbol (Einstellungen) in der unteren linken Ecke des Elementor-Editors. Dies öffnet die allgemeinen Einstellungen für die Seite.
  3. Erweiterte Einstellungen:
    In den Einstellungen findest du den Tab „Erweitert“. Klicke darauf, um die erweiterten Optionen zu sehen.
  4. Bewegungseffekte:
    Scrolle nach unten zu den Bewegungseffekten. Hier kannst du verschiedene Animationen und Übergänge für die Elemente auf deiner Seite einstellen.
  5. Eingangsanimationen:
    Du kannst auch spezifische Eingangsanimationen für jedes Element festlegen. Wähle das Element aus, das du animieren möchtest, gehe zu den Erweiterten Einstellungen und wähle unter „Bewegungseffekte“ die gewünschte Eingangsanimation aus.
  6. Viewport-Einstellungen:
    Stelle sicher, dass du die Viewport-Einstellungen anpasst, um zu bestimmen, wann die Animationen aktiviert werden sollen. Dies kann helfen, die Animationen nur dann zu zeigen, wenn das Element im sichtbaren Bereich des Bildschirms erscheint.
  7. Speichern:
    Vergiss nicht, deine Änderungen zu speichern, indem du auf den „Aktualisieren“-Button klickst.

So fügen Sie Seitenübergänge in Elementor hinzu  Nützliche Funktionen 10

Schritt 1: Elementor Pro aktivieren

Stellen Sie sicher, dass Sie die Pro-Version von Elementor installiert und aktiviert haben, da die Seitenübergänge eine Funktion dieser Version sind.

Schritt 2: Seitenübergänge aktivieren

  1. Öffnen Sie den Elementor-Editor für die Seite, auf der Sie die Übergänge hinzufügen möchten.
  2. Gehen Sie zu den Seitenübergangseinstellungen. Diese finden Sie in den Site-Einstellungen oder im Theme Builder.
  3. Aktivieren Sie die Option für Seitenübergänge und wählen Sie den gewünschten Übergangseffekt aus, z. B. „Fade“, „Slide“ oder „Zoom“.

Schritt 3: Übergangseffekte anpassen

  • Dauer:
    Passen Sie die Dauer des Übergangs an, um die Geschwindigkeit der Animation zu steuern. Eine kürzere Dauer kann dynamischer wirken, während eine längere Dauer sanftere Übergänge ermöglicht.
  • Eingangs- und Ausgangseffekte:
    Wählen Sie unterschiedliche Effekte für den Eingang und den Ausgang der Seiten, um interessante visuelle Kontraste zu schaffen.

Schritt 4: Vorschau und Veröffentlichung

  • Nutzen Sie die Vorschaufunktion, um zu sehen, wie die Übergänge in Aktion aussehen. Achten Sie darauf, dass die Übergänge gut zu Ihrem Gesamtdesign passen.
  • Speichern Sie Ihre Änderungen und veröffentlichen Sie die Seite.

Tipps zur effektiven Nutzung von Seitenübergängen

  1. Konsistenz bewahren:
    Verwenden Sie dieselben Übergangseffekte auf verschiedenen Seiten, um ein einheitliches Benutzererlebnis zu schaffen.
  2. Nicht übertreiben:
    Zu viele oder zu komplexe Übergänge können ablenken. Halten Sie die Effekte subtil und passend zu Ihrem Design.
  3. Testen Sie die Leistung:
    Achten Sie darauf, dass die Übergänge die Ladezeiten Ihrer Seiten nicht negativ beeinflussen. Überprüfen Sie die Leistung auf verschiedenen Geräten und Browsern.

Fazit

Die Seitenübergänge Pro-Funktion in Elementor ist ein hervorragendes Werkzeug, um Ihre Website visuell ansprechender und benutzerfreundlicher zu gestalten. Durch die Implementierung sanfter Übergänge können Sie das Surferlebnis Ihrer Besucher verbessern und Ihre Inhalte effektiver präsentieren.

Elementor Pro: Seitenübergänge und Preloader (Vorlader) – Schritt-für-Schritt-Anleitung

Mit Elementor Pro kannst du Seitenübergänge und Preloader (Vorlader) einrichten, um deine Website professioneller und interaktiver zu gestalten. Hier ist eine ausführliche Anleitung, wie du diese Funktionen nutzen kannst.

Nützliche Funktionen 11

1. Seitenübergänge aktivieren und konfigurieren

Seitenübergänge sind Animationen, die beim Wechsel zwischen Seiten angezeigt werden. So richtest du sie ein:

  1. Elementor Editor öffnen:
    • Gehe zu deiner WordPress-Seite und öffne eine beliebige Seite mit Elementor, indem du auf „Mit Elementor bearbeiten“ klickst.
  2. Website-Einstellungen aufrufen:
    • Klicke oben links im Elementor-Editor auf das Hamburger-Menü (drei horizontale Linien).
    • Wähle Website-Einstellungen aus dem Dropdown-Menü.
  3. Seitenübergänge finden:
    • Im Menü der Website-Einstellungen findest du die Option Seitenübergänge. Klicke darauf, um die Einstellungen zu öffnen 1.
  4. Übergangstyp auswählen:
    • Wähle aus verschiedenen Übergangstypen, wie z. B.:
      • Animationen: Kreis, Kreis gestrichelt, springende Punkte, pulsierende Punkte, Spinner, Fortschrittsbalken usw.
      • Icons: Wähle ein Icon aus der Bibliothek oder lade ein eigenes SVG hoch.
      • Bilder: Lade ein Bild hoch, das während des Übergangs angezeigt wird 1.
  5. Übergangsdetails anpassen:
    • Animationsdauer (ms): Stelle ein, wie lange die Animation dauern soll.
    • Preloader-Verzögerung (ms): Lege fest, wie lange der Preloader angezeigt wird, bevor die Seite geladen wird.
    • Farbe und Größe: Passe die Farben und die Größe der Animation oder des Icons an 1.
  6. Vorschau der Übergänge:
    • Nutze die Vorschau-Funktion, um zu sehen, wie die Übergänge für Besucher aussehen werden.
  7. Seitenübergänge für bestimmte Links deaktivieren:
    • Wenn du möchtest, dass bestimmte Links keine Übergänge verwenden, füge das Attribut data-e-disable-page-transition|true zu diesen Links hinzu. Dies kannst du in den Link-Attributen im Elementor-Editor einstellen 1.

2. Preloader (Vorlader) einrichten

Ein Preloader wird angezeigt, während eine Seite geladen wird. Dies verbessert die Benutzererfahrung, insbesondere bei langsameren Ladezeiten.

  1. Preloader-Typ auswählen:
    • Wähle unter den Seitenübergangseinstellungen den Typ Animation, Icon oder Bild aus:
      • Animationen: Wähle aus Optionen wie Kreis, springende Punkte, Spinner usw.
      • Icons: Wähle ein Icon aus der Bibliothek oder lade ein eigenes hoch.
      • Bilder: Lade ein Bild hoch, das als Preloader angezeigt wird 1.
  2. Preloader-Verzögerung einstellen:
    • Lege fest, wie lange der Preloader angezeigt wird, bevor die Seite geladen wird. Dies ist besonders nützlich, um sicherzustellen, dass der Übergang reibungslos aussieht 1.
  3. Design anpassen:
    • Passe die Farben, die Größe und die Transparenz des Preloaders an, um ihn an das Design deiner Website anzupassen.

3. Tipps für Seitenübergänge und Preloader

  • Performance beachten:
    • Achte darauf, dass die Animationen und Preloader die Ladezeit der Seite nicht negativ beeinflussen. Teste die Geschwindigkeit mit Tools wie Google PageSpeed Insights.
  • Konsistenz im Design:
    • Wähle Übergänge und Preloader, die zum Stil deiner Website passen, um ein einheitliches Erscheinungsbild zu gewährleisten.
  • Mobile Optimierung:
    • Überprüfe die Übergänge und Preloader auf mobilen Geräten, um sicherzustellen, dass sie dort genauso gut funktionieren wie auf dem Desktop.

Mit diesen Schritten kannst du Seitenübergänge und Preloader in Elementor Pro einrichten und anpassen, um die Benutzererfahrung auf deiner Website zu verbessern.

Seite 2 von 2