JetBlocks Anleitung: Header & Footer in Elementor bauen

Der Header ist das meistgesehene Element jeder Website. Er steht auf jeder Seite, und wenn er nicht funktioniert, merkt man es sofort: Das Menü klappt am Handy nicht auf, der Warenkorb fehlt, die Suche ist versteckt.

JetBlocks von Crocoblock ist ein Widget-Paket für genau diesen Bereich. Es liefert die Bausteine, die in Header und Footer typischerweise gebraucht werden, und dazu einen Sticky-Effekt, damit der Header beim Scrollen sichtbar bleibt.

Ich zeige Ihnen, was JetBlocks enthält, wie Sie damit einen Sticky-Header mit Logo, Menü, Suche und Warenkorb bauen und wann Sie das Plugin nicht brauchen.

Die kurze Antwort

JetBlocks ist sinnvoll, wenn Sie Header und Footer mit Elementor gestalten, aber kein Elementor Pro haben oder einzelne Bausteine wie das Hamburger-Panel oder den WooCommerce-Warenkorb flexibler brauchen. Wenn Sie Elementor Pro besitzen und mit dessen Header-Widgets zufrieden sind, ist JetBlocks weitgehend doppelt. Das Plugin funktioniert laut Crocoblock mit dem Elementor-Editor.

Was JetBlocks kann

Die offizielle Produktseite nennt diese Bausteine:

Baustein	Wofür
Site Logo	Das Logo in Header oder Footer einbinden
Navigation Menu	Das WordPress-Menü im Header ausgeben
Hamburger Panel	Ein aufklappbares Panel, das gespeicherte Vorlagen enthält, ideal fürs Handy
Suchformular	Eine Suche direkt im Header
Breadcrumbs	Den Pfad zur aktuellen Seite zeigen, optional mit Link zur Blog-Seite
Woo Shopping Cart	Den WooCommerce-Warenkorb im Header oder Footer, mit Dropdown-Option
Sticky-Abschnitte	Einen beliebigen Elementor-Abschnitt beim Scrollen sichtbar halten

Laut Änderungsprotokoll auf der Produktseite gibt es außerdem ein Formular zum Zurücksetzen des Passworts. Crocoblock fasst das Ziel so zusammen: Navigationselemente wie Hamburger-Menü, Breadcrumbs oder Suche ohne eine Zeile Code.

Wichtig zu wissen: JetBlocks liefert die Bausteine. Um einen Header für die ganze Website festzulegen, brauchen Sie zusätzlich eine Möglichkeit, Header-Vorlagen einzubinden, etwa den Theme Builder von Elementor Pro oder JetThemeCore.

Schritt für Schritt: JetBlocks einrichten

Praxisbeispiel: ein Sticky-Header für einen kleinen Onlineshop mit Logo links, Menü in der Mitte, Suche und Warenkorb rechts. Auf dem Handy ersetzt ein Hamburger-Panel das Menü.

1. Plugin installieren. Die ZIP-Datei aus Ihrem Crocoblock-Konto unter Plugins → Installieren → Plugin hochladen hochladen und aktivieren. Elementor muss aktiv sein.
2. Lizenz aktivieren. Im WordPress-Menü unter Crocoblock den Lizenzschlüssel eintragen.
3. Menü anlegen. Unter Design → Menüs das Hauptmenü mit höchstens sechs Punkten anlegen. Das Logo hinterlegen Sie unter Design → Customizer → Website-Informationen.
4. Vorlage für das Handy-Panel bauen. Unter Templates → Gespeicherte Templates eine Abschnitt-Vorlage mit dem Menü in senkrechter Anordnung, Telefonnummer und Kontaktbutton anlegen.
5. Header-Vorlage öffnen. Im Theme Builder Ihrer Wahl eine neue Header-Vorlage anlegen und in Elementor bearbeiten.
6. Bausteine einsetzen. Einen Abschnitt mit drei Spalten anlegen. Links das Site-Logo-Widget, in der Mitte das Navigation-Menu-Widget, rechts Suchformular und Warenkorb. Die JetBlocks-Widgets finden Sie über die Suche im Widget-Panel, erkennbar am Jet-Symbol.
7. Hamburger-Panel ergänzen. In der rechten Spalte das Hamburger-Panel einfügen und die Vorlage aus Schritt 4 auswählen. Über die Responsive-Einstellungen das Panel nur auf Handy und Tablet zeigen, das normale Menü nur am Desktop.
8. Sticky einschalten. In den Einstellungen des Header-Abschnitts den Sticky-Effekt von JetBlocks aktivieren.
9. Gestalten. Farben aus den globalen Vorgaben, ausreichend Abstand, beim Scrollen eventuell einen leichten Hintergrund, damit der Header über Bildern lesbar bleibt.
10. Prüfen und veröffentlichen. Die Vorlage für die gesamte Website zuweisen und auf Desktop, Tablet und Handy testen, besonders das Öffnen und Schließen des Panels.

