TutorielsPlugin WebAcappella Responsive Offert : Split Screen

Plugin Split Screen WebAcappella Responsive Offert !

Salut les neveux !

Une des grandes tendances du moment est de réaliser des effets split screen lors de la navigation d’une page. Cet effet est des plus sympathique alors on s’est dit que cela vous plairai de le tester.

Commençons par le début, voici ce que ça donne une fois le plugin installé sur votre site WebAcappella Responsive

Prévisualiser

Alors, ça vous plait ?

Télécharger le plugin et revenez sur ce tutoriel que je vous explique comment ça marche : Télécharger le plugin

Télécharger la documentation en anglais

Première chose importante, le split screen ne fonctionne pas sur les petits écrans type smartphone, pour la simple et bonne raison qu’il est impossible de diviser en deux un écran déjà pas très grand. Il faudra donc utiliser les propriétés de masquage pour afficher autre chose lors du passage à la taille xs. Si vous ne savez pas comment fonctionnent les propriétés de masquage, je vous invite à regarder cette vidéo.

 

Étape 1

Pour installer le plugin, décompressez l’archive .zip que vous venez de télécharger et déposez sur votre serveur à l’aide de votre client FTP le dossier plugins.
Si vous avez déjà un dossier « plugins » sur votre serveur, ne déposer que le contenu de celui-ci à l’intérieur du dossier plugins présent sur votre serveur.

 

Etape 2

Copiez le code ci dessous et collez le dans la partie Code html personnalisé des propriétés de la page ou vous souhaitez voir apparaitre le split screen.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>

<link rel="stylesheet" href="plugins/splitScreen/css/style.css">

 

Etape 3

Copiez le code ci-dessous et collez le dans un élément html sur la page ou vous souhaitez voir apparaitre le split screen. Cet élément HTML se trouve dans un composant Ligne, qui se trouve dans un composant Box. Cette Box doit être en mode Box étendue.

<div class="split-slideshow">
  <div class="slideshow">
    <div class="slider">
      <div class="item">
        <img src="plugins/splitScreen/img/image1.jpg" />
      </div>
      <div class="item">
        <img src="plugins/splitScreen/img/image2.jpg" />
      </div>
      <div class="item">
        <img src="plugins/splitScreen/img/image3.jpg" />
      </div>
      <div class="item">
        <img src="plugins/splitScreen/img/image4.jpg" />
      </div>
    </div>
  </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>

<script  src="plugins/splitScreen/js/index.js"></script>

Si vous souhaitez ajouter des slides, il vous suffit de copier/coller les lignes 13, 14 et 15, et de les coller les unes à la suite des autres.

 

Etape 4

Pour remplacer les images par les vôtres, il vous faut vous rendre dans le dossier img (plugins => splitScreen => img) sur votre serveur. Nous vous conseillons de garder le même nom de fichier pour éviter d’avoir à modifier le code.

 

Etape 5

Pour personnaliser d’avantage le split screen ouvrez le fichier style.css sur votre serveur (plugins => splitScreen => css)

Ligne 71 : modifier la couleur des petits traits de navigation

Si vous souhaitez ajouter un menu au dessus du split screen ainsi qu’un pied de page, il vous faudra jouer avec la valeur de hauteur du split screen qui se trouve ligne 14 du fichier style.css

 

Et voilà ! Votre plugin est installé. Si vous souhaitez allez encore plus loin avec cet effet plutôt cool, je vous invite à tester le plugin Split Screen WebAcappella Responsive avec texte

Split Screen WebAcappella Responsive

 

Bisous les neveux !

5 commentaires

  1. Bonsoir
    J’ai une grande bande blanche verticale coté gauche (1/4 de l’écran) puis l’image avec l’effet voulu sur le reste de l’écran (donc une image 1/2 + 1/4) !!!
    J’ai fait plusieurs fois l’installation, rien à faire.
    Pour le moment pas d’achat de plugin, trop peur d’un dysfonctionnement
    Merci et bonne soirée

    • Bonjour,
      on a oublié de préciser que la box dans laquelle se trouve le code html doit être en mode Box étendue
      Nous allons corrigé cela dans le tutoriel.

      Bonne journée

  2. Bonjour, ça ne marche pas pourtant j’ai suivi le tuto étape par étape, mais les images ne s’affiche pas lorsque je publie.

    Pourriez-vois m’aider je vous prie ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée Champs requis marqués avec *

Poster commentaire