Mit Elementor für WordPress einen Footer erstellen

In dieser Anleitung erkläre ich, wie du selbst einen ähnlichen Footer mit Elementor für eine WordPress-Website erstellen kannst.

Warum Elementor?

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.

Womit anfangen?

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:

Struktur wählen und Elemente hinzufügen

Wenn wir einen Blick auf unser Muster werfen, entdecken wir die folgenden Blöcke. Ich gebe diesen die Namen in Elementor:

1. Mega Menus und Überschriften
2. Contact Form 7
3. Soziale Netzwerke-Icons
4. Text-Editor
5. Icon
6. Trenner

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:

• 4x Überschriften
• 5x Mega-Menu
• 1x Contact Form 7
• 1x Soziale Netzwerke-Icons
• 1x Text-Editor
• 1x Icon
• 1x Trenner

Vergiss aber nicht die Menüs auszuwählen, die du bereits erstellt hast:

Der zukünftige Footer:

Elemente bearbeiten

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.

Footer gestalten:

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:

Farben bearbeiten

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.

• Überschrift: Stil > Textfarbe > #999999
• Text-Editor: Stil > Textfarbe > #999999
• Trenner: Stil > Farbe > #999999
• Contact Form 7: Form Texts > Stil > Color > #999999 (den Button werde ich weiter anpassen)
• Stil > Mega Menu Items > Text Color > #999999

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:

• Primäre Farbe > #282828
• Sekundäre Farbe > #999999

Stil > Icon bei Mausberührung > Sekundäre Farbe > #A1C639

Schriften bearbeiten und Elemente positionieren

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:

• Größe > 19
• Schriftschnitt > 700
• Ich wende diese Werte auf alle Überschriften an

Jetzt bearbeite ich die Menüs. Ich klicke auf das Element > Stil > Main Menu Items > Typografie:

• Schriftfamilie > Lato
• Größe > 16 für alle vertikale Menüs und 13 für das Impressum-Menü
• Schriftschnitt > 400
• Zeilenhöhe> 0.1

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:

• Schriftfamilie > Lato
• Größe > 16
• Schriftschnitt > 400
• Zeilenhöhe > 1.4

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.

Tasten, Icon und Trenner anpassen

Ich fange mit Soziale Netzwerke-Icons an. Ich wähle das Element und gehe auf Stil > Icon. Dann setzte ich die Werte wie folgt:

• Größe > 20
• Abstände > 15
• Rahmentyp > Durchgezogen
• Breite > 2,2,2,2
• Eckenradius > 30,30,30,30

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:

• Schriftfamilie > Lato
• Größe > 16
• Schriftschnitt > 700
• Umwandlung > Normal

Ich schließe das Typografie-Fenster und fahre fort:

• Rahmentyp > Durchgezogen
• Breite > 2,2,2,2
• Border Radius > 22,22,22,22

1. Ich reduziere die Größe des Icons: Stil > Größe > 30.
2. Jetzt passe ich den Trenner an: Stil > Breite > 2:

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:

Fazit

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.