WordPress Schulung: Seiten individuell mit Elementor erstellen

Wenn du eine professionelle und individuelle WordPress-Seite erstellen möchtest, aber nicht von komplexem Code überwältigt werden willst, dann ist der Elementor-Editor dein ideales Werkzeug. Dieses Tutorial führt dich Schritt für Schritt von null an, wie du mit Elementor Seitenlayouts gestaltest und Seiten-Elemente baust, damit deine WordPress-Website schöner und funktionaler wird. Dies ist ein Tutorial zum praktischen Erstellen und Bearbeiten von WordPress-Seiten von Grund auf. Wir starten mit dem WordPress-Backend und legen neue Seiten an, bauen nacheinander Header, Hauptinhalt und Footer auf und nutzen die visuellen Elementor-Komponenten, um Layout, Inhalte und Styles anzupassen. Dies ist nicht nur eine grundlegende Anleitung, sondern auch ein praktischer Übungsprozess. Obwohl die meisten Schritte reibungslos funktionieren, ist die Entwicklung von Seitenelementen oft mit Unwägbarkeiten verbunden. Man kann auf Plugin-Konflikte oder Style-Anomalien stoßen. Deshalb brauchst du neben dem Umgang mit Elementor auch Beobachtungsgabe und Problemlösungskompetenz, um dieses mächtige Tool wirklich zu meistern. Egal, ob du ein WordPress-Anfänger bist oder deine Seitenbearbeitungsfähigkeiten verbessern möchtest, dieser Artikel bietet dir praktische Anleitungen, um Webseiten effizient zu designen und Elemente zu erstellen. Nun werfen wir einen Blick auf das Inhaltsverzeichnis dieses Artikels und steigen dann in das Thema ein.

Um den Lesern ein effizientes Lernen und Nachschlagen zu ermöglichen, hat der Autor das Tutorial „WordPress Schulung: Mit dem Elementor-Editor von Grund auf Seiten individuell erstellen“ systematisch gegliedert und ein übersichtliches Inhaltsverzeichnis mit Ankerlinks erstellt. Jedes Kapitel zeigt die Struktur des Artikels übersichtlich und erlaubt es dir, mit einem Klick direkt zu interessanten Abschnitten zu springen, jederzeit zurückzugehen oder tiefer in einzelne Themen einzutauchen. Ganz gleich, ob du den kompletten Lernweg von Anfang bis Ende gehen willst oder während der Arbeit schnell zu bestimmten Schritten navigieren möchtest – dieses Verzeichnis sorgt für einen flüssigen und effizienten Lernprozess. Das Inhaltsverzeichnis im Detail lautet wie folgt:

• WordPress-Backend: Neue Seite erstellen
  1. Seitentitel eingeben
  2. Benutzerdefiniertes URL-Suffix für die Seite festlegen
  3. Seitenhierarchie einstellen
  4. Neue WordPress-Seite veröffentlichen
  5. Seite mit Elementor bearbeiten
• Erstellen einer Header-(Kopfzeilen- und Navigationsleisten-)Template-Datei im Elementor Theme Builder
  1. Zugang zum Elementor Theme Builder
  2. Neue Template-Datei im Elementor Header-Template-Management hinzufügen
  3. Header-Template-Stil auswählen oder komplett individuell gestalten
  4. Layout von Header und Navigationsleiste mit Elementor-Containern gestalten
  5. Elemente und Inhalte von Header und Navigationsleiste bearbeiten und erstellen
  6. Header-Template-Datei veröffentlichen und Anzeigeoptionen festlegen
• Erstellen des Seitenhauptbereichs mit Elementor und Hinzufügen von Inhaltselementen
  1. Banner-Bereich
  2. Bereich für Geschäfts- oder Leistungsbeschreibung
  3. Produkt- und Dienstleistungsbereich
  4. Bereich zur Darstellung der Kernvorteile der Produkte
  5. Markengeschichten-Bereich
  6. Aktuelle Informationen Bereich
• Erstellen einer Footer-(Fußzeilen-)Template-Datei mit Elementor
  1. Gängige Layoutformen des Footers
  2. Häufig verwendete Komponenten im Footer
  3. Veröffentlichung und Anzeigeeinstellungen der Footer-Template-Datei
  4. Präsentation der mit dem Elementor-Editor erstellten fertigen Seite

一、WordPress-Backend: Neue Seite erstellen

Bevor du den Elementor-Editor offiziell zur Erstellung von WordPress-Seiten nutzt, ist der erste Schritt sicherzustellen, dass die Seite selbst bereits im WordPress-Backend erstellt wurde. Der Pfad zum Seitenmanagement in WordPress ist wie oben gezeigt. In diesem Kapitel beginnen wir mit der Seitenverwaltungsfunktion von WordPress und erklären detailliert, wie man eine neue Seite anlegt und die notwendigen Informationen wie Seitentitel, URL-Einstellungen, Seitenhierarchie und Veröffentlichung der Seite ausfüllt. Die Seitenerstellung ist die Grundlage für den gesamten Website-Aufbau. Eine korrekte Einstellung der Seitenattribute verbessert nicht nur die spätere Bearbeitungseffizienz, sondern vermeidet auch Layout- oder Kompatibilitätsprobleme bei der Nutzung von Elementor. Sobald die Seite vorbereitet ist, können wir nahtlos in den Elementor-Bearbeitungsmodus wechseln und mit dem Layout und Design der Seitenelemente beginnen.

1、Seitentitel eingeben

Im WordPress-Backend gelangst du zur Seitenverwaltung. Klicke oben auf die Schaltfläche „Neue Seite“. Danach befindest du dich im neuen Seitenbearbeitungsfenster, wie im obigen Bild dargestellt. Im rot markierten Titel-Eingabefeld gibst du den Seitentitel individuell ein. In WordPress dient der Seitentitel nicht nur als Anzeige im Seitenmanagement, sondern erscheint auch im Frontend-Code als Text im title-Tag. Deshalb sollte die individuelle Eingabe auch unter SEO-Gesichtspunkten bedacht werden.

2、Benutzerdefiniertes URL-Suffix

Wie im Bild gezeigt, klicke nach Eingabe des Seitentitels auf den rechts im roten Rahmen markierten „Link“-Ankertext. Das System öffnet ein Eingabefeld zur individuellen URL-Einstellung. Standardmäßig verwendet WordPress den Seitentitel automatisch als URL-Suffix. Diese Standardmethode entspricht jedoch oft nicht den SEO-Richtlinien, da der Titel Nicht-englische Zeichen oder zu lange Texte enthalten kann, was sowohl die Lesbarkeit als auch die Suchmaschinenoptimierung beeinträchtigt. Die ideale URL sollte möglichst kurz sein und englische Wörter verwenden, um die Lesbarkeit und SEO-Freundlichkeit zu erhöhen.

3、Seitenhierarchie einstellen

Die Seitenhierarchie definiert die Zugehörigkeit zwischen WordPress-Seiten. Im Unterschied zu Beiträgen, die Kategorien zugeordnet werden, unterstützen Seiten eine Hierarchiestruktur. Zum Beispiel repräsentiert die URL-Struktur szlogic/web-design die Webdesign-Seite von „Logic Digital Technology“. Wenn diese Seite als übergeordnete Seite gesetzt wird, wird die URL der Unterseiten zu szlogic/web-design/dein-seiten-url-suffix. Um die Hierarchie einzustellen, klicke im Bearbeitungsfenster rechts im Bereich „Seite“ auf die Option „Übergeordnet“. Es öffnet sich ein Auswahlfenster, in dem die passende übergeordnete Seite gewählt werden kann. Das System passt automatisch die URL-Struktur an, um die Hierarchie widerzuspiegeln. Die Seitenhierarchie ist optional; wenn keine übergeordnete Seite benötigt wird, kann die Standardeinstellung beibehalten werden.

4、Neue WordPress-Seite veröffentlichen

Nachdem alle notwendigen Seiteninformationen eingegeben wurden, kann die Seite veröffentlicht werden. Erst nach der Veröffentlichung ist die Seite Teil der Website-Struktur und über die URL erreichbar. Klicke auf den rot markierten „Veröffentlichen“-Button im Bild. Das System zeigt eine Kontrollseite vor der endgültigen Veröffentlichung. Ein weiterer Klick auf „Veröffentlichen“ schließt den Vorgang ab.

5、Seite mit Elementor bearbeiten

Die Einstellung „Seite mit Elementor bearbeiten“ ist der letzte Schritt nach dem Anlegen einer neuen WordPress-Seite. Beim ersten Betreten des Elementor-Bearbeitungsmodus für die neue Seite muss man im Seitenverwaltungsmodus den rot markierten Button „Mit Elementor bearbeiten“ anklicken, um den Bearbeitungsmodus zu starten. Danach kann man später auch direkt über die Frontend-Seite in den Elementor-Modus wechseln, ohne das Backend zu benutzen. Der Grund dafür ist, dass beim ersten Zugriff Elementor die Bearbeitungsrechte für diese Seite autorisiert, weshalb die Aktion zunächst im Backend erfolgen muss.

二、Erstellen einer Header-(Kopfzeilen- und Navigationsleiste)-Vorlagendatei im Elementor Theme Builder

Im WordPress-Webseite sind die Kopfzeile (Header) und die Navigationsleiste entscheidende globale Elemente, die nicht nur den gesamten Stil der Webseite beeinflussen, sondern auch direkt die Benutzererfahrung beim Surfen prägen. Da die Kopfzeile üblicherweise auf allen Seiten gleich sein muss, können wir mit Hilfe der Theme-Builder-Funktion von Elementor eine wiederverwendbare Header-Vorlage erstellen, die auf der gesamten Webseite einheitlich angezeigt wird. In diesem Kapitel erklären wir, wie man mit der Vorlagendateiverwaltung von Elementor von Grund auf eine Kopfzeile entwirft, die den Anforderungen der Webseite entspricht. Du wirst lernen, wie du gängige Elemente wie Logo, Navigationsmenü und Suchfeld hinzufügst und diese mit der Drag-&-Drop-Funktion von Elementor individuell anpasst. Nach dem Design der Vorlage zeigen wir dir, wie du die Vorlage veröffentlichst und in den Anzeigeeinstellungen „Über die gesamte Seite anwenden“ wählst, damit die Kopfzeile automatisch auf allen Seiten angezeigt wird. Mit diesem Wissen kannst du nicht nur eine schöne und funktionale Kopfzeile gestalten, sondern auch spätere Änderungen mit nur einem Klick aktualisieren, ohne jede einzelne Seite bearbeiten zu müssen. Lass uns jetzt beginnen, deine individuelle Kopfzeile für deine Webseite zu erstellen!

1、Einstieg in den Elementor Theme Builder

Wenn du in deinem Browser eine bereits veröffentlichte Seite aufrufst und im selben Browser in deinem WordPress-Backend angemeldet bist, erscheint oben auf der Seite eine Verwaltungsleiste, wie im obigen Bild dargestellt. Fährst du mit der Maus über den Ankertext „Mit Elementor bearbeiten“, erscheint ein Dropdown-Menü von Elementor. Der Zugang zum „Theme Builder“ verbirgt sich hier. Klicke auf den im roten Rahmen markierten Link „Theme Builder“, um zur Verwaltungsseite der Theme-Vorlagendateien von Elementor zu gelangen.

2、Neue Vorlage im Header-Verwaltungsbereich von Elementor erstellen

Nachdem du die Startseite des Theme Builders geöffnet hast, klickst du in der linken Vorlagenkategorie oben auf das Verzeichnis „Header“. Du gelangst zur Verwaltungsoberfläche für Header-Vorlagendateien, wie im obigen Bild gezeigt. Ohne weitere Schritte klickst du rechts oben im roten Rahmen auf die Schaltfläche „Add New“, um eine neue Header-Vorlagendatei zu erstellen.

3、Auswahl eines Header-Vorlagenstils oder komplett individuelle Gestaltung

Nach dem Klick auf „Add New“ im Header-Verwaltungsbereich springt die Seite automatisch zum Auswahlfenster für Elementor Header-Module, wie im Bild oben gezeigt. Elementor bietet dort einige vorgefertigte Header-Vorlagenstile zur direkten Verwendung an. Du kannst direkt einen dieser Header-Stile auswählen und laden oder oben rechts im Auswahlfenster auf das „X“ klicken, um das Fenster zu schließen und eine komplett individuelle Kopfzeile bzw. Navigationsleiste zu erstellen.

4、Layout des Headers und der Navigationsleiste mit Elementor-Containern

Im Bearbeitungsmodus der Header-Vorlage verwendet Elementor Container für das Layout des Headers, wie im Bild oben dargestellt. Auf Code-Ebene bestehen alle Webseitenstrukturen aus blockartigen Elementen (meist in HTML als div-Tags), die man als „Box-Modell“ kennt. Elementor als visueller Page Builder folgt diesem Prinzip ebenfalls, bietet aber eine visuelle Oberfläche und Container-Komponenten, die helfen, das Grundlayout zu erstellen und andere Elemente ordentlich darin anzuordnen. Bevor du Header- und Navbar-Elemente hinzufügst, solltest du die Struktur sorgfältig planen und die Container-Komponenten für das Layout verwenden. Um Container flexibel einzusetzen, musst du die hier erläuterten Parameter und die Verschachtelung von Containern gut beherrschen. Container sind das Kernstück des Layouts, bestimmen die Anordnung des Inhalts und beeinflussen die Responsive-Darstellung sowie die Benutzererfahrung. Außerdem korrespondiert die Anzahl der Container mit der Zahl der Seitenelemente. Normalerweise kommt in einen Container je ein Element. Häufig genutzte Header-Komponenten sind Site Logo, WordPress Menü und Suche, also das Webseiten-Logo, das WordPress-Menü und das Suchfeld.

(1) Container-Breiten-Einstellung

Wie im Bild gezeigt, bestimmt die Breite des Containers den Anzeigebereich der Seitenelemente. Viele Anfänger stoßen auf das Problem, dass Elemente nicht die volle Breite einnehmen, was meist daran liegt, dass die Container-Breite nicht auf „Volle Breite“ eingestellt ist und der Innenabstand (Padding) des Containers nicht auf 0 gesetzt wurde. Sollten Elemente mit Rand (Margin) gewünscht sein, kann man „Boxed Layout“ wählen; für eine volle Bildschirmbreite muss die Container-Breite auf „Volle Breite“ gestellt und der Innenabstand wie weiter unten beschrieben auf 0 gesetzt werden. Nur wenn beide Einstellungen korrekt sind, füllt der Inhalt die gesamte Bildschirmbreite aus.

(2) Einstellung von Innen- und Außenabständen des Containers

Wie im Bild zu sehen, befinden sich die Einstellungen für Außen- (Margin) und Innenabstände (Padding) des Elementor-Containers unter dem Tab „Erweitert“. Im oberen Bereich können Außenabstände für alle vier Seiten eingestellt werden. Standardmäßig sind Margin und Padding miteinander verknüpft, sodass alle vier Seiten denselben Wert haben. Um einen einzelnen Wert zu ändern, klicke auf das rote „Verknüpfung“-Symbol, um die Sperre aufzuheben, und gib den gewünschten Wert für die entsprechende Richtung ein. Außerdem kannst du über das „px“-Symbol oberhalb des Sperr-Icons die Maßeinheit ändern, z. B. auf em, rem oder %. Standardmäßig setzt Elementor den Padding-Wert auf 10 px; sobald die Sperre aufgehoben wird, stellt das System den Wert automatisch auf 0 zurück, sodass du ihn nach Bedarf manuell anpassen musst.

(3) Methoden zur Verschachtelung von Containern

Wie im obigen Bild gezeigt, gibt es zwei Methoden, um Elementor-Container zu verschachteln. Beide Methoden sind effektiv, nämlich Drag & Drop und Kopieren & Einfügen im Navigator. Drag & Drop ist intuitiver und eignet sich gut für das Erstellen von Strukturen von Grund auf, während Kopieren & Einfügen praktisch ist, um Container schnell auf Basis eines bestehenden Layouts anzupassen und wiederzuverwenden.

Drag & Drop eines Untercontainers

Wie im Bild dargestellt, kann man den Container direkt aus der linken Elementor-Komponentenleiste per Drag & Drop in den Ziel-Elterncontainer ziehen. Dadurch wird der neue Container automatisch dem Elterncontainer untergeordnet und es entsteht eine hierarchische Struktur.

Kopieren und Einfügen von Containern

Im Navigator-Panel auf der rechten Seite der Elementor-Oberfläche kann man zunächst den zu verschachtelnden Container auswählen und kopieren. Anschließend wählt man den Ziel-Elterncontainer aus, macht einen Rechtsklick und fügt den kopierten Container ein. Der eingefügte Container wird dann als Untercontainer dem Elterncontainer zugeordnet.

(4) Einstellung der Ausrichtung von Untercontainern

Die Ausrichtung der Untercontainer wird vom Elterncontainer bestimmt. Die Einstellung befindet sich unter dem Reiter „Layout“, wie im roten Rahmen im Bild gezeigt. Im Bereich „Ausrichtung“ kann die Anordnung der Container festgelegt werden, z.B. horizontal oder vertikal, und die genaue Richtung angepasst werden. Bei horizontaler Ausrichtung werden die Untercontainer nebeneinander angeordnet, entweder von links nach rechts oder von rechts nach links, je nach Einstellung. Bei vertikaler Ausrichtung werden die Untercontainer übereinander gestapelt, entweder von oben nach unten oder von unten nach oben. Diese Richtungsoptionen beeinflussen direkt das Layout der Untercontainer innerhalb des Elterncontainers und ermöglichen eine flexible Gestaltung sowie eine verbesserte Tiefenwirkung des Designs.

5、Bearbeitung und Erstellung der Elemente für Header und Navigationsleiste

Nachdem die grundlegende Layoutstruktur für Header und Navigationsleiste mit Containern erstellt wurde, müssen nun konkrete Elemente hinzugefügt werden, damit die Navigation und Markenpräsentation vollständig wird. Elementor bietet mehrere Komponenten für den Header an, wobei Site Logo (Seitenlogo), WordPress Menu (Navigationsmenü) und Search (Suchfeld) die drei am häufigsten genutzten und praktischsten Komponenten sind. Durch Drag & Drop dieser Komponenten in die entsprechenden Container und das Hochladen sowie Einrichten der nötigen Materialien entsteht eine voll funktionsfähige Header-Struktur. Der obige Screenshot zeigt beispielsweise, wie der Blogger das Logo-Material in die Site Logo-Komponente hochgeladen und die Anzeigeoptionen für das WordPress Menu (Navigationsmenü) eingestellt hat.

6、Veröffentlichung der Header-Vorlagendatei und Festlegung der Anzeige-Bedingungen

(1) Veröffentlichung der Header-Vorlagendatei

Nach dem Layout des Headers mit Elementor-Containern sowie dem Hinzufügen der häufig genutzten Komponenten und Hochladen der Materialien kann die Header-Vorlage veröffentlicht und auf den Seiten angewendet werden. Im Elementor-Bearbeitungsmodus befindet sich die Schaltfläche „Veröffentlichen“ unten in der linken Seitenleiste, rot markiert im Bild. Nach einem Klick darauf öffnet sich ein Fenster zur Einstellung der Anzeigelogik, in dem Nutzer definieren können, wo die Header-Vorlage angewendet werden soll.

(2) Einstellung der Anzeige-Bedingungen für die Header-Vorlage

Im Fenster für die Anzeigelogik, wie im Bild gezeigt, kann der Nutzer auswählen, ob der Header auf der gesamten Webseite, auf bestimmten Seiten, Artikelkategorien oder unter anderen benutzerdefinierten Bedingungen angezeigt werden soll. Da die Header-Vorlage ein globaler Bestandteil der WordPress-Webseite ist, muss sichergestellt werden, dass sie auf allen Seiten wirksam ist. Wie vom Blogger im Bild vorgegeben, wird in der Anzeigelogik „Include > Entire Site“ ausgewählt, was bedeutet, dass die Header-Vorlage auf allen Seiten der gesamten Webseite angewendet wird. Nach der Auswahl klickt man auf „Save&Close“, um die Einstellungen zu speichern und das Fenster zu schließen. Das System wendet die Header-Vorlage automatisch auf alle Seiten der Webseite an.

三、 Erstellung des Hauptseitenlayouts und Hinzufügen von Inhaltselementen mit Elementor

Nachdem das Layout für den Header und die Navigationsleiste abgeschlossen ist, geht es nun darum, den Hauptinhalt der Seite aufzubauen. Ähnlich wie im vorherigen Kapitel „Layout von Header und Navigation mit Elementor-Containern“ basiert auch das Design des Hauptbereichs auf den Container-Komponenten von Elementor. Der Unterschied besteht darin, dass der Hauptbereich in der Regel reichhaltigere Inhaltselemente enthält, wie Text, Bilder, Icons, Videos, Buttons und Formulare – all diese Elemente sind in Elementor als Komponenten verfügbar. Im praktischen Einsatz genügt es, die Anpassung der Containerbreite, die Einstellung von Innen- und Außenabständen sowie die Verschachtelung von Untercontainern flexibel zu beherrschen, um vielfältige Seitenlayouts umzusetzen. Beispielsweise ermöglichen passende Spaltenlayouts eine übersichtliche Inhaltsverteilung, und die Kombination aus anpassbarer Breite und Abstandseinstellungen sorgt dafür, dass die Seite auf unterschiedlichen Bildschirmgrößen gut aussieht. Dies ist eine der Stärken von Elementor: Nutzer können ohne Programmierkenntnisse vielfältige Seitenstrukturen frei gestalten.

