Preloader mit Elementor gestalten in 5 Minuten

Preloader mit Elementor

Preloader - Seite laden mit Stil

Preloader sind Grafiken, die f├╝r einen kurzen Moment angezeigt werden, solange eine Seite l├Ądt. Daf├╝r kann man die typischen Ladebalken/Ladekreise verwenden oder man gestaltet sich einen Preloader mit dem Plugin Elementor.

Ich nutze Preloader meist nicht vor jeder Seite, sondern nur auf der Startseite – sozusagen als Begr├╝├čungsbild.

Auf dieser Seite kannst du einen Preloader in Aktion sehen. Der Schriftzug zoomt langsam in die Seite rein und verschwindet auch ganz schnell wieder: https://templates.yoga-webdesign.de/

Anstelle eines Schriftzugs, kann auch das eigene Logo oder eine Mischung aus Logo und Titel genutzt werden. 

Plugin zur Einrichtung des Preloaders

Leider bietet Elementor von Hause aus keine Einrichtung eines Preloaders an, aus diesem Grund ist man auf ein Plugin angewiesen.

Ich kann das Plugin Preloader Plus empfehlen, da es die M├Âglichkeit bietet, in Elementor gestaltete Abschnitte einzubinden. Au├čerdem ist der Funktionsumfang der kostenlosen Version absolut ausreichend:

Preloader einrichten

Vorlage in Elementor erstellen

Zun├Ąchst muss du in Elementor das anlegen, was sp├Ąter als Preloader geladen werden soll. Klicke daf├╝r im WordPress-Men├╝ auf „Templates“ und dann auf den Button „Neu hinzuf├╝gen“. Anschlie├čend ├Âffnet sich die folgende Eingabemaske:

W├Ąhle als Template-Typ „Abschnitt“ aus und vergebe den Namen „Preloader„.

Du landest dann im gewohnten Gestaltungsbereich und kannst den Preloader nach deinen W├╝nschen anlegen:

Wenn du mit der Gestaltung fertig bist, dann speicher den Abschnitt.

In WordPress findest du dann unter „Templates“ -> „Gespeicherte Templates“ deinen neu angelegten Abschnitt namens „Preloader“. Neben dem Namen findest du ganz rechts einen Shortcode. Bei mir lautet dieser bspw.:

Kopiere dir diesen Shortcode oder hole ihn dir sp├Ąter. Jetzt geht es erstmal an die Einrichtung des Preloader-Plugins.

Preloader Plus installieren und einrichten

Nachdem du das Plugin heruntergeladen und aktiviert hast, wirst du feststellen, dass es keinen eigenen Men├╝punkt f├╝r die Einstellungen gibt. Gehe deshalb auf die Startseite deiner Website, dort findest du ganz oben die WordPress-Men├╝leiste. Klicke dort auf den Punkt „Customizer“.

Anschlie├čend wird dir im Men├╝ der entsprechende Eintrag angezeigt:

Klicke auf den Men├╝punkt und anschlie├čend auf „Settings“. Folgende Einstellungen sind dann vorzunehmen:

Wichtig ist, dass „Custom Content“ durch ein Klick aufs Auge-Symbol aktiviert und ganz nach oben gezogen wird. Die anderen Punkte unter „Elements positioning and visibility“ k├Ânnen durch einen Klick aufs Auge-Symbol deaktiviert werden. Oder du nutzt diese in Kombination – bspw. „Percentage Counter“, der anzeigt, zu wie viel Prozent die Website bereits geladen wurde.

Soll der Preloader nur einmal angezeigt werden pro Besuch, dann ist noch der Haken bei „Show the preloader only on first visit“ zu setzen (ist ja selbsterkl├Ąrend).

Weiter unten in den Einstellungen befindet sich der Punkt „Custom Content„. Dort ist der Elementor-Shortcode (siehe oben) einzutragen:

Dann noch das Ergebnis abspeichern und ausprobieren ­čśë

Das Plugin ist extrem umfangreich. Probiert euch ruhig etwas aus, vllt. findet ihr auch Einstellungen und Darstellungen, die f├╝r euch besser passen.

Es gibt bspw. vordefinierte Grafiken, die du nutzen kannst – ohne Erstellung in Elementor.

Viel Spa├č damit.

Schreibe einen Kommentar

Abonnieren
Benachrichtige mich bei
0 Kommentare
Inline Feedbacks
View all comments

Die mit Sternchen (*) gekennzeichneten Verweise sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und ├╝ber diesen Link einkaufst, bekomme ich von deinem Einkauf eine Provision. F├╝r dich ver├Ąndert sich der Preis nicht.┬á

0
Hast du Fragen? Dann schreibe einen Kommentar ;-)x
()
x
Newsletter abonnieren

Erhalte regelm├Ą├čig Informationen zu neuen Tipps und Tutorials.