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

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.

 

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.

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 !

Laisser un commentaire

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

Publier des commentaires