{"id":1217,"date":"2020-02-01T21:59:33","date_gmt":"2020-02-01T20:59:33","guid":{"rendered":"https:\/\/quantenfrosch.at\/blog\/?p=1217"},"modified":"2023-09-03T23:36:25","modified_gmt":"2023-09-03T21:36:25","slug":"wordpress-anleitung-fuer-elementor","status":"publish","type":"post","link":"https:\/\/quantenfrosch.at\/blog\/wordpress-anleitung-fuer-elementor\/","title":{"rendered":"WordPress Anleitung: So passt du den Header mit Elementor an"},"content":{"rendered":"<div id='fwdsapdiv0' class='fwdsap-holder-div'><\/div>\n<p>Seit \u00fcber 15 Jahren wird an WordPress st\u00e4ndig get\u00fcftelt, um das beliebte CMS noch besser und einfacher zu machen. So erhielt WordPress Gutenberg, um die Bearbeitung von Inhalten auf ein neues Level zu bringen. Zwar der neue Editor wirklich viele Vorteile mit sich bringt und bereits seine Fans hat, m\u00f6chten wir dich auf \u00e4hnliches Tool namens <strong>Elementor <\/strong>aufmerksam machen, das Gutenberg in Sachen Benutzerfreundlichkeit und Flexibilit\u00e4t in den Schatten stellen kann.<\/p>\n<h2>Was ist eigentlich Elementor?<\/h2>\n<p>Der Elementor ist ein <a href=\"https:\/\/quantenfrosch.at\/blog\/drag-drop-page-builder-fuer-wordpress\/\">Drag &amp; Drop Page Builder Plugin<\/a> f\u00fcr WordPress, welches die Bearbeitung der Inhalte und die Erstellung eigener Elemente im Frontend erm\u00f6glicht. Mit Elementor kannst du deine Website mit lediglich wenigen Klicks individualisieren und auf deine Corporate Identity leicht abstimmen. Mit Elementor-Widgets, die sich in Seiten per Drag-and-Drop einf\u00fcgen lassen, schaffst du es, ohne viel Aufwand deine Website aufzuwerten. Besonders empfehlenswert ist Elementor f\u00fcr Nutzer ohne Vorwissen.<br \/>\nDer Page Builder kommt in der Gratis- und Pro-Version. Obwohl die kostenpflichtige Version \u00fcber mehr interessante Optionen verf\u00fcgt, bietet die kostenlose Variante auch viele M\u00f6glichkeiten. Gerade auf eine davon werde ich in diesem Tutorial n\u00e4her eingehen. Ich m\u00f6chte dir jetzt zeigen, wie du einen benutzerdefinierten Header in Elementor erstellen kannst.<\/p>\n<h3>Was ist ein Header?<\/h3>\n<p>Der Header steht f\u00fcr den oberen Teil einer Webseite, das sich auf jeder Seite findet. Der Header kann enthalten:<\/p>\n<ul>\n<li>Logo<\/li>\n<li>Men\u00fc<\/li>\n<li>Sprachumschalter<\/li>\n<li>Warenkorb<\/li>\n<\/ul>\n<p>Auf der Webseite von Quantenfrosch sieht der Header so aus:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1220 size-large\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/1-1024x59.png\" alt=\"Quantenfrosch Website-Header\" width=\"1024\" height=\"59\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/1-1024x59.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/1-300x17.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/1-768x44.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/1-1536x89.png 1536w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/1.png 1902w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Wenn du dabei bist, einen Header zu erstellen, solltest du etwas nicht au\u00dfer Acht lassen: Der Header ist nicht nur das Erste, was dein Besucher bemerkt, sondern geh\u00f6rt auch zu den meist genutzten Bereichen deiner Webseite. Doch was solltest du im Auge behalten?<\/p>\n<ul>\n<li>W\u00e4hle die passende Schrift und Farbe f\u00fcr die beste Leserbarkeit<\/li>\n<li>Ziehe in Betracht den Typ deiner Webseite: Ein Header f\u00fcr einen Blog und ein Header f\u00fcr eine E-Commerce-Website sehen unterschiedlich aus<\/li>\n<li>Vergiss nicht, dass die UX sehr wichtig ist: Der Header soll die Orientierung auf deiner Webseite einfacher machen.<\/li>\n<\/ul>\n<h3>Men\u00fc erstellen<\/h3>\n<p>Angenommen, du willst den Header auf deiner neuen Webseite \u00e4ndern. Ich gehe davon aus, dass du ein Theme und Elementor bereits installiert hast. In meinem Fall ist das <a href=\"https:\/\/www.templatemonster.com\/de\/wordpress-themes\/monstroid2.html\" target=\"_blank\" rel=\"noopener noreferrer\">Monstroid2 WordPress Theme<\/a>, das \u00fcber Elementor verf\u00fcgt. Hier ist mein aktueller Header:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1223\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/2-1024x75.png\" alt=\"Monstroid Custom Header\" width=\"1024\" height=\"75\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/2-1024x75.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/2-300x22.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/2-768x56.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/2-1536x112.png 1536w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/2.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Der sieht zwar sehr gut aus, aber meine Webseite ist auf Deutsch und ich m\u00f6chte einige Elemente l\u00f6schen. Wie kann ich das machen?<\/p>\n<p><strong>1. Also ich gehe zum WordPress <em class=\"dfd-textmodule-featured-decoration\">Dashboard &gt;&gt; Design &gt;&gt; Men\u00fcs<\/em> und klicke auf erstelle ein neues Men\u00fc:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1225\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/3-1024x603.png\" alt=\"Wordpress Dashboard Men\u00fc\" width=\"1024\" height=\"603\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/3-1024x603.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/3-300x177.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/3-768x452.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/3.png 1155w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>2. Danach gebe ich den Namen und klicke auf <em class=\"dfd-textmodule-featured-decoration\">Men\u00fc erstellen<\/em>:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1226\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/4-1024x248.png\" alt=\"Wordpress Dashboard Men\u00fc\" width=\"1024\" height=\"248\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/4-1024x248.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/4-300x73.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/4-768x186.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/4-1536x372.png 1536w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/4.png 1731w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>3. Dann w\u00e4hle ich Header und klicke auf <em class=\"dfd-textmodule-featured-decoration\">Men\u00fc speichern<\/em>:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1228\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/5-1024x273.png\" alt=\"Wordpress Dashboard Men\u00fc\" width=\"1024\" height=\"273\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/5-1024x273.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/5-300x80.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/5-768x205.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/5-1536x409.png 1536w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/5.png 1720w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>4. Als N\u00e4chstes klicke ich auf Individuelle Links, gebe einfach den Link-Text sowie die URL ein und klicke auf <em class=\"dfd-textmodule-featured-decoration\">Zum Men\u00fc hinzuf\u00fcgen<\/em>:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1230\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/6.png\" alt=\"Wordpress Men\u00fcpunkte hinzuf\u00fcgen\" width=\"1016\" height=\"484\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/6.png 1016w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/6-300x143.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/6-768x366.png 768w\" sizes=\"auto, (max-width: 1016px) 100vw, 1016px\" \/><\/p>\n<p>Wohin f\u00fchren meine Links?<\/p>\n<ul>\n<li><strong>Home <\/strong>f\u00fchrt zur Homepage<\/li>\n<li><strong>Leistungen <\/strong>&#8211; zu Services, welche die Agentur anbietet<\/li>\n<li><strong>Beispielprojekte <\/strong>&#8211; zu fertiggestellten Projekten<\/li>\n<li><strong>Tools <\/strong>-zu kostenlosem Werkzeug zur Website-Analyse<\/li>\n<li><strong>\u00dcber mich<\/strong> &#8211; zu meiner Biografie, damit meine Kunde mich kennelernen k\u00f6nnen<\/li>\n<li><strong>Shop <\/strong>&#8211; zu Produkten, die im Shop angeboten werden<\/li>\n<li><strong>Blog <\/strong>&#8211; zur Sektion, wo ich meine Beitr\u00e4ge ver\u00f6ffentliche<\/li>\n<li><strong>Kontakt <\/strong>&#8211; zu meinen Kontaktdaten<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1233\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/7-1024x519.png\" alt=\"Wordpress Men\u00fcstruktur\" width=\"1024\" height=\"519\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/7-1024x519.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/7-300x152.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/7-768x389.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/7.png 1127w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h3>Header mit Elemetor erstellen<\/h3>\n<p><strong>1. Ich \u00f6ffne eine Seite \u00fcber Elementor und klicke auf <em class=\"dfd-textmodule-featured-decoration\">Edit Header<\/em>:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1234\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/8-1024x49.png\" alt=\"Monstroid2 Header bearbeiten\" width=\"1024\" height=\"49\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/8-1024x49.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/8-300x14.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/8-768x37.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/8-1536x74.png 1536w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/8.png 1605w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>2. Nachdem die Seite geladen ist, klicke ich auf <em class=\"dfd-textmodule-featured-decoration\">Abschnitt l\u00f6schen<\/em>, um einen eigenen Header zu erstellen:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1235\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/9-1024x38.png\" alt=\"Monstroid2 Header bearbeiten\" width=\"1024\" height=\"38\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/9-1024x38.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/9-300x11.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/9-768x28.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/9-1536x57.png 1536w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/9.png 1618w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>3. Ich klicke auf das Kreuz, um einen neuen Abschnitt hinzuzuf\u00fcgen, und lege die Struktur fest. Ich w\u00e4hle die<em class=\"dfd-textmodule-featured-decoration\"> letzte Struktur<\/em>:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1236\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/10-1024x271.png\" alt=\"Elementor Layout Optionen\" width=\"1024\" height=\"271\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/10-1024x271.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/10-300x79.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/10-768x203.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/10.png 1165w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>4. Ich gehe zu <em class=\"dfd-textmodule-featured-decoration\">Layout<\/em>:<\/strong><\/p>\n<ul>\n<li><strong>Inhaltsbreite <\/strong>&gt;&gt; Volle Breite<\/li>\n<li><strong>Spaltenabstand <\/strong>&gt;&gt; Keine L\u00fccke<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1237\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/11.png\" alt=\"Elemetor Layout einstellen\" width=\"955\" height=\"314\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/11.png 955w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/11-300x99.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/11-768x253.png 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/p>\n<h3>Elementor Elemente hinzuf\u00fcgen<\/h3>\n<p>Jetzt werden wir Elemente hinzuf\u00fcgen. Ich will, dass mein Header \u00fcber ein Icon und ein Men\u00fc verf\u00fcgt. Die rechte Spalte soll ein Logo enthalten und die zentrale Spalte &#8211; ein Men\u00fc. Los!<\/p>\n<p><strong>1. Ich klicke auf <em class=\"dfd-textmodule-featured-decoration\">dieses Symbol<\/em> <\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1238\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/12.png\" alt=\"Elementor Men\u00fc Button\" width=\"40\" height=\"34\" \/><\/p>\n<p><strong>2. Und f\u00fcge w\u00e4hle <em class=\"dfd-textmodule-featured-decoration\">Icon<\/em> und <em class=\"dfd-textmodule-featured-decoration\">Mega Menu<\/em>. Du kannst nach diesen Elementen hier suchen:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1244\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/13.png\" alt=\"Elementor Icon Modul\" width=\"499\" height=\"314\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/13.png 499w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/13-300x189.png 300w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/p>\n<p><strong>3. Elementor ist wie gesagt ein <em class=\"dfd-textmodule-featured-decoration\">Drag&amp;Drop Builder<\/em> &#8211; ich klicke auf das Element mit der linken Maustaste und bewege es:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1245\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/14.png\" alt=\"Elementor Icon\" width=\"659\" height=\"316\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/14.png 659w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/14-300x144.png 300w\" sizes=\"auto, (max-width: 659px) 100vw, 659px\" \/><\/p>\n<p><strong>4. Du kannst entweder ein Icon in der Icon-Bibliothek finden oder eigene SVG-Datei hochladen:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1246\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/15.png\" alt=\"Elementor Icon Modul\" width=\"574\" height=\"461\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/15.png 574w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/15-300x241.png 300w\" sizes=\"auto, (max-width: 574px) 100vw, 574px\" \/><\/p>\n<p>Falls dein Logo als PNG statt SVG gespeichert wurde, kannst du die Datei einfach konvertieren. <a href=\"https:\/\/convertio.co\/de\/png-svg\/\" target=\"_blank\" rel=\"noopener noreferrer\">Convertio <\/a>oder <a href=\"https:\/\/bild.online-convert.com\/de\/umwandeln-in-avg\" target=\"_blank\" rel=\"noopener noreferrer\">Online-Convert<\/a> erweist sich als hilfreich.<\/p>\n<p><strong>5. Um das Men\u00fc hinzuzuf\u00fcgen, verwende ich das Element namens Mega Menu and w\u00e4hle den Header:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1247\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/16.png\" alt=\"Elementor Mega Menu\" width=\"667\" height=\"319\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/16.png 667w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/16-300x143.png 300w\" sizes=\"auto, (max-width: 667px) 100vw, 667px\" \/><\/p>\n<h4>Header anpassen<\/h4>\n<p>Wirf einen Blick auf den Header. Sieht er geeignet aus? Wenn ja, dann speichere die Seite und schlie\u00dfe den Editor. Wenn nein, dann kannst du ihn anpassen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1248\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/17-1024x93.png\" alt=\"Header Zwischenabschnitt\" width=\"1024\" height=\"93\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/17-1024x93.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/17-300x27.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/17-768x70.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/17-1536x140.png 1536w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/17.png 1617w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>1. Ich klicke auf <em class=\"dfd-textmodule-featured-decoration\">Abschnitt bearbeiten &gt;&gt; Stil &gt;&gt; Hintergrund &gt;&gt; Hintergrundtyp &gt;&gt; Verlauf<\/em>:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1251\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/18-1024x242.png\" alt=\"Hintergrund im Elementor bearbeiten\" width=\"1024\" height=\"242\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/18-1024x242.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/18-300x71.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/18-768x181.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/18.png 1287w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>2. Ich mache das Men\u00fc grau! Daf\u00fcr klicke ich auf <em class=\"dfd-textmodule-featured-decoration\">Farbe<\/em> und w\u00e4hle Grau. Vergiss nicht die <em class=\"dfd-textmodule-featured-decoration\">Zweite Farbe<\/em> zu l\u00f6schen:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1252\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/19-1024x208.png\" alt=\"Hintergrund mit Elementor bearbeiten\" width=\"1024\" height=\"208\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/19-1024x208.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/19-300x61.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/19-768x156.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/19-1536x311.png 1536w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/19.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>3. Jetzt klicke ich auf <em class=\"dfd-textmodule-featured-decoration\">Mega Menu bearbeiten &gt;&gt; Stil &gt;&gt; Menu Container &gt;&gt; Menu Items Alignment &gt;&gt; Center<\/em>:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1253\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/20-1024x125.png\" alt=\"Hintergrund des Headers bearbeiten\" width=\"1024\" height=\"125\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/20-1024x125.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/20-300x37.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/20-768x94.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/20-1536x188.png 1536w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/20.png 1918w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong><em class=\"dfd-textmodule-featured-decoration\">Main Menu Items &gt;&gt; Typografie:<\/em><\/strong><\/p>\n<ul>\n<li><strong>Schriftfamilie <\/strong>&gt;&gt; Open Sans<\/li>\n<li><strong>Gr\u00f6\u00dfe <\/strong>&gt;&gt; 14px<\/li>\n<li><strong>Schriftschnitt <\/strong>&gt;&gt; 400<\/li>\n<li><strong>Stil <\/strong>&gt;&gt; Normal<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1254\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/21-1024x442.png\" alt=\"Menu Items im Elementor bearbeiten\" width=\"1024\" height=\"442\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/21-1024x442.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/21-300x130.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/21-768x332.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/21-1536x663.png 1536w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/21.png 1646w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>Main Menu Items:<\/strong><\/p>\n<ul>\n<li><strong>Normal <\/strong>&gt;&gt; Text color &gt;&gt; #FFFFFF<\/li>\n<li><strong>Hover <\/strong>&gt;&gt; Text color &gt;&gt; #6EC1E4<\/li>\n<li><strong>Hover <\/strong>&gt;&gt; Hintergrundtyp &gt;&gt; Klassisch &gt;&gt; Farbe &gt;&gt; #54595F<\/li>\n<li><strong>Hover <\/strong>&gt;&gt; Margin &gt;&gt; 0,0,0,0<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1255\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/22-1024x546.png\" alt=\"Menu Items bearbeiten\" width=\"1024\" height=\"546\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/22-1024x546.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/22-300x160.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/22-768x409.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/22-1536x818.png 1536w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/22.png 1693w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h3>Untermen\u00fc hinzuf\u00fcgen<\/h3>\n<p>Falls du mehr Seiten in deinen Header einf\u00fcgen oder das Men\u00fc schmaler machen willst, kannst du Untermen\u00fcs erstellen.<\/p>\n<p><strong>1. Geh zur\u00fcck zu <em class=\"dfd-textmodule-featured-decoration\">Dashboard<\/em> und f\u00fcge mehr <em class=\"dfd-textmodule-featured-decoration\">Individuelle Links<\/em> hinzu:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1258\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/23.png\" alt=\"Wordpress Men\u00fc bearbeiten\" width=\"758\" height=\"556\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/23.png 758w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/23-300x220.png 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/p>\n<p><strong>2. Ich ziehe die Punkte des Untermen\u00fcs nach rechts und lege unter das Men\u00fc-Element ab:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1259\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/24.png\" alt=\"Untermen\u00fcpunkt erstellen\" width=\"523\" height=\"370\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/24.png 523w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/24-300x212.png 300w\" sizes=\"auto, (max-width: 523px) 100vw, 523px\" \/><\/p>\n<p><strong>3. Ergebnis:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1260\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/25.png\" alt=\"Untermen\u00fcpunkt erstellen\" width=\"521\" height=\"353\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/25.png 521w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/25-300x203.png 300w\" sizes=\"auto, (max-width: 521px) 100vw, 521px\" \/><\/p>\n<p><strong>4. Ich klicke auf <em class=\"dfd-textmodule-featured-decoration\">Men\u00fc speichern<\/em> und gehe zur\u00fcck zu Elementor.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1261\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/26-1024x140.png\" alt=\"Elementor Header\" width=\"1024\" height=\"140\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/26-1024x140.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/26-300x41.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/26-768x105.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/26-1536x209.png 1536w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/26.png 1614w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>5. Ich klicke auf <em class=\"dfd-textmodule-featured-decoration\">Sub Menu<\/em>, um das Untermen\u00fc anzupassen:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1264\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/27.png\" alt=\"Untermen\u00fc mit Elementor bearbeiten\" width=\"299\" height=\"546\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/27.png 299w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/27-164x300.png 164w\" sizes=\"auto, (max-width: 299px) 100vw, 299px\" \/><\/p>\n<h3>Header mit Elementor responsive machen<\/h3>\n<p>Da es viele Benutzer gibt, die Websites von Tablets und Handys aus aufrufen, solltest du deine Seite auch f\u00fcr alle Ger\u00e4te anpassen, also responsive machen.<\/p>\n<p><strong>1. Ich klicke hierf\u00fcr auf <em class=\"dfd-textmodule-featured-decoration\">Responsiver Modus<\/em> und w\u00e4hle <em class=\"dfd-textmodule-featured-decoration\">Tablet<\/em> oder <em class=\"dfd-textmodule-featured-decoration\">Mobil<\/em>:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1265\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/28.png\" alt=\"Reponsiver Modus in Elementor\" width=\"299\" height=\"181\" \/><\/p>\n<p><strong>2. Dann gehe ich zu <em class=\"dfd-textmodule-featured-decoration\">Mobile Menu<\/em> und w\u00e4hle die Farben:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1266\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/29-1024x376.png\" alt=\"Mobiles Men\u00fc in Elementor bearbeiten\" width=\"1024\" height=\"376\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/29-1024x376.png 1024w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/29-300x110.png 300w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/29-768x282.png 768w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/29.png 1318w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>3. Danach klicke ich auf <em class=\"dfd-textmodule-featured-decoration\">Main Menu Items &gt;&gt; Typografie &gt;&gt; Gr\u00f6\u00dfe &gt;&gt; 20<\/em>. Wenn ein Element das Handy-Symbol hat, das hei\u00dft, dass die \u00c4nderung nur f\u00fcr die Mobilversion gilt:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1267\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/30.png\" alt=\"Schriftgr\u00f6\u00dfe f\u00fcr mobiles Men\u00fc einstellen\" width=\"455\" height=\"263\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/30.png 455w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/30-300x173.png 300w\" sizes=\"auto, (max-width: 455px) 100vw, 455px\" \/><\/p>\n<p>4. Sobald du alles gemacht hat, vergiss nicht, den Header zu speichern. An dieser Stelle ich auf <em class=\"dfd-textmodule-featured-decoration\">SPEICHERN<\/em>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1268\" src=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/31.png\" alt=\"Speichern Button in Elementor\" width=\"411\" height=\"156\" srcset=\"https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/31.png 411w, https:\/\/quantenfrosch.at\/blog\/wp-content\/uploads\/31-300x114.png 300w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/p>\n<h5>Fazit<\/h5>\n<p>Du hast heute gelernt, wie du einen eigenen Header mit Elementor erstellen kannst. Hoffentlich war es nachvollziehbar f\u00fcr dich. Elementor ist tats\u00e4chlich sehr einfach. Versuche diese Schritte selbst zu wiederholen, hab keine Angst zu experimentieren und es f\u00e4llt dir leicht, einen passenden Header f\u00fcr deine Website zu gestalten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Seit \u00fcber 15 Jahren wird an WordPress st\u00e4ndig get\u00fcftelt, um das beliebte CMS noch besser und einfacher zu machen. So erhielt WordPress Gutenberg, um die Bearbeitung von Inhalten auf ein<\/p>\n","protected":false},"author":4,"featured_media":1222,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","rank_math_title":"Elementor Anleitung: So passt du einen WordPress Header an","rank_math_description":"Mit Elementor kannst du deine Website mit wenigen Klicks individualisieren und per Drag-and-Drop ohne viel Aufwand aufwerten.","rank_math_focus_keyword":"elementor"},"categories":[12],"tags":[17],"class_list":["post-1217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-plugins"],"_links":{"self":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts\/1217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/comments?post=1217"}],"version-history":[{"count":5,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts\/1217\/revisions"}],"predecessor-version":[{"id":1677,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/posts\/1217\/revisions\/1677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/media\/1222"}],"wp:attachment":[{"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/media?parent=1217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/categories?post=1217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quantenfrosch.at\/blog\/wp-json\/wp\/v2\/tags?post=1217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}