So erstellen und passen Sie Kopf- und Fußzeilen an (Elementor Page Builder)

Elementor_Header_Footer_Wpmet

Ist Ihnen jemals aufgefallen, dass Sie bei der Verwendung eines WordPress-Themes oder eines Seitenerstellers nicht so viel Kontrolle über die Elementor-Kopfzeile und die Elementor-Fußzeile haben, wie Sie es sich wünschen würden? 

Möchten Sie die Hauptkopf- und Fußzeile Ihres aktuellen WordPress-Themes ändern? 

Warum machen Sie es nicht selbst mit Elementor? 😃

Hier zeigen wir es Ihnen So erstellen Sie mit Elementor benutzerdefinierte Elementor-Kopf- und Elementor-Fußzeilen Schritt für Schritt. Es sind keinerlei Programmierkenntnisse erforderlich ElementsKit.

Wir stellen ElementsKit vor

Mit dem All-in-One-Add-on ElementsKit für Elementor enthält jede Menge Elementor-Widgets, -Module und -Funktionen Das reicht aus, um Ihnen das fortschrittlichste und dennoch benutzerfreundlichste Erlebnis beim Erstellen von Websites zu bieten, das Sie je hatten.

🤷🏻‍♀️ Warum brauche ich eine Kopf- und Fußzeile auf meiner Website?
Die Kopf- und Fußzeile sind wesentliche Bestandteile jedes Website-Designs. Es ist nicht übertrieben, das zu behaupten spielen eine wichtige Rolle bei der Etablierung einer positiven Benutzererfahrung durch Erleichterung der Website-Navigation. Darüber hinaus sind sie auch nützlich, um die Marke der Website zu bewerben und CTAs anzuzeigen.

Was ist ein Elementor-Header?

Im Grunde ist das oberen Teil Ihrer Webseite wird als Website-Header bezeichnet. Der Header ist normalerweise auf Ihrer gesamten Website gleich. Einige Websites verwenden unterschiedliche Header für verschiedene Teile der Website mit entsprechender Theme-Unterstützung.

Das Design Ihrer Elementor-Header-Vorlage vermittelt Ihren Benutzern einen ersten Eindruck von Ihrer Website, unabhängig davon, ob sie auf Ihrer Homepage, einer About-Seite oder einem anderen individuellen Inhalt angekommen sind. Und wenn Ihre Elementor-Header-Vorlage gut gestaltet ist, Es wird die Aufmerksamkeit des Benutzers erregen und ihn dazu verleiten, weiter zu scrollen und zu lesen.

Der Elementor-Header hilft auch dabei, die Markenidentität Ihres Unternehmens zu fördern. Durch seine nützlichen Funktionen wie das Logo, die Schriftart, die Farben und die allgemeine Markensprache des Unternehmens.

Site-Navigation, Site-Suche, ein Warenkorb (für E-Commerce-Sites), Call-to-Action-Schaltflächen (CTA) und andere Funktionen, die das Benutzererlebnis verbessern und die Konversionsraten erhöhen, sind alles in den Kopfzeilen zu finden.

🔔 Wissen Sie?
Für jede Art von Website ist ein Mega-Menü ein Muss. Es erleichtert die Navigation und hilft Menschen, die benötigten Informationen mit nur wenigen Klicks zu finden.

Möchten Sie mehr wissen? Vergessen Sie nicht, unseren neuesten Blog durchzulesen So fügen Sie Elementor Mega-Menüelemente in WordPress hinzu

Was ist eine Elementor-Fußzeile?

Eine Elementor-Fußzeile ist ein Abschnitt einer Webseite, der erscheint unten auf der Seite. Sie werden in der Regel ständig auf der gesamten Website, auf allen Seiten und in allen Beiträgen angezeigt, ähnlich wie Header.

Fußzeilen werden häufig übersehen, was eine Verschwendung von Potenzial darstellt, da die Fußzeile auf jeder Seite der Website erscheint. Sie sind ebenso wichtig für die Kopfbälle.

Ihr Fußzeilen-Layout-Design kann hilfreiche und wichtige Informationen anzeigen B. Newsletter-Anmeldung, Copyright-Informationen, Nutzungsbedingungen und Datenschutz, eine Sitemap, Kontaktinformationen, Karten, Website-Navigation und vieles mehr, abhängig von den von Ihnen gewählten Einstellungen.

Was benötigen Sie, um eine Elementor-Kopfzeile und eine Fußzeile zu erstellen?

Was genau benötigen Sie nun, um eine Elementor-Kopfzeile und Fußzeile zu erstellen? Nun, das müssen Sie einfach tun Zwei Dinge

