WordPress Logo einfuegen

Logo einfügen

Deine WordPress-Website hat noch kein Logo? In diesem Tutorial zeige ich dir, wie du ein Logo einfügst. Voraussetzung: Du arbeitest mit einem Block-Theme, also einem neueren WordPress-Theme. PS: Seit Twenty Twenty-Two sind alle -> Standardthemes auch Block-Themes.

Inhaltsverzeichnis

  1. Website-Editor öffnen
  2. Header bearbeiten
  3. Websitelogo-Block auswählen
  4. Das Logo platzieren
  5. Logo als Website-Icon
  6. Logo im Footer
  7. Logo im Footer vergrößern
  8. Logo kostenlos erstellen

Website-Editor öffnen

Dein Logo soll auf jeder einzelnen Seite zu sehen sein! Aber natürlich baust du es nicht mühsam auf allen einzelnen Seiten ein. Das Logo kommt bequem in den -> Header (Kopf), also in den Bereich der -> Website, der überall gleich aussieht. Um den Header zu bearbeiten, musst du in den Website-Editor. Den Website-Editor öffnest du oben in der schwarzen Leiste mit einem Klick auf Website bearbeiten.

Header bearbeiten

Der Website-Editor ist geöffnet? Okay, dann hältst du Ausschau nach dem Menüpunkt Header oder Header bearbeiten. Im obigen Beispiel versteckt er sich in der linken Menüleiste des Website-Editors (nach unten zu Bereiche scrollen). Falls das alles bei dir ganz anders aussieht, klicke auf das Stift-Icon und anschließend zu Bereiche und Header.

Websitelogo-Block auswählen

WordPress hat für alles einen Block. Der passende Block für das Logo nennt sich Websitelogo-Block.

  • Wenn du WordPress frisch installiert hast, ist das Icon mit den zwei Berggipfeln im Kreis schon im Header vorhanden. Klicke das Icon an, um dein Logo einzufügen.
  • Falls das Icon fehlt: Lege einen neuen Block an und gib die ersten Buchstaben von Websitelogo in die Blocksuche ein. Dann wähle diesen Block aus.

Das Logo platzieren

So platzierst du das Logo richtig:

  1. Das Logo hochladen oder aus der Mediathek anwählen.
  2. Den Schieber Bild auf die Homepage verlinken aktivieren.
  3. Den Schieber Als Website-Icon verwenden aktivieren.

Logo als Website-Icon

Mit der Aktivierung des Schiebers bei Als Website-Icon verwenden erscheint das Logo auch als Icon im Browser-Tab.

In neueren Themes zum Beispiel in Twenty Twenty-Four, wird das Logo automatisch auch im -> Footer eingeblendet. Wenn ein Besucher auf das Logo im Footer klickt, gelangt er zur Startseite. Es ist empfehlenswert, die Größe des Footer-Logos anzupassen.

Auf Standardthemes.de haben ich mein quadratisches Logo im Footer auf 70 x 70 Pixel vergrößert. So passt du dein Footer-Logo an:

  1. Klicke auf Website bearbeiten.
  2. Klicke auf das Stift-Icon.
  3. Wähle den Bereich Footer.
  4. Klicke auf den Block für das Footer-Logo.
  5. Ziehe an den Anfassern des Footer-Logos.

Logo kostenlos erstellen

Ups, du hast noch gar kein Logo? Dann erstelle dir eines. Das geht entweder Online-Logo-Generatoren, zum Beispiel Canva. Die sind allerdings nicht alle kostenlos oder liefern in den kostenlosen Versionen eine schlechte Qualität ab. Die Alternative: kostenlose Grafik-Programme, die du auf deinem Computer installieren kannst. Ein Klassiker aus der Open-Source-Szene nennt sich Inkscape, das Proramm kann auf stolze 20 Jahre Entwicklungsgeschichte verweisen.

Inkscape ist ein Vektor-Zeichenprogramm. Vektorgrafiken haben den Vorteil, dass sie ohne großen Aufwand und Qualitätsverlust vergrößert und verkleinert werden können. Inkscape ist ideal, um ein skalierbares Logo zu erstellen. Inkscape 1.3.2 ist im Dezember 2023 erschienen und läuft auf Windows, Mac und Linux. Im Gegensatz zu den Online-Logo-Generatoren benötigst du einge Stunden Einarbeitungszeit, um dein Logo zu erstellen. Dafür hast du diese Vorteile:

  • Inkscape ist kostenlos.
  • Du kannst die Logo-Datei in jedem Bearbeitungsschritt abspeichern und jederzeit das Logo nachbessern. Du musst nicht wieder bei Null anfangen.
  • Was du gezeichnet hast, gehört dir. Du musst keine Texte über Lizenzen lesen.

Bernd Schmitt

Klappt es bei dir mit dem Einfügen des Logos? Mein Name ist Bernd Schmitt und ich betreibe standardthemes.de.
Wenn du eine Frage hast, schreib einfach einen Kommentar.


Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert