Astuce WebAcappella Expert : Des diaporamas avec WOW Slider

L’équipe WebAcappella a testé pour vous l’intégration dans le logiciel du plugin jQuery WOW Slider. Vous pourrez créer pour votre site un diaporama avec des effets très variés et surtout compatible avec tous les types d’écrans (ordinateurs, tablettes, smartphones).

WOW Slider

Ce plugin jQuery va vous aider à créer des diaporamas avec des effets de transition très différents. Compatible Mac et Windows, il est gratuit pour une utilisation non commerciale. Si vous ne souhaitez pas avoir de mention publicitaire et pouvoir profiter d’autres options, n’hésitez pas à acheter une licence dont le prix varie, selon vos besoins, entre 69 et 149 $.

L’installation du logiciel est rapide et se fait par défaut en anglais. Vous pourrez toujours modifier la langue en allant dans le menu « Options » puis « Language ».

Pour plus d’informations sur le plugin, rendez-vous sur le site de WOW Slider.

Créer un diaporama

Avant de lancer WOW Slider, nous vous conseillons de créer dans un premier temps les différentes images (slides) de votre diaporama en respectant les règles suivantes :

  • pour un diaporama professionnel, ayez des images de taille identique (en pixels)
  • préférez des fichiers JPEG en qualité 72 DPI
  • vérifiez bien que vos images soient en RVB

wow-sliderUne fois vos slides prêtes, lancez maintenant l’application WOW Slider et chargez les images par glisser-déposer. Pour chaque photo, vous pouvez renseigner les informations suivantes : le titre, une description, une url de redirection (lien vers une page quand le visiteur cliquera sur une diapositive), une cible (blank par exemple pour l’ouverture de la page dans une nouvelle fenêtre).

A noter : Le titre et la description seront des informations qui s’afficheront dans le diaporama.

Cliquez maintenant sur l’onglet « Propriétés » (représenté par un icône en forme d’outil) pour modifier les paramètres de votre diaporama :

Paramètres Général :

  • Options de lancement automatique, pause au passage de la souris, etc
  • Montrer les boutons précédent et suivant
  • Afficher les descriptions
  • etc

Paramètres Images :

  • Choix du gabarit et du style du diaporama
  • Modification de la taille, qualité de l’image et des effets de transition

Dès que vous avez terminé, cliquez sur « fermer » pour valider les modifications.

Grâce à la barre d’outils WOW Slider, vous allez pouvoir ajouter et supprimer des photos (onglet « + » et « -« ), définir l’ordre des images (icônes flèches) et faire des rotations gauche ou droite.

Une fois que vous avez toutes les photos que vous souhaitez, il est temps de sauvegarder votre diaporama en allant dans le menu « Gallerie » et « Enregistrer sous ».

Publier votre diaporama

Dans WOW Slider, depuis l’onglet « Publier », cochez l’option « Publier dans serveur FTP » puis renseignez vos paramètres FTP en allant sur « Editer ». Cliquez sur « Nouvel emplacement » et remplissez les champs suivants :

  • Nom de l’emplacement : indiquez ici votre nom de domaine sans les www
  • ftp:// : adresse de votre serveur
  • Port : 21 (par défaut)
  • Nom d’utilisateur
  • Mot de passe

test-emplacementPour vérifier la bonne connexion au serveur, cliquez ensuite sur « Test de l’emplacement du FTP ». Fermez une fois la connexion établie.

Dans la fenêtre de dialogue, sélectionnez dans le menu déroulant le serveur que vous venez de paramétrer. Indiquez ensuite le nom du dossier ftp dans lequel est publié votre site. Faites en sorte de publier le diaporama au même niveau que les autres fichiers WebAcappella. Attention, si vous ne renseignez pas ce champ « dossier ftp », WOW Slider publiera automatiquement le diaporama dans le dossier racine de votre serveur et il est possible alors que le diaporama ne s’affiche pas sur le site.

Cliquez maintenant sur « Publier ». La durée du téléchargement peut varier en fonction du nombre d’images et du poids des fichiers. A la fin de celui-ci vous aurez confirmation du succès du transfert.

Installation dans WebAcappella

Ouvrez dans un premier temps votre client FTP et connectez-vous à votre serveur pour vérifier que les dossiers et fichiers suivants ont bien été ajoutés par WOW Slider :

  • data1
  • engine1
  • index.html

