Installation très facile du slider

Slider 100% compatible avec le NOUVEAU JIMDO.

Durée : 4 minutes

Obtenez le CSS ici

le html est dispo plus bas

Préparez le terrain

  • Connectez vous en mode administrateur
  • Cliquez sur la navigation
  • Créez une page brouillon pour faire des essais

Collez le CSS dans la section head

Module Texte

  • Placez vous sur la page test
  • Cliquez sur + ajouter un élément
  • Puis cliquez sur "plus d'éléments"
  • Choisissez le module "texte"
  • Entrez dans le code source du module

Collez le code HTML

Collez ce code dans le module

<div class="zekoolslider">

<!--////Free Slider Jimdo by zekoolweb.com////-->

    <figure>

        <!--////SLIDE #1////-->

        <a title="Message1" href="/landingpage1"><img src="https://s3-eu-west-1.amazonaws.com/zekoolsnippet/zekoolslider/slide1.jpg" alt="" /></a>

<!--////SLIDE #2////-->

         <a title="Message2" href="/landing-page2"><img src="https://s3-eu-west-1.amazonaws.com/zekoolsnippet/zekoolslider/slide2.jpg" alt="" /></a>

<!--////SLIDE #3////-->

         <a title="Message3" href="/landing-page3"><img src="https://s3-eu-west-1.amazonaws.com/zekoolsnippet/zekoolslider/slide3.jpg" alt="" /></a>

<!--////SLIDE #4////-->

         <a title="Message4" href="/landing-page4"><img src="https://s3-eu-west-1.amazonaws.com/zekoolsnippet/zekoolslider/slide4.jpg" alt="" /></a>

    </figure>

</div>

Décryptage du code pour aller plus loin...

Voici le même code sous une autre forme

<div class="zekoolslider">

 <figure>


 <!--////SLIDE #1////-->

<a title="Message1" href="/landingpage1">

<img src="slide1.jpg" alt="" /></a>


<!--////SLIDE #2////-->

<a title="Message2" href="/landingpage2">

<img src="slide2.jpg" alt="" /></a>


<!--////SLIDE #3////-->

<a title="Message3" href="/landingpage3">

<img src="slide3.jpg" alt="" /></a>


<!--////SLIDE #4////-->

<a title="Message4" href="/landingpage4">

<img src="slide4.jpg" alt="" /></a>


    </figure>

</div>

Pas de panique, le code ci-dessus est très simple en fait.

Pour faciliter les choses, j'utilise 3 couleurs pour nous repérer.


Orange : Le message d'accroche qui peut contenir des mots clés. C'est le texte du lien.


Cyan : L'adresse de la page d'atterrissage. Par exemple : /boutique/promo


Vert : L'adresse de votre image, le chemin pour y accéder. évitez les accents.