1. Elementor installieren:

  • Gehen Sie einfach zu Ihrem WordPress-Admin-Dashboard → Plugins → Neu hinzufügenund geben Sie „Elementor” in das Suchfeld ein.
  • Installieren und aktivieren.

Eine kurze Erinnerung: Die Elementor-Fußzeilen- und Kopfzeilen-Builder-Module sind im Lieferumfang von Elementor Pro enthalten. Wenn Sie also Ihre Elementor-Kopfzeile (zusammen mit der Elementor-Fußzeile) bearbeiten und anpassen möchten, sollten Sie sich für Folgendes entscheiden Pro-Version (welches ist $49/Jahr für eine Website) oder entscheiden Sie sich für Option 2.

2. Installieren Sie ElementsKit, einen Elementor-Header-Footer-Builder: 

So installieren Sie das ElementsKit, ein All-in-One-Add-on für Elementor, müssen Sie das gleiche Verfahren wie oben beschrieben befolgen. 

  • Gehen Sie einfach zu Ihrem WordPress-Admin-Dashboard → Plugins → Neu hinzufügenund geben Sie „ElementsKit” in das Suchfeld ein.
  • Installieren und aktivieren.

Warum ElementsKit?
ElementsKit-Modul zum Erstellen von Kopf- und Fußzeilen enthält eine Reihe von Überraschungen, mit denen Sie Ihre Elementor-Kopfzeile (und die Elementor-Fußzeile) ganz nach Ihren Wünschen bearbeiten und anpassen können. Es enthält außerdem mehrere Kopf- und Fußzeilenvorlagen von Elementor, mit denen Sie Ihre Kopf- und Fußzeile mit nur wenigen Klicks erstellen können. Darüber hinaus ermöglicht es Ihnen Erstellen Sie mehrsprachige Websites in WordPress. Deshalb wird es von mehr als anerkannt und aktiv genutzt 1 Million aktive Benutzer.

Was das Kopf- und Fußzeilenmodul von ElementsKit so besonders macht?

ElementsKit All-in-One-Addon für Elementor hat seit seiner Einführung auf dem WordPress-Markt an Popularität gewonnen. Wir haben und werden uns immer mit den Anforderungen unserer Benutzer auseinandersetzen und ständig daran arbeiten, die Dinge einfacher und besser zu machen!

Kopf- und Fußzeilenmodule von ElementsKit gibt es sowohl als kostenlose als auch als kostenpflichtige Version. Neben der Kopf- und Fußzeile von Elementor verfügen wir über unzählige weitere Module, Funktionen und Widgets.

Laden Sie Ihr All-in-One-Add-on für Elementor herunter

Mit anderen Worten, ElementsKit hat eines der besten Mega-Menü-Builder sowie Elementor Kopf- und Fußzeilen-Builder Module in WordPress.

Ein weiterer lobenswerter Teil von ElementsKit sind die vorgefertigten Vorlagen. Es ist eines der beliebtesten und vollständig anpassbaren Add-Ons für Elementor.

Neben den Vorlagen verfügt es auch über eine enorme Menge an kostenlosen und Premium-Funktionen:

  • 8+ einzigartige Module 
  • Über 70 kostenlose und Premium-Elemente 
  • Über 30 fertige Seiten
  • Über 500 fertige Abschnitte

ElementsKit ist ein Ort, an dem Sie mehrere Tools zum Erstellen von Websites an einem Ort erhalten. Es bietet Ihnen außerdem die Möglichkeit, alle Funktionen problemlos anzupassen.

Einer der Hauptgründe für den Erfolg von ElementsKit ist Seine Funktionen werden im Laufe der Zeit regelmäßig aktualisiert. Mit ElementsKit erhalten Sie ein vollständiges Paket an Ressourcen zum Erstellen von Websites. 

Es beinhaltet auch Parallaxenfiltereffekte die Ihnen ein professionelles Erlebnis für Ihre Webbesucher bieten. 

Das ElementsKit stellt die höchste Anzahl an Modulen und Funktionen dar, die jeder anwenden kann, um in kürzester Zeit eine bessere Website zu erstellen.

So erstellen Sie eine Elementor-Kopfzeile (oder Elementor-Fußzeile) mit ElementsKit

Das Erstellen und Bearbeiten der Kopf- und Fußzeile in WordPress mit ElementsKit ist in nur wenigen einfachen Schritten erledigt. Bevor Sie jedoch Header erstellen, müssen Sie zunächst ein Mega-Menü erstellen. Anschließend können Sie über unser Navigationsmenü-Widget Ihre Menüdetails in Ihren Elementor-Header einfügen. 

