Kopf- und Fußzeilen einer Website sind wesentliche Elemente. In den meisten Fällen stellt der Header Navigationslinks bereit, die die Navigation zu verschiedenen Teilen einer Website vereinfachen. Andererseits enthält die Fußzeile wichtige Informationen, die Website-Besucher benötigen könnten, etwa eine Geschäftsadresse oder Kontaktinformationen, um nur einige amp zu nennen.
Kopf- und Fußzeilen werden vom aktuellen WordPress-Theme eines Benutzers bereitgestellt. Diese sind in der Regel gut konzipiert und für die meisten Einsatzzwecke ausreichend. Wenn Sie Ihre Themes jedoch anpassen möchten, müssen Sie den Code ändern; In diesem Fall sind Page Builder- plugin praktisch. Sie können damit Webseitenkomponenten erstellen und ändern, ohne Codekenntnisse zu benötigen.
In diesem Tutorial lernen wir, wie man eine Kopf- und Fußzeile für eine Website erstellt. Es wird Elementor Pro verwendet (da die Basisversion von Elementor nicht die wichtigsten Funktionen zum Erstellen dieser Komponenten enthält). Laden Sie also Elementor Pro herunter und stellen Sie sicher, dass es aktiviert ist.
- Warum sollten Sie Elementor als Seitenersteller wählen?
- Mit Elementor können Sie das Hauptlayout Ihrer benutzerdefinierten Kopf- und Fußzeile auswählen.
- Was ist ein Header und was macht er?
- Was genau ist eine Fußzeile?
- So erstellen Sie eine Kopfzeile
- Entwickeln einer Header-Vorlage
- Änderungen am Kopfzeilenmenü vornehmen
- Header-Veröffentlichung
- So erstellen Sie eine Fußzeile
- Entwickeln einer Fußzeilenvorlage
- Fußzeilenänderungen
- Fertiges Produkt
- Überprüfen Sie die Reaktionsfähigkeit Ihrer Kopf- und Fußzeilen.
- Die Dinge zum Abschluss bringen
Warum sollten Sie Elementor als Seitenersteller wählen?
Elementor ist der fortschrittlichste Seitenersteller, der es Benutzern ermöglicht, Premium-Elemente zu verwenden, um wunderschöne Designs und Layouts zu erstellen. Es ist sehr nützlich für Anfänger, die keine Vorkenntnisse im Programmieren haben. Mit dem Drag-and-Drop-Editor in Elementor können Benutzer Widgets und Elemente verschieben.
Elementor ist ein visueller Seitenersteller, mit dem Benutzer sehen können, wie ihre Seiten aussehen, ohne den Modus wechseln zu müssen.
Ein weiteres überzeugendes Argument für den Einsatz von Elementor ist, dass die meisten Arbeiten kostenlos erledigt werden können. Ihre kostenlose Edition bietet mehr als ausreichend Möglichkeiten zur Website-Bearbeitung. Wir gehen jedoch sowohl die kostenlose als auch die kostenpflichtige Version durch, damit Sie die für Ihre Bedürfnisse am besten geeignete auswählen können.
Im Folgenden sind einige der wichtigen Aspekte von Elementor aufgeführt, die es lohnenswert machen:
- Drag-and-Drop-Funktionalität wird unterstützt.
- Es verfügt über eine große Anzahl an Vorlagen.
- Insgesamt gibt es über 90 Widgets.
- Für den reaktionsfähigen Support ist keine Codierung erforderlich.
- Es stehen Optionen zum Wiederherstellen und Rückgängigmachen zur Verfügung.
- Automatisches Speichern ist verfügbar.
Mit Elementor können Sie das Hauptlayout Ihrer benutzerdefinierten Kopf- und Fußzeile auswählen.
Es wäre hilfreich, wenn Sie sich vor der Entwicklung einer eindeutigen Kopfzeile über die allgemeine Anordnung der gewünschten Kopf- und Fußzeilenabschnitte entscheiden würden. Ein Blick auf das vorgefertigte Layout des Kopfbereichs bietet Ihnen möglicherweise viele Möglichkeiten.
Sie können aus verschiedenen Kopfzeilenbereichen wählen; Der gebräuchlichste und modernste Header verfügt über ein Site-Logo in der linken Ecke, eine Navigationsleiste in der Mitte und einen Suchleistenabschnitt auf der rechten Seite.
Es gibt unzählige Möglichkeiten und Sie können jedes gewünschte Layout erstellen.
Ich habe mich für die vorgefertigte Header-Vorlage Nr. 7 entschieden; Dies ist der gebräuchlichste und einfachste Ansatz zur Verwendung eines Headers auf einer WordPress-Website. Kopieren Sie den Namen der Header-Vorlage und fügen Sie ihn in „Vorlagen“ > „Header“ > „Suchvorlage“ ein. Fügen Sie den kopierten Header-Namen ein .
Wenn Sie die gewünschte Header-Vorlage gefunden haben, wählen Sie „Mit Elementor bearbeiten“ und Sie werden zum Abschnitt „Elementor Pro-Header-Builder“ weitergeleitet.
Lasst uns diese Party beginnen.
Was ist ein Header und was macht er?
Der obere Teil Ihrer Webseite wird als „Website-Header“ bezeichnet. Der Header ist normalerweise auf Ihrer gesamten Website gleich. Einige Websites verwenden jedoch unterschiedliche Header für verschiedene Teile der Website.
Ihr Header-Design vermittelt Ihren Benutzern einen ersten Eindruck von Ihrer Website, unabhängig davon, ob sie auf Ihrer Homepage, einer About-Seite oder anderen individuellen Inhalten angekommen sind. Und wenn es gut gestaltet ist, wird es die Aufmerksamkeit des Benutzers auf sich ziehen und ihn dazu verleiten, weiter zu scrollen und zu lesen.
Der Header kann auch zur Förderung der Markenidentität Ihres Unternehmens beitragen.
Ich verwende Funktionen wie das Logo, die Schriftart, die Farben und die allgemeine Markensprache des Unternehmens.
Site-Navigation, Site-Suche, ein Warenkorb (für Verkaufsseiten), Call-to-Action-Schaltflächen (CTA) und andere Funktionen, die das Benutzererlebnis verbessern und die Konversionsraten erhöhen, sind alle in Kopfzeilen zu finden.
Was genau ist eine Fußzeile?
Eine Fußzeile ist ein Abschnitt einer Webseite, der am Ende der Seite angezeigt wird. 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 sie auf jeder Seite der Website erscheinen. Sie sind ebenso wichtig für die Kopfbälle.
Ihr Fußzeilendesign kann je nach den von Ihnen gewählten Einstellungen hilfreiche und wichtige Informationen wie Newsletter-Registrierung, Copyright-Informationen, Nutzungsbedingungen und Datenschutz, eine Sitemap, Kontaktinformationen, Karten, Website-Navigation und vieles mehr anzeigen.
So erstellen Sie eine Kopfzeile
In diesem Abschnitt erstellen wir einen benutzerdefinierten Header. Machen Sie sich keine Sorgen, wenn Ihnen das einschüchternd vorkommt. Wir werden nicht bei Null anfangen. Stattdessen verwenden wir die Vorlagen von Elementór Pro, die vom Designteam von Elementor entworfen wurden.
Entwickeln einer Header-Vorlage
Bewegen Sie den Mauszeiger im WordPress-Admin-Bereich über „Vorlagen“ und klicken Sie auf „Neu hinzufügen“ um unseren Header zu erstellen.
Sobald Sie weitergeleitet wurden, wird ein modales Fenster angezeigt. Wählen Sie „Header“ aus dem Dropdown-Menü aus, benennen Sie den Header und klicken Sie auf „ Vorlage erstellen “:
Dadurch wird der Elementor-Editor gestartet. Anschließend wird Ihnen eine Liste mit Vorlagen zur Auswahl angezeigt. Wählen Sie also eines aus, das Sie anspricht:
Es sollte oben im Elementor-Bearbeitungsbereich angezeigt werden, sobald Sie eine Vorlage ausgewählt haben:
Erstellen eines Logos: Der erste Schritt besteht darin, ein Logo zu erstellen. Legen Sie das Logo im Live-Editor der Site fest, um es in der Kopfzeile einzufügen. Wählen Sie ein Logo, indem Sie auf Site Identity klicken.
Wenn Sie sich für ein Logo entschieden haben, klicken Sie auf „Veröffentlichen“ .
Das Logo Ihrer Website sollte jetzt in der Kopfzeile angezeigt werden, wenn Sie die Elementor-Benutzeroberfläche aktualisieren:
Danach können Sie alle gewünschten Änderungen vornehmen.
Änderungen am Kopfzeilenmenü vornehmen
Als nächstes sollten wir das Menü ändern. Wenn Sie ein Menü erstellt haben, wird es automatisch in die Vorlage integriert:
Hier ist unsere Menüstruktur, die Sie in der Header-Vorlage sehen können:
Wenn Sie mehr als ein Menü haben, können Sie die Inhalte bei Bedarf aktualisieren.
Sie können seine Eigenschaften wie jedes andere Widget bearbeiten.
Wenn wir weitere Elemente hinzufügen müssen, können wir unserer Kopfzeile weitere Abschnitte hinzufügen:
Beginnen wir mit dem Hinzufügen einer Kopfzeile und einiger Social-Media-Symbole:
Danach können Sie beliebige Änderungen vornehmen. So ist unsere Bearbeitung geworden:
Header-Veröffentlichung
Sie können den Header nun veröffentlichen, sobald Sie mit der Änderung fertig sind. amp verwenden wir den Header auf unserer gesamten Website . Daher wählen wir diese Option aus, nachdem wir „Bedingung hinzufügen“ ausgewählt haben:
Und hier ist ein amp einer Seite unserer Live-Site:
So erstellen Sie eine Fußzeile
Entwickeln einer Fußzeilenvorlage
Der Prozess zum Erstellen einer Fußzeile ist dem Erstellen einer Kopfzeile ziemlich ähnlich. Erstellen Sie dazu eine neue Fußzeilenvorlage wie diese:
Dann entscheiden Sie sich für eine Vorlage. Fußzeilen gibt es in verschiedenen Formen und Größen. Einige enthalten Unternehmensinformationen, andere verfügen über Kontaktformulare. Wählen Sie eine Vorlage aus, die Ihren Anforderungen entspricht.
Die Vorlage, die wir für unsere Website ausgewählt haben, ist wie folgt:
Fußzeilenänderungen
Sie sehen die Kopfzeile, sobald Sie mit der Bearbeitung beginnen (sofern Sie die Bedingung festlegen, dass sie auf allen Seiten angezeigt wird).
Ändern Sie die Fußzeile nach Bedarf. So sieht unsere Überarbeitung aus:
Veröffentlichen Sie die Fußzeile, nachdem sie fertig ist:
Fertiges Produkt
So sieht das fertige Ergebnis aus. Sowohl die Kopfzeile als auch die Fußzeile werden jetzt auf unserer Website verwendet:
Überprüfen Sie die Reaktionsfähigkeit Ihrer Kopf- und Fußzeilen.
Dies ist die wichtigste Phase und Sie müssen sicherstellen, dass Ihre Kopf- und Fußzeilenbereiche responsiv sind. Da ein Menü in voller Breite normalerweise nicht für die mobile Ansicht geeignet ist, müssen Sie wissen, wie Ihr Design auf dem mobilen Bildschirm angezeigt wird. Die reaktionsfähigen Schalter unten im Elementor-Seitenleistenbereich können die Mobil- und Tab-Versionen ändern.
Sie können die Reaktionsfähigkeit Ihrer Kopf- und Fußzeile auf verschiedene Weise testen. Sie können amp Tools wie Browserstack, CrossBrowser Testing und Google Resizer verwenden, um sicherzustellen, dass Ihre Webseiten so reaktionsschnell wie möglich sind. Sie können dies auch manuell tun, indem Sie mit verschiedenen Geräten experimentieren.
Die Dinge zum Abschluss bringen
Ich hoffe, dieser Leitfaden hat Ihnen bei der schnellen Entwicklung Ihrer einzigartigen Kopf- und Fußzeilenabschnitte mit Elementor Pro geholfen. WordPress verfügt über viele Funktionen, erlaubt jedoch nur wenige Änderungen in den Kopf- und Fußzeilenbereichen, die schließlich mit dem Elementor Pro-Seitenersteller behoben wurden. Da Sie die Elemente Ihrer Website weitaus besser steuern können, können Sie die Vision Ihrer Website jetzt besser veranschaulichen. Darüber hinaus wurde die Funktionalität von Elementor durch die Verwendung kostenloser Add-ons verbessert, sodass Benutzer ihre Websites mit erweiterten Funktionen anpassen können.