Daher ist bei der Gestaltung des Hauptinhalts eine sinnvolle Planung der Containerstruktur entscheidend. Eine klar gegliederte Containerhierarchie gewährleistet nicht nur eine ansprechende Gestaltung, sondern verbessert auch die Responsive-Fähigkeit, sodass die Webseite auf verschiedenen Geräten optimal dargestellt wird. Im Folgenden erklärt der Blogger Schritt für Schritt, wie man mit Elementor-Containern den Hauptbereich von oben nach unten layoutet und passende Komponenten einsetzt, um die Seite lebendig und vielschichtig zu gestalten!

1、Bannerbereich

Der Bannerbereich benötigt in der Regel nur eine einzige Komponente, nämlich das Slides-Widget von Elementor. Das Slides-Widget realisiert eine Bild-Slideshow auf der Seite und bietet integrierte Einstellungen für Titel, Text und Links. Daher sind im Bannerbereich keine mehrfach verschachtelten Container notwendig, es genügt, einen einzelnen Container ganz oben einzufügen.

(1) Übliche Parameter-Einstellungen des Slides-Widgets

Hintergrund-Einstellungen

Wie im Bild gezeigt, öffnet sich nach dem Ausklappen des Tabs „Carousel“ der Bereich für die Hintergrundparameter, der im Bild rot markiert ist. Hier kann man den Hintergrund für den Slideshow-Bereich hochladen, einschließlich Hintergrundbild und Hintergrundfarbe. Unter dem Tab „Content“ oben lassen sich Titel, Beschreibung und Button-Text eingeben sowie die URL für den Button festlegen.

Inhaltspositionierung

Im Bereich der Slides-Widget-Parameter unter dem Tab „Style“ kann die benutzerdefinierte Positionierung der Inhalte eingestellt werden. Von oben nach unten lassen sich die folgenden Parameter anpassen: Inhaltsbreite, Innenabstand, horizontale Ausrichtung, vertikale Ausrichtung und Textausrichtung. Mit diesen Einstellungen lässt sich die Anordnung von Titel, Beschreibungstext und Button flexibel gestalten.

Textstil-Einstellungen

Die Textstil-Einstellungen befinden sich ebenfalls unter dem Tab „Style“, wie oben im Bild dargestellt. Die rot markierten Texttypen (Titel, Beschreibung, Button) können jeweils ausgewählt werden, um im sich öffnenden CSS-Stilbereich Schriftgröße, Farbe und weitere Stileigenschaften anzupassen.

2、Bereich zur Beschreibung der Geschäftstätigkeit

Die Komponenten im Bereich zur Beschreibung der Geschäftstätigkeit können flexibel an die konkreten Anforderungen des Seitenlayouts angepasst werden. Allgemein gilt: Je vielfältiger die Elemente im Beschreibungsbereich, desto mehr Komponenten werden benötigt. Im Gegensatz zum oben erwähnten Slides-Widget im Bannerbereich gibt es für die anderen Seitenbereiche keine feste Komponentenzahl; die Zusammenstellung erfolgt je nach Inhalt. Das oben gezeigte Beispiel des Geschäftsbereichs nutzt lediglich eine Titel-Komponente und eine Button-Komponente, was das Design übersichtlich und klar hält. Im Folgenden erklärt der Blogger die typischen Parameter dieser beiden Komponenten, um den Lesern bei der praktischen Anwendung zu helfen.

(1) Häufig verwendete Einstellungen der Überschriften-Komponente

Einstellungen unter dem Tab „Inhalt“ der Überschriften-Komponente

Nachdem man die Überschriften-Komponente im Elementor Navigator ausgewählt hat, zeigt der linke Einstellungsbereich standardmäßig den Tab „Inhalt“ an, wie im Bild oben dargestellt. Dieser Tab enthält hauptsächlich drei wichtige Einstellungen: Eingabefeld für den Überschrifteninhalt, Eingabefeld für den Überschriften-Link sowie die Einstellung des HTML Hn-Tags. Die Eingabe des Überschrifteninhalts ist verpflichtend, da sie den Text bestimmt, der auf der Seite angezeigt wird. Das Link-Eingabefeld ist optional und hängt vom jeweiligen Bedarf ab; in den meisten Fällen wird der Überschrift kein Link hinzugefügt. Die Einstellung des HTML Hn-Tags ist für die SEO-Optimierung besonders wichtig, denn die korrekte Auswahl von H1, H2, H3 usw. hilft Suchmaschinen, die Seitenstruktur zu erkennen. Eine sinnvolle Vergabe verbessert die Lesbarkeit der Seite und das Ranking. Daher sollte man beim Bearbeiten der Überschriften-Komponente neben der genauen Inhaltseingabe auch die HTML-Tags entsprechend der Seitenstruktur und SEO-Anforderungen sorgfältig einstellen.

Stil-Einstellungen unter dem Tab „Stil“ der Überschriften-Komponente

Falls man bisher noch nicht verinnerlicht hat, wo die Stil-Einstellungen bei Elementor-Komponenten zu finden sind, gibt der Blogger hier einen kleinen Tipp: Alle Stil-Einstellungen befinden sich im „Stil“-Tab des jeweiligen Komponenten-Einstellungsbereichs. Obwohl die spezifischen Optionen je Komponente variieren, ist der Pfad immer derselbe. Am Beispiel der Überschriften-Komponente, wie im Bild rot markiert, umfassen die häufig genutzten Stil-Einstellungen Textausrichtung, Textfarbe und Typografie. Unter Typografie kann man Schriftart, Schriftgröße, Schriftstärke, Zeilenhöhe und weitere Eigenschaften anpassen, um das visuelle Erscheinungsbild der Überschrift an das Gesamtdesign der Seite anzupassen. Hat man diesen Mechanismus einmal verstanden, findet man sich auch bei der Anpassung von Buttons, Bildern oder anderen Komponenten-Stilen schneller zurecht.

(2) Häufig verwendete Einstellungen der Button-Komponente

Einstellungen unter dem Tab „Inhalt“ der Button-Komponente

Die häufig genutzten Einstellungspunkte im „Inhalt“-Tab der Button-Komponente sind im Bild rot markiert: Text, Link und Icon. Von diesen drei sind Text und Link zwingend notwendig. Der Text definiert den Namen des Buttons, daher ist die Texteingabe Pflicht. Der Link ist ebenfalls erforderlich, da ein Button ohne Link keine Funktion hat. Die Einstellung des Icons ist optional und richtet sich nach dem eigenen Designwunsch. Wenn kein Icon benötigt wird, kann die Standardeinstellung beibehalten werden. Möchte man ein Icon hinzufügen, klickt man auf den entsprechenden Button, um die Elementor-Icon-Bibliothek zu öffnen, aus der man ein Icon auswählen oder eine eigene Icon-Datei hochladen kann.

Stil-Einstellungen unter dem Tab „Stil“ der Button-Komponente

Der „Stil“-Tab der Button-Komponente bietet zahlreiche Einstellungsmöglichkeiten, wie im Bild zu sehen. Im Vergleich zur Überschriften-Komponente sind die Stiloptionen für Buttons umfangreicher und erlauben eine präzise Gestaltung des visuellen Erscheinungsbilds und der Benutzerinteraktion. Zunächst gibt es die Positionierung, die bestimmt, wie der Button innerhalb seines Containers ausgerichtet wird (zentriert, links- oder rechtsbündig). Die Typografie-Einstellungen sind ähnlich wie bei anderen Komponenten und dienen der Anpassung von Schriftart, -größe, -gewicht etc. Die Textfarbe lässt sich für den Normalzustand und den Hover-Zustand (Mouseover) separat definieren, um gute Lesbarkeit und visuelles Feedback zu gewährleisten.

Darüber hinaus kann man die Rundung der Button-Ecken einstellen, um zwischen eckigen, abgerundeten oder komplett runden Buttons zu wählen. Der Box-Schatten verleiht dem Button einen Schatteneffekt, der für mehr Plastizität sorgt und die Klickaufforderung verstärkt. Schließlich bestimmt die Innenabstandseinstellung (Padding) den Abstand zwischen dem Text und dem Button-Rand. Eine angemessene Anpassung optimiert die Größe und das optische Gleichgewicht des Buttons. Durch die kombinierte Nutzung dieser Stileinstellungen kann man Buttons gestalten, die sowohl ästhetisch ansprechend als auch benutzerfreundlich sind.

3、Produkt- und Servicebereich

Die Container-Verschachtelung im Produkt- und Servicebereich ist komplexer und vielschichtiger als bei den zuvor beschriebenen Bereichen. Im Bild sieht man rechts einen Untercontainer, der die Galerie-Komponente enthält, in der drei Bilder zu Produkten oder Dienstleistungen gezeigt werden. Jedes Bild ist mit Text versehen, um die visuelle Darstellung und die Erklärung des Inhalts zu verbessern. Im linken Untercontainer werden Überschriften- und mehrere Button-Komponenten kombiniert, um klare Textanweisungen und Interaktionen zu ermöglichen

Die Galerie-Komponente bietet verschiedene Layout- und Einstellungsoptionen, wie im linken Bereich des Bildes zu sehen ist. Man kann die Bildanordnung, Spaltenanzahl, Abstände, Linktypen u.a. anpassen. In diesem Beispiel ist die Galerie auf vier Spalten eingestellt und nutzt Lazy Load (verzögertes Laden), um die Seitenleistung zu verbessern. Die Überschrift im linken Untercontainer verwendet eine große Schriftart für eine deutliche visuelle Wirkung. Die darunter angeordneten Buttons dienen als Navigationshilfen zu verschiedenen Produkt- und Servicekategorien. Farbe, Rahmenstil und Text der Buttons lassen sich im „Stil“-Tab weiter anpassen, um den Gesamtstil der Seite zu ergänzen. Während der Blogger oben schon ausführlich die Parameter- und Stil-Einstellungen für Überschriften- und Button-Komponenten erläutert hat, folgt nun eine detaillierte Erklärung der Galerie-Komponente, um ihre Parameter und Stiloptionen zu verstehen und flexibler für die Bildpräsentation nutzen zu können.

(1) Einstellungen unter dem Tab „Inhalt“ der Galerie-Komponente

Im Tab „Inhalt“ bietet die Galerie-Komponente mehrere zentrale Einstellungsmöglichkeiten, um die Bildanzeige flexibel zu konfigurieren. Zunächst kann im „Type“ (Typ)-Menü die Darstellungsform der Galerie gewählt werden, beispielsweise „Single“ (Einzelbild) oder „Grid“ (Raster), um unterschiedlichen Seitenlayouts gerecht zu werden. Danach folgt der Bereich zur Bildauswahl, der die aktuell hinzugefügten Bilder anzeigt. Nutzer können über das Plus-Symbol neue Bilder hochladen oder nicht benötigte entfernen. Die Option „Order By“ (Sortierung) legt die Reihenfolge der Bilder fest, z. B. nach Standard oder Zufall. Die Funktion „Lazy Load“ (Verzögertes Laden) kann aktiviert oder deaktiviert werden, um die Seitenperformance zu verbessern, was besonders bei Galerien mit vielen Bildern nützlich ist.

Die „Layout“-Option bestimmt die Anordnung der Bilder, im Beispiel oben ist „Grid“ (Raster) ausgewählt. „Columns“ (Spalten) stellt die Anzahl der Spalten der Galerie ein und passt so die Bildanordnung an unterschiedliche Seitenbreiten an. „Spacing“ (Abstand) regelt die Zwischenräume zwischen den Bildern; Nutzer können diesen über einen Schieberegler vergrößern oder verkleinern, um die visuelle Wirkung zu optimieren. Unter „Link“ kann festgelegt werden, wie sich Bilder beim Anklicken verhalten, z. B. als Link zur Mediendatei, damit Nutzer das Originalbild sehen, oder als Verweis auf eine bestimmte Seite. Die Option „Lightbox“ ermöglicht die Aktivierung eines Popup-Fensters zur Bildanzeige, was die Benutzererfahrung verbessert. Schließlich steuert „Aspect Ratio“ (Seitenverhältnis) die Proportionen der Bildanzeige; der Blogger hat hier 9:16 eingestellt, um die Bilder in einem hochformatigen Säulenstil darzustellen. Mit diesen Einstellungen lässt sich die Galerie optimal an das Design und die Anforderungen der Webseite anpassen und ihre visuelle Wirkung steigern.

(2) Einstellungen unter dem Tab „Stil“ der Galerie-Komponente

Im Tab „Stil“ bietet die Galerie-Komponente zahlreiche Optionen zur Anpassung des Erscheinungsbilds. Im Bereich „Image“ (Bild) können Nutzer Rand, Rundungen und Hover-Animationen der Bilder einstellen, um die visuelle Präsentation zu verbessern. Hier lässt sich zwischen dem Zustand „Normal“ und „Hover“ (Mouseover) wechseln und für beide verschiedene Stile definieren. Im Normalzustand können „Border Color“ (Randfarbe), „Border Width“ (Randstärke) und „Border Radius“ (Randradius) eingestellt werden, um das Aussehen des Bildrands zu steuern. Zudem sind CSS-Filter verfügbar, mit denen Helligkeit, Kontrast, Sättigung und weitere Effekte angewendet werden können, um mehr Tiefe zu schaffen.

Im Hover-Zustand lassen sich interaktive Effekte wie „Hover Animation“ (Hover-Animation) aktivieren, wobei verschiedene Animationen zur Verfügung stehen, die das Bild bei Mausberührung dynamisch verändern. Die „Animation Duration“ (Animationsdauer) bestimmt die Geschwindigkeit der Animation, um ein flüssiges Nutzererlebnis sicherzustellen. Außerdem gibt es die Optionen „Overlay“ (Überlagerung) und „Content“ (Inhalt), mit denen Überlagerungseffekte und Textanzeigen auf den Bildern individuell angepasst werden können, um die visuelle Gestaltung weiter zu verfeinern. Mit diesen Einstellungsoptionen kann das Gesamterscheinungsbild der Galerie flexibel an den Stil und die Interaktionsanforderungen der Webseite angepasst werden.

