Details im HTML-Grundmodell


HTML-Grundmodell für ein eigenes Design

Das einfachste gültige Modell für den HTML-Code einer JIMDO-Page definieren wir mal wie folgt: Ein Container mit fester Breite und einer Kopfgrafik, der die zwingenden Inhaltsbereiche (VARIABLEN)

  • Navigation
  • Sidebar
  • Content un
  • Footer

beinhaltet.

 

Dies wird im HTML-Modell wie folgt aufgebaut. Die Pflicht-Variablen sind unterstrichen, Bereich 1 (Body) wird nur per CSS und nicht im HTML definiert.

Der HTML-CODE kann wie folgt im Bereich Layout > Eigenes Layout > HTML hinterlegt und abgespeichert werden:

<div id="container">
<div id="header">
<img src="header.jpg" alt="" />
</div>
<div id="navigation">
<var levels="1,2,3" expand="false" variant="standard" edit="1">navigation</var>
<div id="sidebar">
<var>sidebar</var>
</div>
</div>
<div id="content">
<var>content</var>
</div>
<div id="footer">
<div class="gutter">
<var>footer</var>
</div>
</div>
</div>

Häufige Fragen zum HTML

  • Kann ich HTML auch ohne eigenes Layout einsetzen?
    Ja. Wie im nachfolgenden Kapitel „HTML im Content punktuell einsetzen“ beschrieben bieten Ihnen verschiedene JIMDO-Elemente die Möglichkeit HTML-Code im Content oder der Sidebar einzusetzen (z.B. für Banneraufrufe, Widgets, Bilder etc.)

  • Kann ich den Bereich DESIGN > Eigenes Layout > HTML auch ohne CSS und eigenes Design nutzen?
    Nein! Mit Abspeichern des HTML-Codes im Bereich HTML wird automatisch die Layout- Schnittstelle aktiviert die auch eine gültige CSSSpezifikation verlangt.

  • Wofür wird die Sidebar benötigt?
    Die Sidebar fungiert in den meisten JIMDODesigns mittlerweile auch als Footerzeile und ist ein Areal das die darin platzierten Elemente auf jeder Unterseite ausspielt. Eignet sich also hervorragend für Adressinformationen, Newsletter-Anmeldungen etc.

  • Kann ich eine zweite Sidebar setzen?
    Nein. Die Variable ist nur einmal positionierbar, das bedeutet Sie erhalten nur einen solchen Bereich, den Sie mit den JIMDO-Elementen befüllen können.

    Kleiner Workaround: Sie können natürlich in Ihrem eigenen Layout ein DIV mit individuellen Inhalten (z.B. Adresse, Downloads etc.) fest positionieren, welches Sie dann allerdings per HTML und CSS pflegen müssen.

  • Was bedeuten diese Meldungen hier?

Der HTML-Editor der JIMDO-Layoutschnittstelle ist mit einem Validator versehen, der die eingegebene Syntax prüft und unbarmherzig das Abspeichern von fehlerhaftem oder unvollständigem Code verweigert.

 

Im oberen Beispiel wurde übrigens ein DIV nicht ordnungsgemäß geschlossen. Die Zeilenhinweise wie „line 7 column 9“ beziehen sich leider nicht wirklich auf die angezeigten Code- Zeilennummern links.  Also suchen Sie in diesem Beispiel bitte nicht wirklich in Zeile 7.

 

Kann ich hier den Quelltext aus einer anderen Webseite hineinkopieren? Im Grunde schon, sofern Sie die notwendigen JIMDO-VARIABLEN in diesem HTML-Code platzieren bevor Sie ihn abspeichern. Der HTML-Code ist aber natürlich nur ein Teil des Designs Ihrer Webseite.

 

Ohne korrespondierende CSS-Informationen und ohne eine grundsätzliche Bereinigung des Quelltextes (um zum Beispiel nicht benötigte HTML-Informationen, jegliche Ordner-Verweise etc.) könnte es eine anstrengende Fehlersuche werden.

 

Grafiken und Skripte im HTML einbinden
Wenn Sie z.B. Grafiken als festen Bestandteil Ihres Layouts im HTML-Code referenzieren möchten (z.B. eine Logo- oder Headerdatei) stehen Ihnen drei Wege zur Platzierung bzw. Abspeicherung dieser Grafiken auf Ihrer JIMDO-Page zur Verfügung:

 

1) Abspeichern im Bereich Dateien
Sie können valide Dateien bis maximal 500 kb Größe im Bereich Layout > Eigenes Layout > Dateien hochladen. Eine in diesem Bereich der Layout-Schnittstelle hochgeladene Datei namens z.B. 029.jpg können Sie im HTML-Code direkt per z.B.

 