Si les fichiers ne sont pas présents, pensez à « actualiser » votre serveur (dans Filezilla, grâce à un clic-droit dans votre espace « site distant »).

Téléchargez sur votre ordinateur le fichier « index.html » puis ouvrez le dans un éditeur de code (Dreamweaver, par exemple) ou dans votre navigateur (Firefox, Chrome) en affichant le code source. Vous allez maintenant devoir copier et coller des lignes de code dans le HEAD de votre site et dans le BODY de la page où vous allez mettre le diaporama (page d’accueil par exemple).

Ouvrez votre projet de site dans WebAcappella.

Dans le HEAD (accessible depuis « Site web » / « Propriétés du site » / « Onglet « Avancé »), collez le code compris entre « Start WOWSlider.com HEAD Section » et « End WOWSlider.com HEAD section ». Faites « OK » pour valider les modifications.

Accédez maintenant à la page où vous souhaitez installer le diaporama et insérez d’abord un élément « Code HTML ». Dans l’inspecteur de propriétés, réglez les dimensions du code HTML aux mêmes dimensions que les photos de votre diaporama puis collez le code du fichier index.html compris entre les lignes « Start WOWSlider.com BODY section » et « End WOWSlider.com BODY section ».

Pour pouvoir tester le diaporama il vous faudra publier votre site.

Et voilà un plugin qui va vous séduire pour les nombreux effets de transition qu’il propose !

5 Comments

  1. Lesaintdrome

    Wow slider est intéressant, mais il serait également intéressant d’améliorer l’album photo de W.A, par exemple le lien de redirection attaché à une image : pouvoir personnaliser le texte du lien, choisir de l’afficher ou pas, choisir la couleur et la transparence du background de ce lien, etc . . . . idée que j’ai déjà suggéré à W.A mais pour laquelle je n’ai pas eu de réponse.

    • Team WebAcappella

      Bonjour et merci pour votre commentaire !
      L’équipe développement a prévu d’intégrer dans une des prochaines versions la possibilité d’avoir un lien sur les images.
      Pour nous faire part de vos suggestions vous pouvez rentrer en contact direct avec nos équipes via le « support technique client » ou le formulaire de contact sur notre site.
      Des améliorations ont été apportées à notre support client concernant le délai de réponse et la qualité des informations fournies. 😉

  2. Yves Brunet

    Bonjour, j’ai acheté WebAcappella et ensuite WebAcappella4 pour la simplicité de réalisation d’un site … et là uniquement pour pouvoir faire un diaporama c’est une usine à gaz ! NON !
    Remettez les fonction qu’il y avait dans l’ancienne version de WebAcappella et cela ira très bien, merci.
    YB

    • Team WebAcappella

      Bonjour Yves !
      Merci pour votre message. Nous tenons à vous dire que nous comprenons vos questionnements.
      L’album photo et le diaporama dans WebAcappella 4 ont été effectivement simplifiés pour une raison capitale : suivre l’avancement des technologies du web et garantir la compatibilité des albums et diaporamas WebAcappella avec les technologies mobiles (Smartphones, tablettes).
      Les diaporamas « à effets » impliquent l’utilisation de la technologie flash et celle-ci est peu à peu abandonnée par les différents éditeurs de navigateurs internet au profit du standard HTML5 (format utilisé pour les sites créés avec le logiciel).
      Même si les effets que vous mentionnez ne sont pas directement intégrés dans le logiciel il est toujours possible de faire des diaporamas d’images très simplement dans WebAcappella (à partir de l’inspecteur de propriétés dans l’Album photo).
      Enfin, la publication de ce tutoriel « expert » provient de notre volonté de nous adresser à tous nos utilisateurs. Beaucoup de demandes nous sont parvenues pour des tutoriels plus techniques et un contenu « avancé ».
      N’hésitez pas à nous faire part des sujets que vous souhaiteriez que nous traitions dans le blog. 🙂

      • Yves Brunet

        Merci pour votre réponse rapide et claire …
        Je me suis un peu emmêlé les pinceaux dans ma précipitation et mon énervement, je voulais parler de la présentation des photos et pas forcément des diaporamas …
        Les possibilité de présentation de photos est très limité dans la nouvelle version … voilà, c’est dit !
        Cdlt Yves B.

Commentaires fermés