...
✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

So fügen Sie Bilder zu Menüelementen in WordPress hinzu

33

Ich habe gute Neuigkeiten.

Das Hinzufügen von Bildern zu Menüpunkten ist überraschend einfach.

Normalerweise erfordert das Hinzufügen von Bildern ein Verständnis des Codes. Aber dank eines praktischen Plugins müssen Sie nicht das erste Mal über Code Bescheid wissen.

Tatsächlich ist diese Lösung so einfach wie der normale Menüeditor und Sie können Bilder wie folgt hinzufügen:

So fügen Sie Bilder zu Menüelementen in WordPress hinzu

Entdecken Sie in diesem Beitrag ein Plugin, mit dem Sie jedem Ihrer Menüpunkte Bilder hinzufügen können, und erfahren Sie, wie Sie es auf Ihrer Website verwenden.

Um Bilder zu Ihrem Menü hinzuzufügen, laden Sie das Menu Image- Plugin herunter und installieren Sie es .

So fügen Sie Bilder zu Menüelementen in WordPress hinzu

Mit diesem Plugin können Sie jedem Menüelement ein Bild hinzufügen und alle Aspekte des Stils steuern, einschließlich der Bildposition und -größe.

Rufen Sie nach der Aktivierung Ihre Menüseite auf (Darstellung > Menüs) und klicken Sie auf den Dropdown-Pfeil auf einem Menüelement.

So fügen Sie Bilder zu Menüelementen in WordPress hinzu

Sie haben noch keine Speisekarte? Möglicherweise müssen Sie zuerst ein benutzerdefiniertes Menü erstellen.

Dadurch werden die Einstellungen für den Menüpunkt angezeigt. Nach der Installation von Menu Image sehen Sie zusätzliche Optionen zum Hinzufügen eines Bildes.

So fügen Sie Bilder zu Menüelementen in WordPress hinzu

Laden Sie ein Bild hoch, ändern Sie den Hover-Status, wählen Sie eine Größe und positionieren Sie es mit Menübild

Als Beispiel verwende ich dieses kleine Personensymbol für den Menüpunkt „Info”:

So fügen Sie Bilder zu Menüelementen in WordPress hinzu

Um das Bild hinzuzufügen, klicken Sie auf die Schaltfläche Bild festlegen und Sie sehen das bekannte Popup-Fenster der Medienbibliothek, in dem Sie ein neues Bild hochladen oder ein vorhandenes auswählen können.

So fügen Sie Bilder zu Menüelementen in WordPress hinzu

Nachdem Sie Ihr Bild hinzugefügt haben, sehen Sie eine Vorschau im Menüelement-Editor.

So fügen Sie Bilder zu Menüelementen in WordPress hinzu

So sieht das im Menü des Morgen-Themas aus :

So fügen Sie Bilder zu Menüelementen in WordPress hinzu

Weitere Anpassung von Bildern

Zusätzlich zum Hinzufügen eines Bildes können Sie es über, unter, vor oder nach dem Menüpunkt positionieren. Sie können auch ein anderes Bild anzeigen, wenn ein Besucher mit der Maus über den Menüpunkt fährt, was besonders bei Farbwechseln nützlich ist.

Was die Größe des Bildes betrifft, haben Sie die vier Bildgrößen, die WordPress erstellt, plus drei neue Größen, die von Menu Image hinzugefügt wurden. Die verfügbaren Größen sind:

  • Originalgröße
  • Miniaturansicht
  • Mittel
  • Groß
  • 24 × 24
  • 36 × 36
  • 48 × 48

Die Abmessungen der Miniaturansicht, Mittelgröße und Großformat können im Menü Medieneinstellungen (Einstellungen > Medien) eingestellt werden.

Planen Sie zuerst eine Reihe ähnlich aussehender Bilder für Ihre Speisekarte, damit Ihre Speisekarte eine zusammenhängende Ästhetik hat. Ich habe in meinem Beispiel ein Symbol hinzugefügt, um die Verwendung des Plugins zu veranschaulichen, aber ich würde empfehlen, allen Menüelementen ein Bild hinzuzufügen oder keinem.

Möglicherweise müssen Sie die Größe Ihres Bildes einige Male ändern, bis es im Menü richtig angezeigt wird. Wenn Sie keinen Grafikeditor Ihrer Wahl haben, schauen Sie sich GIMP (kostenlos) oder Sketch (nur für 99 US-Dollar Mac) an.

Schließlich verwenden Sie transparente PNG-Bilder, wenn Sie können. Ein großes Quadrat um das Symbol herum wird in keinem Menü gut aussehen.

Das Menu Image Plugin macht es jedem leicht, Bilder zu seinen Menüpunkten hinzuzufügen. Sie müssen kein PHP oder CSS kennen, um stilvolle Symbole in Ihr Menü aufzunehmen.

Haben Sie Fragen zum Hinzufügen oder Gestalten von Bildern in Ihrem Menü? Hinterlassen Sie unten einen Kommentar.

Aufnahmequelle: www.competethemes.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen