epanel

Konfiguration der ElegantThemes über das epanel – Logo, Favicon, Farben

In diesem Artikel zeige ich dir wie Du folgende Konfigurationen der ElegantThemes über das epanel vornimmst:

  • Ein eigenes Logo einfügen
  • Ein eigenes Favicon einfügen
  • Farben ändern

Wie bereits im Artikel ElegantThemes Templates in WordPress aktivieren erwähnt, sind die ElegantThemes keine freien Templates, sondern Premium Themes.

Die ElegantThemes Templates bringen ein Tool mit, das epanel, welches wir uns nun genauer anschauen.

Das epanel steht nur zur Verfügung, wenn Du ein ElegantTheme Template aktiviert hast.

Ein Weg zum epanel führt über den Button [Design] im Hauptmenü, dort im Untermenü auf [Theme Options] klicken. Der Name des Themes, welches Du aktiviert hast, steht dabei vor Theme Options.

Also angenommen, Du hast das Theme DelicateNews aktiviert, dann lautet der Linktext: DalicateNews Theme Options.

Weg zum epanel

Dein eigenes Logo einfügen

Die erste Option bzw. Box, die dir ganz oben im epanel angezeigt wird, trägt den Titel Logo. Hier kannst Du nun dein Logo ändern. Dazu klickst Du auf den Button [Upload Image].

Der Button Upload Image im epanel

Ein Pop-Up Fenster erscheint in dem Du unter dem ersten Reiter Vom Computer (Reiter sollte bereits aktiv sein) den Button in der Fenstermitte [Dateien auswählen] drückst.

Das Bild für das neue Logo auswählen

Daraufhin öffnet sich ein Browserfenster und Du kannst auf deinem PC zu der Bilddatei für dein neues Logo navigieren und das gewünschte Bild auswählen.

Durch Klick auf [Öffnen] wird das Bild hochgeladen. Das WordPress Pop-Up Fenster erweitert sich um einige Optionen sobald die Grafik vollständig hochgeladen wurde. Du kannst nun auch die Grafik, oft als Ausschnitt, sehen. Daneben stehen die Daten zur Grafik.

Mit Klick auf den Button [Use for Logo] am Ende des Fensters übernimmt das epanel die neue Grafik als Logo und das Fenster schließt sich.

Das Bild als neues Logo bestätigen

Dass das Bild übernommen wurde siehst Du daran, dass der Link zum Bild in das vorher leere Feld unter Logo eingetragen wurde.

Der Link zum Bild im epanel

Zum Schluss nur noch bis ans Ende des epanels scrollen und mit [Save] alles speichern.

Willst Du das neue Logo wieder von deinem Blog entfernen, so klicke auf den Button [Reset] im epanel, der Link zum Bild wird dann aus dem Feld entfernt. Auch diesen Schritt musst Du im epanel ganz unten mit [Save] abspeichern, damit die Änderung wirksam wird.

Übrigens kannst Du in diesem WordPress Grundlagen Tutorial noch einmal detaillierter nachlesen, wie Bilder in WordPress eingefügt und bearbeitet werden.

Dein eigenes Favicon einfügen

Die nächste Box trägt den Titel Favicon. Hier kannst Du dein eigenes Favicon hochladen. Dazu gehst Du ganz genauso vor, wie oben beim Einfügen eines Logos beschrieben.

Der einzige kleine Unterschied besteht darin, dass der Button nach dem Hochladen des Bildes für das Favicon nicht [Use für Logo] heisst, sondern [Use for Favicon].

Das hochgeladene Bild als Favicon nutzen

Auch hier das [Save] im epanel ganz zum Schluss nicht vergessen 😉

Die Einstellung für das Favicon kannst Du, falls nötig, genau wie beim Logo durch Klick auf [Reset] wieder zurücksetzen.

Wenn Du ein Favicon einfügst, dann bedenke aber, dass nicht jedes Bild optimal für ein Favicon ist und dass das Favicon, egal welche Maße die Ausgangsgrafik hat, nur in einer Größe von 16×16 Pixel angezeigt wird.

Was ein Favicon überhaupt ist, wie Du ein Favicon erstellst und was Du dabei beachten solltest, habe ich im Artikel Favicons, ein „must have“ für jede Webseite ausführlich erklärt.

Farben ändern

Um die Farben für die Links, die Schrift oder andere Farben in deinem Blog zu ändern, klicke im epanel -Menü auf den Reiter Colorization.

In der kleinen Box mit dem Titel Enable custom colors drückst Du anschließend den Button [This is Disabled], die Aufschrift des Buttons ändert sich daraufhin in [This is Enabled]. Die Verwendung eigener Farben wird so aktiviert.

Individuelle Farben aktivieren

Die nächste Box unter der Enable custom colors-Box heißt Child stylesheet URL, diese Box brauchen wir vorerst nicht und ignorieren sie deshalb.

In den folgenden Boxen darunter hast Du nun die Möglichkeit die verschiedenen Link- und Schriftfarben und weitere Farben, wie zum Beispiel die Hintergrundfarbe, zu ändern.

Die betreffende Farbe auszuwählen funktioniert überall nach dem gleichen Prinzip. Ich zeige dir diese Vorgehensweise anhand der Box Background Color, in der die Hintergrundfarbe bestimmt werden kann.

Zuerst klickst Du mit der linken Maustaste in das leere Feld, sofort erscheint direkt unter dem Feld die Farbpalette, auch Colorpicker genannt, auf der Du die neue Farbe auswählen kannst.

Die Farbpalette aufrufen

Gehe mit dem Mauscursor über die Farbleiste in der Mitte um die Grundfarbe einzustellen. Der Mauscursor wandelt sich in einen Doppelpfeil wenn Du über der Farbleiste bist.

Mit gedrückter linker Maustaste kannst Du dort den Regler rauf und runter schieben bis die gewünschte Farbe im größeren Feld links von der Farbleiste angezeigt wird.

Die Farbe in der Farbleiste einstellen

Wenn Du mit der Farbe zufrieden bist, kannst Du im großen Feld links daneben die Schattierung der gewählten Farbe einstellten.

Gehe dazu mit dem Mauscursor über dieses Feld, der Cursor wandelt sich dabei in ein Kreuz. Drücke die linke Maustaste und verschiebe den Mauscursor mit gedrückter linker Maustaste ein wenig.

Unter dem Mauscursor erscheint zusätzlich noch ein kleiner weißer Kreis, den Du solange mit gedrückter Maustaste auf dem Feld verschiebst, bis dir die Schattierung der Farbe zusagt.

Die neue Farbe wird dir im linken Feld der beiden kleineren Felder angezeigt, die sich rechts oben in der Farbpalette befinden.

Die Schattierung einstellen

Um die neue Farbe zu bestätigen, klicke auf das Icon unten rechts in der Farbpalette, das aussieht wie ein bunter Kreis.

Die Farbe bestätigen

Die Farbpalette wird geschlossen und im Feld erscheint der passende Farbcode zur eben ausgewählten Farbe.

Der Farbcode

Wenn Du bereits einen Hexadezimal-Farbcode hast, so kannst Du diesen Farbcode auch direkt in das betreffende Feld eingeben.

Und wie immer die Änderungen mit dem [Save]-Button speichern.

Und nun viel Spass beim Gestalten und Konfigurieren eures ElegantThemes Templates für euren Blog 🙂

About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

1 Comment