4、Bereich zur Hervorhebung der Kernvorteile des Produkts

Der Bereich zur Darstellung der Kernvorteile des Produkts verwendet dieselben Komponenten wie der zuvor vorgestellte „Geschäftsbeschreibungsbereich“, mit dem einzigen Unterschied, dass hier dem Container zusätzlich ein Hintergrundbild hinzugefügt wurde. Dieser Punkt führt ein neues Wissensthema ein, weshalb der Blogger in diesem Abschnitt erklärt, wie man einem Container ein Hintergrundbild hinzufügt. Die Parameter- und Funktionseinstellungen für Überschriften-, Texteditor- und Button-Komponenten können wie beim „Geschäftsbeschreibungsbereich“ geübt und angewendet werden.

(1) Methode zum Hinzufügen eines Hintergrundbildes zum Container

Um in Elementor einem Container ein Hintergrundbild zuzuweisen, muss man im Container den Tab „Stil“ auswählen. Zunächst wählt man den Container, dem man das Hintergrundbild hinzufügen möchte, und wechselt im linken Einstellungsbereich zum „Stil“-Tab. Dort klappt man den Bereich „Hintergrund“ auf und sieht die Option „Hintergrundüberlagerung“. Im Hintergrundtyp wählt man die Bild-Option und lädt ein neues Bild hoch oder wählt ein Bild aus der Mediathek aus. Nach Auswahl kann die Bildanzeige weiter angepasst werden. Die Bildauflösung kann als „Original“ belassen oder nach Bedarf verändert werden. Im Bereich „Position“ wählt man eine geeignete Ausrichtung, etwa „Zentriert“, um das Bild immer mittig anzuzeigen. Die Option „Hintergrund fixieren“ legt fest, ob das Bild mit der Seite mitscrollt oder fixiert bleibt; wählt man „Fixiert“, bleibt das Bild im Sichtfenster stehen. Die Einstellung „Hintergrund wiederholen“ sollte meist auf „Nicht wiederholen“ stehen, um zu verhindern, dass kleine Bilder gekachelt werden. Schließlich sorgt die Option „Größe“ mit „Abdecken“ dafür, dass das Bild den gesamten Container ausfüllt, ohne Leerflächen zu lassen. Mit diesen Einstellungen lässt sich die Darstellung des Hintergrundbildes genau steuern und optimal an das Seitenlayout anpassen.

5、Markenstory-Bereich

Das Container-Layout und die verwendeten Element-Komponenten im Markenstory-Bereich entsprechen dem zuvor beschriebenen „Produkt- und Geschäftsbereich“. Es werden ebenfalls die drei Komponenten Überschrift, Button und Galerie (Gallery) verwendet, und die Gesamtstruktur besteht weiterhin aus einem Elterncontainer mit zwei Kindercontainern. Leser können durch Anwendung der zuvor erlernten Container-Parameter, Verschachtelungsmethoden sowie der Anpassung der Parameter und Stile dieser drei Komponenten das im obigen Bild gezeigte Layout des „Markenstory-Bereichs“ umsetzen.

6、Neueste Informationen Bereich

Damit die Metadaten (Meta Data) der Elementor Post-Komponente auf der Seite im englischen Format angezeigt werden, muss zunächst die Sprache der WordPress-Seite auf Englisch eingestellt sein. Das liegt daran, dass das Elementor-Editor-Interface und einige Metadaten standardmäßig die Seitensprache auslesen und entsprechend anzeigen. Daher erscheinen im obigen Screenshot die Einstellungen und Stiloptionen der Post-Komponente ebenfalls auf Englisch. Im Folgenden wird der Blogger die Kernfunktionalitäten und Stil-Anpassungen der Post-Komponente erklären, damit Nutzer diese besser einsetzen können.

(1) Einstellungen unter dem Tab „Inhalt“ der Post-Komponente

Im Elementor Post-Widget bietet der „Inhalt“-Tab eine Reihe wichtiger Einstellungen zur Steuerung des Layouts und der Darstellung der Artikelliste. Details zu den Funktionen:

• Layout (Layout): Dieser Bereich ermöglicht die Auswahl des Darstellungsstils der Artikel. Die Option „Skin“ legt das Gesamt-Design fest, z. B. „Cards“-Modus, der Artikel als Karten anordnet. Mit „Columns“ wird die Anzahl der Spalten festgelegt, während „Posts Per Page“ die Anzahl der Artikel pro Seite bestimmt.
• Bild (Image): Bildeinstellungen beinhalten den Schalter „Show Image“, der das Anzeigen von Artikel-Thumbnails steuert. Die Option „Masonry“ aktiviert ein Mauerwerk-Layout, bei dem Bilder und Artikelblöcke unterschiedlich hoch sind, um einen dynamischeren Look zu erzeugen. „Image Resolution“ erlaubt die Einstellung der Bildauflösung, z. B. „Medium 0.3x“ reduziert die Ladebelastung. „Image Ratio“ passt das Seitenverhältnis der Bilder an, um das Layout stimmig zu halten.
• Titel (Title): Im Titelbereich kann mit dem „Show“-Schalter festgelegt werden, ob der Artikel-Titel angezeigt wird. Außerdem lässt sich mit „Title HTML Tag“ die HTML-Überschriftenebene (z. B. H3) einstellen, was SEO-Relevanz und Hierarchie beeinflusst.
• Auszug (Excerpt): Der Auszug steuert die Anzeige der Artikelzusammenfassung. Der „Show“-Schalter aktiviert die Anzeige, während „Excerpt Length“ die maximale Zeichenanzahl bestimmt, um das Seitenlayout sauber zu halten. Mit „Apply to custom Excerpt“ kann die Einstellung auch auf benutzerdefinierte Felder angewendet werden.
• Metadaten (Meta Data): Hier wird festgelegt, ob Datum, Uhrzeit, Kategorien, Tags, Autor und weitere Informationen angezeigt werden, um die Artikelliste informativer zu gestalten. Im Screenshot sind Datum (Date), Uhrzeit (Time) und Kommentare (Comments) aktiviert.

(2) Einstellungen unter dem Tab „Stil“ der Post-Komponente

Im Stil-Tab bietet die Post-Komponente diverse Optionen zur optischen Anpassung, darunter Gesamt-Layout, Bildstil, Textgestaltung und Abstände, um sicherzustellen, dass die Artikelliste zum Website-Design passt. Details:

