start
Diese Seite ist eine "Spielwiese"
...hier probieren wir Sachen aus, nach denen die Besucher in unserem
Zum Beispiel: ...
...wie bekomme ich verschiedene Schriftarten in Jimdo-Textelemente?
Beispiel: Überschrift oben
1. über eine CSS-Anweisung (CSS-Klasse einrichten über Einstellungen > Head Bearbeiten)
CSS
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet" type="text/css" />
<style>
.testfont {font-family:'Architects Daughter';} /*CSS-Klasse*/
</style>
html (html-Widget oder Text-Element im html-Modus)
<h1>Diese Seite ist eine <span class="testfont" style="color: #0d4e5d;">"Spielwiese"</span></h1>
2. über eine inline-style Anweisung:
<h1> Diese Seite ist eine
<span style="color: #0d4e5d; font-family: 'Architects Daughter';">"Spielwiese"</span>
</h1>
...wichtig: in beiden Fällen muss der Google-Font im CSS-Editor definiert sein, sonst ggf. fehlerhafte Darstellung!
(Auf die Definition kann nur verzichtet werden, wenn über "Styles" irgend einem Textelement die gewünschte Schrift standardmäßig zugeordnet wurde. Sicher ist sicher, deshalb lieber den CSS-Link im CSS-Editor einbauen)
...Textelemente gesondert formatieren
Wurde einmal eine CSS-Anweisung angelegt, kann diese mit auf zwei Arten auf html-Elemente angewendet werden:
- Gekapselt ( <span> ... </span> )
testüberschrift h3, übriger Text normal
<h3>
<span class="testfont">testüberschrift h3, </span>
<span style="font-size: initial;">übriger Text normal</span>
</h3>
testparagraph p, normaler Text
<p><span class="testfont">testparagraph p, </span>normaler Text</p>
- Ganzen Absatz gesondert formatieren
Absatz 1
<p class="testfont">Absatz 1</p>
Überschrift h5
<h5 class="testfont">Überschrift h5</h5>
- Überschriften gesondert formatieren
Für Überschriften und andere Sonderelemente können per CSS auch Sonderformate vereinbart werden, ohne dass Klassen vergeben werden müssen. Für Überschriften z.B. stehen in Jimdo6 Formate zur Verfügung (h1-h6):
Testüberschrift h4
Testüberschrift h5
Testüberschrift h6
html
<h4>Testüberschrift h4</h4>
<h5>Testüberschrift h5</h5>
<h6>Testüberschrift h6</h6>
CSS
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<style>
h4, h5, h6 {font-family:'Architects Daughter'; font-size:22px; margin: 15px;}
h5, h6 {font-family: 'Roboto', sans-serif; font-size:22px;}
h6 {font-size:18px;}
</style>
Tipp: Die Jimdo Google-Fonts gibt´s hier: https://fonts.google.com/
...wie bekomme ich einen Text, der größer ist, als die Jimdo-Auswahl es hergibt?
( > max. Schriftgröße: 95px)
Beispiel:
...
HowToDo:
- Textelement anlegen, Text schreiben
- Textelement im html-Modus öffnen (</>)
<p>...100px</p>
- style-tag für font-size ergänzen
<p style="font-size: 100px;">...100px</p>
Alternativ:
- Textelement anlegen, Text schreiben
- besondere Schriftgröße wählen (z.B.: 10px)
- Textelement im html-Modus öffnen (</>)
<p><span style="font-size: 10px;">...100px</span></p>
- style-tag ändern (statt 10px auf 100px)
<p><span style="font-size: 100px;">...100px</span></p>
...Zeilenumbrüche im html-Modus steuern
(funktioniert in allen Text-Elementen außer Überschriften)
- Geschützter Trennstrich (...kein Zeilenumbruch an diesem Trenn-/Bindestrich!): ‑
- Geschütztes Leerzeichen (...kein Zeilenumbruch an diesem Leerzeichen!):   oder
- Weiches Trennzeichen (...Leerzeichen - wenn Zeilenumbruch, dann Trennstrich!): ­
- Manueller Zeilenumbruch (...Leerzeichen - wenn Zeilenumbruch nötig, dann bitte hier!): <wbr />
...Bilder und Texte
Mouse-Over-Effekt:
Die Bilder im folgenden Container vergrößern sich automatisch bei Mouse-Over (:hover).
Dieses Verhalten kann mit folgendem CSS-Skript erreicht werden:
<style>
/*img mouseover effekt
----------------------------------*/
#container img {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
#container img:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
#container {
overflow:hidden;
}
</style>
Dieses Bild wurde als Jimdo Standard-Bildelement eingesetzt, und wurde auf maximale Größe vergrößert.
Lorem ipsum dolor sit amet, ullum nullam es sed et. Virtute ancillae mel ne, quo ean adhuc del principes persequeris, ius alii pro priae maxima accommodare ea.
Dieses Bild wurde per Copy & Paste in ein Tabellen-Element hinein kopiert. Es verhält sich etwas anders, als ein Standard-Bild-Element.
Im Bearbeitungsmodus lassen sich in Tabellen-Elemente hineinkopierte Bilder besonders gut bearbeiten.
Sie bekommen von Jimdo "Anfasser", mit denen sie beliebig skaliert werden können.
Der früher vorhandene Fehler bez. der Spaltenrandabstände wurde von Jimdo behoben.
Obiges Bild ist auch ein Standard-Bild-Element, welches aber zentriert und verkleinert wurde.
Diese Bilder wurden beide mit copy & paste in ein "Bild mit Text"-Element eingefügt und im html-Modus nachträglich ergänzt.
Alt-Tag auslesen:
...ein Script liest den Inhalt des alt-Tags des bezeichneten Bildes (s.o. "Bild mit Alt-Tag") aus, wenn ich darauf klicke, und gibt ihn an eine alert-Box weiter:
<script>
$('#cc-m-12689467924.j-textWithImage img').click(function() {
var getvalue = $(this).attr('alt');
alert(getvalue);
});
</script>
Ein anderes Script sorgt dafür, dass der Inhalt der alt-tags automatisch als Bildunterschrift unter das Bild gelegt wird (rot).
getvalue-script
alt-caption script
...V-Box Hover-Effekte
html-Textelement
Bild in Textelement (html-Modus)
<div class="vbox">
<img class="transparenz" src="https://image.jimcdn.com/app/cms/image/transf/dimension=232x10000:format=jpg/path/sbcfc830c2d85c206/image/ie6ce5dc32d6848f8/version/1443308842/image.jpg" alt="" width="205" height="135"/>
<div class="slogan"></div>
<div class="slogantext">
<center><a style="color: white;" title="test" href="#" target="_top">test</a></center>
</div>
html-Widget-Element
<a title="test" href="#"></a>
<div class="vbox">
<img class="transparenz" src="https://image.jimcdn.com/app/cms/image/transf/dimension=232x10000:format=jpg/path/sbcfc830c2d85c206/image/ie6ce5dc32d6848f8/version/1443308842/image.jpg" alt=""
width="205" height="135" />
<div class="slogan">
</div>
<div class="slogantext">
<center>
<a style="color: white;" title="test" href="#" target="_top">test <img src="https://forum-images.jimdo.com/app/download/13458642424/transp.png" alt="" class="" width="232" height=
"155" /></a>
</center>
</div>
</div>
html-Widget-Element
html-Widget-Element
<div class="vbox">
<img class="transparenz" src="https://image.jimcdn.com/app/cms/image/transf/dimension=232x10000:format=jpg/path/sbcfc830c2d85c206/image/ie6ce5dc32d6848f8/version/1443308842/image.jpg" alt=""
width="205" height="135" /> <a class="slogan" title="" href="#"></a> <a class="slogantext" style="text-align:center" title="title" href="#">test</a>
</div>
Für das dazugehörige CSS klick hier:
<pre> Breiten-Problem
Das normale Verhalten eines <pre> Absatzes ist asozial: er hält sich an gar nichts - auch nicht an <div>-Breiten!
Beispiel:
em ipsum dolor sit amet, ullum nullam es possim sed et. Virtute ancillae mel ne, quo ean adhuc del principes persequeris, ius alii pro priae maxima accommodare ea.
Zril aliquam fabulas mei in. Epicurei adipisci pro ex, vidisse minimum volupta ius euvero eos et accusam et just duo dolores.
Dieses kann man folgendermaßen ändern:
pre, xmp, plaintext, listing {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px 1em;
}
...ergänzen durch:
pre {
white-space: normal;
}
...angewandt auf Beispiel oben:
em ipsum dolor sit amet, ullum nullam es possim sed et. Virtute ancillae mel ne, quo ean adhuc del principes persequeris, ius alii pro priae maxima accommodare ea.
Zril aliquam fabulas mei in. Epicurei adipisci pro ex, vidisse minimum volupta ius euvero eos et accusam et just duo dolores.
anker1
...Twitter einbinden
Twitter-Schaltfläche
Jimdo Tweets-Button
- Lade Twitter-Nachrichten...
Jimdo-Follow-Button
AddThis html-widget
(s. rechte Seite...)...Pinterest einbinden
...Google-Maps PopUp
Was?
Wann?
Wo?
Anfahrt
Nächster Jimdo Kombi-Workshop
14.-16.09.2015
KVHS Bergen
Schulstraße 4
18528 Bergen auf Rügen, Deutschland
Wird noch bekannt gegeben...
Wird noch bekannt gegeben...
redesign-berlin.de
Rue du Capitaine Jean Maridor 9
13405 Berlin, Deutschland
anker2
..."Bilder in Text-Elementen"
Diese Bilder habe ich "als Kopie von der eigenen Seite" in ein Tabellenelement eingefügt:
 ...mit Hilfe des html-Editors können Bilder in Textfeldern  im
