MISE A JOUR DU CARROUSEL

MISE A JOUR DU CARROUSEL
PARTIE A : L’image
1. Créer les nouvelles illustrations au format : 201x127 pixels
2. Se connecter au site en mode administrateur (/login)
3. Ajouter les nouvelles images au site
- Une fois connecté se rendre sur la page « ADMIN » qui est barrée dans la navigation
- Ajouter l’image crée au bon format avec la fonction Jimdo habituelle (+ élément image)
- IMPORTANT : Il faut que l’image soit dans sa taille réelle, pour cela cliquez sur l’icône maximaliser
l’image. Le nombre total d’images du carrousel doit être un multiple de 4 (4-8-12 ou 16 images)
4. Répétez l’opération le nombre de fois nécessaires, vous pouvez supprimer ou conserver les images
que vous n’utilisez plus.
5. Cliquez sur afficher la page en bas à droite
6. Votre image est en ligne, conservez cet onglet ouvert et ouvrez un nouvel onglet sous votre
navigateur.
PARTIE B : Le code html
7. Dans le nouvel onglet ouvert dans l’étape 6 connectez-vous à la page où se trouve l’animation à
modifier, passez en mode éditeur pour modifier la page
8. Cliquez sur l’élément « Carrousel » dans le pied de page pour le modifier comme un élément
classique Jimdo
9. Il faut maintenant intégrer l’adresse de la nouvelle image dans le code du widget.
Chaque code est composé de deux parties importantes, en JAUNE l’adresse de la page à ouvrir lors
du clic sur l’image, en BLEU l’adresse de l’image à afficher dans le carrousel :
<li> <a href="/nos-programmes/clos-saphir/"><img
src="http://u.jimdo.com/www61/o/sda626d4fd44264e7/img/i5c9fafb89ea31b84/1358535837/std/i
mage.png" alt="Clos Saphir" /><span>Clos Saphir</span></a>
</li>

Je veux RAJOUTER (PAR 4) une image dans le carrousel en conservant les autres :
Il faut alors copier/coller un code complet comme celui-ci :
<li> <a href="/nos-programmes/clos-saphir/"><img
src="http://u.jimdo.com/www61/o/sda626d4fd44264e7/img/i5c9fafb89ea31b84/1358535837/std/i
mage.png" alt="Clos Saphir" /><span>Clos Saphir</span></a>
</li>
Remplacez le code en JAUNE par l’adresse internet vers laquelle doit pointer l’image par exemple «
http://www.brandizipromotion.com/nos-programmes/clos-saphir/ »
Puis remplacer le code en BLEU par l’adresse de l’image, pour cela retournez sur l’onglet encore
ouvert « ADMIN » et faites clic droit « Copier l’adresse de l’image » sur l’image à ajouter. Coller cette
adresse à la place de l’ancienne adresse en BLEU, par exemple :
http://u.jimdo.com/www15/o/s1b7cce76ac998778/img/i6246ed1b803e8fee/1359965994/std/aqua
bella.png
Le nouveau code réalisé ressemblera à :
<li> <a href="http://www.brandizipromotion.com/nos-programmes/clos-saphir"><img src="
http://u.jimdo.com/www61/o/sda626d4fd44264e7/img/i6dee67f6a2eb3088/1358599006/std/imag
e.png " alt="Clos Saphir" /></a></li>
Enregistrez le widget puis passer en mode “Visiteur” en bas à droite pour voir le résultat.

Je veux MODIFIER une image dans le carrousel :
Les étapes sont les mêmes à part qu’il ne faut pas ajouter de code (<li> <a href… </a></li>) mais
simplement modifier l’existant en remplaçant l’adresse de destinations et l’adresse de l’image.
Puis enregistrez le widget et passez en mode visiteur pour voir le résultat.