Wie können wir dir helfen?

Integriere dein eigenes Layout auf deiner Jimdo-Seite

Wenn du dich mit HTML und CSS richtig gut auskennst, kannst du ein eigenes Layout kreieren oder ein auf einer anderen Webseite bestehendes Layout anpassen und einfügen.

 

Du kannst eigenen HTML-Code, CSS und Dateien hinterlegen. Die wichtigen Elemente deiner Jimdo-Seite kannst du über den Editor an den entsprechenden Stellen einfügen.

 

Klicke dafür im Menü auf Design und wähle Eigenes Layout.

Bild: Jimdo Eigenes Layout

Achtung:
Die Eingabe von Codezeilen in diesem Bereich erfolgt auf eigene Verantwortung. Wenn du durch die Eingabe von fehlerhaftem oder schadhaftem Code die Funktionen deiner Seite beschädigst, musst du eigenständig versuchen sie zu reparieren. Unser Support deckt Anfragen zu Funktionsstörungen, die durch eigenen Code verursacht wurden, nicht ab.

So einfach geht's:

  1. Kopiere den HTML-Quellcode deines Layouts und füge ihn hier unter dem Reiter "HTML" wieder ein.
  2. Klicke auf "xhtml" - dann schneidet das System automatisch den relevanten Code aus (Jimdo braucht nur den Bodybereich, den Headbereich kannst du selbstverständlich später unter "Einstellungen">"Headbereich" wieder bearbeiten) und validiert ihn.
  3. Kopiere das CSS deines Layouts und füge es unter dem Reiter "CSS" wieder ein.
  4. Lade die Bilder, die du für dein Layout brauchst, unter "Files" wieder hoch.
  5. Speichern - fertig!

Template Variablen

Templatebereiche

Jedes Template setzt sich - wie du weißt - aus verschiedenen Template-Bereichen zusammen. In Jimdo-Templates (Layouts) sind die Bereiche "Content", "Navigation", "Sidebar" und "Footer" Pflicht. Diese Bereiche müssen in deinem Template enthalten sein und auch unserer Bezeichnung entsprechen (sonst erkennt sie unser System nicht)! Du müsstest deine Bereiche also mit den folgenden Jimdo-Bereichen ersetzen.

  
  <var>content</var>
  
  
  <var>sidebar</var>
  
  
  <var>navigation[1|2|3]</var>
  
  
  <var>footer</var>
  

Contentbereich

Das ist der Inhaltsbereich - hier einfach deinen Bereich mit dem folgenden ersetzen: content

  
  <var>content</var>
  

 

Tipp: Du kannst einfach deinen Bereich markieren und oben in der Leiste auf "content" klicken, dann wird dein Bereich automatisch durch den Jimdo-Bereich ersetzt.

Sidebarbereich

Das ist der zweite Inhaltsbereich, den wir normalerweise in der Sidebar integrieren. In diesem Bereich ist auch die Jimdo-Box enthalten (Logo mit Dropdown-Menü). Die Sidebar ist auf jeder Unterseite gleich.

  
  <var>sidebar</var>
  

 

Tipp: Du kannst einfach deinen Bereich markieren und oben in der Leiste auf "sidebar" klicken, dann wird dein Bereich automatisch durch den Jimdo-Bereich ersetzt.

Navigationsbereich

Mit diesem Bereich wird die Jimdo-Navigation eingefügt. Mit ihr kannst du nach dem Einfügen ganz leicht weitere Seiten hinzufügen, sie löschen, umbenennen, verschieben etc.

  
  <var>navigation[1|2|3]</var>
  

Die von Jimdo erzeugte Navigation sieht im HTML später wie folgt aus:

             
<ul id="mainNav1">
  <li><a href="/">Page 1</a></li>
  <li><a href="/page-2/">Page 2</a></li>
  <li><a href="/page-3/" class="current">Page 3</a></li>
  <li>
  <ul id="mainNav2">
    <li><a href="/page-3/subpage-1/">Subpage 1</a></li>
    <li><a href="/page-3/subpage-2/">Subpage 2</a></li>
  </ul>
  </li>
  <li><a href="/page-4/">Page 4</a></li>
  <li><a href="/page-5/">Page 5</a></li>
</ul>
            

 

Variable für eine Standard-Navigation mit besserer Kontrolle der Navigationslevel

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

 

Variable für eine verschachtelte Navigation (nützlich für Dropdown):

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

 

Variable für eine Breadcrumb-Navigation:

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

 

Tipp: Du kannst einfach deinen Bereich markieren und oben in der Leiste auf "navigation" klicken, dann wird dein Bereich automatisch durch den Jimdo-Bereich ersetzt.

Footerbereich

Dies ist der Jimdo-Footer-Bereich, in dem z.B. auch der Anmelde-Link enthalten ist.

 

  
  <var>footer</var>
  

 

Tipp: Du kannst einfach deinen Bereich markieren und oben in der Leiste auf "footer" klicken, dann wird dein Bereich automatisch durch den Jimdo-Bereich ersetzt.

Shopping Cart (Warenkorb)

Dies ist der Warenkorb, der in deinem Online-Shop angezeigt wird, sobald du Shop-Produkte einbindest.

 

  
  <var>shoppingcart</var>
  

 

Tipp: Du kannst einfach deinen Bereich markieren und oben in der Leiste auf "shopping cart" klicken, dann wird dein Bereich automatisch durch den Jimdo-Bereich ersetzt.

CSS

Startseite CSS

In den CSS-Bereich kannst du dein CSS kopieren. In den folgenden Unterkategorien findest du noch einige Beispiele/Tipps zu den einzelnen CSS-Elementen.

Navigation

Hier ist ein Beispiel für eine CSS-Formatierung der Navigation:

  
  <var>content</var>
ul#mainNav1,
ul#mainNav2
{
    margin:0;
    padding: 0;
}


ul#mainNav1 li,
ul#mainNav2 li
{
    display: inline;
    margin: 0;  
    padding: 0;
}


ul#mainNav1 li a,
ul#mainNav2 li a
{
    font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none;
    display: block;
    color:#333;
    border-bottom:1px solid #CCC;
}


ul#mainNav1 li a { padding:4px 4px 4px 4px; }
ul#mainNav2 li a { padding:4px 4px 4px 14px; }


ul#mainNav1 a:hover
{
    background:#EEE;
    color:black;
}

ul#mainNav1 a.current { font-weight:bold; }
            
  

Background Images

So muss der Pfad in deinem CSS für deine Background-Images lauten:

  
 background-image: url(test.gif);
 

 

Tipp: du kannst über das Icon oben links die von dir bereits hochgeladenen Bilder einfach per Klick integrieren.

Dateien

Startseite Files

 

Die Bilder, die du unter "Files" hochlädst, müssen das Format *.gif,*.png oder *.jpg haben.

 

Die Bilder müssen in deinem HTML-Code ohne Pfad eingebunden werden:

  
<img src="test.gif" />  

 

Du kannst an dieser Stelle auch dein eigenes Javascript hochladen (*.js) - es wird automatisch dem Head-Bereich hinzugefügt. Du kannst den Head-Bereich auch manuell unter "Einstellungen">"Head bearbeiten" editieren: entweder für die gesamte Webseite oder für jede einzelne Unterseite, wenn du eine JimdoPro oder JimdoBusiness Seite hast.

Tipp:
Wenn du mit HTML und CSS (noch) nicht so recht vertraut bist, kennen wir tolle Seiten, mit deren Tutorials du dich schlau machen kannst:
http://de.selfhtml.org (Deutsch)
http://www.w3schools.com (Englisch)
Alternativ findest du bei unseren Jimdo-Experts vielfältige Unterstützung.