eBay Shop - Kopfzeile gestalten

Die Kopfzeile im Shop
eigentlich nur ein schmaler Streifen der unterschiedlich gestaltet werden kann.

Um den Shop zu gestalten ist die Kopfzeile mit eigenem Logo zunächst der erste Schritt, der ohne HTML Kenntnisse meist in der Auswahl eines der von eBay bereitgestellten Themen besteht.

Weit darüberhinaus kann sie jedoch auch relativ einfach mit Grafik und eigenem HTML und CSS gestaltet werden.

eBay Themen anpassen

Neben den eher schlicht wirkenden anpassbaren Themen stehen noch eine Reihe grafisch gestalteter Kopfzeilen zur Verfügung. In sie kann zusätzlich ein vorgefertigtes oder ein eigenes Logo (310x90Pixel) eingefügt werden - Text kann man dort nicht einfügen, hinzugefügter Text erscheint immer darunter.
Wenn du kein eigenes Logo hast und das vorgefertigte nicht verwenden willst, dann kannst du diese Themen dennoch etwas anpassen um den Shop individueller zu gestalten.

Beispiel - Neonthema

Die Themen bestehen aus mehreren Einzelbildern, die Kopfzeile passt sich der Bildschirmauflösung des Besuchers an - bis zu einer minimalen Breite der Kopfzeile von 768 Pixeln (hier verkleinert dargestellt)

Die Einzelbilder sind in eine Tabelle eingefügt - die Zellen hier mal mit Rand markiert.

Wenn man keins der vorgefertigten Logos oder ein eigenes ausgewählt hat wird der dafür vorgesehene Bereich mit einem Bild des Themas gefüllt.

Um ein angepaßtes Logo zu erstellen kannst du mit Rechtsklick dieses Bild speichern und in einem Bildbearbeitungsprogramm mit deiner Lieblingsschriftart beschriften. Bei xnView zum Beispiel unter Bild - Text hinzufügen. (nach der Beschriftung wieder in 216 Farben umwandeln und als gif speichern)

Dieses beschriftete Logo lädst du dann in den Shop-Bildermanager (oder auf eigenen Webspace) und fügst es dann als Logo in der Shopverwaltung ein.

Auf die gleiche Weise kann man auch das zweite Bild beschriften

allerdings läßt sich das dann nicht mehr automatisch einfügen sondern du mußt die Kopfzeile "nachbauen" und dann als Quelltext einfügen wie unter "Quelltext einfügen" beschrieben. Der Quelltext für die Kopfzeile:

Für Bilder die nicht verändert werden kann die eBay Adresse so erhalten bleiben - bei anderen Themen mit Rechtsklick --> Eigenschaften die Adresse der Bilder kopieren und in dem Quelltext ersetzen (er ist für andere Themen - soweit ich gesehen habe - gleich).
und so sieht es dann aus:

Mehr Text kann hier rein

Wenn das geklappt hat, dann ist natürlich die Frage warum du dir nicht gleich komplett eine individuelle Kopfzeile erstellst die sich wirklich von anderen Anbietern unterscheidet ;-)

Individuelle Kopfzeile erstellen

Da sie individuell werden soll ist es mit den Beispielen schon schwieriger...
einfachste Version - wenn du nur eine Grafik (Logo) einfügen willst:

Anders als hier oben auf der Seite habe ich als Hintergrund eine Grafik eingefügt die sich wiederholt und den Schriftzug zentriert.

Die Grafik des Logos oder einer einzelnen Kopfzeilengrafik sollte nicht breiter als 960px sein (für die Summe von Einzelbildern gilt das auch) - eigentlich wären rund 770Pixel für eine Bildschirmauflösung von 800x600 richtig - aber die eBay Shopseiten lassen sich auch ohne Kopfzeile nur noch bis zu einer verfügbaren Breite von 960px reduzieren - bei kleineren Breiten muß man ohnehin querscrollen. Bei so großen Bildern sollte man allerdings die Dateigrößen und damit die Ladezeiten für Besucher im Auge behalten.

Eine Einzelgrafik passt sich drüberhinaus auch nicht anderen Bildschirmbreiten an - je nach Größe und Position kann sie auf großen Bildschirmen auch etwas verloren wirken und am linken Bildschirmrand wie ein inzwischen zu kurz geratener Konfirmationsanzug aussehen.

Es gibt auch entgegen allen Gerüchten nicht die Standardauflösung. Links mal ohne Anspruch darauf repräsentativ zu sein die Besucher meiner Seite.
Zwar ist eindeutig eine Bildschirmauflösung von 1024x768 der Spitzenreiter - aber die andere Hälfte der Besucher hat andere Auflösungen - und zwar extrem viel Varianten.

Angesichts dieser Vielfalt ist man gut beraten die Kopfzeile nicht auf eine feste Breite einzustellen - anders als auf einer eigenen Homepage kann man die Breite der Shopseite ja nicht insgesamt beinflussen.

Methoden zur flexiblen Gestaltung

• große Grafiken als Hintergrundbild einbauen.
  Dies ist vor allem bei dekorativen Bildern sinnvoll - das Bild im Kopf dieser Seite hat eine Breite von 1600px - je nach deiner Bildschirmauflösung siehst du davon aber nur einen Teil (und einige auch trotzdem schon den Rand)
  
  
• Vordergrundbilder und Hintergrundbilder kombinieren - so wie dies bei den ebay Themen der Fall ist und wie ich das auch schon für Rahmen beschrieben habe.
  Für solche Tabellenlösungen kann mit mit css jedem der Tabellenelemente ein Hintergrundbild zuweisen - für table,tr,und td und zusätzlich noch ein normales Bild im Vordergrund. Damit stehen vier Ebenen zur Verfügung (bei transparenten gif) die gegeneinander beweglich sind. Mit mehreren Tabellenzellen die einen flexiblen Bereich enthalten läßt sich der Inhalt gleichmäßig verteilen.
  
  
• Grafiken so gestalten, daß sie nahtlos in einen einfarbigen Hintergrund übergehen um zusätzliche Hintergrundgrafiken zu vermeiden.
  Wenn man in der Kopfzeile noch Texte und/oder linkbuttons unterbringen will eine sehr sinnvolle Lösung.

Beispiele

Hier noch ein paar Beispiele die ich für Kunden erstellt bzw. die vorhandene Kopfzeile der Homepage angepasst habe:
Pauls 50s Store | Schuh Due | Speicher des Nordens | varianz_com | Highstylefashion

Einfach mal die Größe des Browserfensters verändern um zu sehen was passiert ;-)

Alle Shopanleitungen als PDF