{"id":34548,"date":"2020-07-15T18:48:14","date_gmt":"2020-07-15T18:48:14","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/so-erstellen-sie-navigationsmenus-fur-wordpress\/"},"modified":"2020-07-15T18:48:14","modified_gmt":"2020-07-15T18:48:14","slug":"so-erstellen-sie-navigationsmenus-fur-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/so-erstellen-sie-navigationsmenus-fur-wordpress\/","title":{"rendered":"So erstellen Sie Navigationsmen\u00fcs f\u00fcr WordPress"},"content":{"rendered":"<p>M\u00f6chten Sie Ihre WordPress-Navigationsmen\u00fcs erstellen, um deren Farben oder Erscheinungsbild zu \u00e4ndern?  W\u00e4hrend sich das WordPress-Design um das Aussehen der Navigationsmen\u00fcs k\u00fcmmert, k\u00f6nnen Sie es mithilfe von CSS ganz einfach an Ihre Bed\u00fcrfnisse anpassen.  In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Navigationsmen\u00fcs auf Ihrer Website erstellen. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"WordPress Navigationsmen\u00fc Design\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/stylenavmenus.png\" alt=\"WordPress Navigationsmen\u00fc Design\" width=\"550\" height=\"340\" class=\"alignnone size-full wp-image-47843\"><\/p>\n<p>Wir zeigen Ihnen zwei verschiedene Methoden.  Die erste Methode ist f\u00fcr Anf\u00e4nger gedacht, da sie ein Plugin verwendet und keine Codekenntnisse erfordert.  Die zweite Methode ist f\u00fcr Heimwerker gedacht, die lieber CSS-Code als Plugin verwenden.<\/p>\n<h4>Methode 1: Entwerfen Sie WordPress-Navigationsmen\u00fcs mithilfe eines Plugins<\/h4>\n<p>Ihr WordPress-Theme verwendet CSS, um Navigationsmen\u00fcs zu erstellen.  Viele Anf\u00e4nger m\u00f6gen es nicht, Themendateien zu bearbeiten oder CSS-Code selbst zu schreiben. <\/p>\n<p>Dann ist ein Plugin im WordPress-Stil praktisch.  Dies verhindert, dass Sie Themendateien bearbeiten oder Code schreiben k\u00f6nnen.<\/p>\n<p>Als erstes m\u00fcssen Sie das CSS Hero-Plugin installieren und aktivieren.  Weitere Informationen finden Sie in unserer Schritt-f\u00fcr-Schritt-Anleitung zum Installieren eines WordPress-Plugins.<\/p>\n<p>CSS Hero ist ein Premium-WordPress-Plugin, mit dem Sie Ihr eigenes WordPress-Theme erstellen k\u00f6nnen, ohne eine einzige Codezeile schreiben zu m\u00fcssen (kein HTML oder CSS erforderlich).  Weitere Informationen finden Sie in unserem CSS Hero-Test. <\/p>\n<p>WPBeginner-Benutzer k\u00f6nnen diesen CSS Hero-Gutschein verwenden, um 34% Rabatt auf ihren Kauf zu erhalten.  <\/p>\n<p>Nach der Aktivierung werden Sie umgeleitet, um Ihren CSS Hero-Lizenzschl\u00fcssel zu erhalten.  Folgen Sie einfach den Anweisungen auf dem Bildschirm und Sie werden mit nur wenigen Klicks zu Ihrer Website weitergeleitet.<\/p>\n<p>Als n\u00e4chstes m\u00fcssen Sie auf die Schaltfl\u00e4che CSS Hero in der WordPress-Admin-Symbolleiste klicken. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Starten Sie CSS Hero\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/launchcsshero.png\" alt=\"Starten Sie CSS Hero\" width=\"550\" height=\"224\" class=\"alignnone size-full wp-image-47814\"><\/p>\n<p>CSS Hero bietet einen WYSIWYG-Editor (was Sie sehen, ist was Sie bekommen).  Durch Klicken auf die Schaltfl\u00e4che gelangen Sie mit einer schwebenden CSS Hero-Symbolleiste auf dem Bildschirm auf Ihre Website. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"CSS Hero-Symbolleiste\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/cssherotoolbar.jpg\" alt=\"CSS Hero-Symbolleiste\" width=\"550\" height=\"312\" class=\"alignnone size-full wp-image-47815\"><\/p>\n<p>Sie m\u00fcssen auf das blaue Symbol oben klicken, um die Bearbeitung zu starten.<\/p>\n<p>Nachdem Sie auf das blaue Symbol geklickt haben, bewegen Sie Ihre Maus zum Navigationsmen\u00fc. CSS Hero hebt es hervor und zeigt die Kanten um es herum an.  Wenn Sie auf das hervorgehobene Navigationsmen\u00fc klicken, werden die Elemente angezeigt, die Sie bearbeiten k\u00f6nnen. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Zeigen Sie und klicken Sie, um das Men\u00fc anzupassen\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/customizemenu-1.jpg\" alt=\"Zeigen Sie und klicken Sie, um das Men\u00fc anzupassen\" width=\"520\" height=\"216\" class=\"alignnone size-full wp-image-47817\"><\/p>\n<p>Im obigen Screenshot wird der Container aus dem oberen Navigationsmen\u00fc angezeigt.  Angenommen, wir m\u00f6chten die Hintergrundfarbe unseres Navigationsmen\u00fcs \u00e4ndern.  In diesem Fall w\u00e4hlen wir die obere Navigation aus, die das gesamte Men\u00fc betrifft.<\/p>\n<p>CSS Hero zeigt jetzt verschiedene Eigenschaften an, die Sie bearbeiten k\u00f6nnen, z. B. Text, Hintergrund, Rahmen, R\u00e4nder, F\u00fcllung usw. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"CSS-Eigenschaften\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/cssproperties.jpg\" alt=\"CSS-Eigenschaften\" width=\"550\" height=\"351\" class=\"alignnone size-full wp-image-47818\"><\/p>\n<p>Sie k\u00f6nnen auf jede Eigenschaft klicken, die Sie \u00e4ndern m\u00f6chten.  CSS Hero zeigt Ihnen eine einfache Oberfl\u00e4che, in der Sie Ihre \u00c4nderungen vornehmen k\u00f6nnen. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"\u00c4ndern Sie das Erscheinungsbild eines Artikels\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/elementui.jpg\" alt=\"\u00c4ndern Sie das Erscheinungsbild eines Artikels\" width=\"550\" height=\"320\" class=\"alignnone size-full wp-image-47819\"><\/p>\n<p>Im obigen Screenshot haben wir den Hintergrund ausgew\u00e4hlt und es zeigte sich eine sch\u00f6ne Oberfl\u00e4che zur Auswahl von Farbe, Farbverlauf, Bild und mehr. <\/p>\n<p>Wenn Sie \u00c4nderungen vornehmen, k\u00f6nnen Sie diese live in der Themenvorschau sehen. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Live-Vorschau Ihrer CSS-\u00c4nderungen\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/livepreview.jpg\" alt=\"Live-Vorschau Ihrer CSS-\u00c4nderungen\" width=\"550\" height=\"283\" class=\"alignnone size-full wp-image-47820\"><\/p>\n<p>Wenn Sie mit den \u00c4nderungen zufrieden sind, klicken Sie in der CSS Hero-Symbolleiste auf die Schaltfl\u00e4che Speichern, um die \u00c4nderungen zu speichern.<\/p>\n<p>Das Beste an dieser Methode ist, dass Sie Ihre \u00c4nderungen problemlos r\u00fcckg\u00e4ngig machen k\u00f6nnen.  CSS Hero f\u00fchrt einen vollst\u00e4ndigen Verlauf aller Ihrer \u00c4nderungen und kann zwischen diesen \u00c4nderungen wechseln. <\/p>\n<h4>Methode 2: WordPress-Navigationsmen\u00fcs manuell entwerfen<\/h4>\n<p>Diese Methode erfordert das manuelle Hinzuf\u00fcgen von benutzerdefiniertem CSS und ist f\u00fcr Zwischenbenutzer gedacht.<\/p>\n<p>WordPress-Navigationsmen\u00fcs werden in einer ungeordneten Liste (Liste mit Aufz\u00e4hlungszeichen) angezeigt.<\/p>\n<p>Wenn Sie das Standard-WordPress-Men\u00fc-Tag verwenden, wird im Allgemeinen eine Liste ohne zugeh\u00f6rige CSS-Klassen angezeigt. <\/p>\n<p>Ihre ungeordnete Liste h\u00e4tte den Klassennamen &#8220;Men\u00fc&#8221;, wobei jedes Element in der Liste eine eigene CSS-Klasse hat. <\/p>\n<p>Dies kann funktionieren, wenn Sie nur einen Men\u00fcpunkt haben.  Die meisten Themen haben jedoch mehrere Positionen, an denen Sie Navigationsmen\u00fcs anzeigen k\u00f6nnen.<\/p>\n<p>Die Verwendung nur der Standard-CSS-Klasse kann zu Konflikten mit Men\u00fcs an anderen Speicherorten f\u00fchren.<\/p>\n<p>Aus diesem Grund m\u00fcssen Sie auch die CSS-Klasse und den Men\u00fcpunkt definieren.  Ihr WordPress-Theme tut dies wahrscheinlich bereits, indem Sie Navigationsmen\u00fcs mit folgendem Code hinzuf\u00fcgen: <\/p>\n   ","protected":false},"excerpt":{"rendered":"<p>M\u00f6chten Sie Ihre WordPress-Navigationsmen\u00fcs erstellen, um deren Farben oder Erscheinungsbild zu \u00e4ndern? W\u00e4hrend sich das WordPress-Design um das Aussehen der Navigationsmen\u00fcs k\u00fcmmert, k\u00f6nnen Sie es mithilfe von CSS ganz einfach an Ihre Bed\u00fcrfnisse anpassen. In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Navigationsmen\u00fcs auf Ihrer Website erstellen. Wir zeigen Ihnen zwei verschiedene Methoden. Die erste [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":34549,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/Como-crear-menus-de-navegacion-para-WordPress.jpg","fifu_image_alt":""},"categories":[7],"tags":[155,131,6446,60,51],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/34548"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=34548"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/34548\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/34549"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=34548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=34548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=34548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}