Fließtext eingesetzt  werden! |
HowToDo:
- Einzelbilder aus Vorlage ausschneiden (Bildbearbeitungsprogramm)
- Bilder als Galerie einsetzen (Raster, Einstellungen s.u.)
- Neues Tabellenelement anlegen
- Inhalt aus Tabellenelement entfernen (strg+a > entf) und ein paar Leerzeilen (Return) einsetzen und gewünschten hineinschreiben
- Bilder in der Besucheransicht aus der Galerie kopieren (markieren + strg+c)
- Bilder in Tabellenelement im Text einsetzen (strg+v) - verlinken wie normalen Text.
- ggf. Bilder Nachformatieren im html-Modus oder "Anfasser" benutzen (...nur in Tabellenelementen verfügbar!)
...Slider-Images verlinken
HowToDo:
...Text mit fixer Breite mittig setzen
Folgender Text (Blocksatz) wurde mit einer inline CSS-Anweisung mittig gesetzt:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
html
rot: html ergänzen!
blau: Jimdo Text (justify=Blocksatz)
<div style="width: 400px; margin: 0 auto;">
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede
justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>
...Spalten-Element mittig auf Seite setzen
Vorteil: alle Elemente in der Spalte werden automatisch mit dem Elternelement ebenfalls mittig angeordnet!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
html unverändert:
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
HowToDo:
- Spaltenelement generieren (Standard: 2 Spalten)
- Eine Spalte löschen
- Bezeichner (ID) finden
- CSS eintragen in CSS-Editor
- Browserfenster auktualisieren (F5)
sticky-element.js
Inline-Style Adressbalken (PageBottom)