Besoin d'aide ?

Design personnel

Si vous vous y connaissez en HTML et en CSS, vous pouvez créer votre propre design. Pour ce faire, cliquez sur l'onglet "Design Personnel" dans le menu design de votre barre d'administration. Si vous avez besoin d’aide sur cette question, cliquez sur l’onglet "Aide/Trucs" ou reportez-vous au Forum Jimdo, les Jimdonautes s'échangent souvent de bons conseils en matière de personnalisation de design !

Comment créer un design personnel ?

La création d'un design personnalisé en utilisant du code html, css et javascript dépasse les compétences de notre service de support. Nous ne pourrons donc pas vous aider par e-mail dans ce domaine. Vous trouverez cependant sur cette page une introduction à la création d'un design personnalisé avec Jimdo. Pour savoir comment cette interface fonctionne, vous pouvez également consulter la vidéo : Tutoriel vidéo pour exploiter l'interface design personnel de Jimdo ( cette vidéo est en anglais ).

Attention :
L'option "Design personnel" ne s'adresse qu'à des utilisateurs expérimentés ! Il est tout à fait possible de modifier son site Jimdo grâce à des lignes de code mais vous ne pourrez alors pas bénéficier du support Jimdo. Nos équipes ne sont formées que sur le CMS Jimdo et n'apporte pas de support sur les codes HTML ou CSS.

Accueil

Ici vous pouvez facilement créer votre design personnel - et déterminer ainsi librement l'apparence de votre site.

C'est aussi simple que ça :

  1. copiez le code-source HTML et insèrez-le ici sous l'onglet "HTML"
  2. cliquez sur "xhtml" - et le sytème coupe automatiquement le code requis (Jimdo a alors besoin du contenu "body"; vous pourrez bien-sûr modifier plus tard l'entête de document "head" et le valider sous "Einstellungen">"Headbereich".
  3. copiez le CSS de votre design et collez le dans l'onglet "CSS".
  4. Téléchargez les images dont vous avez besoin pour votre design dans "Fichiers".
  5. enregistrer - terminé !

Regardez simplement notre Video de Démo ! https://www.youtube.com/watch?feature=player_embedded&v=SDMvw6fNDR4

Template variables

Zones Template

Chaque Template se compose - comme vous le savez - de différentes zones de Template. Dans les templates Jimdo, les balises "Contenus", "Navigation", "Barre d'outils latérale" et "Titre de bas de page" sont obligatoires. Ces balises doivent être présentes dans votre Template et doivent également correspondre à notre description (sinon notre système ne le reconnaît pas)! Il faut donc que vous remplaciez ces balises avec les contenus Jimdo correspondants.


<var>content</var>

<var>sidebar</var>

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

<var>footer</var>

Zone Contenu

Voilà le contenu intérieur - remplacez simplement votre contenu avec ce qui suit : content


<var>content</var>


Astuce : il vous suffit de sélectionner votre contenu et de cliquer dans la liste du haut sur "content", et votre contenu sera alors automatiquement remplacé par le contenu Jimdo.

Secteur de la barre d'outil latérale

C'est le deuxième secteur interne que nous intégrons normalement dans la barre d'outils latérale. Avec ce secteur existe également la Jimdo-Box (Logo avec le menu Dropdown). La barre d'outils latérale est la même sur chaque sous-page.


<var>sidebar</var>


Astuce : il vous suffit de sélectionner votre contenu et de cliquer dans la liste du haut sur "sidebar", et votre contenu sera alors automatiquement remplacé par le contenu Jimdo.

Zone de navigation

La navigation Jimdo va être ajoutée à cet endroit. Grâce à elle, vous pourrez ensuite ajouter très facilement des pages supplémentaires, les supprimer, les renommer, les déplacer, etc.


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

Ensuite la navigation fournie par Jimdo ressemblera en HTML à cela :


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



Astuce : il vous suffit de sélectionner votre contenu et de cliquer dans la liste du haut sur "navigation", et votre contenu sera alors automatiquement remplacé par le contenu Jimdo.

Contenu Footer

Voici le contenu Jimdo Footer, dans lequel est contenu aussi le lien vers la page de connexion.


<var>footer</var>


Astuce : il vous suffit de sélectionner votre contenu et de cliquer dans la liste du haut sur "footer", et votre contenu sera alors automatiquement remplacé par le contenu Jimdo.


CSS

Page d'accueil CSS

Vous pouvez copier votre CSS dans l'interface CSS. Dans les sous-catégories suivantes vous trouverez encore quelques exemples/astuces d'éléments CSS uniques.

Navigation

Voici un exemple de Format-CSS de la 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; }
            

Images de fond

Voilà à quoi doit ressember l'hyperlien dans votre CSS pour vos images de fond :


background-image: url(test.gif);


Astuce : vous pouvez intégrer les images quevous avez téléchargées en cliquant simplement sur l'icône en haut à gauche.

Fichiers

Files

Les images que vous téléchargez sous "Files" doivent avoir le format *.gif,*.png ou *.jpg.


Les images doivent être reliées à votre code HTML sans hyperlien : 


<img src="test.gif"  />


À cet endroit vous pouvez aussi télécharger votre propre Javascript (*.js) - ceci sera automatiquement ajouté à votre entête de document Head. Vous pouvez aussi éditer manuellement l'entête de document Head sous "Paramètres">"Entête de document Head".