• Layout (Layout): Hier lässt sich die Gesamtgröße der Post-Karten anpassen, etwa Breite und Höhe, um die Platzierung optimal auf das Seitenlayout abzustimmen.
• Bild (Image): Der Bildbereich bietet feine Einstellungen für die Thumbnails, darunter Rundungen (Border Radius), Rahmen (Border) und Schatteneffekte (Box Shadow). So kann das Bild beispielsweise eckig, abgerundet oder mit 3D-Effekt dargestellt werden.
• Inhalt (Content): Die Inhalts-Einstellungen betreffen Elemente innerhalb des Artikels wie Titel, Auszug, „Read More“-Button und Metadaten. Für den Titel lassen sich Schriftgröße, Farbe, Schriftgewicht und Abstände anpassen, um eine klare Hierarchie zu schaffen. Auch der Auszug unterstützt Schriftstil-Anpassungen für bessere Lesbarkeit und Ästhetik. Die Metadaten erlauben die Individualisierung von Schriftart und Farbe für Datum, Kategorien und Tags, um die Informationsstruktur klarer zu gestalten.

四、Erstellung der Footer (Fußzeile) Template-Datei mit Elementor

Der Footer-Bereich ist der letzte Demonstrationsabschnitt dieses Artikels, in dem erläutert wird, wie man das Layout und die Elemente einer Seite individuell erstellt. Nach Fertigstellung des Footer-Layouts ist die Seitenstruktur im Wesentlichen vollständig und bildet eine komplette Seite. Der Einstieg zur Erstellung der Footer-Template-Datei ist derselbe wie bei der Header-Template-Datei, nämlich über den Elementor Theme Builder im Frontend der Seite. Im Verwaltungsbereich des Theme Builders findet der Nutzer im linken Template-Verzeichnis die Option „Footer“, die an zweiter Stelle im Verzeichnis steht. Nach dem Klick darauf gelangt man zum Verwaltungsinterface für Footer-Templates. Dort kann man durch Klicken auf die Schaltfläche „Add New“ oben rechts eine neue Footer-Template-Datei erstellen. Während der Erstellung bietet Elementor eine Reihe vordefinierter Footer-Stile an, die der Nutzer direkt auswählen und schnell das Footer-Design abschließen kann. Falls ein komplett eigenes Layout gewünscht ist, kann das Stil-Auswahlfenster geschlossen werden, um mit Containern und Element-Komponenten einen Footer ganz nach dem eigenen Website-Stil zu gestalten.

1、Übliche Layoutformen des Footers

Wie in den vorherigen Abschnitten durch Lernen und Praxis deutlich wurde, kann mit der sicheren Anwendung der zuvor erläuterten Elterncontainer-Parameter, Ausrichtungsoptionen und der Verschachtelungsmethoden der Kindercontainer praktisch jedes Layout realisiert werden. Das Footer-Layout, wie oben abgebildet, ist nicht kompliziert: In der Regel wird ein Elterncontainer verwendet, in dem mehrere Kindercontainer verschachtelt sind. Die Ausrichtung der Kindercontainer richtet sich nach dem Designbedarf. Im gezeigten Beispiel besteht der Footer aus drei Reihen von Kindercontainern; in der mittleren Reihe sind wiederum drei untergeordnete Container spaltenweise angeordnet. Nach der Anordnung der Container können die entsprechenden Element-Komponenten in die Kindercontainer eingefügt werden.

2、Häufig genutzte Footer-Komponenten

Der Footer als unterster Bereich der Website ist zwar nicht so informationsreich wie der Hauptbereich der Seite und nicht so navigationsdominant wie der Header, erfüllt aber dennoch sehr nützliche Funktionen, etwa die Anzeige von Copyright-Informationen, Kontaktmöglichkeiten, sozialen Links, sekundären Navigationsmenüs oder Abonnementformularen. Die Komplexität des Footers richtet sich dabei meist nach dem Gesamtstil und den funktionalen Anforderungen der Website. Er kann sehr schlicht oder relativ umfangreich sein. In der Praxis hat der Blogger basierend auf verschiedenen Projekten eine effiziente und praktische Kombination von Footer-Komponenten entwickelt. Obwohl jede Website ihre eigene Ausrichtung hat, lässt sich mit diesen gängigen Komponenten ein klar strukturierter, optisch ansprechender und funktional vollständiger Footer realisieren, auch ohne übermäßige Design-Spielereien. Im Folgenden werden die Funktionen und Stil-Optionen dieser Komponenten vorgestellt, damit ihre Gestaltung mit dem Designkonzept der Website harmoniert und die WordPress-Seite auch in Details professionell und hochwertig wirkt.

(1) Site Logo-Komponente

Die Site Logo-Komponente wurde zwar bereits im Kapitel „Header-Template-Datei“ verwendet, dort lag der Fokus jedoch auf dem Gesamt-Layout und der Kombination der Komponenten, nicht auf den Funktionen und Stil-Details der Site Logo-Komponente selbst. Daher wird in diesem Abschnitt die „Inhalt“- und „Stil“-Registerkarte dieser Komponente genauer erläutert, um eine flexiblere Anwendung in unterschiedlichen Szenarien zu ermöglichen.

Im „Inhalt“-Tab der Site Logo-Komponente kann der Nutzer wählen, ob das im WordPress-Backend eingestellte Website-Logo verwendet oder ein eigenes Bild als Logo hochgeladen wird. Zusätzlich zur Bildauswahl erlaubt dieses Panel die Einstellung des Link-Verhaltens des Logos (zum Beispiel, ob ein Klick auf das Logo zur Startseite führt) sowie die Bildgröße (zur Auswahl stehen Standard, Thumbnail, Medium und weitere von WordPress definierte Bildgrößen). Der „Stil“-Tab bietet umfassendere Steuerungsmöglichkeiten für die optische Darstellung des Logos. Hier lässt sich die Breite und maximale Breite anpassen, um das Logo auf verschiedenen Bildschirmauflösungen optimal darzustellen. Darüber hinaus sind Einstellungen für die Bildopazität, CSS-Filtereffekte (wie Graustufen, Helligkeit, Kontrast etc.) verfügbar, um das Logo besser in das Gesamtdesign einzufügen. Zusätzlich unterstützt der Stil-Tab Rahmenoptionen, Abrundungen und Schatteneffekte, um dem Logo eine ansprechende Tiefenwirkung zu verleihen. Diese Stil-Anpassungen verbessern nicht nur die visuelle Einheitlichkeit, sondern sorgen auch dafür, dass das Logo auf verschiedenen Geräten und Designstilen stets optimal präsentiert wird.

(2) Überschriften-Komponente

Die Funktions- und Stileinstellungen der Überschrift-Komponente wurden bereits im dritten Kapitel dieses Artikels, im Abschnitt „Seitenstruktur mit Elementor aufbauen und Inhaltselemente hinzufügen“, im Unterkapitel „Geschäftsbeschreibungsbereich“ erläutert. Daher wird der Blogger hier nicht weiter darauf eingehen. Wenden Sie einfach die zuvor erlernte Methode zur Verwendung der Überschrift-Komponente in der Praxis an.

（3）Icon-Listen-Widget

Im „Icon-Listen“-Widget von Elementor dient die Registerkarte „Inhalt“ hauptsächlich dazu, die einzelnen Listeneinträge und deren Anordnung zu konfigurieren. Du kannst Einträge hinzufügen und jedem einen bestimmten Icon zuweisen, zum Beispiel ein Häkchen, Pfeil oder Telefonsymbol, um die Informationen visuell hervorzuheben. Natürlich kannst du – wie in diesem Beispiel des Bloggers gezeigt – die Icons auch komplett entfernen, indem du das aktuelle Icon im Einstellungsbereich löschst. Jeder Eintrag kann mit einem benutzerdefinierten Titeltext versehen und mit einem Link ausgestattet werden (z. B. zur Weiterleitung auf eine andere Seite oder zum Start eines Anrufs).