WordPress-Kopfzeile (oder Fußzeile) erstellen:

Um mit dem Bau zu beginnen, müssen Sie zuerst zu Ihrem gehen WordPress-Dashboard Und Klicken Sie auf > ElementsKit. Danach Klicken Sie auf > Kopfzeile und Fußzeile.

So fügen Sie Kopf- und Fußzeilen in Elementor mit ElementsKit – Elementor Header Template hinzu
Kopf- und Fußzeile, ElementsKit

Sie gelangen zur Seite zum Erstellen von Kopf- und Fußzeilen. Dann klick Neue hinzufügen um den Namen Ihrer Elementor-Header-Vorlage und andere Details einzurichten. 

Klicken Sie auf Neue Vorlage hinzufügen, ElementsKit – Elementor-Header-Vorlage
Klicken Sie auf Neue Vorlage hinzufügen, ElementsKit

Um eine Kopf- oder Fußzeile zu erstellen und zu bearbeiten, müssen Sie denselben Anweisungen folgen. Nach dem Klicken auf Neue hinzufügen Taste a Vorlageneinstellungen Die Registerkarte wird geöffnet.

Vorlageneinstellungen, ElementsKit – Elementor-Header-Vorlage
Vorlageneinstellungen, ElementsKit

In dem Sie Eingaben machen müssen: Titel, Typ (Kopf- oder Fußzeile) und Bedingungen. Sie können beides auswählen Kopf- oder Fußzeile dass Sie auf der gesamten Website, auf einer einzelnen Seite oder im Archiv platziert werden möchten. Danach müssen Sie auf klicken Aktivierung Taste. 

Sie haben Ihre Kopf- (oder Fußzeile) erfolgreich erstellt. Jetzt ist es an der Zeit, sie anzupassen!

Passen Sie die WordPress-Kopfzeile (oder Fußzeile) an:

Jetzt können Sie Ihren Elementor bearbeiten Header Um eine Vorlage (oder Fußzeile) zu erstellen, müssen Sie darauf klicken Bearbeiten mit Elementor Taste. Danach können Sie endlich Ihre Kopf- (oder Fußzeile) in Ihre Website integrieren. 

Elementor-Bearbeitungsschaltfläche, ElementsKit – Elementor-Header-Vorlage
Elementor-Bearbeitungsschaltfläche, ElementsKit

Nachdem Sie mit der Elementor-Schaltfläche auf Bearbeiten geklickt haben, gelangen Sie zum Elementor-Dashboard. Dann sehen Sie drei Symbole wie dieses: 

ElementsKit-Widget-Schaltfläche – – Elementor-Header-Vorlage
ElementsKit-Widget-Schaltfläche

Klicken Sie einfach auf das ElementsKit-Symbol und eine Elementor-Vorlagenbibliothek von ElementsKit wird angezeigt, in der Sie drei haben Optionen: Vorlage, Seiten, Und Abschnitte

Für Kopfzeile:

Klicken Sie dann auf Abschnitte um die perfekte Elementor-Header-Vorlage zu erhalten. Zum besseren Verständnis klicken Sie links auf „Kategorie“, um den gewünschten Bereich zu finden. Im Wählen Sie Kopfzeile aus Abschnitt sehen Sie alle Arten von Standard-Header-Vorlagen. Wählen Sie nun ein beliebiges Vorlagendesign aus und erleben Sie die Magie.

Denken Sie daran, dass Sie alle Elementor-Header-Fußzeilen-Layouts von ElementsKit nach Ihren Wünschen anpassen können.

Aktivieren des Navigationsmenüs, ElementsKit-Kopfzeilen-Fußzeilen-Builder
Aktivieren des Navigationsmenüs, ElementsKit

Nachdem Sie nun die gewünschte Vorlage ausgewählt haben, wird in Ihrer Kopfzeilenvorlage ein Navigationsmenüsymbol angezeigt.

Danach sehen Sie Ihren Elementor Header Der Titel, den Sie über Ihr WordPress-Dashboard hinzugefügt haben, wird auf dem angezeigt Menübereich auswählen. Und wenn Sie einfach auf den Titel der Kopfzeile klicken, werden alle Ihre Mega-Menüpunkte sichtbar.

Durch Klicken auf das Augensymbol in Elementor können Sie eine Vorschau Ihrer Kopfzeile anzeigen. 

Elementor-Header, ElementsKit
Elementor-Header, ElementsKit

Für Fußzeile:

