Search the Support Center

Custom Layouts

Using HTML and CSS, you can create your own Custom Layout for your Jimdo site by clicking on Layout in the Site Admin and then clicking on the Custom tab at the top. Here you will be able to enter your HTML, CSS, and upload any images and other files necessary for your design.

 

How it Works

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

 

HTML Variables

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

 

<var>content</var>

<var>sidebar</var>

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

<var>footer</var>

 

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: 

 

<var>content</var> 

 

Hint:

You can highlight the corresponding section and click on "content" in the toolbar above. Your section will automatically be substituted with the Jimdo section variable.

Sidebar

This is the second area where you can add Elements. This section also contains the Jimdo ad for JimdoFree sites. 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:

 

<var>sidebar</var>

 

Hint:

Tip: You can highlight the corresponding section and click on "sidebar" in the toolbar above. Your section will automatically be substituted with the Jimdo section variable.

Navigation

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:

 

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

 

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>

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

 

Hint:

You can highlight the corresponding section and click on "navigation" in the toolbar above. Your section will automatically be substituted with the Jimdo section variable.

Footer

The Footer is the section at the bottom of the Layout 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:

 

<var>footer</var>

 

Hint:

You can highlight the corresponding section and click on "navigation" in the toolbar above. Your section will automatically be substituted with the Jimdo section variable.

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

 

Navigation

Here is an example of the CSS for the Navigation: 

 

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

Hint:

You can add photos you've already uploaded by clicking on the icon on the upper left.

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

 

background-image:url(test.gif);


Layout Files

The photos that you upload via the Files tab must be in one of these 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.