Jimdo Tutorials
tutorialz.jimdo.com
Tutorial: Verschiedene Unterseiten-Header
Vorschau
Siehe oben: Der Header unterscheidet sich von dem, der restlichen Unterseiten.
Schwierigkeitsgrad
Normal - einfache HTML und CSS Codes, genau beschrieben
Tutorial
1. Bilddateien hochladen
Bild zum Vergrößern anklicken
Erstellt zuerst eine versteckte Unterseite - oder verwendet eine vorhandene versteckte Seite, auf welcher ihr bereits Dateien für andere Tutorials hochgeladen habt.
Auf dieser Seite erstellt ihr ein neues "Bild"-Modul und ladet darin den neuen Header hoch.
Diese Unterseite dient nur als "Ablage" für die Bilddatei, der neue Header kann später auf jeder beliebigen Unterseite eingebunden werden.
Bild zum Vergrößern anklicken
Wichtig: Das Bild muss bereits vor (!) dem Hochladen die richtige Größe (Auflösung) besitzen, ansonsten wird es abgeschnitten bzw wiederholt. Hier ein einfaches online-Tool zum Ändern der Bildgröße: resizeyourimage.com
Vergrößert euren eben hochgeladenen Header über den "+" Button im Bildermodul, bis sich die Höhe des Bildes nicht mehr ändert. Es ist dabei völlig normal, dass das Bild irgendwann rechts abgeschnitten wird, das soll uns nicht weiter stören.
2. Bildadresse kopieren
Bild zum Vergrößern anklicken
Geht in den Ansichts-Modus dieser versteckten Unterseite. Rechtsklick auf das hochgeladene Header-Bild und kopiert die Bildadresse heraus.
Firefox: "Bildadresse kopieren"
Internet Explorer: "Eigenschaften" > "Adresse"
Speichert diese Adresse auf eurem PC in einem Textdokument zwischen, wir benötigen sie später.
3. Page ID herausfinden
Bild zum Vergrößern anklicken
Geht auf die Unterseite der Page, deren Header ihr abändern möchtet. Rechtsklick auf eine leere Stelle der Seite, "Seitenquelltext anzeigen" ("Quellcode anzeigen" im Internet Explorer).
Drückt STRG+F (Mac: Apfel+F) um die Suche zu öffnen. Nun sucht nach [id="page-] (ohne die []).
Ihr findet nun eine individuelle Seiten-ID, speziell für diese Unterseite. Sollte das nicht das erste Ergebnis sein, sucht weiter, bis ihr die ID findet (siehe Bild). Diese wird immer in blau angezeigt.
Kopiert die Nummer nach dem "page-" heraus und speichert sie ebenfalls auf eurem PC zwischen.
4. Der Code
Bild zum Vergrößern anklicken
Geht nun zurück in den Bearbeiten-Modus eurer Page und klickt in der Jimdo-Bar auf "Einstellungen", "Head bearbeiten". Fügt dort den Code aus der Box unten ein.
Jetzt noch folgendes ersetzen:
000000000: Die vorhin kopierte ID der Unterseite
headerbild.jpg: Die vorhin kopierte Bildadresse
(nicht nur den Bildnamen, die vollständige Adresse)
<style type="text/css">
#page-000000000 img#emotion-header-img {display:none;}
#page-000000000 div#emotion-header {background: url("headerbild.jpg") repeat scroll 0 0 transparent
!important;}
</style>
5. Fertig
Speichern und fertig. Ihr müsst eure Seite einmal neu laden (F5), damit die Änderungen sichtbar werden.
6. Die Tutorialsammlung unterstützen
Unterstützt die Tutorialsammlung, damit es auch weiterhin Jimdo Tutorials gibt!
Z.B. indem ihr auf "gefällt mir" drückt oder meine Hauptseite besucht.
|
Diese Seite weiterempfehlen
Kommentar schreiben
Kommentare: 33
Jimdo Tutorials (Donnerstag, 08 März 2012 14:10)
Das nagelneue Tutorial zu den Unterseiten-Headern ist online. Sollte es bei euch nicht funktionieren, könnt ihr auch das alte Tutorial hierzu ausprobieren:
www.jimdo-tutorials.de/tutorials/design/unterseiten-header-alt
Gruß, JimdoFriend Fabian
Clemens (Donnerstag, 08 März 2012 17:47)
echt gute idee, das so zu lösen.
Gefällt mir wirklich gut.
Mit dem Trick könnte man auch einige andere Sachen Unterseiten-Spezifisch machen.
Ich freu mich auf weitere Tuts.
:=)
Marcel Nussbaum (Donnerstag, 08 März 2012 19:24)
Hallo Fabian! Super Sache und besten Dank.
Ich wende schon länger deine "kompliziertere" Variante der verschiedenen Header an. Funktioniert auch, aber diese scheint mir etwas einfacher :-)
Frage: kann ich auch auf mehreren Unterseiten den gleichen Header verwenden und auf anderen Unterseiten wieder andere Header? So wie ich das jetzt schon mache?
--> http://www.laromani.ch/falk-navigation/
--> http://www.laromani.ch/rock-machine/
Wie müsste ich in dem Fall vorgehen?
Danke für dein Feedback.
Jimdo Tutorials (Donnerstag, 08 März 2012 19:37)
Klar geht das. Unter Einstellungen>Head kannst du beliebig viele Codes für Unterseiten-Header untereinander einfügen. Wenn bei zweien sogar das Bild gleich ist, musst du das Bild nicht einmal neu hochladen (Schritt1+2 entfallen also). Du kannst einfach den Code der Seite mit identischem Header kopieren und musst nur die ID anpassen.
Gruß, JimdoFriend Fabian
xundes-futter (Montag, 12 März 2012 19:54)
Danke für das sehr hilfreiche Tutorial! Auf diese Art müsste es ja dann auch gehen, dass ich in der Sidebar auf jeder Seite andere Fotos, habe, oder? Kannst du schreiben, wie das dann im Header zu lösen ist? Danke!
farben-des-lichts (Dienstag, 13 März 2012 15:33)
hmm entweder bin ich zu dumm dazu, aber es will nicht klappen. gut kann sein, dass ich vielleicht noch ein noob bin und mich dazu mehr belesen muss. ich möchte einfach eine seite (hauptseite bsp. bilder) und dort einige unterseiten (wäre ja schon froh , wenn es ein oder zwei wären) erstellen, wo ich dann in arcyl-oder ölfarben ein stellen könnt. oder bin ich dahier total verkehrt?
Jimdo Tutorials (Dienstag, 13 März 2012 16:18)
@xundes-futter: Leider nicht. Man kann mit dieser Methode nur feste Bestandteile des Layouts verändern, nicht aber als Modul eingefügte Objekte.
@farben-des-lichts: Was möchtest du machen? Wenn du auf den anderen Unterseiten andere Header möchtest, bist du hier richtig - für alles andere nicht. Dazu musst du dich eigentlich auch nicht großartig belesen, dafür mache ich ja die Schritt-für-Schritt Anleitungen ;) Wo hängts?
Gruß, JimdoFriend Fabian
farben-des-lichts (Dienstag, 13 März 2012 19:27)
@fabian
danke für die info. hmm dann schein ich hier doch falsch zu sein. den header will ich eigentlich lassen(naja erstmal), wenn ich mich dann mal eingefuchst hab,kann ich immer noch expermentieren. nein ich wollte eigentlich sozusagen eine hauptseite und dort dann einige unterseiten einteilen, damit ich bilder nach art der herstellung untergliedern kann. ich hoffe du verstehst mein kauderwelsch. wie gesagt ich hab mich mit dem thema homepage erst seit drei tagen beschäftigt und bin ein absoluter noob. aber am ende geht es bei der free-version auch nicht ?
danke für deine geduld.
Jimdo Tutorials (Dienstag, 13 März 2012 19:36)
Unterseiten und Navigation bearbeiten:
http://de.jimdo.com/wiki/Navigation
Bei solch grundlegenden Sachen, am besten einmal in die Jimdo Hilfe schauen.
Gruß, JimdoFriend Fabian
farben-des-lichts (Dienstag, 13 März 2012 19:52)
Danke fabian, jetzt klappts.
xundes-futter (Dienstag, 13 März 2012 20:20)
Danke für die Antwort, also gibt es für die sidebar keine Möglichkeit sie unterschiedlich zu gestalten?
Anna Kolbeck (Montag, 19 März 2012 12:25)
Bei mir funktioniert das leider nicht mit dem anderen header. Habe statt eines neuen Bildes nun eine weiße Fläche.Was habe ich falsch gemacht?? Bin Schritt f. Schritt vorgegangen...
Jimdo Tutorials (Montag, 19 März 2012 18:12)
@xundes-futter: Bis jetzt gibt es hierfür keine Tutorial-Fähige Methode, wenn ich eine finde, wird es hierzu auf jeden Fall eine Anleitung geben.
@Anna Dann stimmt bei dir der Bildlink nicht. Also der vollständige Link, den du in Schritt 2 herauskopiert und in Schritt 4 in den Code wieder eingefügt hast. Bitte einmal überprüfen und ansonsten einen Link zur Ansicht schicken, so dass ich das Problem selbst sehen kann.
Gruß, JimdoFriend Fabian
weblog-laufen (Freitag, 23 März 2012 17:00)
merci für den tutorial
konnte heute anwenden
sola-dueren (Samstag, 24 März 2012 11:18)
hamma!! DANKE
florian-heckmann (Dienstag, 27 März 2012 06:02)
Danke, hat super funktioniert!!
Marie (Dienstag, 10 April 2012 14:05)
Hallo Fabian,
cooles tutorial funktioniert auch alles super mit einem vorgegebenem Layout, allerdings mit meinem eigenen layout funktioniert es nicht, mache ich was falsch oder funktioniert es bei einem eigenen layout einfach nicht ?
lg
Marie
Jimdo Tutorials (Dienstag, 10 April 2012 14:09)
Das Tutorial funktioniert ausschließlich mit Layoutvorlagen, da es bei einem Eigenen Layout den sogenannten "Emotionheader" ja gar nicht gibt. Du kannst hier nur das alte Tutorial verwenden: http://www.jimdo-tutorials.de/tutorials/design/unterseiten-header-alt/
Oder du wendest dich an den Coder deines Layouts und fragst ihn, ob er das für dich machen kann. Mit diesem Tutorial hier sollte er das hinbekommen.
Gruß, JimdoFriend Fabian
Marie (Dienstag, 10 April 2012 14:11)
Okay danke, dann werde ich das alte ausprobieren :)
Mit dem Coder wird problematisch sein, ich mache das ganze selber ;)
Lg
Marie
Marie (Dienstag, 10 April 2012 14:24)
Danke, es hat mit dem (alten) Tutorial geklappt :)
lg
Marie
Animal Crossing 3D (Dienstag, 10 April 2012 18:28)
Wow, echt gut. Das hat mir Abwechslung gebracht und so ist meine Page auch ein bisschen Jungenfreundlicher geworden, da ich immer ein Mädchen Bild Header hatte. Jetzt hab ich beides abwechselnd :D
Danke
LG Minimoli
carovette (Freitag, 13 April 2012 12:02)
Hallo, vielen Dank für die super Anleitung. Mit der alten Anleitung hats leider gar nicht geklappt bei mir, mit dieser schon - aber nur für eine Unterseite. Alle Unterseiten haben die selbe ID, auch die Unterseiten der Unterseiten....ist das normal so? Wenn ja, wäre es schade, ich hätte es echt toll gefunden, wenigstens für jede Reise einen anderen Header einfügen zu können...vielleicht hab ich aber auch nur was falsch gemacht. Nur was...???
Hier: http://www.carovette.de/reiseberichte/florida-keys-and-more-2010/
hat es funktioniert...
Die Layout-Vorlage (f 461) ist für die Free-Version von jimdo, ich habe pro, aber dort gefällt mir keine so richtig...
Danke und Grüssle von carovette
Jimdo Tutorials (Freitag, 20 April 2012 11:12)
Hallo Carovette,
sorry für die späte Rückmeldung, ich war die letzten Tage krank und konnte keine Fragen beantworten.
Keinesfalls haben alle die selben IDs. Jede Seite (und deren Unterseite auch) hat eine einzelne individuelle ID. Passe auf, dass du dich beim herauskopieren der ID immer im Ansichts-Modus (!) und nicht im Bearbeiten-Modus der Seite befindest. Nachdem du für die erste Unterseite den Code angewandt hast, steht der natürlich ebenfalls auf den anderen Unterseiten im Quellcode (beeinflusst diese jedoch nicht). Bei der Suche nach deren ID musst du diese IDs (in Schriftfarbe schwarz) überspringen und darfst nur die ID nehmen, welche in blauer Schriftfarbe zu sehen ist (sollte das 3. Suchergebnis sein).
Gruß, JimdoFriend Fabian
carovette (Samstag, 21 April 2012 19:01)
Hallo Fabian - erst mal gute Besserung und danke für den Tip, ich werds demnächst noch mal probieren.
Grüssle carovette
partyservice-kessler (Freitag, 11 Mai 2012 17:47)
Hallo, nach mehreren Versuchen hat es geklappt. Jedoch ist der Header immer zweigeteilt. Welche Größe muss das Bild denn haben?
Und muss es linksbündig,mittig oder rechtsbündig abgespeichert werden?
Bitte um Hilfe :-)
Gruss Dirk
Jimdo Tutorials (Freitag, 11 Mai 2012 18:20)
Das Bild muss immer in der tatsächlichen Originalgröße hochgeladen werden - bei dir sind das 940x210 Pixel. Einfach vor dem Hochladen mit einem Grafikprogramm auf diese Größe zuschneiden/skalieren. Dann musst du auch nichts links bzw rechtsbündig machen...
Gruß, JimdoFriend Fabian
partyservice-kessler (Freitag, 11 Mai 2012 18:54)
Super, Danke für die schnelle Hilfe. Aber, es verzehrt doch ganz schön. Gibt glaub ich nur eine Lösung,dass man ein anderes Layout nimmt;wo der Header halt nicht so gestreckt ist!`? Wobei ich das jetzige Layout super finde.....
Woran erkenn ich denn bei den anderen Layouts die Bildgröße für den den Header?
Gruß
Jimdo Tutorials (Freitag, 11 Mai 2012 18:59)
Du darfst den Header natürlich nicht auf diese Größe Strecken, das sieht furchtbar aus. Du musst bestimmte Teile oben/unten abschneiden. Das geht z.B. mit diesem einfachen online-Tool: http://www.resizeyourimage.com/
Oben siehst du hier die genaue Auflösung, diese muss am ende 940x210 sein.
Gruß, JimdoFriend Fabian
partyservice-kessler (Freitag, 11 Mai 2012 19:22)
super danke erstmal, werde es mal damit versuchen. Melde mich :-)
Neuling (Donnerstag, 17 Mai 2012 18:47)
Ja ich schaff dass der Header sich ändert.Bloss mein Bil ist zwei mal zusehen.Was tue ich falsch? Bitte antworten!
Jimdo Tutorials (Donnerstag, 17 Mai 2012 19:25)
Wie in Schritt 1 angegeben, muss das Bild bereits vor dem Hochladen die passende Auflösung in Höhe und Breite besitzen. Ist das Format anders, wiederholt sich das Bild einfach.
Gruß, JimdoFriend Fabian
weblog-laufen (Freitag, 18 Mai 2012 17:25)
Kann man so einprogrammieren, dass man beim Anklicken der Header zur der Startseite verlinkt wird?
Jimdo Tutorials (Freitag, 18 Mai 2012 19:53)
Das hier ist ein Tutorial für CSS Style-Änderungen, Anpassungen am HTML-Inhalt (also auch den Links) sind damit leider nicht möglich.
Gruß, JimdoFriend Fabian