Hoe kunnen we je helpen?

Eigen design

Met HTML en CSS kun je een eigen design maken voor je Jimdo website. Je kunt je code en bestanden uploaden via Design > Eigen design


Een eigen design gebruiken raden we alleen aan voor mensen met goede kennis van HTML en CSS. We kunnen je namelijk niet ondersteunen als er iets misgaat met je eigen design. 

Zo werkt het

Kopieer de HTML code van je eigen design en plak dat in de HTML tab. Het Jimdo systeem heeft alleen het BODY gedeelte nodig. Je kunt later het HEAD gedeelte bewerken.


Plak je eigen CSS code in de CSS tab en upload je bestanden in de tab Bestanden


Klik na het bewerken van een tabblad steeds op Opslaan

HTML variabelen

Elk design is opgebouwd uit verschillende onderdelen. Om een design met Jimdo te laten werken zijn onderdelen nodig die benoemd zijn als Content, Navigation, Sidebar en Footer. Die delen moeten dus in je eigen design zijn opgenomen en de juiste naam hebben, zodat het systeem ze kan herkennen.Je kunt daarvoor deze variabelen gebruiken:


<var>content</var>

<var>sidebar</var>

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

<var>footer</var>

Inhoudsgedeelte

Dit is het belangrijkste inhoudsgedeelte van de pagina. Hier kunnen elementen van het Jimdo systeem worden toegevoegd. Gebruik deze variabele om aan te geven waar het inhoudsgedeelte komt te staan:


<var>content</var>


Je kunt ook je code selecteren en bovenin op "content" klikken. De geselecteerde code wordt vervangen door de Jimdo variabele.

Zijbalk

Dit is het tweede deel van de site waar elementen kunnen worden toegevoegd. De zijbalk is op elke pagina van de site zichtbaar. Gebruik deze variabele om aan te geven waar de zijbalk komt te staan:

 

<var>sidebar</var>

 

Je kunt ook je code selecteren en bovenin op "sidebar" klikken. De geselecteerde code wordt vervangen door de Jimdo variabele.

Footer

De footer is het gedeelte onderaan de pagina waar de inloglink en andere links uit de footer instellingen komen te staan. Gebruik deze variabele om aan te geven waar de footer komt te staan:

 

<var>footer</var>

 

Je kunt ook je code selecteren en bovenin op "footer" klikken. De geselecteerde code wordt vervangen door de Jimdo variabele.

Winkelwagen

De winkelwagen wordt zichtbaar vanaf het moment dat een webwinkel voor de Jimdo website actief is. Gebruik deze variabele om aan te geven waar de winkelwagen komt te staan:

 

<var>shoppingcart</var>

 

Je kunt ook je code selecteren en bovenin op "shoppingcart" klikken. De geselecteerde code wordt vervangen door de Jimdo variabele.

Navigatie

In de navigatie kunnen pagina's worden toegevoegd, verwijderd en gekopieerd. Gebruik deze variabele om aan te geven waar de navigatie kom te staan:


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

De navigatie die door het Jimdo systeem wordt gegenereerd, ziet er zo uit in HTML:

 

<ul id="mainNav1">

<li><a href="/">Pagina 1</a></li>

<li><a href="/pagina-2/">Pagina 2</a></li>

<li><a href="/pagina-3/" class="current">Pagina 3</a></li>

<li>

<ul id="mainNav2">

<li><a href="/pagina-3/subpagina-1/">Subpagina 1</a></li>

<li><a href="/pagina-3/subpagina-2/">Subpagina 2</a></li>

</ul>

</li>

<li><a href="/pagina-4/">Pagina 4</a></li>

<li><a href="/pagina-5/">Pagina 5</a></li>

</ul>

 

Je kunt ook je code selecteren en bovenin op "navi" klikken. Je kunt dan kiezen tussen (standard),  (nested) en (breadcrumb). De geselecteerde code wordt vervangen door de Jimdo variabele.

Design CSS

In de CSS tab kun je je eigen CSS code invoeren. We lopen door een paar voorbeelden en tips voor de verschillende CSS elementen. 

Navigatie

Dit is een voorbeeld van CSS code voor de navigatie:


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; }

Achtergronden

Zo zou de CSS eruit moeten zien voor een afbeelding die als achtergrond wordt gebruikt:

 

achtergrond-afbeelding:url(test.gif);

 

Je kunt foto's gebruiken die je al hebt geüpload door op "Foto toevoegen" te klikken.

Bestanden

Afbeeldingen die je uploadt via de tab Bestanden kunnen deze bestandstypes hebben: *.gif, *.png of *.jpg. Je kunt de afbeeldingen in je HTML code opnemen zonder locatie:


<img src="test.gif"  />

Je kunt hier ook javascript (*.js) uploaden. Het wordt automatisch toegevoegd aan het HEAD gedeelte. Je kunt het HEAD gedeelte ook zelf bewerken via Instellingen > Website > HEAD gedeelte bewerken.

Deze bestandstypes kun je ook uploaden om te gebruiken in een eigen design: .css, .svg, .ttf, .eot en .woff.