Search the Support Center

Custom Template

Using HTML and CSS, you can create your own custom template for your Jimdo site by opening the Menu, then clicking Design > Advanced > Custom Template. Here you will be able to enter your HTML, CSS, and upload any images and other files necessary for your design.


Jimdo Custom Template Interface

How it works

Copy your Template's HTML and paste it into the HTML tab. Jimdo only needs the body section. You can edit the <head> section later by opening the Menu and going to Settings > Website > Edit Head. Place the CSS of your Template into the CSS tab. Upload the images you need for your Template in the Files tab. Click Save at the bottom when you're finished editing any portion of the Custom Template.


HTML variables

Every template is made of different template sections. The Jimdo template sections that are required are: Content, Navigation, Sidebar, and Footer. These sections must be included in your custom template, and they must also be named correctly or they will not be recognized. You'll need to indicate your sections with the corresponding Jimdo template variables:







Content Area

This is the main content area of your page where you will be able to add elements. Place the following variable inside the section where you want your Content Area to appear: 





This is the second area where you can add elements. The sidebar is the same on every page of your Jimdo site. Place the following variable inside the section where you want your Sidebar to appear:





The Footer is the section at the bottom of the template that will contain the login link as well as any other links specified by editing the Footer settings. Place the following variable inside the section where you want the Footer to appear:




Shopping Cart

The Shopping Cart is what will pop up when someone begins to purchase a store item. Place the following variable inside the section where you want the Shopping Cart to appear:





The Navigation is where you can easily add, delete, copy, rename, and adjust the position of pages. Place the following variable inside the section where you want your Navigation to appear:




The navigation generated by Jimdo will look like this in HTML: 


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


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



<li><a href="/page-4/">Page 4</a></li>

<li><a href="/page-5/">Page 5</a></li>



Note: You can highlight the corresponding section and click on "navi" in the toolbar above - choose between (standard) and (nested). Your section will automatically be substituted with the Jimdo section variable.

Template CSS

You can add your CSS into this CSS section. In the following sub-categories, you'll find more examples and tips for the individual CSS elements.



Here is an example of the CSS for the Navigation: 


ul#mainNav1, ul#mainNav2 



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;


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






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


Background Images

This is what the CSS path for your background images should look like: 



You can add photos you've already uploaded by clicking on "Insert image."

Template files

The photos that you upload via the Files tab can be in one of the following formats: *.gif, *.png or *.jpg. The images can be inserted into your HTML code without a path: 


<img src="test.gif"  /> 


You can also upload javascript here (*.js) – it will automatically be uploaded into the <head> section. You can manually edit the head section under Settings > Website > Edit Head.


There are several additional file formats that can be uploaded to Custom Layouts: .css, .svg, .ttf, .eot, and .woff.


Related articles: