Kopf- und Fußzeilen einer Website sind wesentliche Elemente. In den meisten Fällen bietet der Header Navigationslinks, die die Navigation zu verschiedenen Teilen einer Website vereinfachen. Auf der anderen Seite enthält die Fußzeile lebenswichtige Informationen , die Website - Besucher können, wie eine Geschäftsadresse oder Kontaktinformationen, erfordern ein paar ex zu erwähnen amp les.
Kopf- und Fußzeilen werden vom aktuellen Theme eines Benutzers in WordPress bereitgestellt. Diese sind in der Regel gut konzipiert und für die meisten ihrer Anwendungen geeignet. Wenn Sie Ihre Designs jedoch anpassen möchten, müssen Sie den Code ändern. Dies ist, wenn Page Builder- plugin nützlich sind. Sie können sie verwenden, um Webseitenkomponenten zu erstellen und zu ändern, ohne den Code zu kennen.
In diesem Tutorial erfahren Sie, wie Sie eine Kopf- und Fußzeile einer Website erstellen. Elementor Pro wird 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 eingeschaltet ist.
- Warum sollten Sie Elementor als Ihren 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
- Untersuchen Sie Ihre Kopf- und Fußzeilenbereiche auf Reaktionsfähigkeit.
- Dinge zum Abschluss bringen
Warum sollten Sie Elementor als Ihren Seitenersteller wählen?
Elementor ist der fortschrittlichste Seitenersteller, mit dem Benutzer Premium-Elemente verwenden können, um wunderschöne Designs und Layouts zu erstellen. Es ist sehr nützlich für Anfänger, die keine Vorkenntnisse in der Programmierung haben. Der Drag 'n' Drop-Editor in Elementor ermöglicht es Benutzern, Widgets und Elemente zu verschieben.
Elementor ist ein visueller Seitenersteller, mit dem Benutzer sehen können, wie ihre Seiten aussehen, ohne den Modus zu wechseln.
Ein weiteres überzeugendes Argument für die Verwendung von Elementor ist, dass die meisten Arbeiten ohne Kosten abgeschlossen werden können. Ihre kostenlose Edition ist mehr als in der Lage, angemessene Site-Bearbeitungsfunktionen bereitzustellen. Wir werden jedoch sowohl die kostenlose als auch die kostenpflichtige Version durchgehen, 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 hat eine große Anzahl von Vorlagen.
- Es gibt insgesamt über 90 Widgets.
- Für reaktionsschnellen Support ist keine Codierung erforderlich.
- Optionen zum Wiederherstellen und Rückgängigmachen sind verfügbar.
- 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 einzigartigen Kopfzeile für die allgemeine Anordnung Ihrer gewünschten Kopf- und Fußzeilen entscheiden. Wenn Sie sich das vorgefertigte Layout des Kopfbereichs ansehen, haben Sie möglicherweise viele Möglichkeiten.
Sie können aus verschiedenen Kopfzeilenbereichen wählen; Der gebräuchlichste und modernste Header enthält ein Website-Logo in der linken Ecke, eine Navigationsleiste in der Mitte und einen Suchleistenabschnitt rechts.
Es gibt endlose Möglichkeiten und Sie können jedes gewünschte Layout erstellen.
Ich habe die vorgefertigte Kopfzeilenvorlage Nr. 7 gewählt; Dies ist der gebräuchlichste und einfachste Ansatz zur Verwendung eines Headers auf einer WordPress-Website. Kopieren Sie den Namen der Kopfzeilenvorlage und fügen Sie ihn in Vorlagen > Kopfzeile > Suchvorlage ein > fügen Sie den kopierten Kopfzeilennamen ein .
Wenn Sie die gewünschte Header-Vorlage gefunden haben, wählen Sie „Mit Elementor bearbeiten“ und Sie werden zum Abschnitt „Header Builder“ von Elementor Pro weitergeleitet.
Lass 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 gibt Ihren Nutzern einen ersten Eindruck von Ihrer Website, egal ob sie auf Ihrer Homepage, einer Infoseite 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 bei der Förderung der Markenidentität Ihres Unternehmens helfen.
Ich verwende Funktionen wie das Firmenlogo, die Schriftart, die Farben und die allgemeine Markensprache.
Site-Navigation, Site-Suche, ein Warenkorb (für Verkaufs-Sites), Call-to-Action (CTA)-Buttons und andere Funktionen, die die Benutzererfahrung verbessern und die Konversionsraten erhöhen, finden sich alle in den Kopfzeilen.
Was genau ist eine Fußzeile?
Eine Fußzeile ist ein Abschnitt einer Webseite, der am unteren Rand der Seite angezeigt wird. Sie werden in der Regel ständig auf der gesamten Website auf allen Seiten und Beiträgen angezeigt, ähnlich wie Header.
Fußzeilen werden häufig übersehen, was eine Verschwendung von Potenzial ist, da sie auf jeder Seite der Site erscheinen. Sie sind ebenso wichtig für die Kopfzeilen.
Ihr Fußzeilendesign kann hilfreiche und wichtige Informationen wie Newsletter-Registrierung, Copyright-Informationen, Nutzungsbedingungen und Datenschutz, eine Sitemap, Kontaktinformationen, Karten, Website-Navigation und vieles mehr anzeigen, je nach den von Ihnen gewählten Einstellungen.
So erstellen Sie eine Kopfzeile
In diesem Abschnitt werden wir eine benutzerdefinierte Kopfzeile erstellen. Machen Sie sich keine Sorgen, wenn das einschüchternd erscheint; wir werden nicht bei null anfangen. Stattdessen verwenden wir die Vorlagen von Elementor Pro, die vom Designteam von Elementor entworfen wurden.
Entwickeln einer Header-Vorlage
Bewegen Sie den Mauszeiger im WordPress-Administrationsbereich ü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 Kopfzeile aus dem Dropdown-Menü, benennen Sie die Kopfzeile und klicken Sie auf „ Vorlage erstellen “:
Dadurch wird der Elementor-Editor gestartet. Danach wird Ihnen eine Liste mit Vorlagen angezeigt, aus denen Sie auswählen können. Wählen Sie also eine aus, die 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 Website fest, um es in die Kopfzeile einzufügen. Wählen Sie ein Logo aus, indem Sie auf Site Identity klicken.
Wenn Sie sich für ein Logo entschieden haben, klicken Sie auf Veröffentlichen .
Das Logo Ihrer Site sollte sich jetzt in der Kopfzeile befinden, 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ü generiert haben, wird es automatisch in die Vorlage integriert:
Hier ist unsere Menüstruktur, die Sie in der Kopfzeilenvorlage sehen können:
Wenn Sie mehr als ein Menü haben, können Sie den Inhalt bei Bedarf aktualisieren.
Sie können seine Eigenschaften wie jedes andere Widget bearbeiten.
Wenn wir weitere Elemente hinzufügen müssen, können wir unserem Header weitere Abschnitte hinzufügen:
Beginnen wir damit, einen Header und einige Social-Media-Symbole hinzuzufügen:
Danach können Sie beliebige Änderungen vornehmen. So ist unsere Bearbeitung herausgekommen:
Header-Veröffentlichung
Sie können den Header jetzt veröffentlichen, nachdem Sie ihn geändert haben. Wir verwenden den Header auf unserer gesamten Website im amp unten, also wählen wir diese Option, nachdem wir Bedingung hinzufügen ausgewählt haben:
Und hier ist ein Ex - amp le eine Seite von 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. Um eine zu erstellen, erstellen Sie eine neue Fußzeilenvorlage wie folgt:
Entscheiden Sie sich dann für eine Vorlage. Fußzeilen gibt es in verschiedenen Formen und Größen. Einige enthalten Firmeninformationen, während andere Kontaktformulare haben. Wählen Sie eine Vorlage aus, die Ihren Anforderungen entspricht.
Für unsere Website haben wir folgende Vorlage gewählt:
Fußzeilen-Änderungen
Sie sehen die Kopfzeile, sobald Sie mit der Bearbeitung beginnen (wenn 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 der Header als auch der Footer werden jetzt auf unserer Website verwendet:
Untersuchen Sie Ihre Kopf- und Fußzeilenbereiche auf Reaktionsfähigkeit.
Dies ist die wichtigste Phase, und Sie müssen sicherstellen, dass Ihre Kopf- und Fußzeilenbereiche reagieren. 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 reaktionsschnellen Schalter am unteren Rand des Elementor-Seitenleistenabschnitts können die Handy- und Tab-Versionen ändern.
Sie können die Reaktionsfähigkeit Ihrer Kopf- und Fußzeile auf verschiedene Weise testen. Für die Ex - amp - le, können Sie Tools wie Browserstack, Cross Testing verwenden und Google Resizer , um sicherzustellen , dass Ihre Web - Seiten so reagieren wie möglich sind. Sie können dies auch manuell tun, indem Sie mit verschiedenen Geräten experimentieren.
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 hat viele Funktionen, erlaubt jedoch nur einige Änderungen in den Kopf- und Fußzeilenbereichen, die schließlich mit dem Elementor Pro Page Builder behoben werden. Mit einer weitaus besseren Kontrolle über Ihre Site-Elemente können Sie die Vision Ihrer Site jetzt besser demonstrieren. 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.
