Platzierung der Variablen


Es macht Sinn, den Funktionsbereich Layout (Design) > Eigenes Layout > HTML etwas intensiver zu betrachten, denn im HTML-Code werden die Jimdo-Variablen platziert, mit denen die Jimdo-Funktionen im eigenen Layout als dynamische Areale platziert werden.


Anders gesprochen:

Es gibt ein paar Pflichtvariablen, die Sie in Ihren HTML-Code einbetten müssen. Ohne diese können Sie kein eigenes Layout verwenden.

Im Jimdo-HTML-Code (beim Einsetzen in der Layout-Schnittstelle) hat eine Variable folgende Form

<var>content</var>

und kann an der Cursor-Position im HTML-Code per Klick auf die entsprechende Variable in der über dem Editor liegenden Leiste gesetzt werden:


Folgende Variablen sind verfügbar:

  1. content
  2. sidebar
  3. footer
  4. shopping cart
  5.  navi (standard)
  6. navi (nested)
  7. navi (breadcrumb)

 

1. VARIABLE: content

Code:

<var>content</var>

Funktion: Platzierung aller Jimdo-Inhaltsfunktionen die über die Jimdo-Elemente gesteuert werden (Überschriften, Texte, Bilder, Shopartikel, Formulare, Widgets etc.)

  • Pflichtvariable
  • nicht mehrfach platzierbar


2. VARIABLE: sidebar

Code:

 <var>sidebar</var>

Funktion: Platzierung des Inhaltscontainers für Elemente die auf jeder Einzelseite der Jimdo-Page wiederkehrend erscheinen (Sidebar), sowie automatische Primär-Platzierung des Warenkorbs

  • Pflichtvariable
  • nicht mehrfach platzierbar


3. VARIABLE: footer

Code:

<var>footer</var>

Funktion: Platzierung der Fußzeile in Jimdo-Pages zur Darstellung der automatischen und/oder über den Bereich Einstellungen > Fußzeile zuschaltbaren Inhalte Impressum, Druckversion, Seite weiterempfehlen, Sitemap etc.

  • Pflichtvariable
  • nicht mehrfach verwendbar


4. VARIABLE: shopping cart

Code:

<var>shopping cart</var>

Funktion: Freie Platzierung des Warenkorbs innerhalb des HTML-Gerüsts und Herauslösen der Warenkorbdarstellung aus der Sidebar

  • keine Pflichtvariable
  • nicht mehrfach platzierbar


5. VARIABLE: navi (standard)

Code:

<var levels="1,2,3" expand="false" variant="standard" edit="1">navigation</var>

Funktion: Platzierung der (undesignten) Navigation in Form der Navigationsebenen 1,2 und 3 als normale Quer- oder Längsnavigation.

  • Pflichtvariable als (standard) oder (nested)
  • kann mehrfach platziert werden


Diese Variable kann in der Syntax bearbeitet werden. Eine Änderung in z.B.

<var levels="2,3" expand="false" variant="standard" edit="1">navigation</var>

reduziert die ausgegebenen Navigationslevel auf die Ebenen 2 und 3. Durch eine weitere Platzierung der Variable im HTML-Code in Form von

<var levels="1" expand="false" variant="standard" edit="1">navigation</var>

haben Sie die Möglichkeit, Navigationslevel 1 an anderer Stelle im Layout auszugeben, zum Beispiel designt als Quernavigation.

Eine Änderung von

edit=“1“

in

edit=“0“

regelt, ob der entsprechende Navigationsbereich beim Mouseover im Bearbeiten-Modus die Funktion „Navigation bearbeiten“ auslöst oder nicht.

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


6. VARIABLE: navi (nested)

Code:

<var levels="1,2,3" expand="true" 
variant="nested" edit="1">navigation</var>

Funktion: Platzierung der (undesignten) Navigation in einer „nested“-Variante zur Verwendung als Dropdown-Navigation

  • Pflichtvariable als (standard) oder (nested)
  • kann mehrfach platziert werden


Diese Variable kann ebenso wie die Variable 5 (standard) in der Syntax bearbeitet werden.

 

Damit ist es bei gleicher Vorgehensweise möglich z.B. die ersten beiden Navigationslevel als Dropdown-Navigation auszugeben und eine dritte Ebene als am anderer Stelle positionierte Vertikalnavigation. Häufig wird nach einer Integration der Dropdown-Navigation in feste (also vorgegebene) Jimdo-Layouts gefragt. Bislang ist diese Funktion ausschließlich im Rahmen der Verwendung eines eigenen Layouts nutzbar.

 

 

7. VARIABLE: navi (breadcrump)

Code:

<var variant="breadcrumb" edit="0">navigation</var>

Funktion: Platzierung einer automatischen Brotkrumennavigation (Breadcrump) als hierarchisch anklickbare Pfadangabe bzw. Orientierungshilfe zur aktuell geöffneten (Unter-) Seite

 

  • keine Pflichtvariable
  • mehrfach platzierbar


So weiß der User stets wo genau er sich befindet, auch wenn die gewählte Templateansicht oder Navigationsart es gerade verdeckt (z.B. Dropdown-Navigation).

 

Wie werden die Variablen gesetzt?

Unter DESIGN > Eigenes Layout > HTML können die Variablen (unabhängig von der Platzierung im bereits vorhandenen Muster-HTML) über die Variablen-Buttons oberhalb des HTML-Editor-Fensters im Quelltext an der jeweiligen Cursorposition platziert werden.

 

Dies geschieht durch Platzieren der Maus innerhalb eines entsprechenden DIVs im (eigenen) HTML-Code und per Klick auf den entsprechenden VARIABLEN-Button.

 

 

Fehlende oder versehentlich doppelt gesetzte VARIABLEN werden über eine Fehlermeldung bei Abspeichern des HTML-Textes registriert.

 

Der Fehler muss behoben werden um abspeichern zu können. Die DIVs innerhalb derer die VARIABLEN platziert werden dürfen frei benannt werden und unterliegen keiner Namenskonvention. Solange IDs und deren Klassen im CSS definiert sind, können sie frei erstellt, platziert, verschachtelt, definiert oder umformatiert werden. Sie können Sie auch:

 

<div id=“erdbeerkuchen“><var>sidebar</var></div>

 

nennen. Im ausgespielten Quelltext der JIMDO-Page erscheinen später anstelle der VARIABLEN ohnehin dynamische Elemente die mit eigenen (vorab nicht sichtbaren) IDs und Klassen aufwarten. Diese VARIABLEN sind demnach Platzhalter für dynamisch aus dem System generierte Inhalte wie zum Beispiel der Warenkorb (Variable „shopping cart“).

 

Die Werte dieser IDs und Klassen können nach ihrer Identifizierung per CSS sowie ggf. unter Verwendung des !important-Befehls im CSS oder Head der JIMDO-Page modelliert oder überschrieben werden können um zum Beispiel das Aussehen des Warenkorbs oder um Aufbau und Gestaltung des Contentbereichs zu definieren.