HpBk-TemplateWorld | Alles für dich.

Designwechsel

Designwechsel bei Klick auf bestimmte Seite

Einleitung
Dieses Tutorial schreibe ich mit freundlicher Unterstützung von www.badweb.de.tl, da er mir geschrieben hat, wie es funktioniert. Ich finde es eigentlich sehr schade, dass man so etwas nicht im Forum findet, bei Tutorials oder so, deshalb schreibe ich jetzt noch einmal auf, wie es funktioniert.

Schwierigkeitsstufe: Fortgeschritten

Ab und zu eignet es sich hervorragend, wenn bestimmte Elemente auf der Homepage dem Besucher geändert werden, sobald dieser auf irgendeine bestimmte Seite klickt. Zum Beispiel kann ich mit diesem Tutorial das Header-Bild ändern, sobald mein Besucher auf eine bestimmte Seite klickt.

 

Beispiel:

Wie muss man sich das jetzt vorstellen? Zur Veranschaulichung habe ich hier ein Bild für euch.



Die Ausgangssituation:

Links seht ihr die TemplateWorld-Seite "Hilfe Center". Auf dieser Seite seht ihr das Headerbild in Orange. Wir nehmen jetzt an, dass dies unser Standard-Headerbild ist. Egal welche Seite dein Besucher aufruft, es erscheint immer das orangene Headerbild auf jeder angelegten Seite.

Allerdings möchtest du jetzt für die Seite "Gestaltungstipps" (rechtes Bild) ein anderes Headerbild einfügen. Nur auf dieser Seite soll der rote Header zu sehen sein. Doch wie soll das funktionieren?

Die Styleanweisungen:

Jedes Design besitzt sogenannte Styleanweisungen. Das Headerbild wird durch eine CSS-Anweisung definiert, also wie groß es ist, wo es positioniert ist etc. Jetzt müssen wir uns diese Styleanweisungen aus dem CSS-Code heraussuchen, die zu unserem Headerbild gehören. Diese Styleanweisungen kopiert ihr jetzt aus dem Code heraus oder speichert sie in der Zwischenablage auf eurem Computer.

In unserem Beispiel möchten wir den Header für die Seite "Gestaltungstipps" ändern. Dort soll ja das rote Titelbild erscheinen. Also klickst du nun auf "Seiten" und wählst die angelegte Seite aus, auf der ein anderes Headerbild erscheinen soll.

Der Code:

Im Seiteneditor angekommen klickst du jetzt auf "Quellcode" und fügst dort folgenden Code ein.

Dort, wo im Code "Hier die kopierten Anweisungen" steht muss der vorhin kopierte CSS-Code eingefügt werden, der dein Headerbild definiert.

Beispiel

Wie könnte der Code aussehen, der im Quellcode des Seiteneditors eingefügt werden muss? Dies ist lediglich ein Beispiel-Code. Du kannst ihn nicht einfach so einfügen! Das wird nicht funktionieren!  

<style type="text/css">

#content-container {
  padding-bottom: 0px;
  margin: 0px auto;
  padding-left: 0px;
  width: 1004px;
  padding-right: 0px;
  background: url(https://img.webme.com/pic/hier-kommt-das-neue-headerbild-rein.jpg) no-repeat top;
  height: 332px;
  padding-top: 0px
}

#header {
  position: relative;
  width: 1004px;
  height: 332px
}

</style>

In der rot markierten Zeile muss nun für unser Beispiel die Bild-URL des roten Headers eingefügt werden. Dieses Tutorial ist kein Muster-Tutorial und die Codes lassen sich nicht so einfach übernehmen, sondern müssen für jedes Design individuell angepasst werden!


Kommentare zu dieser Seite:
Kommentar von:12.12.2014 um 12:48 (UTC)
(gesperrter Nutzer)
Im Grunde, ist es sehr, sehr simpel und einfach. Jedoch steht dort ja auch, dass es für Fortgeschrittene ist. Arbeitet euch mehr und mehr ran! Hier auf Templateworld oder auch auf anderen Seiten wie www.Clobelsoft.de kann man vom "Noob" zum Profi werden!
Kommentar von Christopher( chistopher-n.muellergmx.de ), 24.04.2013 um 17:15 (UTC):
Wie
Kommentar von:10.02.2013 um 17:49 (UTC)
mywell
mywell
Offline
ich verstehe nur Bahnhof
Kommentar von:25.06.2012 um 17:55 (UTC)
dayclub
dayclub
Offline
jeder weint! warum? :- :-
Kommentar von:05.02.2012 um 21:03 (UTC)
animeyashi
animeyashi
Offline
Könnt ihr mal ein Simples Design erstellen, dass diese Funktion hat?

Ich verstehe das als Neuling nicht so ganz aber suche die ganze Zeit schon nach sowas
Kommentar von Marc( ), 02.07.2011 um 16:37 (UTC):
des gibts aber im forum
http://www.homepage-baukasten.de/forum/viewtopic.php?t=131606
Kommentar von:01.06.2011 um 15:37 (UTC)
(gesperrter Nutzer)
Kommentar von:29.03.2011 um 17:40 (UTC)
(gesperrter Nutzer)
verstehe ich net
Kommentar von:03.01.2011 um 13:30 (UTC)
max-stanchly
max-stanchly
Offline
Hey, cooles Tutorial, funktioniert einwandfrei

Max


Kommentar zu dieser Seite hinzufügen:
Dein Name:
Deine E-Mail-Adresse:
Deine Homepage:
Deine Nachricht:

Du bist der 634275 Besucher.

Besucher

Heute waren 36 Besucher hier.

Information

HpBk-TemplateWorld ist seit Januar 2011 die neue Design-Zentrale im Homepage-Baukasten. Mit über 100 Designs ist und soll HpBk-TemplateWorld auch mit eurer Hilfe noch weiter ausgebaut werden und somit zu einer zentralen Anlaufstelle für Designs, Templates und Tutorials im HpBk werden.

Partner werden

Möchtest du auch Partner von HpBk-TemplateWorld werden? Dann schreibe mich an. Gerne sehe ich mir deine Seite genauer an und werde dich dann zu den offiziellen Partnerseiten hinzufügen.

Hilfreiche Websites

www.homepage-baukasten.de

www.homepagehilfe.de.tl

www.iceblue-test.de.tl

www.design-generator.de.tl

© Copyright 2011-2017 HpBk-TemplateWorld.de.tl | Home | Impressum | Kontakt | FAQs | Nach oben scrollen

Layout by Rocket Website Templates