In der Registerkarte „Stil“ bietet Elementor weitere Möglichkeiten zur individuellen Gestaltung der Icon-Liste. Sowohl das Icon als auch der Textstil lassen sich separat anpassen. Für das Icon kannst du Farbe, Größe, Abstand und Hover-Effekte festlegen. Für den Text kannst du Schriftart, Schriftgröße, Zeilenhöhe, Farbe und den Abstand zwischen Icon und Text einstellen. Wenn du die Trennlinienfunktion aktivierst, lassen sich auch die Linienstärke, -farbe und -stil anpassen. Mit diesen Stiloptionen kannst du die Icon-Liste perfekt an das Design deiner Seite anpassen – egal ob schlicht oder kreativ mit starkem visuellen Fokus.

（4）Social-Icons-Widget

Im „Social Icons“-Widget von Elementor dient die Registerkarte „Inhalt“ zum Hinzufügen und Verwalten verschiedener Social-Media-Links. Du kannst beliebig viele Social-Icon-Einträge hinzufügen, wie z. B. Facebook, Twitter und YouTube, wie im obigen Beispiel des Bloggers dargestellt. Für jeden Eintrag kannst du das Icon wählen (aus der integrierten Bibliothek oder durch Hochladen einer SVG-Datei), den entsprechenden Link einfügen und festlegen, ob sich der Link in einem neuen Tab öffnen soll. Neben den vordefinierten sozialen Plattformen kannst du auch den Typ „Benutzerdefiniert“ wählen, um beliebige Links und Icons hinzuzufügen – für maximale Flexibilität. Diese Einstellungen helfen dabei, Besucher schnell zu anderen Plattformen weiterzuleiten und die externe Verlinkung sowie Markenvernetzung visuell zu stärken.

In der Registerkarte „Stil“ bietet Elementor zahlreiche visuelle Anpassungsoptionen, damit die Social Icons sowohl funktional als auch optisch ansprechend sind. Du kannst die Größe, den Abstand und die Ausrichtung der Icons sowie das Farbschema (z. B. Markenfarben oder benutzerdefinierte Farben) einstellen. Darüber hinaus lassen sich Rahmen, Eckenradius und Hintergrundfarbe der Icons anpassen. Auch Hover-Effekte wie Farbwechsel, Zoom-Animation oder Schatteneffekte können aktiviert werden, um eine dynamischere Nutzererfahrung zu bieten. Ob du also einen schlichten Footer-Bereich oder ein auffälliges Social-Media-Element gestalten möchtest – das Social Icons-Widget von Elementor bietet dir ausreichend kreative Freiheit.

（5）Texteditor-Widget

Im „Texteditor“-Widget von Elementor dient die Registerkarte „Inhalt“ hauptsächlich zum Eingeben von Textinhalten und zur grundlegenden Textformatierung. Du kannst deinen gewünschten Text direkt im Editorfeld eingeben. Dieses Widget nutzt einen WYSIWYG-Editor, ähnlich dem klassischen WordPress-Editor, und unterstützt Formatierungen wie Fett, Kursiv, Links einfügen, Ausrichtung usw. Wenn du dynamische Inhalte (z. B. Beitragstitel, Datum) einfügen möchtest, kannst du auch die dynamischen Tags von Elementor nutzen. Insgesamt eignet sich diese Registerkarte besonders zur Inhaltsbefüllung und Strukturierung – ideal für Textabschnitte, Beschreibungen, Copyright-Hinweise und ähnliche Textbereiche.

In der Registerkarte „Stil“ kannst du das Erscheinungsbild des Textes weiter individualisieren. Du kannst unter anderem Textfarbe, Schriftart, Schriftgröße, Schriftstärke, Zeilenhöhe und Zeichenabstand festlegen – damit alles optisch zum Design deiner Seite passt.

3. Veröffentlichung des Footer-Template-Dateis und Festlegung der Anzeigebedingungen

Das Footer-Template (Seitenfuß) ist wie das Header-Template ein globaler Bestandteil einer WordPress-Website. Daher erfolgt die Einstellung der Sichtbarkeitsbedingungen ebenfalls so, dass es auf allen Seiten der Website angezeigt wird. Die Leser können – wie in der obigen Abbildung mit Hinweisen dargestellt – die Veröffentlichung des Footer-Templates und die Konfiguration der Anzeigeeinstellungen entsprechend vornehmen.

4、Präsentation der mit dem Elementor-Editor erstellten fertigen Seite

Schlusswort: Die oben gezeigten vollständigen Seiten-Screenshots sind das Ergebnis, das der Blogger während der Erstellung dieses Tutorials in einem praktischen Schritt-für-Schritt-Prozess mit dem Elementor-Editor aufgebaut hat. Beginnend mit dem Anlegen einer neuen Seite im WordPress-Backend, über die Erstellung von Header, Hauptinhalt und Footer mit Elementor – jedes Element und jede Struktur wurde exakt anhand der tatsächlichen Entwicklungsschritte demonstriert. Das letztlich präsentierte Seitenlayout ist somit ein direktes Produkt des in diesem Artikel behandelten Inhalts. Dieses Elementor-Tutorial für Website-Erstellung von Grund auf soll dir, der du gerade das Design und die Entwicklung von WordPress-Seiten lernst, eine klare Orientierung und praktische Tipps bieten. Wenn du bei der Umsetzung auf Schwierigkeiten stößt, kannst du jederzeit in das entsprechende Kapitel zurückspringen, um Einzelheiten nachzulesen. Und falls du den gesamten Prozess erfolgreich abgeschlossen hast, bist du herzlich eingeladen, auf dieser Grundlage weitere individuelle Gestaltungselemente hinzuzufügen und deine hochwertigen Website-Seiten weiter auszubauen.

Wenn du nach dem Lesen dieses Tutorials das Gefühl hast, dass der Aufbau einer WordPress-Website dennoch professionelle Unterstützung erfordert, oder wenn du das Design deiner Elementor-Seiten auf ein höheres Niveau bringen möchtest, dann schau dir gerne die Leistungen von Logic Thinking Digital Technology Co., Ltd. an. Wir sind spezialisiert auf WordPress-Webdesign und individuelle Entwicklung, verfügen über umfassende Praxiserfahrung und sind in der Lage, auf Grundlage deiner Markenpositionierung und geschäftlichen Anforderungen professionelle Webseiten zu gestalten, die auf Nutzererfahrung und Conversion-Ziele ausgerichtet sind. Ob Unternehmenswebsite, E-Commerce-Plattform oder mehrsprachige internationale Seite – wir bieten dir effiziente, stabile und skalierbare Lösungen für deinen Webauftritt.

Dieser Artikel ist urheberrechtlich geschützt von Logic Digital Technology (SZLOGIC). Die persönliche Weitergabe zu Lernzwecken ist willkommen. Jegliche kommerzielle Nutzung oder Vervielfältigung ohne Genehmigung ist strengstens untersagt.