Ein Gastbeitrag von Nikolaj Jäger von TemplateMonster
Die Besitzer von Websites legen häufig keinen Wert darauf, wie der Footer aussieht, weil sich dieses Element am unteren Ende einer Seite befindet. Es gilt, dass nicht jeder Benutzer bereit ist, die Seite bis zum Ende runterzuscrollen. Wer so glaubt, liegt zwar nicht ganz falsch. Denn der sichtbare Bereich einer Website bzw. above the fold wird tatsächlich häufiger von Besuchern gelesen. Aber ein richtig gestalteter Footer kann auch viel: die Aufmerksamkeit des Nutzers auf sich ziehen, ihn auf der Webseite länger halten und gezielt durch die Seiten führen. Deshalb sollte die Rolle des Footers nicht unterschätzt werden.
Im Footer werden normalerweise Informationen wie Kontaktdaten, Impressum, AGB oder Social Media-Buttons platziert. Außerdem befinden sich im Footer-Bereich aufgelistete Links zu anderen Seiten, was den Benutzern die Navigation durch die Website erleichtert. Im Footer von Timme Hosting zum Beispiel gibt es auch ein Kontaktformular:
In dieser Anleitung erkläre ich, wie du selbst einen ähnlichen Footer mit Elementor für eine WordPress-Website erstellen kannst.
Die modernen Page-Builder benötigen normalerweise keine Code-Bearbeitung, aber unterscheiden sich stark in der Funktionalität und Usability. Viele davon kommen nicht besonders bequem daher. Der Elementor Page-Builder zeichnet sich durch eine enorme Benutzerfreundlichkeit aus und kann ganz kostenlos verwendet werden. Elementor ist kompatibel mit jedem WordPress Theme, deshalb kannst du es problemlos installieren und nutzen. Dieses Plugin ist in der WordPress-Bibliothek zum Download verfügbar:
Die Gratis-Version erlaubt dir, einfache Footer mit wenigen Klicks zu erstellen. Wenn aber du eine komplizierte Struktur brauchst, dann kommst du ohne zusätzliche Tools, welche die Funktionalitäten von Elementor erweitern, nicht aus. Gerade wie es in meinem Fall ist. Denn in diesem Tutorial möchte ich den Footer von Timme Hosting wiederholen.
Das WordPress Theme Monstroid2, das ich verwende, ist bereits mit benötigten Elementor Plugins JetThemeCore und JetBlocks ausgestattet.
Zuerst lege ich Menüs für den Footer an. Ich gehe in WordPress zu Design > Menüs > und klicke auf erstelle ein neues Menü:
Ich gebe dem Menü einen Namen und drücke auf Menü erstellen. Dann klicke ich auf Individuelle Links und trage Elemente meines zukünftigen Footers ein. URL ist die Adresse einer Webseite und bei Link-Text geht es um den Namen der Menüpunkte. Ich erstelle 5 Blöcke, wie im Footer von Timme Hosting. Sobald ich fertig bin, klicke ich Menü speichern an:
Danach gehe ich zu Monstroid2 > My Library > Footer:
Dann erstelle ich einen neuen Footer. Dafür klicke ich auf Add New, wähle Footer, nenne mein Template und klicke auf Create Template:
Wenn wir einen Blick auf unser Muster werfen, entdecken wir die folgenden Blöcke. Ich gebe diesen die Namen in Elementor:
Jetzt klicke ich auf das rote Kreuz und füge die Abschnitte hinzu:
Jetzt steht es bevor, die ausgewählten Strukturen auszufüllen:
Ich habe die Elements Schritt-für-Schritt hinzugefügt:
Vergiss aber nicht die Menüs auszuwählen, die du bereits erstellt hast:
Der zukünftige Footer:
Also, ich habe alle Elemente erstellt, die sich im Footer von Timme Hosting finden. Jetzt muss ich sie bearbeiten und die Grenze von Menüs festlegen, Überschriften und Texte hinzufügen sowie Icons ändern.
1. Ich möchte die Überschriften Webhosting, Shop-Hosting, Schnellkontakt, Server und Unternehmen eingeben. Dafür klicke ich auf den Titel:
Den Stil bearbeite ich nachher. Jetzt möchte ich den Footer gestalten und Elemente anpassen:
Zunächst stelle ich die Grenzen von Menüs ein. Dafür klicke auf das Menü > Erweitert > Margin. Ich klicke auf das Zeichen Verknüpfen und gebe den Wert in Pixel für den Außenabstand RECHTS an. Meine Werte sind hier 50-90 PX:
Mein Ergebnis:
Wie du bemerken kannst, sollen “Server” und “Unternehmen” nebeneinander stehen. Um das zu erzielen, füge ich das Element Abstand über und unter der Überschrift “Server” hinzu. Hier ist das Ergebnis:
Jetzt bearbeite ich den Text:
Nachdem ich den Footer gestaltet habe, kann ich mich an die Anpassung machen. Bevor ich die Farben editieren kann, soll ich zuerst den Hintergrund bearbeiten. Ich klicke auf den Abschnitt bearbeiten: Stil > Hintergrundtyp > Klassisch > Farbe > #282828. Ich verwende diese Farbe für alle Abschnitte:
Jetzt bearbeite ich die Farbe für Überschriften, Menüs und den Text.
Danach bearbeite ich die Farben für den Hover-Effekt - eine Änderung, die ausgelöst wird, wenn der Mauszeiger über das Element fährt:
Ich klicke auf jedes Menü: Stil > Main Menu Items > Hover > Text Color > #A1C639:
Ich gebe die Farbe des Icons an: Stil > Icon > Primäre Farbe > #A1C639:
Dann klicke ich auf die Soziale Netzwerke-Icons:
Stil > Icon > Farbe > Custom:
Stil > Icon bei Mausberührung > Sekundäre Farbe > #A1C639
Ich wähle das Kontaktformular: Stil > Submit Button.
Ich verwende die Schriftart “Signika” für die Überschriften und “Lato” - für die Menüs und den Text. Um die Schrift von Elementen zu ändern, wähle ich den Stil der Überschrift. Stil > Typografie:
Jetzt bearbeite ich die Menüs. Ich klicke auf das Element > Stil > Main Menu Items > Typografie:
In diesem Schritt lege ich die Position für die Menüs fest. Dafür klicke auf Menü > Stil > Menu Container > Menu Items Alignment > Start:
Ich klicke ich auf den Text > Stil > Ausrichtung > Center. Dann richte ich die Typografie ein:
Ich wähle Soziale Netzwerke-Icons > Ausrichtung > Links:
Du kannst auch eigene Icons hinzufügen. Dafür solltest du auf + ELEMENT HINZUFÜGEN klicken, ein SVG-Icon hochladen und den Link einfügen.
Ich fange mit Soziale Netzwerke-Icons an. Ich wähle das Element und gehe auf Stil > Icon. Dann setzte ich die Werte wie folgt:
Dann gehe ich zu Icon bei Mauszeigerkontakt und füge die Rahmenfarbe #A1C639 hinzu:
Es gibt noch ein Element im Kontaktformular, das einzurichten ist. Ich wähle das Element, gehe zu Stil, dann zu Submit Button:
Normal > Typografie:
Ich schließe das Typografie-Fenster und fahre fort:
Dann klicke ich auf SPEICHERN.
Um den erstellten Footer auf der Website zu aktivieren, musst du zu Einstellungen gehen und Entire Site wählen:
Mein Footer ist nun auf der Webseite zu sehen:
Wie du sehen kannst, braucht man keine HTML-, CSS- oder sonstige Kenntnisse, um einen Footer mit vielen Blöcken selbst zu erstellen. Der Elementor Page-Builder in Kombination mit Plugins eröffnet dir unglaubliche Möglichkeiten, um deine Website nach deinem Wunsch zu individualisieren. Nimm dir einfach etwas Zeit zum Experimentieren und bald schaffst du es, die Seitenbereiche wie Footer nicht nur ansprechend, sondern auch schnell zu gestalten.
Die robots.txt ist ein mächtiges Werkzeug zur Steuerung der Webcrawler-Zugriffe auf Ihre Website. Eine sorgfältig erstellte robots.txt-Datei trägt nicht nur dazu bei, Ihre SEO-Bemühungen zu optimieren, sondern verbessert auch die die Effizienz und Sicherheit Ihrer Website.
Am 27.09.2024 findet bereits zum siebten Mal die von JTL organisierte E-Commerce-Messe JTL Connect statt. Auf dem Gelände eines ehemaligen Paketzentrums XPOST in Köln werden bis zu 3.700 Besucher erwartet. Treffen Sie uns vor Ort und fragen nach unserer Messeaktion!
Testen Sie uns 14 Tage kostenlos Jetzt testen