<img src=“029.jpg“>
aufrufen.

2) Aufruf von versteckten Unterseiten

Legen Sie dazu im Menü eine versteckte Unterseite (im Bereich „Navigation bearbeiten“ Seite anlegen und mit dem Augensymbol ausblenden, dann abspeichern) z.B. namens img an. Dort legen Sie mit der +-Funktion ein neues Element ‚Dateidownload’ an ...

 

 

... und laden das zu verwendende Bild (hier 029.jpg) hoch. Anschließend wechseln Sie auf den Ansichtsmodus unten rechts und nehmen z.B. mit der rechten Maustaste unter dem „Download“-Link den so erzeugten Dateipfad der Datei 029.jpg auf.

 

Dieser Dateipfad lautet nun z.B.

http://eigenes-design-mit.JIMDO.com/ app/download/8765910998/029.jpg?t=1385732034

 

wobei Sie den letzten numerischen Teil der Syntax beim Aufruf im HTML auch weglassen können. Die HTML Syntax wird nun letztlich lauten:

 

<img src=“http://eigenes-design-mit.JIMDO.com/app/download/8765910998/029.jpg“>

 

Solche Aufrufe funktionieren auch mit Deeplinks auf innerhalb des Contents verbaute Bilder (rechte Maus- Taste > Grafik-Info anzeigen z.B. bei Firefox).

 

Dort (im Content) werden Sie aber auch schneller aus Versehen gelöscht.

 

3) Externer Aufruf von Bildern
Nicht schön, fehleranfällig, bei Suchmaschinen unbeliebt und unschön, aber im Notfall immer noch besser als nichts: der Aufruf einer Bild- oder Skriptdatei im HTML von einem externen Server. In diesem Fall lautet die Syntax z.B.

 

<img src=“http://{domainname}/img/029.jpg“>

 

Bild-verwenden-Button
Im HTML-Editor gibt es für den direkten Zugriff bzw. die Einbindung von Bildern die im Bereich Dateien abgespeichert sind einen „Bild-verwenden“-Button:

 

Neben unseren erfolgreichen JIMDO-Seminaren finden Sie bei uns nun auch MAILCHIMP Starter-Seminare. Hier finden Sie alle Termine und Preise in der Übersicht ...


Positionieren Sie den Cursor bei der Arbeit im Quelltext an der gewünschten Stelle wo das Bild eingebunden werden soll und klicken Sie auf „Bild verwenden“.

 

Aus einer Liste mit Thumbnails der unter DESIGN > Eigenes Layout > Dateien verfügbaren Bilder (sofern dort Bilder abgespeichert sind) können Sie per Klick nun den Code für den Aufruf des gewünschten Bildes hinterlegen und anschließend abspeichern.

 

Diese Funktion ist besonders hilfreich, wenn Sie wenig Erfahrung im Umgang mit HTML-Codes haben oder für Suchmaschinen optimierte und mit langen Dateinamen versehene Bilder einbinden möchten, da sich die Wahrscheinlichkeit eines Schreibfehlers im Pfad reduziert.

 