Das Ergebnis: ein Header, der beim Scrollen sichtbar bleibt, am Handy sauber funktioniert und den Warenkorb immer in Reichweite hat.

Drei Praxisbeispiele

Hofladen mit Onlineshop im Mühlviertel. Logo, Menü, Warenkorb mit Dropdown. Kundinnen sehen beim Scrollen jederzeit, was im Korb liegt. Wer den Shop selbst aufbauen will, findet in der WooCommerce-Schulung den passenden Einstieg.

Arztpraxis in Linz. Sticky-Header mit Logo, Menü und gut sichtbarer Telefonnummer. Am Handy öffnet das Hamburger-Panel ein Menü mit Ordinationszeiten und Anfahrt.

Dokumentations-Website eines Softwarehauses in Bern. Viele verschachtelte Seiten, daher Breadcrumbs unter dem Header und eine prominente Suche. Besucher sehen immer, wo sie gerade sind.

Typische Fehler und wie Sie sie vermeiden

Zwei Header-Lösungen gleichzeitig. Wenn das Theme einen eigenen Header ausgibt und Ihre Elementor-Vorlage einen zweiten, haben Sie zwei Header übereinander. Deaktivieren Sie den Theme-Header oder nutzen Sie ein schlankes Theme wie Hello.

Sticky-Konflikte. Theme, Elementor Pro und JetBlocks können alle Abschnitte fixieren. Nutzen Sie genau eine dieser Funktionen.

Zu großer Sticky-Header. Ein fixierter Header mit 150 Pixeln Höhe frisst am Handy ein Viertel des Bildschirms. Halten Sie ihn schlank.

Warenkorb im Cache. Ein zwischengespeicherter Header zeigt womöglich einen falschen Warenkorbinhalt. Prüfen Sie, ob Ihr Cache-Plugin WooCommerce-Fragmente richtig behandelt.

Hamburger-Panel nicht getestet. Das Panel muss sich auch wieder schließen lassen, und die Links darin müssen funktionieren. Testen Sie das auf einem echten Handy.

Lohnt sich JetBlocks? Kosten und Alternativen

JetBlocks kostet als Einzellizenz laut Crocoblock $43 pro Jahr für eine Website, mit einem Jahr Updates und Support. Zeitweise zeigt die Seite einen Aktionspreis. Im Paket All-Inclusive Plus für $249 pro Jahr ist JetBlocks mit allen 23 JetPlugins enthalten. Es gilt eine 30-tägige Geld-zurück-Garantie. (Preisstand Oktober 2026 — bitte vor dem Kauf prüfen.)

Meine Einschätzung: Elementor Pro bringt Logo, Menü, Suche, Warenkorb und Sticky-Funktion selbst mit. Wenn Sie Pro haben, kaufen Sie JetBlocks nicht als Einzelplugin. Mit dem Paket bekommen Sie es ohnehin dazu.

Ohne Elementor Pro sieht es anders aus. Zusammen mit JetThemeCore als Theme Builder ergibt JetBlocks eine Header-Lösung ohne Pro-Lizenz. Wenn Ihr Menü mehr können soll als Dropdowns, ist JetMenu die Ergänzung. Den Gesamtüberblick finden Sie in der Crocoblock-Übersicht.

Wenn Sie den Weg über mehrere JetPlugins gehen wollen, ist das Paket die bessere Rechnung: Crocoblock-Pakete ansehen.

Häufige Fragen

Kann ich mit JetBlocks allein einen Header bauen?

Sie können die Bausteine gestalten. Um den Header auf allen Seiten anzuzeigen, brauchen Sie zusätzlich einen Theme Builder, etwa aus Elementor Pro oder JetThemeCore.

Wie mache ich den Header in Elementor sticky?

Mit JetBlocks aktivieren Sie den Sticky-Effekt in den Einstellungen des Abschnitts. Elementor Pro bietet eine eigene Sticky-Funktion. Nutzen Sie nur eine davon.

Funktioniert der Warenkorb mit WooCommerce?

Ja. Das Woo-Shopping-Cart-Widget zeigt den WooCommerce-Warenkorb im Header oder Footer, laut Produktseite auch als Dropdown.

Brauche ich JetBlocks, wenn ich Elementor Pro habe?

In den meisten Fällen nicht. Als Teil des Crocoblock-Pakets schadet es aber nicht, wenn Sie einzelne Bausteine wie das Hamburger-Panel bevorzugen.

Wenn Sie JetBlocks nicht allein einrichten möchten: In meiner Elementor-Schulung richte ich es mit Ihnen gemeinsam an Ihrer eigenen Website ein, remote, € 109,– pro Stunde.