Bis auf eine Ausnahme sind die Integration von Kopf- und Fußzeile gleich. Um eine Fußzeile zu erstellen, müssen Sie die Fußzeilenvorlage aus der Suchkategorie von ElementsKits auswählen, Ihre Daten eingeben und schon kann es losgehen, ganz einfach! 

Elementor-Fußzeile, ElementsKit
Elementor-Fußzeile, ElementsKit

Herzlichen Glückwunsch, Sie haben es endlich geschafft, Ihrer Website eine Kopf- und Fußzeile hinzuzufügen. 👏

Möchten Sie die anderen Alternativen zur Fußzeilenanpassung erkunden? Schauen Sie sich an 👉👉: So bearbeiten Sie die Fußzeile in WordPress.

Zusätzliche Ressourcen

3 Beispiele für Website-Header-Vorlagen

ElementsKit gibt Ihnen die Möglichkeit, auf seine zahlreichen Header-Layouts zuzugreifen. Hier sind die drei besten Header, mit denen Sie auf Ihrer Website viel bewirken können. 

1. Der begehrteste Header für die Navigation:

Header-Beispiel 1, ElementsKit – Elementor-Header-Vorlage
Header-Beispiel 1, ElementsKit

Dieser Seitenkopf eignet sich am besten für Websites mit einer komplizierteren Navigation. Es gibt eine Suchleiste sowie ein zentrales Navigationsmenü. Es gibt auch Suchelemente zur einfacheren Navigation. 

Auf der linken Seite sehen Sie als Bonus das Firmenlogo sowie die Firmenfarben. Dieser professionell aussehende Header vermittelt ein klassisches, sachliches Flair.

2. Überschrift für mobilfreundliche Restaurants:

Header-Beispiel 2, ElementsKit – Elementor-Header-Vorlage
Header-Beispiel 2, ElementsKit

Das Restaurant verfügte über einen Navigationsbereich in der Kopfzeile, und die Option „Jetzt kaufen“ und die Warenkorbansicht werden auf der anderen Seite durch große Symbole hervorgehoben. Sie können auch eine obere Leiste mit Social-Media-Schaltflächen hinzufügen.

3. Der unprätentiöse Header: 

Header-Beispiel 3, ElementsKit - - Elementor-Header-Vorlage
Header-Beispiel 3, ElementsKit

Bei dem Design kommt leuchtendes Lavendel zum Einsatz, das vor einem klaren weißen Hintergrund steht. Es vermittelt ein Gefühl von Sauberkeit und Ordnung. Wenn Sie die Farben ändern oder stattdessen Farbverläufe verwenden möchten, dauert es nur wenige Sekunden, bis Sie Ihr Ziel erreicht haben.

3 Beispiele für Website-Fußzeilenvorlagen

Mit ElementsKit erhalten Sie mehrere Fußzeilen. Hier sind die besten drei Fußzeilen, die auf Ihrer Website einen tollen Eindruck hinterlassen können. 

1. Fußzeile der eleganten Agentur:

Elementor-Fußzeilenbeispiel 1, ElementsKit
Fußzeilenbeispiel 1, ElementsKit

Dieses Fußzeilendesign hat seine eigene Persönlichkeit. Eine klare Darstellung des Inhalts mit abstraktem Hintergrund. Diese Fußzeile ist ausschließlich für Agenturen gedacht. Durch die einfache Navigation legt dieses Fußzeilenlayout den Schwerpunkt auf Design.

2. Für Mobilgeräte optimierte Restaurant-Fußzeile:

Fußzeilenbeispiel 2, ElementsKit
Fußzeilenbeispiel 2, ElementsKit

Der breite Bereich der Fußzeile ist vollgepackt mit einem dunklen Thema, was ihn zu einem Blickfang macht. Durch den dezenten dunklen Hintergrund können Speisen besser dargestellt werden. Die Kontaktdaten und der Standort werden nochmals an prominenter Stelle angezeigt.

3. Die extra lange – SaaS-Fußzeile:

Fußzeilenbeispiel 3, ElementsKit
Fußzeilenbeispiel 3, ElementsKit

Diese Fußzeile hat ein wunderschön detailliertes Aussehen mit einem königsblauen Hintergrund. Es verfügt über ein Logo und Detailspalten in der Mitte sowie einen Navigator, Kontakt, Newsletter und soziale Links auf der rechten Seite. Eine perfekte Option für SaaS- oder Softwareunternehmen. 