Nach dem Abspeichern (und dem Bestätigen der Designänderung wird Ihre JIMDO-Page ein wenig seltsam aussehen. Das liegt daran, dass vermutlich die CSS-Informationen noch nicht ausreichend hinterlegt sind. Dies ist der nächste Schritt zum eigenen Design mit der Designschnittstelle.

 

HTML im Content punktuell einsetzen Auf den Hilfe- und Forenseiten von JIMDO handeln viele Einträge von Fragen die sich nicht explizit mit einem kompletten eigenen Design sondern mit dem punktuellen Einsatz von HTML beschäftigen.

 

Wenn Sie innerhalb Ihres Contents oder in der Sidebar HTML-Elemente (etwas den externen Aufruf einer Grafik, eines Links oder eines Banners) umsetzen möchten, reicht es mit der +-Funktion ein neues Element „Widget / HTML“ zu eröffnen

 

um im nachfolgenden Dialog eine gültige HTML-Syntax in das Editor-Fenster zu integrieren.

 

 

Dabei können Sie alle gültigen HTML-Tags verwenden oder auch formatierende CSS-Eigenschaften mitgeben:

 

 

Von der Verwendung eines durch Microsoft Office- Dokumente erzeugten Quellcodes empfehle ich übrigens Abstand zu nehmen.

 

Ein guter Hinweis:

Beinahe alle Text beinhaltende JIMDO-Elemente (Text, Text mit Bild, Tabellen, Shop- Produkte) bieten auch die Möglichkeit einer direkten HTML-Bearbeitung, was vielseitige Möglichkeiten für Gestaltung und Verknüpfung bietet.

 

Weiterhin können Sie natürlich in allen HTML-Edit- Bereichen auch auf CSS-Definitionen verweisen, die Sie im eigenen Design entweder im Bereich DESIGN > Eigenes Layout > CSS oder im Head-Bereich definiert und hinterlegt haben (siehe nachfolgendes Kapitel).

 

Ein solcher Aufruf sieht dann als „Widget/HTML“ oder im HTML-Bearbeitungsfenster eines Elements „Text“ wie folgt aus: 

 

wobei in der eigenen CSS-Datei oder im Head-Bereich vorab folgende Klasse definiert und hinterlegt wurde:

 

.wideline {width:200px;margin-left:0px;height:2px;backgroundcolor:# ff0000;}

 

Wie man sieht, nähern wir uns damit dem Thema CSS.

 

CSS-Grundmodell für ein eigenes Design

Das CSS-Modell definiert das Aussehen und Verhalten der von Ihnen im HTML aufgebauten DIVs oder punktuell verwendeten DIVs und Klassen. Für ein umfassendes Verständnis der nachfolgenden Codes sollten Sie idealerweise Grundkenntnisse zum Thema CSS haben.

 

Für das vorab aufgebaute HTML-Modell müssen nun (mindestens) folgende DIVs und Klassen im CSS unter DESIGN > Eigenes Layout > CSS definiert werden:

 

  • #body
  • #container
  • #header
  • #navigation
  • #sidebar
  • #content
  • #footer
  • #footer .gutter

JIMDO bietet in diesem Zusammenhang eine - nachfolgend stark bereinigte - CSS-Datei als Vorlage an, die man natürlich gegen jede eigene CSS-Datei austauschen kann.

 

Welche CSS dominiert?

CSS-Dateien (oder Stylesheet-Sprachen wie SASS) definieren das Aussehen und Verhalten der von Ihnen im HTML-Modell aufgebauten DIVs und Bereiche. Soweit klar.

 

In einer JIMDO-Page gibt es natürlich nicht „die eine“ CSS-Datei innerhalb derer einfach alles geregelt wird. Dazu ist das System zu komplex und unterstützt zu viele Varianten.

 

Als intelligent strukturierter Webbaukasten ist es in veränderbare Bereiche mit individueller Konfiguration (z.B. Layout, Schriften etc.) und in nicht zugängliche Bereiche (layoutspezifische Bestandteile, gemeinsame Grundfunktionen, Frontend-Edit-Modus, Verhalten der einzelnen Elemente etc.) unterteilt.

 

Wichtig für Ihr Verständnis bei Nutzung der Designschnittstelle:

Alle über den Style-Modus erarbeiteten Schriftkonfigurationen bleiben weiterhin Layout-spezifisch abgespeichert, gelten aber nicht als Schriftdefinition für Ihre „Eigenes Layout“ unterhalb von DESIGN > Eigenes Layout.

 

Diese definieren Sie entweder direkt in den CSSDefinitionen des ‚Eigenen Layouts’ oder unterhalb des dann aktiven Bereiches Schriftformat unter DESIGN > Eigenes Layout > Schriftformat.

 

JIMDO-Kenner entdecken darin die alte Version des Style-Editors aus den Jahren 2009 – 2015.

 

Die hier abgespeicherten Schriftinformationen bleiben auch bei Deaktivierung der Layout-Schnittstelle bestehen und sind sofort wieder aktiv sobald ein ‚Eigenes Layout’ aktiviert wird.

 

Übrigens: In der eigenen CSS hinterlegte Schriftdefinitionen werden die unter DESIGN > Eigens Layout > Schriftformat getroffenen Einstellungen immer überschreiben.

 

Reduzierte Definitionsmöglichkeiten für die Blogdarstellung und Shop-Zusammenhänge wie Warenkorbbutton und Checkout finden Sie unter

  • DESIGN > Eigenes Layout > Blog Styles bzw.
  • DESIGN > Eigenes Layout > Shop Styles

Auch gut zu wissen: während Sie bei den 40 Städte- Designs von JIMDO im Bereich Style auf mehr als 800 browsersichere Fonts (8) und Google Webfonts (800+) zugreifen können, müssen Sie bei Verwendung von ‚Schriftformat’ alle Webfonts die nicht zu den 8 + 33 hinterlegten Schriften gehören über den Head oder das eigene CSS importieren.

 

Eine Anleitung zur Einbindung externer kostenpflichtiger oder –freier Webfonts finden Sie bei Google Fonts oder anderen Schriftprovidern.