{"id":23262,"date":"2025-04-05T12:47:22","date_gmt":"2025-04-05T04:47:22","guid":{"rendered":"https:\/\/www.szlogic.net\/?p=23262"},"modified":"2025-04-05T12:47:25","modified_gmt":"2025-04-05T04:47:25","slug":"wordpress-teaching","status":"publish","type":"post","link":"https:\/\/www.szlogic.net\/de\/learn\/wordpress\/wordpress-teaching\/","title":{"rendered":"WordPress Schulung: Mit dem Elementor-Editor von Grund auf Seiten individuell erstellen"},"content":{"rendered":"<h1 class=\"wp-block-heading has-text-align-center\" style=\"margin-bottom:30px;font-size:31px\">WordPress Schulung: Seiten individuell mit Elementor erstellen<\/h1>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"463\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/wordpress\u6559\u7a0b.png\" alt=\"wordpress\u6559\u7a0b\" class=\"wp-image-23271\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/wordpress\u6559\u7a0b.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/wordpress\u6559\u7a0b-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Wenn du eine professionelle und individuelle <strong><a href=\"https:\/\/www.szlogic.net\/de\/learn\/wordpress\/what-is-wordpress\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/learn\/wordpress\/what-is-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress<\/a><\/strong>-Seite erstellen m\u00f6chtest, aber nicht von komplexem Code \u00fcberw\u00e4ltigt werden willst, dann ist der <strong><a href=\"https:\/\/www.szlogic.net\/de\/learn\/wordpress\/basic-configuration\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/learn\/wordpress\/basic-configuration\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor-Editor<\/a><\/strong> dein ideales Werkzeug. Dieses Tutorial f\u00fchrt dich Schritt f\u00fcr Schritt von null an, wie du mit Elementor Seitenlayouts gestaltest und Seiten-Elemente baust, damit deine WordPress-Website sch\u00f6ner und funktionaler wird.\n\nDies ist ein Tutorial zum praktischen Erstellen und Bearbeiten von WordPress-Seiten von Grund auf. Wir starten mit dem <strong><a href=\"https:\/\/www.szlogic.net\/de\/learn\/wordpress\/wordpress-use\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/learn\/wordpress\/wordpress-use\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress-Backend<\/a><\/strong> und legen neue Seiten an, bauen nacheinander Header, Hauptinhalt und Footer auf und nutzen die visuellen Elementor-Komponenten, um Layout, Inhalte und Styles anzupassen.\n\nDies ist nicht nur eine grundlegende Anleitung, sondern auch ein praktischer \u00dcbungsprozess. Obwohl die meisten Schritte reibungslos funktionieren, ist die Entwicklung von Seitenelementen oft mit Unw\u00e4gbarkeiten verbunden. Man kann auf Plugin-Konflikte oder Style-Anomalien sto\u00dfen. Deshalb brauchst du neben dem Umgang mit Elementor auch Beobachtungsgabe und Probleml\u00f6sungskompetenz, um dieses m\u00e4chtige Tool wirklich zu meistern.\n\nEgal, ob du ein WordPress-Anf\u00e4nger bist oder deine Seitenbearbeitungsf\u00e4higkeiten verbessern m\u00f6chtest, dieser Artikel bietet dir praktische Anleitungen, um Webseiten effizient zu designen und Elemente zu erstellen.\n\nNun werfen wir einen Blick auf das Inhaltsverzeichnis dieses Artikels und steigen dann in das Thema ein.<\/p>\n\n\n\n<p>Um den Lesern ein effizientes Lernen und Nachschlagen zu erm\u00f6glichen, hat der Autor das Tutorial \u201eWordPress Schulung: Mit dem Elementor-Editor von Grund auf Seiten individuell erstellen\u201c systematisch gegliedert und ein \u00fcbersichtliches Inhaltsverzeichnis mit Ankerlinks erstellt.\n\nJedes Kapitel zeigt die Struktur des Artikels \u00fcbersichtlich und erlaubt es dir, mit einem Klick direkt zu interessanten Abschnitten zu springen, jederzeit zur\u00fcckzugehen oder tiefer in einzelne Themen einzutauchen.\n\nGanz gleich, ob du den kompletten Lernweg von Anfang bis Ende gehen willst oder w\u00e4hrend der Arbeit schnell zu bestimmten Schritten navigieren m\u00f6chtest \u2013 dieses Verzeichnis sorgt f\u00fcr einen fl\u00fcssigen und effizienten Lernprozess.\n\nDas Inhaltsverzeichnis im Detail lautet wie folgt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"#new\">WordPress-Backend: Neue Seite erstellen<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#fill\">Seitentitel eingeben<\/a><\/li>\n\n\n\n<li><a href=\"#custom\">Benutzerdefiniertes URL-Suffix f\u00fcr die Seite festlegen<\/a><\/li>\n\n\n\n<li><a href=\"#level\">Seitenhierarchie einstellen<\/a><\/li>\n\n\n\n<li><a href=\"#publish\">Neue WordPress-Seite ver\u00f6ffentlichen<\/a><\/li>\n\n\n\n<li><a href=\"#use\">Seite mit Elementor bearbeiten<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><a href=\"#header\">Erstellen einer Header-(Kopfzeilen- und Navigationsleisten-)Template-Datei im Elementor Theme Builder<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#generate\">Zugang zum Elementor Theme Builder<\/a><\/li>\n\n\n\n<li><a href=\"#template\">Neue Template-Datei im Elementor Header-Template-Management hinzuf\u00fcgen<\/a><\/li>\n\n\n\n<li><a href=\"#select\">Header-Template-Stil ausw\u00e4hlen oder komplett individuell gestalten<\/a><\/li>\n\n\n\n<li><a href=\"#navigation\">Layout von Header und Navigationsleiste mit Elementor-Containern gestalten<\/a><\/li>\n\n\n\n<li><a href=\"#edit\">Elemente und Inhalte von Header und Navigationsleiste bearbeiten und erstellen<\/a><\/li>\n\n\n\n<li><a href=\"#settings\">Header-Template-Datei ver\u00f6ffentlichen und Anzeigeoptionen festlegen<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><a href=\"#element\">Erstellen des Seitenhauptbereichs mit Elementor und Hinzuf\u00fcgen von Inhaltselementen<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#block\">Banner-Bereich<\/a><\/li>\n\n\n\n<li><a href=\"#business\">Bereich f\u00fcr Gesch\u00e4fts- oder Leistungsbeschreibung<\/a><\/li>\n\n\n\n<li><a href=\"#product\">Produkt- und Dienstleistungsbereich<\/a><\/li>\n\n\n\n<li><a href=\"#core\">Bereich zur Darstellung der Kernvorteile der Produkte<\/a><\/li>\n\n\n\n<li><a href=\"#brand\">Markengeschichten-Bereich<\/a><\/li>\n\n\n\n<li><a href=\"#information\">Aktuelle Informationen Bereich<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><a href=\"#file\">Erstellen einer Footer-(Fu\u00dfzeilen-)Template-Datei mit Elementor<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#common\">G\u00e4ngige Layoutformen des Footers<\/a><\/li>\n\n\n\n<li><a href=\"#component\">H\u00e4ufig verwendete Komponenten im Footer<\/a><\/li>\n\n\n\n<li><a href=\"#display\">Ver\u00f6ffentlichung und Anzeigeeinstellungen der Footer-Template-Datei<\/a><\/li>\n\n\n\n<li><a href=\"#show\">Pr\u00e4sentation der mit dem Elementor-Editor erstellten fertigen Seite<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading new\" id=\"new\" style=\"margin-bottom:30px\">\u4e00\u3001WordPress-Backend: Neue Seite erstellen<\/h2>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img decoding=\"async\" width=\"800\" height=\"350\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/WordPress\u540e\u53f0\u521b\u5efa\u65b0\u9875\u9762.png\" alt=\"WordPress-Backend: Neue Seite erstellen\" class=\"wp-image-23277\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/WordPress\u540e\u53f0\u521b\u5efa\u65b0\u9875\u9762.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/WordPress\u540e\u53f0\u521b\u5efa\u65b0\u9875\u9762-18x8.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">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\u00e4ren detailliert, wie man eine neue Seite anlegt und die notwendigen Informationen wie Seitentitel, URL-Einstellungen, Seitenhierarchie und Ver\u00f6ffentlichung der Seite ausf\u00fcllt. Die Seitenerstellung ist die Grundlage f\u00fcr den gesamten Website-Aufbau. Eine korrekte Einstellung der Seitenattribute verbessert nicht nur die sp\u00e4tere Bearbeitungseffizienz, sondern vermeidet auch Layout- oder Kompatibilit\u00e4tsprobleme bei der Nutzung von Elementor. Sobald die Seite vorbereitet ist, k\u00f6nnen wir nahtlos in den Elementor-Bearbeitungsmodus wechseln und mit dem Layout und Design der Seitenelemente beginnen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fill\" style=\"margin-bottom:30px\">1\u3001Seitentitel eingeben<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2546\" height=\"1303\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u586b\u5199\u9875\u9762\u6807\u9898.png\" alt=\"Seitentitel eingeben\" class=\"wp-image-23281\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u586b\u5199\u9875\u9762\u6807\u9898.png 2546w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u586b\u5199\u9875\u9762\u6807\u9898-18x9.png 18w\" sizes=\"(max-width: 2546px) 100vw, 2546px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Im WordPress-Backend gelangst du zur Seitenverwaltung. Klicke oben auf die Schaltfl\u00e4che \u201eNeue Seite\u201c. 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 <code>title<\/code>-Tag. Deshalb sollte die individuelle Eingabe auch unter SEO-Gesichtspunkten bedacht werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"custom\" style=\"margin-bottom:30px\">2\u3001Benutzerdefiniertes URL-Suffix<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u81ea\u5b9a\u4e49\u9875\u9762URL\u540e\u7f00.png\" alt=\"Benutzerdefiniertes URL-Suffix f\u00fcr die Seite festlegen\" class=\"wp-image-23282\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u81ea\u5b9a\u4e49\u9875\u9762URL\u540e\u7f00.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u81ea\u5b9a\u4e49\u9875\u9762URL\u540e\u7f00-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Wie im Bild gezeigt, klicke nach Eingabe des Seitentitels auf den rechts im roten Rahmen markierten \u201eLink\u201c-Ankertext. Das System \u00f6ffnet ein Eingabefeld zur individuellen URL-Einstellung. Standardm\u00e4\u00dfig 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\u00e4chtigt. Die ideale URL sollte m\u00f6glichst kurz sein und englische W\u00f6rter verwenden, um die Lesbarkeit und SEO-Freundlichkeit zu erh\u00f6hen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"level\" style=\"margin-bottom:30px\">3\u3001Seitenhierarchie einstellen<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"412\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9875\u9762\u7684\u5c42\u7ea7\u8bbe\u7f6e.png\" alt=\"Seitenhierarchie einstellen\" class=\"wp-image-23286\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9875\u9762\u7684\u5c42\u7ea7\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9875\u9762\u7684\u5c42\u7ea7\u8bbe\u7f6e-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Die Seitenhierarchie definiert die Zugeh\u00f6rigkeit zwischen WordPress-Seiten. Im Unterschied zu Beitr\u00e4gen, die Kategorien zugeordnet werden, unterst\u00fctzen Seiten eine Hierarchiestruktur. Zum Beispiel repr\u00e4sentiert die URL-Struktur szlogic\/web-design die Webdesign-Seite von \u201eLogic Digital Technology\u201c. Wenn diese Seite als \u00fcbergeordnete 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 \u201eSeite\u201c auf die Option \u201e\u00dcbergeordnet\u201c. Es \u00f6ffnet sich ein Auswahlfenster, in dem die passende \u00fcbergeordnete Seite gew\u00e4hlt werden kann. Das System passt automatisch die URL-Struktur an, um die Hierarchie widerzuspiegeln. Die Seitenhierarchie ist optional; wenn keine \u00fcbergeordnete Seite ben\u00f6tigt wird, kann die Standardeinstellung beibehalten werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"publish\" style=\"margin-bottom:30px\">4\u3001Neue WordPress-Seite ver\u00f6ffentlichen<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"411\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03WordPress\u65b0\u589e\u9875\u9762.png\" alt=\"Neue WordPress-Seite ver\u00f6ffentlichen\" class=\"wp-image-23288\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03WordPress\u65b0\u589e\u9875\u9762.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03WordPress\u65b0\u589e\u9875\u9762-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Nachdem alle notwendigen Seiteninformationen eingegeben wurden, kann die Seite ver\u00f6ffentlicht werden. Erst nach der Ver\u00f6ffentlichung ist die Seite Teil der Website-Struktur und \u00fcber die URL erreichbar. Klicke auf den rot markierten \u201eVer\u00f6ffentlichen\u201c-Button im Bild. Das System zeigt eine Kontrollseite vor der endg\u00fcltigen Ver\u00f6ffentlichung. Ein weiterer Klick auf \u201eVer\u00f6ffentlichen\u201c schlie\u00dft den Vorgang ab.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use\" style=\"margin-bottom:30px\">5\u3001Seite mit Elementor bearbeiten<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"422\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7f16\u8f91\u9875\u9762.png\" alt=\"Seite mit Elementor bearbeiten\" class=\"wp-image-23290\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7f16\u8f91\u9875\u9762.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7f16\u8f91\u9875\u9762-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Die Einstellung \u201eSeite mit Elementor bearbeiten\u201c ist der letzte Schritt nach dem Anlegen einer neuen WordPress-Seite. Beim ersten Betreten des Elementor-Bearbeitungsmodus f\u00fcr die neue Seite muss man im Seitenverwaltungsmodus den rot markierten Button \u201eMit Elementor bearbeiten\u201c anklicken, um den Bearbeitungsmodus zu starten. Danach kann man sp\u00e4ter auch direkt \u00fcber die Frontend-Seite in den Elementor-Modus wechseln, ohne das Backend zu benutzen. Der Grund daf\u00fcr ist, dass beim ersten Zugriff Elementor die Bearbeitungsrechte f\u00fcr diese Seite autorisiert, weshalb die Aktion zun\u00e4chst im Backend erfolgen muss.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"header\" style=\"margin-bottom:30px\">\u4e8c\u3001Erstellen einer Header-(Kopfzeilen- und Navigationsleiste)-Vorlagendatei im Elementor Theme Builder<\/h2>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"423\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6.png\" alt=\"\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6\" class=\"wp-image-23296\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Im <strong><a href=\"https:\/\/www.szlogic.net\/de\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress-Webseite<\/a><\/strong> 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\u00e4gen. Da die Kopfzeile \u00fcblicherweise auf allen Seiten gleich sein muss, k\u00f6nnen 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\u00e4ren 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\u00e4ngige Elemente wie Logo, Navigationsmen\u00fc und Suchfeld hinzuf\u00fcgst und diese mit der Drag-&amp;-Drop-Funktion von Elementor individuell anpasst. Nach dem Design der Vorlage zeigen wir dir, wie du die Vorlage ver\u00f6ffentlichst und in den Anzeigeeinstellungen \u201e\u00dcber die gesamte Seite anwenden\u201c w\u00e4hlst, damit die Kopfzeile automatisch auf allen Seiten angezeigt wird. Mit diesem Wissen kannst du nicht nur eine sch\u00f6ne und funktionale Kopfzeile gestalten, sondern auch sp\u00e4tere \u00c4nderungen mit nur einem Klick aktualisieren, ohne jede einzelne Seite bearbeiten zu m\u00fcssen. Lass uns jetzt beginnen, deine individuelle Kopfzeile f\u00fcr deine Webseite zu erstellen!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"generate\" style=\"margin-bottom:30px\">1\u3001Einstieg in den Elementor Theme Builder<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2558\" height=\"1146\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Elementor\u4e3b\u9898\u751f\u6210\u5668\u5165\u53e3.png\" alt=\"Zugang zum Elementor Theme Builder\" class=\"wp-image-23298\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Elementor\u4e3b\u9898\u751f\u6210\u5668\u5165\u53e3.png 2558w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Elementor\u4e3b\u9898\u751f\u6210\u5668\u5165\u53e3-18x8.png 18w\" sizes=\"(max-width: 2558px) 100vw, 2558px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px;margin-bottom:30px\">Wenn du in deinem Browser eine bereits ver\u00f6ffentlichte 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\u00e4hrst du mit der Maus \u00fcber den Ankertext \u201eMit Elementor bearbeiten\u201c, erscheint ein Dropdown-Men\u00fc von Elementor. Der Zugang zum \u201eTheme Builder\u201c verbirgt sich hier. Klicke auf den im roten Rahmen markierten Link \u201eTheme Builder\u201c, um zur Verwaltungsseite der Theme-Vorlagendateien von Elementor zu gelangen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"template\" style=\"margin-bottom:30px\">2\u3001Neue Vorlage im Header-Verwaltungsbereich von Elementor erstellen<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"421\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684Header\u6a21\u677f\u6587\u4ef6\u7ba1\u7406\u754c\u9762\u65b0\u589e\u6a21\u677f\u6587\u4ef6.png\" alt=\"Neue Template-Datei im Elementor Header-Template-Management hinzuf\u00fcgen\" class=\"wp-image-23295\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684Header\u6a21\u677f\u6587\u4ef6\u7ba1\u7406\u754c\u9762\u65b0\u589e\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684Header\u6a21\u677f\u6587\u4ef6\u7ba1\u7406\u754c\u9762\u65b0\u589e\u6a21\u677f\u6587\u4ef6-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Nachdem du die Startseite des Theme Builders ge\u00f6ffnet hast, klickst du in der linken Vorlagenkategorie oben auf das Verzeichnis \u201eHeader\u201c. Du gelangst zur Verwaltungsoberfl\u00e4che f\u00fcr Header-Vorlagendateien, wie im obigen Bild gezeigt. Ohne weitere Schritte klickst du rechts oben im roten Rahmen auf die Schaltfl\u00e4che \u201eAdd New\u201c, um eine neue Header-Vorlagendatei zu erstellen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"select\" style=\"margin-bottom:30px\">3\u3001Auswahl eines Header-Vorlagenstils oder komplett individuelle Gestaltung<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"418\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f.png\" alt=\"\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f\" class=\"wp-image-23297\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Nach dem Klick auf \u201eAdd New\u201c im Header-Verwaltungsbereich springt die Seite automatisch zum Auswahlfenster f\u00fcr 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\u00e4hlen und laden oder oben rechts im Auswahlfenster auf das \u201eX\u201c klicken, um das Fenster zu schlie\u00dfen und eine komplett individuelle Kopfzeile bzw. Navigationsleiste zu erstellen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"navigation\" style=\"margin-bottom:30px\">4\u3001Layout des Headers und der Navigationsleiste mit Elementor-Containern<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"454\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7684\u5bb9\u5668\u5bf9\u9875\u7709\u53ca\u5bfc\u822a\u680f\u5e03\u5c40.png\" alt=\"Layout von Header und Navigationsleiste mit Elementor-Containern gestalten\" class=\"wp-image-23302\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7684\u5bb9\u5668\u5bf9\u9875\u7709\u53ca\u5bfc\u822a\u680f\u5e03\u5c40.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7684\u5bb9\u5668\u5bf9\u9875\u7709\u53ca\u5bfc\u822a\u680f\u5e03\u5c40-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Im Bearbeitungsmodus der Header-Vorlage verwendet Elementor Container f\u00fcr das Layout des Headers, wie im Bild oben dargestellt. Auf Code-Ebene bestehen alle Webseitenstrukturen aus blockartigen Elementen (meist in <strong><a href=\"https:\/\/html.com\/\" data-type=\"link\" data-id=\"https:\/\/html.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">HTML<\/a><\/strong> als div-Tags), die man als \u201eBox-Modell\u201c kennt. Elementor als visueller Page Builder folgt diesem Prinzip ebenfalls, bietet aber eine visuelle Oberfl\u00e4che und Container-Komponenten, die helfen, das Grundlayout zu erstellen und andere Elemente ordentlich darin anzuordnen. Bevor du Header- und Navbar-Elemente hinzuf\u00fcgst, solltest du die Struktur sorgf\u00e4ltig planen und die Container-Komponenten f\u00fcr das Layout verwenden. Um Container flexibel einzusetzen, musst du die hier erl\u00e4uterten Parameter und die Verschachtelung von Containern gut beherrschen. Container sind das Kernst\u00fcck des Layouts, bestimmen die Anordnung des Inhalts und beeinflussen die Responsive-Darstellung sowie die Benutzererfahrung. Au\u00dferdem korrespondiert die Anzahl der Container mit der Zahl der Seitenelemente. Normalerweise kommt in einen Container je ein Element. H\u00e4ufig genutzte Header-Komponenten sind Site Logo, WordPress Men\u00fc und Suche, also das Webseiten-Logo, das WordPress-Men\u00fc und das Suchfeld.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Container-Breiten-Einstellung<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"603\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e.png\" alt=\"\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e\" class=\"wp-image-23316\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Wie im Bild gezeigt, bestimmt die Breite des Containers den Anzeigebereich der Seitenelemente. Viele Anf\u00e4nger sto\u00dfen auf das Problem, dass Elemente nicht die volle Breite einnehmen, was meist daran liegt, dass die Container-Breite nicht auf \u201eVolle Breite\u201c eingestellt ist und der Innenabstand (Padding) des Containers nicht auf 0 gesetzt wurde. Sollten Elemente mit Rand (Margin) gew\u00fcnscht sein, kann man \u201eBoxed Layout\u201c w\u00e4hlen; f\u00fcr eine volle Bildschirmbreite muss die Container-Breite auf \u201eVolle Breite\u201c gestellt und der Innenabstand wie weiter unten beschrieben auf 0 gesetzt werden. Nur wenn beide Einstellungen korrekt sind, f\u00fcllt der Inhalt die gesamte Bildschirmbreite aus.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Einstellung von Innen- und Au\u00dfenabst\u00e4nden des Containers<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"610\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a.png\" alt=\"\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a\" class=\"wp-image-23315\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Wie im Bild zu sehen, befinden sich die Einstellungen f\u00fcr Au\u00dfen- (Margin) und Innenabst\u00e4nde (Padding) des Elementor-Containers unter dem Tab \u201eErweitert\u201c. Im oberen Bereich k\u00f6nnen Au\u00dfenabst\u00e4nde f\u00fcr alle vier Seiten eingestellt werden. Standardm\u00e4\u00dfig sind Margin und Padding miteinander verkn\u00fcpft, sodass alle vier Seiten denselben Wert haben. Um einen einzelnen Wert zu \u00e4ndern, klicke auf das rote \u201eVerkn\u00fcpfung\u201c-Symbol, um die Sperre aufzuheben, und gib den gew\u00fcnschten Wert f\u00fcr die entsprechende Richtung ein. Au\u00dferdem kannst du \u00fcber das \u201epx\u201c-Symbol oberhalb des Sperr-Icons die Ma\u00dfeinheit \u00e4ndern, z. B. auf em, rem oder %. Standardm\u00e4\u00dfig setzt Elementor den Padding-Wert auf 10 px; sobald die Sperre aufgehoben wird, stellt das System den Wert automatisch auf 0 zur\u00fcck, sodass du ihn nach Bedarf manuell anpassen musst.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(3) Methoden zur Verschachtelung von Containern<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"408\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5.png\" alt=\"\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5\" class=\"wp-image-23314\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Wie im obigen Bild gezeigt, gibt es zwei Methoden, um Elementor-Container zu verschachteln. Beide Methoden sind effektiv, n\u00e4mlich Drag &amp; Drop und Kopieren &amp; Einf\u00fcgen im Navigator. Drag &amp; Drop ist intuitiver und eignet sich gut f\u00fcr das Erstellen von Strukturen von Grund auf, w\u00e4hrend Kopieren &amp; Einf\u00fcgen praktisch ist, um Container schnell auf Basis eines bestehenden Layouts anzupassen und wiederzuverwenden.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Drag &amp; Drop eines Untercontainers<\/h5>\n\n\n\n<p>Wie im Bild dargestellt, kann man den Container direkt aus der linken Elementor-Komponentenleiste per Drag &amp; Drop in den Ziel-Elterncontainer ziehen. Dadurch wird der neue Container automatisch dem Elterncontainer untergeordnet und es entsteht eine hierarchische Struktur.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Kopieren und Einf\u00fcgen von Containern<\/h5>\n\n\n\n<p>Im Navigator-Panel auf der rechten Seite der Elementor-Oberfl\u00e4che kann man zun\u00e4chst den zu verschachtelnden Container ausw\u00e4hlen und kopieren. Anschlie\u00dfend w\u00e4hlt man den Ziel-Elterncontainer aus, macht einen Rechtsklick und f\u00fcgt den kopierten Container ein. Der eingef\u00fcgte Container wird dann als Untercontainer dem Elterncontainer zugeordnet.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(4) Einstellung der Ausrichtung von Untercontainern<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"403\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a.png\" alt=\"\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a\" class=\"wp-image-23313\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Die Ausrichtung der Untercontainer wird vom Elterncontainer bestimmt. Die Einstellung befindet sich unter dem Reiter \u201eLayout\u201c, wie im roten Rahmen im Bild gezeigt. Im Bereich \u201eAusrichtung\u201c 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 \u00fcbereinander gestapelt, entweder von oben nach unten oder von unten nach oben. Diese Richtungsoptionen beeinflussen direkt das Layout der Untercontainer innerhalb des Elterncontainers und erm\u00f6glichen eine flexible Gestaltung sowie eine verbesserte Tiefenwirkung des Designs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"edit\" style=\"margin-bottom:30px\">5\u3001Bearbeitung und Erstellung der Elemente f\u00fcr Header und Navigationsleiste<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"429\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9.png\" alt=\"\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9\" class=\"wp-image-23307\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Nachdem die grundlegende Layoutstruktur f\u00fcr Header und Navigationsleiste mit Containern erstellt wurde, m\u00fcssen nun konkrete Elemente hinzugef\u00fcgt werden, damit die Navigation und Markenpr\u00e4sentation vollst\u00e4ndig wird. Elementor bietet mehrere Komponenten f\u00fcr den Header an, wobei Site Logo (Seitenlogo), WordPress Menu (Navigationsmen\u00fc) und Search (Suchfeld) die drei am h\u00e4ufigsten genutzten und praktischsten Komponenten sind. Durch Drag &amp; Drop dieser Komponenten in die entsprechenden Container und das Hochladen sowie Einrichten der n\u00f6tigen Materialien entsteht eine voll funktionsf\u00e4hige Header-Struktur. Der obige Screenshot zeigt beispielsweise, wie der Blogger das Logo-Material in die Site Logo-Komponente hochgeladen und die Anzeigeoptionen f\u00fcr das WordPress Menu (Navigationsmen\u00fc) eingestellt hat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"settings\">6\u3001Ver\u00f6ffentlichung der Header-Vorlagendatei und Festlegung der Anzeige-Bedingungen<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">(1) Ver\u00f6ffentlichung der Header-Vorlagendatei<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"465\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6.png\" alt=\"\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6\" class=\"wp-image-23306\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Nach dem Layout des Headers mit Elementor-Containern sowie dem Hinzuf\u00fcgen der h\u00e4ufig genutzten Komponenten und Hochladen der Materialien kann die Header-Vorlage ver\u00f6ffentlicht und auf den Seiten angewendet werden. Im Elementor-Bearbeitungsmodus befindet sich die Schaltfl\u00e4che \u201eVer\u00f6ffentlichen\u201c unten in der linken Seitenleiste, rot markiert im Bild. Nach einem Klick darauf \u00f6ffnet sich ein Fenster zur Einstellung der Anzeigelogik, in dem Nutzer definieren k\u00f6nnen, wo die Header-Vorlage angewendet werden soll.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Einstellung der Anzeige-Bedingungen f\u00fcr die Header-Vorlage<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"451\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png\" alt=\"\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6\" class=\"wp-image-23308\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Im Fenster f\u00fcr die Anzeigelogik, wie im Bild gezeigt, kann der Nutzer ausw\u00e4hlen, 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 \u201eInclude &gt; Entire Site\u201c ausgew\u00e4hlt, was bedeutet, dass die Header-Vorlage auf allen Seiten der gesamten Webseite angewendet wird. Nach der Auswahl klickt man auf \u201eSave&amp;Close\u201c, um die Einstellungen zu speichern und das Fenster zu schlie\u00dfen. Das System wendet die Header-Vorlage automatisch auf alle Seiten der Webseite an.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"element\" style=\"margin-bottom:30px\">\u4e09\u3001 Erstellung des Hauptseitenlayouts und Hinzuf\u00fcgen von Inhaltselementen mit Elementor<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"533\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u6784\u5efa\u9875\u9762\u4e3b\u4f53\u6846\u67b6\u5e76\u6dfb\u52a0\u5185\u5bb9\u5143\u7d20.png\" alt=\"Erstellen des Seitenhauptbereichs mit Elementor und Hinzuf\u00fcgen von Inhaltselementen\" class=\"wp-image-23324\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u6784\u5efa\u9875\u9762\u4e3b\u4f53\u6846\u67b6\u5e76\u6dfb\u52a0\u5185\u5bb9\u5143\u7d20.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u6784\u5efa\u9875\u9762\u4e3b\u4f53\u6846\u67b6\u5e76\u6dfb\u52a0\u5185\u5bb9\u5143\u7d20-18x10.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Nachdem das Layout f\u00fcr den Header und die Navigationsleiste abgeschlossen ist, geht es nun darum, den Hauptinhalt der Seite aufzubauen. \u00c4hnlich wie im vorherigen Kapitel \u201eLayout von Header und Navigation mit Elementor-Containern\u201c 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\u00e4lt, wie Text, Bilder, Icons, Videos, Buttons und Formulare \u2013 all diese Elemente sind in Elementor als Komponenten verf\u00fcgbar. Im praktischen Einsatz gen\u00fcgt es, die Anpassung der Containerbreite, die Einstellung von Innen- und Au\u00dfenabst\u00e4nden sowie die Verschachtelung von Untercontainern flexibel zu beherrschen, um vielf\u00e4ltige Seitenlayouts umzusetzen. Beispielsweise erm\u00f6glichen passende Spaltenlayouts eine \u00fcbersichtliche Inhaltsverteilung, und die Kombination aus anpassbarer Breite und Abstandseinstellungen sorgt daf\u00fcr, dass die Seite auf unterschiedlichen Bildschirmgr\u00f6\u00dfen gut aussieht. Dies ist eine der St\u00e4rken von Elementor: Nutzer k\u00f6nnen ohne Programmierkenntnisse vielf\u00e4ltige Seitenstrukturen frei gestalten.<\/p>\n\n\n\n<p>Daher ist bei der Gestaltung des Hauptinhalts eine sinnvolle Planung der Containerstruktur entscheidend. Eine klar gegliederte Containerhierarchie gew\u00e4hrleistet nicht nur eine ansprechende Gestaltung, sondern verbessert auch die Responsive-F\u00e4higkeit, sodass die Webseite auf verschiedenen Ger\u00e4ten optimal dargestellt wird. Im Folgenden erkl\u00e4rt der Blogger Schritt f\u00fcr 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!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"block\" style=\"margin-bottom:30px\">1\u3001Bannerbereich<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"537\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Banner\u533a\u5757.png\" alt=\"Banner\u533a\u5757\u7684\u5e03\u5c40\u548c\u5185\u5bb9\u7f16\u8f91\" class=\"wp-image-23322\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Banner\u533a\u5757.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Banner\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Der Bannerbereich ben\u00f6tigt in der Regel nur eine einzige Komponente, n\u00e4mlich das Slides-Widget von Elementor. Das Slides-Widget realisiert eine Bild-Slideshow auf der Seite und bietet integrierte Einstellungen f\u00fcr Titel, Text und Links. Daher sind im Bannerbereich keine mehrfach verschachtelten Container notwendig, es gen\u00fcgt, einen einzelnen Container ganz oben einzuf\u00fcgen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(1) \u00dcbliche Parameter-Einstellungen des Slides-Widgets<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">Hintergrund-Einstellungen<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"725\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u80cc\u666f\u7684\u53c2\u6570\u8bbe\u7f6e.png\" alt=\"Hintergrund-Einstellungen\" class=\"wp-image-23326\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u80cc\u666f\u7684\u53c2\u6570\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u80cc\u666f\u7684\u53c2\u6570\u8bbe\u7f6e-13x12.png 13w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Wie im Bild gezeigt, \u00f6ffnet sich nach dem Ausklappen des Tabs \u201eCarousel\u201c der Bereich f\u00fcr die Hintergrundparameter, der im Bild rot markiert ist. Hier kann man den Hintergrund f\u00fcr den Slideshow-Bereich hochladen, einschlie\u00dflich Hintergrundbild und Hintergrundfarbe. Unter dem Tab \u201eContent\u201c oben lassen sich Titel, Beschreibung und Button-Text eingeben sowie die URL f\u00fcr den Button festlegen.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Inhaltspositionierung<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"609\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5185\u5bb9\u5b9a\u4f4d\u53c2\u6570\u8bbe\u7f6e.png\" alt=\"Inhaltspositionierung\" class=\"wp-image-23327\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5185\u5bb9\u5b9a\u4f4d\u53c2\u6570\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5185\u5bb9\u5b9a\u4f4d\u53c2\u6570\u8bbe\u7f6e-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Im Bereich der Slides-Widget-Parameter unter dem Tab \u201eStyle\u201c 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\u00e4sst sich die Anordnung von Titel, Beschreibungstext und Button flexibel gestalten.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Textstil-Einstellungen<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"599\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7684\u6837\u5f0f\u8bbe\u7f6e.png\" alt=\"Textstil-Einstellungen\" class=\"wp-image-23329\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7684\u6837\u5f0f\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7684\u6837\u5f0f\u8bbe\u7f6e-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Die Textstil-Einstellungen befinden sich ebenfalls unter dem Tab \u201eStyle\u201c, wie oben im Bild dargestellt. Die rot markierten Texttypen (Titel, Beschreibung, Button) k\u00f6nnen jeweils ausgew\u00e4hlt werden, um im sich \u00f6ffnenden <strong><a href=\"https:\/\/www.w3.org\/Style\/CSS\/Overview.en.html\" data-type=\"link\" data-id=\"https:\/\/www.w3.org\/Style\/CSS\/Overview.en.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CSS<\/a><\/strong>-Stilbereich Schriftgr\u00f6\u00dfe, Farbe und weitere Stileigenschaften anzupassen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"business\" style=\"margin-bottom:30px\">2\u3001Bereich zur Beschreibung der Gesch\u00e4ftst\u00e4tigkeit<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4e1a\u52a1\u63cf\u8ff0\u533a\u5757.png\" alt=\"Bereich f\u00fcr Gesch\u00e4fts- oder Leistungsbeschreibung\" class=\"wp-image-23332\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4e1a\u52a1\u63cf\u8ff0\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4e1a\u52a1\u63cf\u8ff0\u533a\u5757-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Die Komponenten im Bereich zur Beschreibung der Gesch\u00e4ftst\u00e4tigkeit k\u00f6nnen flexibel an die konkreten Anforderungen des Seitenlayouts angepasst werden. Allgemein gilt: Je vielf\u00e4ltiger die Elemente im Beschreibungsbereich, desto mehr Komponenten werden ben\u00f6tigt. Im Gegensatz zum oben erw\u00e4hnten Slides-Widget im Bannerbereich gibt es f\u00fcr die anderen Seitenbereiche keine feste Komponentenzahl; die Zusammenstellung erfolgt je nach Inhalt. Das oben gezeigte Beispiel des Gesch\u00e4ftsbereichs nutzt lediglich eine Titel-Komponente und eine Button-Komponente, was das Design \u00fcbersichtlich und klar h\u00e4lt. Im Folgenden erkl\u00e4rt der Blogger die typischen Parameter dieser beiden Komponenten, um den Lesern bei der praktischen Anwendung zu helfen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(1) H\u00e4ufig verwendete Einstellungen der \u00dcberschriften-Komponente<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">Einstellungen unter dem Tab \u201eInhalt\u201c der \u00dcberschriften-Komponente<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"465\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"Einstellungen unter dem Tab \u201eInhalt\u201c der \u00dcberschriften-Komponente\" class=\"wp-image-23335\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Nachdem man die \u00dcberschriften-Komponente im Elementor Navigator ausgew\u00e4hlt hat, zeigt der linke Einstellungsbereich standardm\u00e4\u00dfig den Tab \u201eInhalt\u201c an, wie im Bild oben dargestellt. Dieser Tab enth\u00e4lt haupts\u00e4chlich drei wichtige Einstellungen: Eingabefeld f\u00fcr den \u00dcberschrifteninhalt, Eingabefeld f\u00fcr den \u00dcberschriften-Link sowie die Einstellung des HTML Hn-Tags. Die Eingabe des \u00dcberschrifteninhalts ist verpflichtend, da sie den Text bestimmt, der auf der Seite angezeigt wird. Das Link-Eingabefeld ist optional und h\u00e4ngt vom jeweiligen Bedarf ab; in den meisten F\u00e4llen wird der \u00dcberschrift kein Link hinzugef\u00fcgt. Die Einstellung des HTML Hn-Tags ist f\u00fcr 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 \u00dcberschriften-Komponente neben der genauen Inhaltseingabe auch die HTML-Tags entsprechend der Seitenstruktur und SEO-Anforderungen sorgf\u00e4ltig einstellen.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Stil-Einstellungen unter dem Tab \u201eStil\u201c der \u00dcberschriften-Komponente<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"380\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png\" alt=\"Stil-Einstellungen unter dem Tab \u201eStil\u201c der \u00dcberschriften-Komponente\" class=\"wp-image-23337\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">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 \u201eStil\u201c-Tab des jeweiligen Komponenten-Einstellungsbereichs. Obwohl die spezifischen Optionen je Komponente variieren, ist der Pfad immer derselbe. Am Beispiel der \u00dcberschriften-Komponente, wie im Bild rot markiert, umfassen die h\u00e4ufig genutzten Stil-Einstellungen Textausrichtung, Textfarbe und Typografie. Unter Typografie kann man Schriftart, Schriftgr\u00f6\u00dfe, Schriftst\u00e4rke, Zeilenh\u00f6he und weitere Eigenschaften anpassen, um das visuelle Erscheinungsbild der \u00dcberschrift 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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(2) H\u00e4ufig verwendete Einstellungen der Button-Komponente<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">Einstellungen unter dem Tab \u201eInhalt\u201c der Button-Komponente<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"396\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"Einstellungen unter dem Tab \u201eInhalt\u201c der Button-Komponente\" class=\"wp-image-23339\"\/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Die h\u00e4ufig genutzten Einstellungspunkte im \u201eInhalt\u201c-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\u00f6tigt wird, kann die Standardeinstellung beibehalten werden. M\u00f6chte man ein Icon hinzuf\u00fcgen, klickt man auf den entsprechenden Button, um die Elementor-Icon-Bibliothek zu \u00f6ffnen, aus der man ein Icon ausw\u00e4hlen oder eine eigene Icon-Datei hochladen kann.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Stil-Einstellungen unter dem Tab \u201eStil\u201c der Button-Komponente<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png\" alt=\"Stil-Einstellungen unter dem Tab \u201eStil\u201c der Button-Komponente\" class=\"wp-image-23340\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Der \u201eStil\u201c-Tab der Button-Komponente bietet zahlreiche Einstellungsm\u00f6glichkeiten, wie im Bild zu sehen. Im Vergleich zur \u00dcberschriften-Komponente sind die Stiloptionen f\u00fcr Buttons umfangreicher und erlauben eine pr\u00e4zise Gestaltung des visuellen Erscheinungsbilds und der Benutzerinteraktion. Zun\u00e4chst gibt es die Positionierung, die bestimmt, wie der Button innerhalb seines Containers ausgerichtet wird (zentriert, links- oder rechtsb\u00fcndig). Die Typografie-Einstellungen sind \u00e4hnlich wie bei anderen Komponenten und dienen der Anpassung von Schriftart, -gr\u00f6\u00dfe, -gewicht etc. Die Textfarbe l\u00e4sst sich f\u00fcr den Normalzustand und den Hover-Zustand (Mouseover) separat definieren, um gute Lesbarkeit und visuelles Feedback zu gew\u00e4hrleisten.<\/p>\n\n\n\n<p>Dar\u00fcber hinaus kann man die Rundung der Button-Ecken einstellen, um zwischen eckigen, abgerundeten oder komplett runden Buttons zu w\u00e4hlen. Der Box-Schatten verleiht dem Button einen Schatteneffekt, der f\u00fcr mehr Plastizit\u00e4t sorgt und die Klickaufforderung verst\u00e4rkt. Schlie\u00dflich bestimmt die Innenabstandseinstellung (Padding) den Abstand zwischen dem Text und dem Button-Rand. Eine angemessene Anpassung optimiert die Gr\u00f6\u00dfe und das optische Gleichgewicht des Buttons. Durch die kombinierte Nutzung dieser Stileinstellungen kann man Buttons gestalten, die sowohl \u00e4sthetisch ansprechend als auch benutzerfreundlich sind.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"product\" style=\"margin-bottom:30px\">3\u3001Produkt- und Servicebereich<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"427\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u548c\u670d\u52a1\u533a\u5757.png\" alt=\"Produkt- und Dienstleistungsbereich\" class=\"wp-image-23342\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u548c\u670d\u52a1\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u548c\u670d\u52a1\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">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\u00e4lt, in der drei Bilder zu Produkten oder Dienstleistungen gezeigt werden. Jedes Bild ist mit Text versehen, um die visuelle Darstellung und die Erkl\u00e4rung des Inhalts zu verbessern. Im linken Untercontainer werden \u00dcberschriften- und mehrere Button-Komponenten kombiniert, um klare Textanweisungen und Interaktionen zu erm\u00f6glichen<\/p>\n\n\n\n<p>Die Galerie-Komponente bietet verschiedene Layout- und Einstellungsoptionen, wie im linken Bereich des Bildes zu sehen ist. Man kann die Bildanordnung, Spaltenanzahl, Abst\u00e4nde, Linktypen u.a. anpassen. In diesem Beispiel ist die Galerie auf vier Spalten eingestellt und nutzt Lazy Load (verz\u00f6gertes Laden), um die Seitenleistung zu verbessern. Die \u00dcberschrift im linken Untercontainer verwendet eine gro\u00dfe Schriftart f\u00fcr 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 \u201eStil\u201c-Tab weiter anpassen, um den Gesamtstil der Seite zu erg\u00e4nzen. W\u00e4hrend der Blogger oben schon ausf\u00fchrlich die Parameter- und Stil-Einstellungen f\u00fcr \u00dcberschriften- und Button-Komponenten erl\u00e4utert hat, folgt nun eine detaillierte Erkl\u00e4rung der Galerie-Komponente, um ihre Parameter und Stiloptionen zu verstehen und flexibler f\u00fcr die Bildpr\u00e4sentation nutzen zu k\u00f6nnen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Einstellungen unter dem Tab \u201eInhalt\u201c der Galerie-Komponente<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"514\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"\u753b\u5eca\u7ec4\u4ef6\u201c\u5185\u5bb9\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23346\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Im Tab \u201eInhalt\u201c bietet die Galerie-Komponente mehrere zentrale Einstellungsm\u00f6glichkeiten, um die Bildanzeige flexibel zu konfigurieren. Zun\u00e4chst kann im \u201eType\u201c (Typ)-Men\u00fc die Darstellungsform der Galerie gew\u00e4hlt werden, beispielsweise \u201eSingle\u201c (Einzelbild) oder \u201eGrid\u201c (Raster), um unterschiedlichen Seitenlayouts gerecht zu werden. Danach folgt der Bereich zur Bildauswahl, der die aktuell hinzugef\u00fcgten Bilder anzeigt. Nutzer k\u00f6nnen \u00fcber das Plus-Symbol neue Bilder hochladen oder nicht ben\u00f6tigte entfernen. Die Option \u201eOrder By\u201c (Sortierung) legt die Reihenfolge der Bilder fest, z. B. nach Standard oder Zufall. Die Funktion \u201eLazy Load\u201c (Verz\u00f6gertes Laden) kann aktiviert oder deaktiviert werden, um die Seitenperformance zu verbessern, was besonders bei Galerien mit vielen Bildern n\u00fctzlich ist.<\/p>\n\n\n\n<p>Die \u201eLayout\u201c-Option bestimmt die Anordnung der Bilder, im Beispiel oben ist \u201eGrid\u201c (Raster) ausgew\u00e4hlt. \u201eColumns\u201c (Spalten) stellt die Anzahl der Spalten der Galerie ein und passt so die Bildanordnung an unterschiedliche Seitenbreiten an. \u201eSpacing\u201c (Abstand) regelt die Zwischenr\u00e4ume zwischen den Bildern; Nutzer k\u00f6nnen diesen \u00fcber einen Schieberegler vergr\u00f6\u00dfern oder verkleinern, um die visuelle Wirkung zu optimieren. Unter \u201eLink\u201c 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 \u201eLightbox\u201c erm\u00f6glicht die Aktivierung eines Popup-Fensters zur Bildanzeige, was die Benutzererfahrung verbessert. Schlie\u00dflich steuert \u201eAspect Ratio\u201c (Seitenverh\u00e4ltnis) die Proportionen der Bildanzeige; der Blogger hat hier 9:16 eingestellt, um die Bilder in einem hochformatigen S\u00e4ulenstil darzustellen. Mit diesen Einstellungen l\u00e4sst sich die Galerie optimal an das Design und die Anforderungen der Webseite anpassen und ihre visuelle Wirkung steigern.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Einstellungen unter dem Tab \u201eStil\u201c der Galerie-Komponente<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"529\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"\u753b\u5eca\u7ec4\u4ef6\u201c\u6837\u5f0f\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23347\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Im Tab \u201eStil\u201c bietet die Galerie-Komponente zahlreiche Optionen zur Anpassung des Erscheinungsbilds. Im Bereich \u201eImage\u201c (Bild) k\u00f6nnen Nutzer Rand, Rundungen und Hover-Animationen der Bilder einstellen, um die visuelle Pr\u00e4sentation zu verbessern. Hier l\u00e4sst sich zwischen dem Zustand \u201eNormal\u201c und \u201eHover\u201c (Mouseover) wechseln und f\u00fcr beide verschiedene Stile definieren. Im Normalzustand k\u00f6nnen \u201eBorder Color\u201c (Randfarbe), \u201eBorder Width\u201c (Randst\u00e4rke) und \u201eBorder Radius\u201c (Randradius) eingestellt werden, um das Aussehen des Bildrands zu steuern. Zudem sind CSS-Filter verf\u00fcgbar, mit denen Helligkeit, Kontrast, S\u00e4ttigung und weitere Effekte angewendet werden k\u00f6nnen, um mehr Tiefe zu schaffen.<\/p>\n\n\n\n<p>Im Hover-Zustand lassen sich interaktive Effekte wie \u201eHover Animation\u201c (Hover-Animation) aktivieren, wobei verschiedene Animationen zur Verf\u00fcgung stehen, die das Bild bei Mausber\u00fchrung dynamisch ver\u00e4ndern. Die \u201eAnimation Duration\u201c (Animationsdauer) bestimmt die Geschwindigkeit der Animation, um ein fl\u00fcssiges Nutzererlebnis sicherzustellen. Au\u00dferdem gibt es die Optionen \u201eOverlay\u201c (\u00dcberlagerung) und \u201eContent\u201c (Inhalt), mit denen \u00dcberlagerungseffekte und Textanzeigen auf den Bildern individuell angepasst werden k\u00f6nnen, 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"core\" style=\"margin-bottom:30px\">4\u3001Bereich zur Hervorhebung der Kernvorteile des Produkts<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"457\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u6838\u5fc3\u4f18\u52bf\u5f15\u5bfc\u533a\u5757.png\" alt=\"Bereich zur Darstellung der Kernvorteile der Produkte\" class=\"wp-image-23348\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u6838\u5fc3\u4f18\u52bf\u5f15\u5bfc\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u6838\u5fc3\u4f18\u52bf\u5f15\u5bfc\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Der Bereich zur Darstellung der Kernvorteile des Produkts verwendet dieselben Komponenten wie der zuvor vorgestellte \u201eGesch\u00e4ftsbeschreibungsbereich\u201c, mit dem einzigen Unterschied, dass hier dem Container zus\u00e4tzlich ein Hintergrundbild hinzugef\u00fcgt wurde. Dieser Punkt f\u00fchrt ein neues Wissensthema ein, weshalb der Blogger in diesem Abschnitt erkl\u00e4rt, wie man einem Container ein Hintergrundbild hinzuf\u00fcgt. Die Parameter- und Funktionseinstellungen f\u00fcr \u00dcberschriften-, Texteditor- und Button-Komponenten k\u00f6nnen wie beim \u201eGesch\u00e4ftsbeschreibungsbereich\u201c ge\u00fcbt und angewendet werden.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Methode zum Hinzuf\u00fcgen eines Hintergrundbildes zum Container<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"524\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5.png\" alt=\"\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5\" class=\"wp-image-23355\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px;margin-bottom:30px\">Um in Elementor einem Container ein Hintergrundbild zuzuweisen, muss man im Container den Tab \u201eStil\u201c ausw\u00e4hlen. Zun\u00e4chst w\u00e4hlt man den Container, dem man das Hintergrundbild hinzuf\u00fcgen m\u00f6chte, und wechselt im linken Einstellungsbereich zum \u201eStil\u201c-Tab. Dort klappt man den Bereich \u201eHintergrund\u201c auf und sieht die Option \u201eHintergrund\u00fcberlagerung\u201c. Im Hintergrundtyp w\u00e4hlt man die Bild-Option und l\u00e4dt ein neues Bild hoch oder w\u00e4hlt ein Bild aus der Mediathek aus. Nach Auswahl kann die Bildanzeige weiter angepasst werden. Die Bildaufl\u00f6sung kann als \u201eOriginal\u201c belassen oder nach Bedarf ver\u00e4ndert werden. Im Bereich \u201ePosition\u201c w\u00e4hlt man eine geeignete Ausrichtung, etwa \u201eZentriert\u201c, um das Bild immer mittig anzuzeigen. Die Option \u201eHintergrund fixieren\u201c legt fest, ob das Bild mit der Seite mitscrollt oder fixiert bleibt; w\u00e4hlt man \u201eFixiert\u201c, bleibt das Bild im Sichtfenster stehen. Die Einstellung \u201eHintergrund wiederholen\u201c sollte meist auf \u201eNicht wiederholen\u201c stehen, um zu verhindern, dass kleine Bilder gekachelt werden. Schlie\u00dflich sorgt die Option \u201eGr\u00f6\u00dfe\u201c mit \u201eAbdecken\u201c daf\u00fcr, dass das Bild den gesamten Container ausf\u00fcllt, ohne Leerfl\u00e4chen zu lassen. Mit diesen Einstellungen l\u00e4sst sich die Darstellung des Hintergrundbildes genau steuern und optimal an das Seitenlayout anpassen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"brand\" style=\"margin-bottom:30px\">5\u3001Markenstory-Bereich<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"430\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u54c1\u724c\u6545\u4e8b\u533a\u5757.png\" alt=\"Markengeschichten-Bereich\" class=\"wp-image-23352\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u54c1\u724c\u6545\u4e8b\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u54c1\u724c\u6545\u4e8b\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Das Container-Layout und die verwendeten Element-Komponenten im Markenstory-Bereich entsprechen dem zuvor beschriebenen \u201eProdukt- und Gesch\u00e4ftsbereich\u201c. Es werden ebenfalls die drei Komponenten \u00dcberschrift, Button und Galerie (Gallery) verwendet, und die Gesamtstruktur besteht weiterhin aus einem Elterncontainer mit zwei Kindercontainern. Leser k\u00f6nnen 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 \u201eMarkenstory-Bereichs\u201c umsetzen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"information\" style=\"margin-bottom:30px\">6\u3001Neueste Informationen Bereich<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"432\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6700\u65b0\u4fe1\u606f\u533a\u5757.png\" alt=\"Aktuelle Informationen Bereich\" class=\"wp-image-23354\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6700\u65b0\u4fe1\u606f\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6700\u65b0\u4fe1\u606f\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Damit die Metadaten (Meta Data) der Elementor Post-Komponente auf der Seite im englischen Format angezeigt werden, muss zun\u00e4chst die Sprache der WordPress-Seite auf Englisch eingestellt sein. Das liegt daran, dass das Elementor-Editor-Interface und einige Metadaten standardm\u00e4\u00dfig 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\u00e4ten und Stil-Anpassungen der Post-Komponente erkl\u00e4ren, damit Nutzer diese besser einsetzen k\u00f6nnen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Einstellungen unter dem Tab \u201eInhalt\u201c der Post-Komponente<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"434\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"post\u7ec4\u4ef6\u201c\u5185\u5bb9\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23359\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Im Elementor Post-Widget bietet der \u201eInhalt\u201c-Tab eine Reihe wichtiger Einstellungen zur Steuerung des Layouts und der Darstellung der Artikelliste. Details zu den Funktionen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"translation-block\"><strong>Layout (Layout):<\/strong>\nDieser Bereich erm\u00f6glicht die Auswahl des Darstellungsstils der Artikel. Die Option \u201eSkin\u201c legt das Gesamt-Design fest, z. B. \u201eCards\u201c-Modus, der Artikel als Karten anordnet. Mit \u201eColumns\u201c wird die Anzahl der Spalten festgelegt, w\u00e4hrend \u201ePosts Per Page\u201c die Anzahl der Artikel pro Seite bestimmt.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Bild (Image):<\/strong>\nBildeinstellungen beinhalten den Schalter \u201eShow Image\u201c, der das Anzeigen von Artikel-Thumbnails steuert. Die Option \u201eMasonry\u201c aktiviert ein Mauerwerk-Layout, bei dem Bilder und Artikelbl\u00f6cke unterschiedlich hoch sind, um einen dynamischeren Look zu erzeugen. \u201eImage Resolution\u201c erlaubt die Einstellung der Bildaufl\u00f6sung, z. B. \u201eMedium 0.3x\u201c reduziert die Ladebelastung. \u201eImage Ratio\u201c passt das Seitenverh\u00e4ltnis der Bilder an, um das Layout stimmig zu halten.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Titel (Title):<\/strong>\nIm Titelbereich kann mit dem \u201eShow\u201c-Schalter festgelegt werden, ob der Artikel-Titel angezeigt wird. Au\u00dferdem l\u00e4sst sich mit \u201eTitle HTML Tag\u201c die HTML-\u00dcberschriftenebene (z. B. H3) einstellen, was SEO-Relevanz und Hierarchie beeinflusst.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Auszug (Excerpt):<\/strong>\nDer Auszug steuert die Anzeige der Artikelzusammenfassung. Der \u201eShow\u201c-Schalter aktiviert die Anzeige, w\u00e4hrend \u201eExcerpt Length\u201c die maximale Zeichenanzahl bestimmt, um das Seitenlayout sauber zu halten. Mit \u201eApply to custom Excerpt\u201c kann die Einstellung auch auf benutzerdefinierte Felder angewendet werden.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Metadaten (Meta Data):<\/strong>\nHier 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.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Einstellungen unter dem Tab \u201eStil\u201c der Post-Komponente<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"427\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"post\u7ec4\u4ef6\u201c\u6837\u5f0f\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23358\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Im Stil-Tab bietet die Post-Komponente diverse Optionen zur optischen Anpassung, darunter Gesamt-Layout, Bildstil, Textgestaltung und Abst\u00e4nde, um sicherzustellen, dass die Artikelliste zum Website-Design passt. Details:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"translation-block\"><strong>Layout (Layout):<\/strong>\nHier l\u00e4sst sich die Gesamtgr\u00f6\u00dfe der Post-Karten anpassen, etwa Breite und H\u00f6he, um die Platzierung optimal auf das Seitenlayout abzustimmen.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Bild (Image):<\/strong>\nDer Bildbereich bietet feine Einstellungen f\u00fcr 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.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Inhalt (Content):<\/strong>\nDie Inhalts-Einstellungen betreffen Elemente innerhalb des Artikels wie Titel, Auszug, \u201eRead More\u201c-Button und Metadaten. F\u00fcr den Titel lassen sich Schriftgr\u00f6\u00dfe, Farbe, Schriftgewicht und Abst\u00e4nde anpassen, um eine klare Hierarchie zu schaffen. Auch der Auszug unterst\u00fctzt Schriftstil-Anpassungen f\u00fcr bessere Lesbarkeit und \u00c4sthetik. Die Metadaten erlauben die Individualisierung von Schriftart und Farbe f\u00fcr Datum, Kategorien und Tags, um die Informationsstruktur klarer zu gestalten.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"file\" style=\"margin-bottom:30px\">\u56db\u3001Erstellung der Footer (Fu\u00dfzeile) Template-Datei mit Elementor<\/h2>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"399\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u521b\u5efafooter\uff08\u9875\u811a\uff09\u6a21\u677f\u6587\u4ef6.png\" alt=\"Erstellen einer Footer-(Fu\u00dfzeilen-)Template-Datei mit Elementor\" class=\"wp-image-23364\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u521b\u5efafooter\uff08\u9875\u811a\uff09\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u521b\u5efafooter\uff08\u9875\u811a\uff09\u6a21\u677f\u6587\u4ef6-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Der Footer-Bereich ist der letzte Demonstrationsabschnitt dieses Artikels, in dem erl\u00e4utert wird, wie man das Layout und die Elemente einer Seite individuell erstellt. Nach Fertigstellung des Footer-Layouts ist die Seitenstruktur im Wesentlichen vollst\u00e4ndig und bildet eine komplette Seite. Der Einstieg zur Erstellung der Footer-Template-Datei ist derselbe wie bei der Header-Template-Datei, n\u00e4mlich \u00fcber den Elementor Theme Builder im Frontend der Seite. Im Verwaltungsbereich des Theme Builders findet der Nutzer im linken Template-Verzeichnis die Option \u201eFooter\u201c, die an zweiter Stelle im Verzeichnis steht. Nach dem Klick darauf gelangt man zum Verwaltungsinterface f\u00fcr Footer-Templates. Dort kann man durch Klicken auf die Schaltfl\u00e4che \u201eAdd New\u201c oben rechts eine neue Footer-Template-Datei erstellen. W\u00e4hrend der Erstellung bietet Elementor eine Reihe vordefinierter Footer-Stile an, die der Nutzer direkt ausw\u00e4hlen und schnell das Footer-Design abschlie\u00dfen kann. Falls ein komplett eigenes Layout gew\u00fcnscht ist, kann das Stil-Auswahlfenster geschlossen werden, um mit Containern und Element-Komponenten einen Footer ganz nach dem eigenen Website-Stil zu gestalten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"common\" style=\"margin-bottom:30px\">1\u3001\u00dcbliche Layoutformen des Footers<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2532\" height=\"1438\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f.png\" alt=\"Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f\" class=\"wp-image-23369\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f.png 2532w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f-18x10.png 18w\" sizes=\"(max-width: 2532px) 100vw, 2532px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Wie in den vorherigen Abschnitten durch Lernen und Praxis deutlich wurde, kann mit der sicheren Anwendung der zuvor erl\u00e4uterten 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\u00f6nnen die entsprechenden Element-Komponenten in die Kindercontainer eingef\u00fcgt werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"component\" style=\"margin-bottom:30px\">2\u3001H\u00e4ufig genutzte Footer-Komponenten<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"539\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\uff08\u9875\u811a\uff09\u5e38\u7528\u7684\u7ec4\u4ef6.png\" alt=\"H\u00e4ufig verwendete Komponenten im Footer\" class=\"wp-image-23370\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\uff08\u9875\u811a\uff09\u5e38\u7528\u7684\u7ec4\u4ef6.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\uff08\u9875\u811a\uff09\u5e38\u7528\u7684\u7ec4\u4ef6-18x10.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">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\u00fcllt aber dennoch sehr n\u00fctzliche Funktionen, etwa die Anzeige von Copyright-Informationen, Kontaktm\u00f6glichkeiten, sozialen Links, sekund\u00e4ren Navigationsmen\u00fcs oder Abonnementformularen. Die Komplexit\u00e4t 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\u00e4sst sich mit diesen g\u00e4ngigen Komponenten ein klar strukturierter, optisch ansprechender und funktional vollst\u00e4ndiger Footer realisieren, auch ohne \u00fcberm\u00e4\u00dfige 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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Site Logo-Komponente<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"514\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Site-Logo\u7ec4\u4ef6.png\" alt=\"Site Logo\u7ec4\u4ef6\" class=\"wp-image-23376\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Site-Logo\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Site-Logo\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Die Site Logo-Komponente wurde zwar bereits im Kapitel \u201eHeader-Template-Datei\u201c 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 \u201eInhalt\u201c- und \u201eStil\u201c-Registerkarte dieser Komponente genauer erl\u00e4utert, um eine flexiblere Anwendung in unterschiedlichen Szenarien zu erm\u00f6glichen.<\/p>\n\n\n\n<p>Im \u201eInhalt\u201c-Tab der Site Logo-Komponente kann der Nutzer w\u00e4hlen, ob das im WordPress-Backend eingestellte Website-Logo verwendet oder ein eigenes Bild als Logo hochgeladen wird. Zus\u00e4tzlich zur Bildauswahl erlaubt dieses Panel die Einstellung des Link-Verhaltens des Logos (zum Beispiel, ob ein Klick auf das Logo zur Startseite f\u00fchrt) sowie die Bildgr\u00f6\u00dfe (zur Auswahl stehen Standard, Thumbnail, Medium und weitere von WordPress definierte Bildgr\u00f6\u00dfen). Der \u201eStil\u201c-Tab bietet umfassendere Steuerungsm\u00f6glichkeiten f\u00fcr die optische Darstellung des Logos. Hier l\u00e4sst sich die Breite und maximale Breite anpassen, um das Logo auf verschiedenen Bildschirmaufl\u00f6sungen optimal darzustellen. Dar\u00fcber hinaus sind Einstellungen f\u00fcr die Bildopazit\u00e4t, CSS-Filtereffekte (wie Graustufen, Helligkeit, Kontrast etc.) verf\u00fcgbar, um das Logo besser in das Gesamtdesign einzuf\u00fcgen. Zus\u00e4tzlich unterst\u00fctzt 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\u00fcr, dass das Logo auf verschiedenen Ger\u00e4ten und Designstilen stets optimal pr\u00e4sentiert wird.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) \u00dcberschriften-Komponente<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"489\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6.png\" alt=\"\u6807\u9898\u7ec4\u4ef6\" class=\"wp-image-23377\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Die Funktions- und Stileinstellungen der \u00dcberschrift-Komponente wurden bereits im dritten Kapitel dieses Artikels, im Abschnitt \u201e<strong>Seitenstruktur mit Elementor aufbauen und Inhaltselemente hinzuf\u00fcgen<\/strong>\u201c, im Unterkapitel \u201eGesch\u00e4ftsbeschreibungsbereich\u201c erl\u00e4utert. Daher wird der Blogger hier nicht weiter darauf eingehen. Wenden Sie einfach die zuvor erlernte Methode zur Verwendung der \u00dcberschrift-Komponente in der Praxis an.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">\uff083\uff09Icon-Listen-Widget<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"493\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u56fe\u6807\u5217\u8868\u7ec4\u4ef6.png\" alt=\"\u56fe\u6807\u5217\u8868\u7ec4\u4ef6\" class=\"wp-image-23378\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u56fe\u6807\u5217\u8868\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u56fe\u6807\u5217\u8868\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Im \u201eIcon-Listen\u201c-Widget von Elementor dient die Registerkarte \u201eInhalt\u201c haupts\u00e4chlich dazu, die einzelnen Listeneintr\u00e4ge und deren Anordnung zu konfigurieren. Du kannst Eintr\u00e4ge hinzuf\u00fcgen und jedem einen bestimmten Icon zuweisen, zum Beispiel ein H\u00e4kchen, Pfeil oder Telefonsymbol, um die Informationen visuell hervorzuheben. Nat\u00fcrlich kannst du \u2013 wie in diesem Beispiel des Bloggers gezeigt \u2013 die Icons auch komplett entfernen, indem du das aktuelle Icon im Einstellungsbereich l\u00f6schst. Jeder Eintrag kann mit einem benutzerdefinierten Titeltext versehen und mit einem Link ausgestattet werden (z.\u202fB. zur Weiterleitung auf eine andere Seite oder zum Start eines Anrufs).<\/p>\n\n\n\n<p>In der Registerkarte \u201eStil\u201c bietet Elementor weitere M\u00f6glichkeiten zur individuellen Gestaltung der Icon-Liste. Sowohl das Icon als auch der Textstil lassen sich separat anpassen. F\u00fcr das Icon kannst du Farbe, Gr\u00f6\u00dfe, Abstand und Hover-Effekte festlegen. F\u00fcr den Text kannst du Schriftart, Schriftgr\u00f6\u00dfe, Zeilenh\u00f6he, Farbe und den Abstand zwischen Icon und Text einstellen. Wenn du die Trennlinienfunktion aktivierst, lassen sich auch die Linienst\u00e4rke, -farbe und -stil anpassen. Mit diesen Stiloptionen kannst du die Icon-Liste perfekt an das Design deiner Seite anpassen \u2013 egal ob schlicht oder kreativ mit starkem visuellen Fokus.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">\uff084\uff09Social-Icons-Widget<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"485\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6.png\" alt=\"\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6\" class=\"wp-image-23379\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Im \u201eSocial Icons\u201c-Widget von Elementor dient die Registerkarte \u201eInhalt\u201c zum Hinzuf\u00fcgen und Verwalten verschiedener Social-Media-Links. Du kannst beliebig viele Social-Icon-Eintr\u00e4ge hinzuf\u00fcgen, wie z.\u202fB. Facebook, Twitter und YouTube, wie im obigen Beispiel des Bloggers dargestellt. F\u00fcr jeden Eintrag kannst du das Icon w\u00e4hlen (aus der integrierten Bibliothek oder durch Hochladen einer SVG-Datei), den entsprechenden Link einf\u00fcgen und festlegen, ob sich der Link in einem neuen Tab \u00f6ffnen soll. Neben den vordefinierten sozialen Plattformen kannst du auch den Typ \u201eBenutzerdefiniert\u201c w\u00e4hlen, um beliebige Links und Icons hinzuzuf\u00fcgen \u2013 f\u00fcr maximale Flexibilit\u00e4t. Diese Einstellungen helfen dabei, Besucher schnell zu anderen Plattformen weiterzuleiten und die externe Verlinkung sowie Markenvernetzung visuell zu st\u00e4rken.<\/p>\n\n\n\n<p>In der Registerkarte \u201eStil\u201c bietet Elementor zahlreiche visuelle Anpassungsoptionen, damit die Social Icons sowohl funktional als auch optisch ansprechend sind. Du kannst die Gr\u00f6\u00dfe, den Abstand und die Ausrichtung der Icons sowie das Farbschema (z.\u202fB. Markenfarben oder benutzerdefinierte Farben) einstellen. Dar\u00fcber hinaus lassen sich Rahmen, Eckenradius und Hintergrundfarbe der Icons anpassen. Auch Hover-Effekte wie Farbwechsel, Zoom-Animation oder Schatteneffekte k\u00f6nnen aktiviert werden, um eine dynamischere Nutzererfahrung zu bieten. Ob du also einen schlichten Footer-Bereich oder ein auff\u00e4lliges Social-Media-Element gestalten m\u00f6chtest \u2013 das Social Icons-Widget von Elementor bietet dir ausreichend kreative Freiheit.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">\uff085\uff09Texteditor-Widget<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"491\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6.png\" alt=\"\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6\" class=\"wp-image-23380\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Im \u201eTexteditor\u201c-Widget von Elementor dient die Registerkarte \u201eInhalt\u201c haupts\u00e4chlich zum Eingeben von Textinhalten und zur grundlegenden Textformatierung. Du kannst deinen gew\u00fcnschten Text direkt im Editorfeld eingeben. Dieses Widget nutzt einen WYSIWYG-Editor, \u00e4hnlich dem klassischen WordPress-Editor, und unterst\u00fctzt Formatierungen wie Fett, Kursiv, Links einf\u00fcgen, Ausrichtung usw. Wenn du dynamische Inhalte (z.\u202fB. Beitragstitel, Datum) einf\u00fcgen m\u00f6chtest, kannst du auch die dynamischen Tags von Elementor nutzen. Insgesamt eignet sich diese Registerkarte besonders zur Inhaltsbef\u00fcllung und Strukturierung \u2013 ideal f\u00fcr Textabschnitte, Beschreibungen, Copyright-Hinweise und \u00e4hnliche Textbereiche.<\/p>\n\n\n\n<p>In der Registerkarte \u201eStil\u201c kannst du das Erscheinungsbild des Textes weiter individualisieren. Du kannst unter anderem Textfarbe, Schriftart, Schriftgr\u00f6\u00dfe, Schriftst\u00e4rke, Zeilenh\u00f6he und Zeichenabstand festlegen \u2013 damit alles optisch zum Design deiner Seite passt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"display\" style=\"margin-bottom:30px\">3. Ver\u00f6ffentlichung des Footer-Template-Dateis und Festlegung der Anzeigebedingungen<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"451\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png\" alt=\"\u9875\u811a\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6\" class=\"wp-image-23308\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Das Footer-Template (Seitenfu\u00df) 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\u00f6nnen \u2013 wie in der obigen Abbildung mit Hinweisen dargestellt \u2013 die Ver\u00f6ffentlichung des Footer-Templates und die Konfiguration der Anzeigeeinstellungen entsprechend vornehmen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"show\" style=\"margin-bottom:30px\">4\u3001Pr\u00e4sentation der mit dem Elementor-Editor erstellten fertigen Seite<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"3045\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66.png\" alt=\"WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66\" class=\"wp-image-23372\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66-4x12.png 4w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\"><strong>Schlusswort:<\/strong> Die oben gezeigten vollst\u00e4ndigen Seiten-Screenshots sind das Ergebnis, das der Blogger w\u00e4hrend der Erstellung dieses Tutorials in einem praktischen Schritt-f\u00fcr-Schritt-Prozess mit dem Elementor-Editor aufgebaut hat. Beginnend mit dem Anlegen einer neuen Seite im WordPress-Backend, \u00fcber die Erstellung von Header, Hauptinhalt und Footer mit Elementor \u2013 jedes Element und jede Struktur wurde exakt anhand der tats\u00e4chlichen Entwicklungsschritte demonstriert. Das letztlich pr\u00e4sentierte Seitenlayout ist somit ein direktes Produkt des in diesem Artikel behandelten Inhalts. Dieses Elementor-Tutorial f\u00fcr 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\u00f6\u00dft, kannst du jederzeit in das entsprechende Kapitel zur\u00fcckspringen, um Einzelheiten nachzulesen. Und falls du den gesamten Prozess erfolgreich abgeschlossen hast, bist du herzlich eingeladen, auf dieser Grundlage weitere individuelle Gestaltungselemente hinzuzuf\u00fcgen und deine hochwertigen Website-Seiten weiter auszubauen.<\/p>\n\n\n\n<p class=\"translation-block\">Wenn du nach dem Lesen dieses Tutorials das Gef\u00fchl hast, dass der Aufbau einer WordPress-Website dennoch professionelle Unterst\u00fctzung erfordert, oder wenn du das Design deiner Elementor-Seiten auf ein h\u00f6heres Niveau bringen m\u00f6chtest, dann schau dir gerne die Leistungen von Logic Thinking Digital Technology Co., Ltd. an. Wir sind spezialisiert auf <strong><a href=\"https:\/\/www.szlogic.net\/de\/web-design\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress-Webdesign und individuelle Entwicklung<\/a><\/strong>, verf\u00fcgen \u00fcber umfassende Praxiserfahrung und sind in der Lage, auf Grundlage deiner Markenpositionierung und gesch\u00e4ftlichen Anforderungen professionelle Webseiten zu gestalten, die auf Nutzererfahrung und Conversion-Ziele ausgerichtet sind. Ob Unternehmenswebsite, E-Commerce-Plattform oder mehrsprachige internationale Seite \u2013 wir bieten dir effiziente, stabile und skalierbare L\u00f6sungen f\u00fcr deinen Webauftritt.<\/p>\n\n\n\n<p><strong>Dieser Artikel ist urheberrechtlich gesch\u00fctzt von Logic Digital Technology (SZLOGIC). Die pers\u00f6nliche Weitergabe zu Lernzwecken ist willkommen. Jegliche kommerzielle Nutzung oder Vervielf\u00e4ltigung ohne Genehmigung ist strengstens untersagt.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>WordPress\u6559\u5b66\uff1a\u4ece\u96f6\u5f00\u59cb\u4f7f\u7528Elementor\u7f16\u8f91\u5668\u81ea\u5b9a\u4e49\u6784\u5efa\u9875\u9762 \u5982\u679c\u4f60\u60f3\u6253\u9020\u4e00\u4e2a\u4e13\u4e1a\u53c8\u4e2a\u6027\u5316\u7684Wo [&hellip;]<\/p>","protected":false},"author":1,"featured_media":23270,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[87],"tags":[],"class_list":["post-23262","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.szlogic.net\/de\/wp-json\/wp\/v2\/posts\/23262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.szlogic.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.szlogic.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.szlogic.net\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.szlogic.net\/de\/wp-json\/wp\/v2\/comments?post=23262"}],"version-history":[{"count":73,"href":"https:\/\/www.szlogic.net\/de\/wp-json\/wp\/v2\/posts\/23262\/revisions"}],"predecessor-version":[{"id":23397,"href":"https:\/\/www.szlogic.net\/de\/wp-json\/wp\/v2\/posts\/23262\/revisions\/23397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.szlogic.net\/de\/wp-json\/wp\/v2\/media\/23270"}],"wp:attachment":[{"href":"https:\/\/www.szlogic.net\/de\/wp-json\/wp\/v2\/media?parent=23262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.szlogic.net\/de\/wp-json\/wp\/v2\/categories?post=23262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.szlogic.net\/de\/wp-json\/wp\/v2\/tags?post=23262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}