📃 Schnelle Notiz
Vergessen Sie nicht, mobile Geräte zu berücksichtigen, wenn Sie eine Kopf- oder Fußzeile mit standardmäßiger Fallback-Theme-Unterstützung entwickeln, und verstehen Sie, wie sich das Design für diese unterscheiden kann.

FAQ

Schauen Sie sich einige häufig gestellte Fragen an:

Wie ändere ich die Header-Größe in WordPress?

Sie können die Kopfzeilengröße auf der Registerkarte „Stile“ des Blocks ändern. Wählen Sie dazu zunächst die Kopfzeile aus. Gehen Sie dann zur Registerkarte „Stile“ und dort finden Sie eine Option namens „Typografie“. Unter „Typografie“ können Sie die Größe der Kopfzeile auswählen.

Wie gestaltet man einen Header in WordPress?

Um Ihren Header zu gestalten, müssen Sie ihn zuerst auswählen. Gehen Sie dann auf der rechten Seite zu „Block“ und klicken Sie auf die Registerkarte „Stile“. Hier finden Sie Farbanpassungen, Typografie und andere Gestaltungsoptionen für Ihren Header.

Abschluss

ElementsKit, ein Kopf- und Fußzeilen-Builder von Elementor, hat es jedem Besitzer einer WordPress-Website leicht gemacht Durch das Hinzufügen einer Kopf- und Fußzeile wird eine Website organisierter und subtiler. Es verbessert nicht nur das Benutzererlebnis, sondern verbessert auch den Webverkehr. 

Sie müssen nie wieder darauf warten, dass ein Entwickler Ihre header.php-Datei ändert, zu einem anderen Theme wechseln, nur um ein Header-Logo zu verschieben, oder Stunden damit verbringen, die CSS-Kopf- und Fußzeilenelemente Ihrer Website anzupassen. Mit ElementsKit ist das Erstellen von Kopf- und Fußzeilen ein Kinderspiel. 

Holen Sie sich noch heute ElementsKit Pro und holen Sie mit verschiedenen Möglichkeiten das Beste aus Ihrer Website heraus.

Bitte hinterlassen Sie unten einen Kommentar, wenn Sie Fragen zur Kopf- und Fußzeile von ElementsKit oder seinen Funktionen haben.

Wenn Ihnen dieser Artikel gefallen hat, werden Sie sicherlich noch weitere hilfreiche Tipps und Blogs finden, wenn Sie sich bei uns anmelden WPmet-Community Folge uns auf Facebook/Twitter. Vergessen Sie bitte nicht, unseren Kanal zu abonnieren Youtube für nützliche Tutorials.

Kommentare

  1. Avatar von Alp

    Hallo,

    Ich habe Elementkits verwendet, um einen Header für meine Website zu erstellen.

    Leider erscheint die Kopfzeile auf allen Seiten, außer der wichtigsten: der Homepage!

    Ich habe keine Ahnung, woran das liegen könnte. Könnten Sie mir vielleicht dabei helfen?
    Danke schön,

    1. Avatar von Sanjida
      Sanjida

      Hallo Alp,
      Zunächst einmal entschuldige ich mich für die verspätete Antwort 😔

      Ist die von Ihnen gewählte Homepage zufällig auf einer Elementor-Leinwand aufgebaut? Wenn ja ... Dann müssen Sie es in „ ändern.Standard' oder 'Elementor in voller Breite

      Bitte folgen Sie der folgenden URL 👇 für eine bessere Anleitung:
      https://elementor.com/help/using-elementors-canvas-page-template/

      Stellen Sie außerdem sicher, dass die Kopfzeile auf „Bedingter gesamter Satz

      Vielen Dank,
      Sanjida

  2. Avatar von Clayton
    Clayton

    Bitte helfen Sie. Ich habe gerade dieses Pro-Plugin gekauft und kann für bestimmte Seiten keine spezifischen Header festlegen. Ich stelle die Einstellung für einzelne Seiten ein und es wird nur die Standardseite angezeigt. Die benutzerdefinierten Kopfzeilen werden für die einzelnen Seiten, auf die ich sie eingestellt habe, nicht angezeigt.

  3. Avatar von Stefan
    Stefan

    Ich habe ein Problem mit der Anzeige der Kopf- und Fußzeile in wp-admin. Sie sind irgendwie versteckt. Ich sehe, dass sie irgendwie in der Datenbank vorhanden sind, weil ich oben auf der Kopf- und Fußzeile von ElementsKit „Alle (2)“ sehe.

  4. Avatar von Stefan
    Stefan

    Es war WPML. Durch Deaktivieren der Übersetzung auf elementorskit_template wird das Problem behoben

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert