{"id":2696,"date":"2024-10-15T21:52:45","date_gmt":"2024-10-15T13:52:45","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=2696"},"modified":"2024-10-19T10:02:55","modified_gmt":"2024-10-19T02:02:55","slug":"complete-guide-to-creating-a-professional-preloader-in-elementor-pro-for-a-smoother-website-experience","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/de\/komplette-anleitung-zur-erstellung-eines-professionellen-preloaders-in-elementor-pro-fur-ein-reibungsloses-website-erlebnis","title":{"rendered":"Vollst\u00e4ndige Anleitung zur Erstellung eines professionellen Preloaders in Elementor Pro f\u00fcr eine reibungslosere Website-Erfahrung"},"content":{"rendered":"

Einf\u00fchrung<\/h4>

Eine effektive M\u00f6glichkeit, dieses Erlebnis zu verbessern, ist das Hinzuf\u00fcgen eines Preloaders - ein Animation<\/strong> oder Bild<\/strong> das erscheint, w\u00e4hrend der Seiteninhalt im Hintergrund geladen wird. So erhalten die Benutzer einen nahtlosen \u00dcbergang, w\u00e4hrend sie warten, und Ihre Website wirkt ausgefeilt und professionell. In dieser Anleitung gehen wir die einzelnen Schritte zur Einrichtung einer Preloader<\/strong> in Elementor Pro<\/mark><\/strong>Damit k\u00f6nnen Sie individuelle Animationen oder Markenlogos anzeigen, die die Identit\u00e4t Ihrer Website unterstreichen.<\/p>

Zum Klicken<\/a><\/strong> gehen Sie zu Elementor Pro Original-Kaufkanal.<\/p>

\"\"<\/figure>

Was ist ein Preloader und warum sollte man ihn verwenden?<\/h4>

Ein Preloader ist eine Animation oder Grafik als Platzhalter, die angezeigt wird, w\u00e4hrend der Inhalt Ihrer Website geladen wird. Dies kann besonders f\u00fcr Seiten mit umfangreichen Inhalten n\u00fctzlich sein, die l\u00e4nger zum Laden brauchen. Die Verwendung eines Preloaders sorgt f\u00fcr ein besseres Benutzererlebnis, da er die wahrgenommene Ladezeit verk\u00fcrzt, die Benutzer bei der Stange h\u00e4lt und verhindert, dass sie teilweise geladene Seiten sehen. Au\u00dferdem k\u00f6nnen Sie mit einem Preloader Ihr Branding pr\u00e4sentieren und Ihrer Website ein wenig Pers\u00f6nlichkeit verleihen.<\/p>

Wie man einen Preloader in Elementor Pro erstellt<\/h3>

Schritt 1: Erstellen Sie eine Kopfzeilenvorlage<\/h4>

Der erste Schritt ist eine Kopfzeile erstellen<\/strong> Vorlage<\/strong> die den Preloader enth\u00e4lt. Wenn Sie den Preloader in einer Kopfzeilenvorlage platzieren, k\u00f6nnen Sie sicherstellen, dass er auf allen Seiten Ihrer Website einheitlich angezeigt wird.<\/p>

Zugriff auf den Theme Builder<\/strong>:<\/p>

  • Gehen Sie zu Ihrem Elementor Dashboard<\/strong>, navigieren Vorlagen<\/mark><\/strong>, und w\u00e4hlen Sie Theme Builder<\/mark><\/strong>.<\/li><\/ul>
    \"\"<\/figure><\/div>

    Eine neue Kopfzeilenvorlage erstellen<\/strong>:<\/p>

    • Suchen Sie im Theme Builder die Option Kopfzeile<\/mark><\/strong> section and click the +<\/mark><\/strong> Symbol, um eine neue Vorlage zu erstellen.<\/li><\/ul>
      \"\"<\/figure><\/div>
      • W\u00e4hlen Sie eine Vorlage und klicken Sie auf Einf\u00fcgen, um die Seite aufzurufen.<\/li><\/ul>
        \"\"<\/figure>

        Ver\u00f6ffentlichen Sie die Vorlage<\/strong>:<\/p>

        • Nachdem Sie Ihre Kopfzeile entworfen haben, klicken Sie auf ver\u00f6ffentlichen<\/strong>.<\/li><\/ul>
          \"\"<\/figure><\/div>
          • Wenn Sie nach den Anzeigebedingungen gefragt werden, w\u00e4hlen Sie Gesamte Website<\/mark><\/strong> um sicherzustellen, dass der Preloader auf jede Seite Ihrer Website angewendet wird.<\/li><\/ul>
            \"\"<\/figure><\/div>
            • Klicken Sie auf Speichern & Schlie\u00dfen<\/strong>.<\/li><\/ul>

              Schritt 2: F\u00fcgen Sie einen Container hinzu und legen Sie eine CSS-ID fest<\/h4>
              \"\"<\/figure><\/div>

              F\u00fcgen wir nun eine Container<\/strong> die die Preloader-Animation enthalten wird. Festlegen einer eindeutigen CSS-ID<\/strong> f\u00fcr diesen Container erm\u00f6glicht es uns, ihn sp\u00e4ter mit CSS und JavaScript auszurichten.<\/p>

              Einen Container hinzuf\u00fcgen<\/strong>:<\/p>

              • F\u00fcgen Sie innerhalb Ihrer neuen Kopfzeilenvorlage einen einspaltigen Container hinzu.<\/li><\/ul>
                \"\"<\/figure><\/div>

                Legen Sie die CSS-ID fest<\/strong>:<\/p>

                • Gehen Sie zum Fortgeschrittene<\/strong> in den Einstellungen des Containers.<\/li><\/ul>
                  \"\"<\/figure><\/div>
                  • In der CSS-ID<\/strong> Feld, geben Sie ein <\/mark>abc_vorladen<\/mark><\/strong>. Diese ID wird verwendet, um benutzerdefiniertes CSS und JavaScript anzuwenden, um das Verhalten des Preloaders zu steuern.<\/li><\/ul>
                    \"\"<\/figure>

                    Schritt 3: F\u00fcgen Sie ein Icon oder ein Bild-Widget hinzu<\/h4>

                    So erstellen Sie die visuelles Element<\/strong> Ihres Preloaders, k\u00f6nnen Sie ein Ikone<\/strong> oder Bild<\/strong> Widget, um entweder ein Ladesymbol oder das Logo Ihrer Marke anzuzeigen.<\/p>

                    Das Widget hinzuf\u00fcgen<\/strong>:<\/p>

                    • Sie k\u00f6nnen dem Container ein Symbol- oder Bild-Widget hinzuf\u00fcgen, je nachdem, ob Sie ein Standard-Ladesymbol oder ein benutzerdefiniertes Logo w\u00fcnschen.<\/li><\/ul>
                      \"\"<\/figure><\/div>

                      Legen Sie die CSS-ID f\u00fcr das Widget fest<\/strong>:<\/p>

                      • Gehen Sie zum Fortgeschrittene<\/strong> in den Einstellungen des Widgets und setzen Sie die CSS-ID auf abc_loader<\/mark><\/strong>.<\/li><\/ul>
                        \"\"<\/figure><\/div>

                        Das Icon oder Bild gestalten<\/strong>:<\/p>

                        • Navigieren Sie zum Men\u00fcpunkt Stil<\/mark><\/strong> und passen Sie die Gr\u00f6\u00dfe des Symbols oder Bildes an Ihr Design an. Es ist oft am besten, Icons mit einer Gr\u00f6\u00dfe von etwa 1px<\/strong>.<\/li><\/ul>
                          \"\"<\/figure><\/div>

                          Schritt 4: F\u00fcgen Sie ein HTML-Widget zur Steuerung des Preloaders hinzu<\/h4>

                          Als n\u00e4chstes f\u00fcgen wir ein HTML-Widget hinzu, das JavaScript enth\u00e4lt, um zu steuern, wann der Preloader angezeigt wird und wann er verschwindet. Dieses Skript blendet den Preloader nach einer kurzen Verz\u00f6gerung aus, so dass Ihre Inhalte reibungslos geladen werden k\u00f6nnen.<\/p>

                          F\u00fcgen Sie das HTML-Widget hinzu<\/strong>:<\/p>

                          • F\u00fcgen Sie unter dem Icon- oder Bild-Widget ein HTML-Widget hinzu.<\/li><\/ul>
                            \"\"<\/figure><\/div>\n\n
                            \"\"<\/figure><\/div><\/div>

                            JavaScript-Code einf\u00fcgen<\/strong>:<\/p>

                            • F\u00fcgen Sie in das HTML-Widget den folgenden JavaScript-Code ein:<\/li><\/ul>
                              <script>\n  document.addEventListener('DOMContentLoaded', function () {\n    setTimeout(function () {\n      document.getElementById('abc_preload').style.display = 'none';\n      document.getElementById('content').classList.add('visible');\n    }, 2000); \/\/ Adjust the delay as needed (in milliseconds)\n  });\n<\/script>\n<\/code><\/pre>
                              \"\"<\/figure>
                              Dieser Code blendet den Preloader 2 Sekunden nach Beginn des Ladens des Seiteninhalts aus. Basierend auf der durchschnittlichen Ladezeit Ihrer Website k\u00f6nnen Sie die 2000<\/strong> Wert, um die Verz\u00f6gerung (in Millisekunden) zu erh\u00f6hen oder zu verringern.<\/p>
                              Legen Sie die CSS-ID f\u00fcr das HTML-Widget fest<\/strong>:<\/p>
                              • In der HTML-Widget-Datei Fortgeschrittene<\/strong> setzen Sie die CSS-ID auf abc_preloader_adds<\/strong> um unbeabsichtigte Abst\u00e4nde zu vermeiden.<\/li><\/ul>
                                \"\"<\/figure>
                                Schritt 5: Hinzuf\u00fcgen von benutzerdefiniertem CSS f\u00fcr die Gestaltung des Preloaders<\/h4>
                                Wenn die Struktur vorhanden ist, werden wir benutzerdefiniertes CSS hinzuf\u00fcgen<\/strong> um den Preloader-Container und die Ladeanimation zu gestalten.<\/p>
                                Benutzerdefinierte CSS-Einstellungen \u00f6ffnen<\/strong>:<\/p>
                                • Klicken Sie auf die Seite einstellen<\/strong> (Zahnrad-Symbol) im Elementor-Panel.<\/li><\/ul>
                                  \"\"<\/figure><\/div>
                                  • Gehen Sie zum Fortgeschrittene<\/strong> und \u00f6ffnen Sie die Registerkarte Benutzerdefiniertes CSS<\/strong> Abschnitt.<\/li><\/ul>
                                    \"\"<\/figure><\/div>
                                    • F\u00fcgen Sie den folgenden CSS-Code ein<\/strong>:<\/li><\/ul>
                                      #abc_preload {\n  Position: fixiert;\n  top: 0;\n  links: 0;\n  Breite: 100%;\n  H\u00f6he: 100%;\n  Hintergrund: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n#abc_loader {\n  border: 8px solid #363636;\n  border-top: 8px solid #3498db;\n  border-radius: 50%;\n  Breite: 50px;\n  H\u00f6he: 50px;\n  animation: spin 1s linear unendlich;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n#abc_preloader_adds {\n  Anzeige: keine;\n}\n<\/code><\/pre>