Tutorial: Infobox
Vorschau
Schwierigkeitsgrad
Einfach - super einfache HTML-Codes
Tutorial
1. Der HTML-Code
Fügt folgenden HTML-Code in ein neues HTML-Objekt an der gewünschten Stelle auf eurer Seite ein:
Bestätigungsbox:
<div class="message-ok">
<strong>Titel</strong> Text
</div>
Infobox:
<div class="message-info">
<strong>Titel</strong> Text
</div>
Warnbox:
<div class="message-warning">
<strong>Titel</strong> Text
</div>
Fehlerbox:
<div class="message-error">
<strong>Titel</strong> Text
</div>
Titel: Hier fügt ihr den fettgedruckten Boxtitel ein
Text: Hier kommt der Infobox-Text hin
2. Besondere Optionen in den Text einfügen:
Ihr könnt in den Text einfach folgende Befehle eingeben um z.B. Links oder eine neue Zeile einzufügen. Es sind auch andere standard-HTML-Codes möglich.
Neue Zeile:
</br>
Links:
<a href="http://adresse.de">Linktext</a>
3. Danksagung
Vielen Dank an die ADW Coaster World, welche diese einfache Anleitung im Jimdo Forum ausgearbeitet hat. Schaut einmal auf ihrer Webseite vorbei - es lohnt sich:
4. 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.
Kommentar schreiben
torstengrabbe (Donnerstag, 04 November 2010 11:57)
Prima, habe ich auf einer Seite eingebaut, danke dafür!
MFG Torsten
Holzmaier Johann (Freitag, 19 November 2010 14:37)
Alles einwandfrei. Hab echt kein Ahnung von HTML. Perfekt erklärt und sehr einfach anzuwenden. racoon-fishingtackle.de dankt :-)
flow-effect (Dienstag, 04 Januar 2011 06:50)
Hallo Sebastian,
vielen Dank für die nützlichen Tipps. Kenne mich nun gar nicht aus und frage mich, ob es auch geht, dass diese Infoboxen aufpoppen bei "mouseover", also wenn ich mit der Maus über ein bestimmtes Element gehe.
Liebe Grüße!
flow-effect (Dienstag, 04 Januar 2011 07:04)
Ok, ich sollte mir erst deine ganze Seite angucken, bevor ich fragen stelle. Schon gefunden ;)
play-box (Dienstag, 01 Februar 2011 20:48)
Danke, Ist total cool!
GottiKa (Mittwoch, 13 April 2011 14:47)
Supppperrrrrrrrrr.
Lars Schmidt (Montag, 16 Mai 2011 00:19)
ist wirklich cool...
...aber kann man diese Scripts auch in ein onmouseover einbinden ???
ADW - Coaster World (Samstag, 04 Juni 2011 11:10)
Wie meinst du das mit onmouseover? Was willst du erzeugen? Ändern der Farben? Bei fahren über einen Link einblenden? Musst du mal genauer beschreiben.
bluesbea (Montag, 06 Juni 2011 11:53)
Vielen Dank für die verständliche Anleitung!
Zeeroo (Mittwoch, 29 Juni 2011 00:37)
Gute Website mit vielen nützlichen Tutorials. Danke!
Meine Referate (Mittwoch, 27 Juli 2011 16:15)
Toll und echt einfach, aber:
Kann man eine Box auch so einbauen, dass sie den Inhalt der Seite (alles nach dem header bild exlusive des Footers) ausblendet und der rest praktisch weiß wird, anstatt, dass man den geschriebenen text sieht?
Fabian S. (Mittwoch, 27 Juli 2011 16:45)
Das ist zumindest mit diesem Tutorial nicht möglich. Das ganze ist tatsächlich nur als Infobox gedacht...
Gruß, JimdoFriend Fabian
fotoo (Mittwoch, 03 August 2011 21:34)
Super Sache!
Dennis Heidrich (Donnerstag, 25 August 2011 05:52)
Danke!
Jörg Wiggerink (Freitag, 26 August 2011 10:50)
Danke für die vielen hilfreichen Tutorials! Weiter so!
meinewelt2011 (Sonntag, 18 September 2011 09:34)
Echt toll!!!
agatamio (Dienstag, 20 September 2011 12:24)
Tolle (leicht verständliche) Tipps!
Vielen Dank dafür!
Meine Site wird in neuem Glanz erstrahlen ;D
Céline Stäuble (Donnerstag, 06 Oktober 2011 14:23)
kann man den die Breite der box irgendwie beeinflussen?
Céline Stäuble (Donnerstag, 06 Oktober 2011 14:26)
sorry!! für alle dies vielleicht auch interessiert: nach messageinfo das hier einfügen: style="position:absolute;width:210px"
Abtei Frauenwörth - Klosterverwaltung (Samstag, 03 Dezember 2011 09:15)
Wie bekomme ich auch noch ein kleines Bild in die Info-Box?
Jimdo Tutorials (Samstag, 03 Dezember 2011 11:53)
Nur mit ein wenig HTML: An der gewünschten stelle diesen Code einfügen:
<img src="ADRESSE" alt="">
Lade das gewünschte Bild auf einer versteckten Unterseite deiner Jimdo-Page hoch und kopiere den Bildlink heraus (Rechsklick>Eingenschaften). Die kopierte Adresse fügst du dann im Code oben bei ADRESSE ein. Fertig.
Gruß, JimdoFriend Fabian
Abtei Frauenwörth - Klosterverwaltung (Sonntag, 04 Dezember 2011 08:29)
Danke, super!!!
Tom Zehle (Mittwoch, 28 März 2012 17:41)
danke!!!!!!!!!!!
prana-muenchen (Donnerstag, 24 Mai 2012 15:14)
Vielen Dank! Habe Deine Empfehlung bez. der Laufschrift beherzigt und gegen die Box ausgetauscht :-) Meine Frage: Ich würde gern die Infobox in goldgelb färben. Geht das?
Jimdo Tutorials (Donnerstag, 24 Mai 2012 15:29)
Die Boxen sind von Jimdo vorgegeben und sollten nicht verändert werden - du kannst jedoch einfach die gelbe Warn-Box von oben verwenden.
Gruß, JimdoFriend Fabian
prana-muenchen (Donnerstag, 24 Mai 2012 16:20)
Danke, das habe ich gemacht. Aber ich hätte gerne das "normale" Ausrufezeichen von der blauen Box.
prana-muenchen (Donnerstag, 24 Mai 2012)
Hallo, nochmal zurück zur gelben Box :-)
Ich dachte das wäre mit normalem HTML-Code machbar (hast Du oben erwähnt).
Jimdo Tutorials (Sonntag, 27 Mai 2012 15:02)
Wie gesagt: Jimdo verwendet diese Infoboxes um Warnungen beim Bearbeiten der Seite anzuzeigen. Wenn man diese jetzt verändert, verändert man gleichzeitig auch die Warn-Boxen, die dir beim Bearbeiten der Seite helfen sollen. Du veränderst also das aussehen des Jimdo CMS - das sollte man auf keinen Fall machen.
Gruß, JimdoFriend Fabian