WS_Worldsoft-Revolution-Slider
Transcription
WS_Worldsoft-Revolution-Slider
Worldsoft Revolution Slider Avec le Worldsoft Revolution Slider du Worldsoft-CMS vous pouvez créer un diaporama à la volée. Le Worldsoft Revolution Slider est polyvalent et offre, grâce à ses options étendues, la capacité d’équiper facilement votre site d’un « Slide » spécifique. Instructions Pour utiliser le Worldsoft Revolution Slide, les étapes suivantes sont nécessaires. Installation Tout d’abord, vous devez installer le Worldsoft Revolution Slider. 1. Connectez-vous comme administrateur 2. Cherchez dans la liste le module « Revolution Slider » 3. S’il n’est pas encore installé Cliquez sur « Oui » pour l’installer Aperçu du module L’aperçu du Revolution Slider est clairement structuré pour vous permettre d’obtenir un aperçu rapide. 1. Créer un nouveau Slide 2. Importation d’un Slide existant 3. Paramétrage du Slide 4. Modification d’un Slide 5. Exportation d’un Slide 6. Effacer un Slide 7. Fenêtre d’aperçu des Slides 8. Informations concernant le Slide 9. Slide déjà pré-installés Premier pas - Setup Mise en place nouveau Slide Tout d’abord, Il est primordial de créer un nouveau Slide. Pour ce faire cliquez sur le bouton « Créer un nouveau Slide » 1. "Créer un nouveau Slide". (Lorsqu’il est terminé le nouveau Slide apparait dans l’aperçu par son numéro ID suivi du nom que lui vous avez donné). Paramétrage du Slide Ci-après vous avez un aperçu des paramètres du Revolution Slide qui offre une multitude d’options. 1. Nom du Slide Dans ce champ donnez un nom à votre Slide. 2. Slider-Layout Ici vous définissez la mise en page de votre Slide. Les options suivantes sont disponibles - Fixé (Fixe le Slide dans son emplacement avec des valeurs définies) - Présentation personnalisé (Configuration variable, séparément pour chaque Slide) - Auto-Responsive (Configuration prédéfinie pour la visualisation finale par des appareils mobile) - Plein écran (Slide avec image plein écran sur le site internet) 3. Hauteur illimitée Ici vous indiquez si vous souhaitez un réglage de la hauteur du Revolution Slider. 4. Forcer Pleine largeur Cette option force l’utilisation maximum de la largeur du Revolution Slider (idéal pour une utilisation à 100% du Skins). 5. Paramétrage de la grille Ici vous pouvez définir les paramètres de la grille de contenu dans sa largeur (Grid Width) ainsi que dans sa hauteur (Grid Height). Ce paramètre détermine dans quel contexte la disposition "couche d'annotation" peut apparaître dans le Slider. Ce paramétrage fixe dans quel cadre la trame de format est autorisée à apparaître. Couche d’annotation vous permettra de placer du texte, vidéo et graphique dans le Revolution Sliders . Ceux-ci sont indépendants les uns des autres et personnalisable – De cette façon vous pouvez les personnalisez séparément. 6. Paramétres généraux Pour le paramétrage du Revolution Sliders vous avez pratiquement tout le centre de contrôle sous les yeux. Ici vous avez accès à une grande variété de configuration, comme par exemple. : - Paramétrage du délai entre le changement de diapos - Mode aléatoire (ordre d’affichage aléatoire des diapos) - Arrêter le Slide - Diverses Animations - Position du Sliders - Navigation des images dans le Slider - Slider-Ombre Et beaucoup d’autres options à laquelle nous reviendrons plus loin, sous la rubrique « Paramétrage avancé du Slider ». Pour plus de clarté, les différentes catégories de paramétres sont réparties dans les sections suivantes : - Paramètres généraux (comportement général du Slider) - Position (Position du Sliders sur le site internet) - Apparence (apparence général du Sliders) - Slider Spinner (délai de chargement entre chaque images) - Parallax (individuel "Slider-Scroll-Effet" sur le site) - Navigation (Navigation interne du Slider, via la Souris ou un Bouton) - Miniature (pour les images miniatures insérées en arrière-plan dans le Slider) - Visibilité sur Mobile (Configuration pour la visualisation sur des appareils mobiles) - Alternative au premier Slide (Configuration pour savoir, avec quelle image et avec quel intervalle, le Slide doit démarrer) 7. Création du Slider Ici vous créez votre Slider avec les réglages précédemment enregistrés. 8. Retour vers la liste des Slider Vous ramène à l’aperçu des Slider disponibles. Création du Slider Après avoir mis en place tous les paramètres désirés cliquez sur le bouton « Créer un Slide » afin de prendre en charge les réglages de votre nouveau Slider. Suite à cela s’ouvre une fenêtre d’aperçu que nous expliquons dans l’étape suivante. Apercu du Slide Sans images le « Revolution Slider » ne fonctionne pas ! Les différentes fonctions sont décrites ci-après. 1. Slider-Liste: (aperçu des Slider déjà installé) 2. Nouveau Slider: (Création d’un nouveau Slider) 3. Paramétrage du Slider: (Configuration des différents Sliders) 4. Vers les Slides: (Les Slides actuellement installés) 5. Mise à jour des Slides: (enregistrement des Slides) 6. Nouveau Slide: (Pour ajouter des images à votre Slider) 7. Nouveau Slider transparent: (pour installer des textes ou vidéo en transparence, sans l’utilisation d’une image de fond) 8. Retour à la liste des Slides: (retour à la liste des Sliders) 9. Paramètres du Slide: (Retour aux options de réglage du Slider) Installation d’un Slides Pour installer des images dans votre Slider, cliquez d’abord sur « Nouveau site ». Suite à cette opération vous basculez vers le gestionnaire des images. Insertion d’images dans le Slide Pour une intégration facile des images, le « Revolution Slider » est lié avec le « Gestionnaire des images ». Cela vous simplifie le choix et l’administration de vos images. 1. Pour choisir une image, il suffit de cliquer sur le dossier où se trouve vos images, et choisir l’image en cliquant tout simplement sur son nom. L’image sera ensuite automatiquement importée dans le « Revolution Slider ». 2. Répéter cette procédure pour l’importation de plusieurs images dans le Slider. Il est à noter que l’importation de plusieurs images en même temps n’est pas possible. Aperçu des Slide et les Options 1. Modifier les Slides Ici, vous pouvez modifier les images et ajouter différentes couches, qui agissent indépendamment les unes des autres. 2. Aperçu du Slides Vous indique quelle est l’image qui est reliée au Slider. 3. Effacer et Dupliquer Vous êtes autorisé à effacer ou à dupliquer cette image. 4. Ordre de rangement Vous pouvez déplacer votre Slide vers le haut ou le bas. Cela influe sur l’ordre d’apparition de l’image sur le site. Modifier les Slides Vous pouvez configurer les images préparées à l’avance. Ci-dessous, un aperçu pour les explications. 1. Actualisation du Slide Cette fonction enregistre toutes vos modifications 2. Retour à la liste des Slides Ici vous revenez à l’aperçu des Slider. Paramétrage du Slide Paramétres avancés pour le Slide choisi. (le menu s’ouvre en cliquant sur le « + ». Vous trouverez ici les différentes options, qui vous seront expliqués dans la rubrique « paramétres avancés ». 3. Slider Image principale / arrière plan Avec cette option vous avez la possibilité de mettre en place un arrière plan pour votre Slider. Vous pouvez également insérer une image provenant du gestionnaire d’image, choisir un arrière plan transparent ou une couleur de fond. Avec l’aperçu vous pouvez contrôler votre choix. Paramétrage de l’arrière plan (Background Setting) Dans le paramétrage de l’arrière plan vous pouvez procéder aux réglages de façon à savoir comment doit se présenter votre arrière plan.Pour ce faire différentes options sont disponibles: 4. Arrière plan-Fit: - Cover - Regroupe - %% - Normal 5. Répétition de l’arrière plan Indiquez ici si l’arrière plan doit être répété. Les options suivantes sont disponibles: - Aucune répétition - Répétition - Répétition sur l’axe « X » - Répétition sur l’axe « Y » 6. Position de l’arrière plan Par cette option vous pouvez positionner votre arrière plan choisi. Les options suivantes sont disponibles: - Au Centre vers le haut - Au Centre à droite - Au Centre inférieur - Au Centre Centre - En haut à gauche - A Gauche au centre - A Gauche en bas - A Droite en haut - A Droite au centre - A Droite en bas - Dans les axes « X » « Y » 7. Ken Burns / Pan Zoom - Paramètres Le Ken Burns est une technique connue pour parcourir lentement et avec des effets de zoom et de transitions entre des images fixes, une vidéo ou un diaporama. Cette option est disponible avec « Revolution Slider » tout simplement sous la forme de « oui » ou "non » (allumer et éteindre). 8. Fenêtre d’aperçu du Slide Vous avez un contrôle visuel de vos modifications (en temps réel). En outre vous pouvez ajouter différentes couches en les positionnant par Drag & Drop. 9. Insérer un niveau Insérer plusieurs niveaux à votre Slide. Cette fonction vous permet d’insérer, un texte ou un lien, qui apparait pardessus votre Slide. Ces niveaux peuvent être contrôlés individuellement dans leur comportement et permet de réaliser ainsi un «effet WOW" sur le site internet. Pour ce point lire "Ajouter un niveau (avancé)" 10. Insertion dans un niveau d’une image Insérer des images dans un niveau dans votre Slide. Cette fonction pour permet d’insérer une image (par exemple un Logo) par-dessus le Slide. Ces niveaux peuvent être contrôlés individuellement. Pour ce point lire "Images – ajouter un niveau (avancé) 11. Insertion dans un niveau d’une Video Insérer une vidéo dans un niveau de votre Slide. Cette fonction pour permet d’insérer une vidéo (par exemple YouTube – Dailymotion, Viméo) par-dessus le Slide Pour ce point lire "Video – ajouter un niveau (avancé)" 12. Copier un niveau Vous avez la possibilité de copier un niveau déjà existant et de l’intégrer dans un votre Slide. Cela vous évite de refaire un nouveau niveau. Ensuite, vous pouvez adapter et utiliser des niveaux copiés. 13. Effacer un niveau Effacement d’un niveau existant qui devra être marqué par un clic droit de la souris. 14. Effacer tous les niveaux Effacement de TOUS les niveaux que vous avez mis en place. 15. Niveau : Paramétres généraux Par un clic sur le symbole « + » vous ouvrez la partie contenant les tous les paramètres des niveaux. Vous y trouverez le détail du contenu et avez la possibilité de modifier la source des images, modifier la valeur et définir la position, configurer manuellement les axes « X » et « Y », donner une valeur de redimensionnement de l’image, mettre en place une rotation d’image par rapport aux axes « X » «Y » et attribuer un niveau « parallax ».. Pour ce point lire "Paramétrage du niveau (avancé)" 16. Niveau : Animation Par un clic sur le symbole « + » vous ouvrez la partie animation du niveau. Vous avez la possibilité d’insérer une animation dans votre Slide. Avec l’aperçu intégré vous pouvez visualiser votre animation afin de contrôler si cela correspond à votre désir. Ci-après les options: - Début de l’animation - Fin de l’animation - Animation en boucle - Liens et paramètres avancés Possibilité d’animer le texte ou bien un logo dans votre Slide. Pour ce point lire "Niveau Animation (avancé)" 17. Niveau : Liens et Paramètres avancés Vous pouvez affecter plusieurs paramètres qui vous permettent de relier les niveaux de contenu de l’image. Ci-après les options à votre disposition :: - Liens (option) - Angle net - Responsive – Paramètres avancés - Titre Pour ce point lire "Niveau - Liens (avancé)" 18. Actualiser le Slide Enregistrement de vos modifications 19. Retour à la liste de des Slides Retour à l’aperçu de tous les Slides. 20. Niveau – Calendrier et Tri Cette option contrôle le timing et le tri de vos niveaux. Ici vous pouvez définir une variable lorsque chaque niveau apparaît ou disparaît et lorsque le niveau suivant doit apparaître. Vous avez diverses possibilités de paramètrage :. L’index « Z » permet de : - Niveau visible oui / non - Verrouiller le niveau - Timing marche /arrrêt - Heure de départ - Heure de fin Pour ce point lire "Niveau-Timing (avancé)" Actualiser le Slide Après avoir configuré et édité avec succès votre Slide, cliquez sur le bouton « Actualiser Slide » Répétez ce processus pour chaque Slide que vous travaillez de sorte que toutes les modifications faites soient respectivement attribuées au Slide sélectionné. Ce bouton est situé dans les paramètres du diaporama (en haut et en bas). A l’issue cliquez sur le bouton « Retour à la liste des Slides ». Après avoir cliqué sur ce bouton, vous revenez dans la rubrique « Paramètres du Slide ». Enregistrez votre Slide, avec toutes les modifications que vous avez effectuées, en cliquant sur le bouton « Mise à jour des Slides », Puis dans la nouvelle fenêtre sur le bouton « Mise à jour des Slides ». Insertion du Slider dans le site internet. Après avoir terminé tous les réglages souhaités sur le « Revolution Slider », vous pouvez utiliser le Slide, en l’installant dans les pages de contenu, par exemple l’installer sur la page d'accueil. Fermez le module « Revolution Slider » Allez dans l’administration du CMS, dans l’onglet « Paramètres Bloc ». Choisissez la page de contenu dans laquelle vous voulez insérer le Slide. Dans notre exemple nous avons choisit la page de contenu « Présentation ».. Créez un nouveau bloc Insertion du Slide dans un bloc Dans ce nouveau bloc, cliquez sur le bouton « P » pour insérer le Slide à l’intérieur de ce bloc. Puis la fenêtre de Propriété s’ouvre. Dans le menu déroulant du block rechercher et cliquer sur la ligne « Gestion des gagdets ». Dans notre exemple le slide est désigné par « slide01 ». A l’issue cliquez sur le bouton « OK » pour valider votre travail dans ce bloc. Enregistrement de l’installation du bloc Vous pouvez maintenant voir que le Slider a été mis en place dans la page du bloc. Enregistrez vos modifications en cliquant sur le symbole de la disquette en haut à gauche. Il vous sera demandé de donner un nom à ce nouveau bloc (Par ex. Slider-01). Nota : Donnez un nom significatif pour le retrouver facilement. Position du bloc Positionnez maintenant votre nouveau bloc à l’emplacement que vous désirez que le Slide apparaisse. Enregistez vos modifications. Fin de l’installation Vous avez donc installé le nouveau « Worldsoft Revolution Slider » dans votre site. Votre site a maintenant un Slider moderne qui est déjà appliqué sur de nombreux sites Web haut de gamme. Nous vous souhaitons beaucoup de succès dans l’utilisation de notre nouveau Worldsoft Revolution Slider. Paramètres avancés Slider – Paramétrage (avancé) Dans les paramètrages du Slider vous pouvez effectuer divers changements dans le comportement de vos Sliders. Voici les catégories sont subdivisés comme suit:: - Paramétrage généraux - Position - Apparence - Spinner - Parallax - Navigation - Aperçu miniature - Visibilité sur mobilet - Alternative Premier Slide Dans cette section nous dévellopons précisément chaque point par l’intermédiaire d’un aperçu Paramétres Généraux Dans les paramétres généraux vous pouvez configurer le comportement du Sliders. Les options suivantes sont disponibles : - Délai Réglage du temps de changement d’images dans le Slider (valeur en miliseconde) Le réglage par défaut est de 9000 ms. - Mode Aléatoire Activation ou désactivation du mode aléatoire dans le passage des images. - Chargement différé Ralentit le temps de chargement du Slider et prévoit un effet spécial dans le changement d'écran. - Arrêter le Slide Arrête le Slide après le premier passage d’images – il ne recommence pas une nouvelle boucle d’images.. - Arrêt du Slide après la boucle Arrête le défilement après un nombre définis de boucles. - Arrêt sur le Slide Arrête la fonction de diaporama à partir d'une diapositive spécifique. On peut y intégrer le nom du Slide. Position Dans la «position» de sélection, vous définissez la position du déplacement du Sliders dans une page de contenu. Ci-dessous les différentes options disponibles: - Position dans la page Vous indiquez la position absolue du slide dans la page de contenu. Par l’intermédiaire du menu déroulant vous avez encore les options suivantes : - A gauche - Centré - A droite - Marge externe en haut Ici vous donnez la marge externe vers le haut du Slider ; la valeur est en pixel Pixel (px). - Marge externe en bas Ici vous donnez la marge externe vers le bas du Slider ; la valeur est en pixel Pixel (px). . - Marge externe gauche Ici vous donnez la marge externe gauche du Slider, la valeur est en pixel Pixel (px). - Marge externe droite Ici vous donnez la marge externe droite du Slider, la valeur est en pixel Pixel (px). Apparence Vous pouvez modifier l’apparence du Slider. Vous avez plusieurs options différentes afin de paramétrer individuellement votre Slider. Les options suivantes sont à votre disposition: - Shadow Type Ici vous pouvez ajouter une ombre à votre Slider. Le choix se porte sur trois possibilités. Vous pouvez faire la sélection avec le menu déroulant à droite. - Afficher la minuterie Ici vous pouvez choisir si, oui ou non, une cellule indiquant la durée doit s’afficher dans le Slider. Cette cellule temps donne un contrôle optique de la durée avant le changement d’image. Vous pouvez placer cette cellule en haut, ou le masquer dans le Slide. - Couleur d’arrière plan Ici vous pouvez paramétrer la couleur du fond de votre Slide - Remplissage (cadre) Indiquez ici l’épaisseur du cadre (intervalle) que vous désirez. - Image d’arrière plan Choix, par oui ou non, d’avoir une image en arrière-plan - Image d’arrière plan - URL Lien de téléchargement d’une image utilisée comme image d’arrière plan, ou suppression de celle-ci, (Par ex. utile dans le Parallax). Slider Spinner Placez une animation au sein de votre Slider. Elle est affichée comme une séquence intermédiaire. Vous avez 5 différentes animations à disposition que vous pouvez choisir par l’intermédiaire du menu déroulant. Vous avez le choix de la couleur de l’animation pour le choix 2, 3 et 4. Parallax "Parallax Scrolling" est l’une des grandes tendances du WebDesign cette année. Avec l’aide du Scrolling-Effet on peut donner un effet impressionnant au défilement. Les différentes options suivantes sont disponibles: - Parallax activé Activation ou desactivation par un clic sur le bouton « Oui » ou « Non » - Desactivé pour les appareils mobiles Choix de l’Activation ou pas sur des appeils mobiles. - Type Choix sur l’une des 3 options afin de savoir comment le Parallax doit apparaitre dans le Slider. Le choix des options est le suivant : - Scrollposition (Parallax réagit au défilement dans le site internet) - Positionde la souris (Parallax reagit aux mouvements de la souris) - Souris & Scroll (Parallax reagit au défilement et aux mouvements de la souris) - Figer le fond Giger l’arrière plan de votre Slider. - Niveau de profondeur 1-10 Définissez la vitesse des différents niveaux. Cela à une influence sur la vitesse de l’élement dans le Parallax Vous avez le choix de 10 niveaux. Navigation Créer une navigation pour naviger dans le contenu du Slider. Pour se faire les options suivantes sont disponible : - Touche activé Activation / desactivation de la touche de fonction pour les appareils mobiles - Arrêt par survol (Hover) Arrête la fonction du Slide par survol de la souris. - Navigations type Choisir le type de navigation dans les deux proposés. - Navigations - Flèches Choisir si la flèche de navigation doit être placé à gauche ou à droite dans le Slider. - Style de navigation Choix du style afin de savoir comment doit être installé votre navigation dans le Slider. A votre disposition 4 différentes options. - Toujours afficher la navigation Choisir si oui ou non l’affichage doit se faire. - Cacher la Navigation après Cachez la navigation après un certain intervalle de temps (valeur en Milliseconde). Bullets - Miniatures - Position - Navigation – Alignement horizontal Ici vous configurez l’alignement horizontale de la barre de navigation. Vous avez le choix entre 3 options. - Navigation alignement vertical Ici l’alignement de la barre de navigation se fait verticalement. Vous avez le choix entre trois options. - Distance de la Navigation horizontale Ici vous configurer la barre de navigation dans le navigateur avec une distance intérieure à l’horizontal. La valeur de cet espace et en pixel. - Distance de la Navigation verticale Ici vous configurer la barre de navigation dans le navigateur avec une distance intérieure à la verticale. La valeur de cet espace et en pixel. Left Arrow Position - Remplissage Horizontal (espace intérieur) Ici, vous définissez un remplissage horizontal à gauche des fléches de navigation. Vous avez le choix entre 3 options. - Remplissage vertical (espace intérieur) Ici, vous définissez un remplissage vertical à gauche des fléches de navigation. Vous avez le choix entre 3 options. - Déclage Horizontal Ici, vous définissez un décalage horizonal à gauche des fléches de navigation. La valeur est donnée en Pixel - Décalage vertical Ici, vous définissez un décalage vertical à gauche des fléches de navigation. La valeur est donnée en Pixel Right Arrow Position - Remplissage Horizontal (espace intérieur) Ici, vous définissez un remplissage horizontal à droite des fléches de navigation. Vous avez le choix entre 3 options. - Remplissage vertical (espace intérieur) Ici, vous définissez un remplissage vertical à droite des fléches de navigation. Vous avez le choix entre 3 options. - Déclage Horizontal Ici, vous définissez un décalage horizonal à droite des fléches de navigation. La valeur est donnée en Pixel. - Décalage vertical Ici, vous définissez un décalage vertical à droite des fléches de navigation. La valeur est donnée en Pixel. Miniatures (image sous forme de vignette) Ici vous pouvez déterminer dans quelles proportions les vignettes doivent être présentées dans le Sliders. Ici vous avez les options suivantes : - Miniature - Largeur Spécifiez la largeur des vignettes affichées en pixels dans le Slide. - Miniature - Hauteur Spécifiez la hauteur des vignettes affichées en pixels dans le Slide. - Miniature - Quantité Ici, vous définissez combien de miniatures doivent être affichées, l’une à côté de l’autre) dans le Slide. Visibilité sur les appareils mobile Définition des options pour la visibilité du Slider sur des appareils mobiles. Vous avez les options suivantes: - Cacher sous la largeur du Slide Cache le Slider sur un appareil mobile ayant une largeur d’écran inférieur que vous définissez en pixel. - Défini selon la largeur des niveaux Cache tous les niveaux sur un appareil mobile ayant une largeur d’écran inférieur que vous définissez en pixel. - Cacher tous les niveaux sous la largeur Cache tous les niveaux sur les appareils mobiles à partir d'une largeur édité en pixels. - Masquer les flèches sur les mobiles Cache les flèches de navigation dans le Slider sur un mobile par OUI ou NON. - Bullets ne doivent pas s’afficher sur les mobiles Cache Bulletnavigation sur un appareil mobile par OUI ou NON. - Cacher les miniatures pour les mobiles Desactive les miniatures dans le Slider pour les appareils mobiles par OUI ou NON. - Cacher les miniatures sous une largeur de X Desactive les miniatures sur les appareils mobiles à partir d’une largeur de X (X étant la valeur en pixel). Alternative premier Slide Ici vous avez la possibilité de définir quelle image (Slide) doit apparaitre en premier et dans quelle SliderAnimation cette image doit démarrer. Les options suivantes sont disponiblesl: - Démarrer avec le Slide Donnez la position du Slide avec lequel vous voulez que cela démarre. Si vous avez 4 Slides et vous désirez que cela démarre avec le deuxième, alors vous mettez le chiffre 2 dans la case. - Première transition active Lorsqu'il est réglé sur «Oui» le premier effet de transition régulièrement attribué sera écrasé. Alternativement, vous pouvez définir une nouvelle transition. - Premier type de transition Spécifier un ordre de passage pour la première diapositive. Il y a plus de 80 différentes transitions disponibles. Pour cette option soit active il faut activer la première transition (ci-dessus) - Durée de la première transition Définir la durée de la première transition (durée en milliseconde). - Nombre de transition - Slot Réglez la valeur d'un certain nombre de diapositives ou de couches qui seront affichées dans la première diapositive. Le nombre maximum est de 7 Slots.. Slides-Paramétres (avancé) Par le paramétrage avancé du Slides vous pouvez procéder à diverses modifications et donner des valeurs qui influent sur le comportement de vos Slides. 1. Slide - Titre: Le nom du Slide sera indiqué dans la liste des Slides 2. Slider - Statut: Statut du Slides (Publié ou non publié). Les Slides non publiés sont exclus des Slides 3. Slide – Transitions : Description des transitions émisent.. Les transitions sont ici, listées et triées par catégories: - Transitions aléatoires (3 différentes transitions dans cette catégorie) - Transitions coulissante (9 différentes transitions dans cette catégorie) - Transitions Blender (13 différentes transitions dans cette catégorie) - Transitions Parallax (4 différentes transitions dans cette catégorie) - Transitions Zoom (8 différentes transitions dans cette catégorie) - Transitions rideaux (3 différentes transitions dans cette catégorie) - Transition Premium (10 différentes transitions dans cette catégorie) 4. Slot numéro: Nombre de Slots ou boîtes dans lequel le Slide est réparti. Si vous utilisez BoxFade, n’utilisez pas plus de 7 slots. 5. Rotation: Ici, les rotations des Slides sont modifiées. Si vous, par exemple, voulez insérer un logo tournant dans le Slide, vous appliquez les paramètres ici. En règle générale, la rotation (-720 -> 720,999 = aléatoire) n’est utilisé que pour les transitions simples. 6. Durée de la transition: Ici est déterminée la durée de la transition.Par défaut la régle suivante s’applique : Durée de la transition (par défaut: 300 min. 100, max:., 2000 7. Délai: Une nouvelle valeur du délai de passage (changement d’image) pour le Slide. Si aucun délai n’a été défini, la valeur par défaut est de 9000 ms (milliseconde). 8. Lien activé: Ici vous pouvez définir sir le lien sur le Slide doit être activé ou desactivé. 9. Type de lien: Définition du type de lien. Vous pouvez faire lien normal sur « contenu » ou « externe », ou faire le lien vers autre « Slide » qui sera appelé par un clic de souris. 10. Lien Slide: Lien vers l’image compléte du Slide 11. Ouvrir le lien dans : La cible du lien. Définissez ici si le lien actif doit s’ouvrir dans « une autre fenêtre » ou dans « la même fenêtre ». 12. Lien vers Slide: Ici vous décidez vers quel Slide le lien actif doit être dirigé. Choix possible: - Non sélectionné - Prochain Slide - Slide précédent - Slide bien précis 13. Lien position: Défini la position du lien dans le Slide. La position du lien est basée sur le niveau. (avant ou retour) 14. Miniatures: Slide-Miniatures. S’il n’est pas configuré, il est automatiquement sélectionné à partir d’un Slide. Vous pouvez ici choisir une image différente. Insérer un niveau – Paramètres généraux (avancé) Vous pouvez insérer un ou plusieurs niveaux dans votre Slide (par Ex. Insertion de texte). Le texte peut être mis en place par l’intermédiaire de l’éditeur WYSIWYG. Ici comme d’habitude toutes les options pour travailler le texte, insertion d’image, etc…, sont disponibles. 1. Niveau - Contenu L'éditeur WYSIWYG est utilisé pour l'édition du texte. Ici, la police, la taille, le style peut être déterminé et beaucoup plus encore. 2. Align, Position & Styling Cette section nécessite la mise en place d’un niveau dans le Slide. a) Cette fenêtre de placement est utilisée pour aligner le texte attribué de façon absolue. Avec un simple clic dans la boîte, son texte sera positionné en conséquence. Il ne nécessite pas d'autres ajustements dans l'axe XY. L’alignement se fait comme suit: - Haut à gauche - Haut milieu - Haut à droite - Centre gauche - Centre centre - Centre droit - Bas à gauche - Bas au milieu - Bas à droite b) L'axe XY vous permet d'aligner votre niveau correspondant aux valeurs attribuées. La valeur par défaut est ici X = 100 et Y = 100. c) Wrap Cette action à plusieurs options : - Normal - Avant - Aucun Pré-WRAP - PRE-WRAP - Ligne Avant d) La largeur maximale correspond à la largeur effectivement donné dans le niveau dans le Slide. Ici, la valeur par défaut est « auto ». Vous pouvez modifier les valeurs en « % » ou en « px. Exemple = (50px, 50%, auto) e) La hauteur maximale correspond à la largeur effectivement donné dans le niveau dans le Slide. Ici, la valeur par défaut est « auto ». Vous pouvez modifier les valeurs en « % » ou en « px. Exemple = (50px, 50%, auto) f) Ici, vous pouvez supprimer toutes les valeurs avec le bouton. Les valeurs seront les valeurs des paramètres par défaut. Attention - toutes les valeurs attribuées dans cette section sont remis à zéro 3. Rotation Finale Spécifier ici dans quelle zone du Slides, le texte va faire une rotation. Vous avez le choix entre 3 différentes options: a) 2D-Rotation = (-360 - 360) b) Rotation - Origine X = "%" (-100 - 200) c) Rotation - Origine Y = "%" (-100 - 200) 4. Parallax - Paramétres Dans les paramétres Parallax, vous déterninez dans quel niveau « Parallax » doit être activé. Parallax est un effet activé par le mouvement de la souris sous différents niveau. Ici, vous pouvez définir un temps de réaction suite à un effet de Scrolling ou par le mouvement de la souris. Cela nécessite que « Parallax » soit activé dans « Slider paramètrages » zone « Parallax ». Là, vous avez la possibilité de définir différents niveaux de profondeur et présélectionner l'effet désiré. Ajouter un niveau Images (avancé) Pour insérer un niveau d’image, il faut vous rendre dans le « Gestionnaire d’images ». Vous pouvez sélectionner votre photo dans le dossier puis la télécharger. Vous pouvez également créer votre propre dossier pour placer les images pour le Slide spécifique. Cliquez sur le nom de la photo qui est à la droite de l'image de prévisualisation pour ajouter votre photo à votre niveau. Puis l’image sera insérée comme un nouveau calque dans votre Slide, Comme vous pouvez le voir dans la fenêtre de visualisation. Là, vous avez la possibilité de modifier ou de déplacer l’image en utilisant la fonction « Drag & Drop ». Vous avez également la possibilité de modifier la position et la taille de l’image. Diverses options sont disponibles: Insérer un niveau – Paramètres généraux (avancé) Vous pouvez insérer un ou plusieurs niveaux dans votre Slide (par Ex. Insertion de texte). Le texte peut être mis en place par l’intermédiaire de l’éditeur WYSIWYG. Ici comme d’habitude toutes les options pour travailler le texte, insertion d’image, etc…, sont disponibles. 1. Niveau - Contenu L'éditeur WYSIWYG est utilisé pour l'édition du texte. Ici, la police, la taille, le style peut être déterminé et beaucoup plus encore. 2. Align, Position & Styling a) Cette fenêtre de placement est utilisée pour aligner le texte attribué de façon absolue. Avec un simple clic dans la boîte, son texte sera positionné en conséquence. Il ne nécessite pas d'autres ajustements dans l'axe XY. L’alignement se fait comme suit: - Haut à gauche - Haut milieu - Haut à droite - Centre gauche - Centre centre - Centre droit - Bas à gauche - Bas au milieu - Bas à droite b) L'axe XY vous permet d'aligner votre niveau correspondant aux valeurs attribuées. La valeur par défaut est ici X = 100 et Y = 100. c) Wrap Cette action à plusieurs options : - Normal - Avant - Aucun Pré-WRAP - PRE-WRAP - Ligne Avant d) La largeur maximale correspond à la largeur effectivement donné dans le niveau dans le Slide. Ici, la valeur par défaut est « auto ». Vous pouvez modifier les valeurs en « % » ou en « px. Exemple = (50px, 50%, auto) e) La hauteur maximale correspond à la largeur effectivement donné dans le niveau dans le Slide. Ici, la valeur par défaut est « auto ». Vous pouvez modifier les valeurs en « % » ou en « px. Exemple = (50px, 50%, auto) f) Ici, vous pouvez supprimer toutes les valeurs avec le bouton. Les valeurs seront les valeurs des paramètres par défaut. Attention - toutes les valeurs attribuées dans cette section sont remis à zéro 3. Rotation Finale Spécifier ici dans quelle zone du Slides, le texte va faire une rotation. Vous avez le choix entre 3 différentes options: a) 2D-Rotation = (-360 - 360) b) Rotation - Origine X = "%" (-100 - 200) c) Rotation - Origine Y = "%" (-100 - 200) 4. Parallax - Paramétres Dans les paramétres Parallax, vous déterninez dans quel niveau « Parallax » doit être activé. Parallax est un effet activé par le mouvement de la souris sous différents niveau. Ici, vous pouvez définir un temps de réaction suite à un effet de Scrolling ou par le mouvement de la souris. Cela nécessite que « Parallax » soit activé dans « Slider paramètrages » zone « Parallax ». Là, vous avez la possibilité de définir différents niveaux de profondeur et présélectionner l'effet désiré. In se rti on d’ un e vi dé o da ns un niveau Avec le RevolutionSLider, il est possible d’insérer une vidéo dans un Slide par l’intermédiaire d’un nouveau niveau . Vous pouvez le faire avec des vidéos déjà existantes à partir de portails comme "Youtube" ou "Vimeo", ou bien par "HTML5 Videos". Cela vous donne la possibilité de réutiliser des vidéos existantes à partir de votre propre canal vidéo. Vous pouvez, par exemple, déterminer la taille de la fenêtre vidéo, et d’utiliser bien d’autres paramètres. Ci-dessous sont les options seront présentées et démontrées en détail. Youtube-Videos Pour l’insertion d’une vidéo Youtube, les options suivantes sont disponibles : 1. Youtube-ID ou URL Insérez dans ce champ l’ID de Youtube ou URL correspondante et cliquez sur "search" 2. Taille de la vidéo Indiquer la taille que vous désirez donner à la vidéo dans le niveau où il se trouve, en utilisant les options ci-dessous: a) Pleine largeur (La vidéo est intégré dans toute sa largeur originale) b) Largeur (Difinissez la largeur de la vidéo en pixel) c) Hauteur (Définisseez la hauteur de la vidéo en pixel) 3. Paramétres - Vidéo Ici, vous pouvez définir le comportement global des vidéos intégrées. Vous disposez des options suivantes: a) Loop Video (joue la vidéo en boucle) b) Autoplay (Démarre automatiquement la vidéo) c) Slide suivant à la fin (Déclenche la diapositive suivante à la fin de la vidéo) d) Retour rapide (Redémarre la vidéo à son début) e) Cacher les commandes (Cache la zone de contrôle de la vidéo dans la vidéo elle-même 4. Aperçu - image Ici vous pouvez définir une image d'aperçu pour la vidéo intégrée, qui est ensuite affichée dans votre diapositive. Vous disposez des options suivantes: a) Set (Une vue peut-être sélectionné à partir du Gestionnaire d’images et insérée) b) Remove (Suppression de la vignette). 5. Arguments Vous montre quels paramètres supplémentaires peuvent être insérés dans le code source de la vidéo. 6. Add This Video Ce bouton insère la vidéo avec les réglages que vous avez faits dans le niveau du Slide. Vimeo-Videos Pour intégrer des vidéos Vimeo, vous disposez des options suivantes: 1. Vimeo-ID ou URL Insérez dans ce champ l’ID de Viméo ou l’URL correspondante et cliquez sur "search " 1. 2. Taille de la vidéo Indiquer la taille que vous désirez donner à la vidéo dans le niveau où il se trouve, en utilisant les options ci-dessous: a) Pleine largeur (La vidéo est intégré dans toute sa largeur originale) b) Largeur (Difinissez la largeur de la vidéo en pixel) c) Hauteur (Définisseez la hauteur de la vidéo en pixel) 2. 3. 3. Paramétres - Vidéo Ici, vous pouvez définir le comportement global des vidéos intégrées. Vous disposez des options suivantes: a) Loop Video (joue la vidéo en boucle) b) Autoplay (Démarre automatiquement la vidéo) c) Slide suivant à la fin (Déclenche la diapositive suivante à la fin de la vidéo) d) Retour rapide (Redémarre la vidéo à son début) e) Cacher les commandes (Cache la zone de contrôle de la vidéo dans la vidéo elle-même 4. Aperçu - image Ici vous pouvez définir une image d'aperçu pour la vidéo intégrée, qui est ensuite affichée dans votre diapositive. Vous disposez des options suivantes: a) Set (Une vue peut-être sélectionné à partir du Gestionnaire d’images et inséré) b) Remove (Suppression de la vignette) 5. Arguments Vous montre quels paramètres supplémentaires peuvent être insérés dans le code source de la vidéo. 6. Add This Video Ce bouton insère la vidéo avec les réglages que vous avez faits dans le niveau du Slide. HTML5-Videos Pour intégrer des vidéos Vimeo, vous disposez des options suivantes: L’image ci-contre explique clairement les opérations qui sont pratiquement similaires à l’insertion de vidéo Youtube ou Viméo. Insérer un niveau – Paramètres généraux (avancé) Vous pouvez insérer un ou plusieurs niveaux dans votre Slide (par Ex. Insertion de texte). Le texte peut être mis en place par l’intermédiaire de l’éditeur WYSIWYG. Ici comme d’habitude toutes les options pour travailler le texte, insertion d’image, etc…, sont disponibles. 1. Niveau - Contenu L'éditeur WYSIWYG est utilisé pour l'édition du texte. Ici, la police, la taille, le style peut être déterminé et beaucoup plus encore. 2. Align, Position & Styling a) Cette fenêtre de placement est utilisée pour aligner le texte attribué de façon absolue. Avec un simple clic dans la boîte, son texte sera positionné en conséquence. Il ne nécessite pas d'autres ajustements dans l'axe XY. L’alignement se fait comme suit: - Haut à gauche - Haut milieu - Haut à droite - Centre gauche - Centre centre - Centre droit - Bas à gauche - Bas au milieu - Bas à droite b) L'axe XY vous permet d'aligner votre niveau correspondant aux valeurs attribuées. La valeur par défaut est ici X = 100 et Y = 100. c) Wrap Cette action à plusieurs options : - Normal - Avant - Aucun Pré-WRAP - PRE-WRAP - Ligne Avant d) La largeur maximale correspond à la largeur effectivement donné dans le niveau dans le Slide. Ici, la valeur par défaut est « auto ». Vous pouvez modifier les valeurs en « % » ou en « px. Exemple = (50px, 50%, auto) e) La hauteur maximale correspond à la largeur effectivement donné dans le niveau dans le Slide. Ici, la valeur par défaut est « auto ». Vous pouvez modifier les valeurs en « % » ou en « px. Exemple = (50px, 50%, auto) f) Ici, vous pouvez supprimer toutes les valeurs avec le bouton. Les valeurs seront les valeurs des paramètres par défaut. Attention - toutes les valeurs attribuées dans cette section sont remis à zéro 3. Rotation Finale Spécifier ici dans quelle zone du Slides, le texte va faire une rotation. Vous avez le choix entre 3 différentes options: a) 2D-Rotation = (-360 - 360) b) Rotation - Origine X = "%" (-100 - 200) c) Rotation - Origine Y = "%" (-100 - 200) 4. Parallax - Paramétres Dans les paramétres Parallax, vous déterninez dans quel niveau « Parallax » doit être activé. Parallax est un effet activé par le mouvement de la souris sous différents niveau. Ici, vous pouvez définir un temps de réaction suite à un effet de Scrolling ou par le mouvement de la souris. Cela nécessite que « Parallax » soit activé dans « Slider paramètrages » zone « Parallax ». Là, vous avez la possibilité de définir différents niveaux de profondeur et présélectio nner l'effet désiré. Niveau Animati on (avancé ) Dans l’animation de niveau que vous pouvez faire, diverses options sont disponibles pour l’animation de texte, image, etc…Vous trouverez les instructions ci-dessous : 1. Aperçu transition (ne pas tenir compte de la démo) Il s’agit d’une fenêtre d’aperçu où vous pouvez vérifier les réglages effectués. Voici un exemple de niveau, qui réagit au changement. Cet aperçu peut être activé ou desactivé en cliquant le bouton (ON ou OFF) en bas à droite de la fenêtre d’aperçu. (Le départ et la fin sont ignoré dans la démo)) 2. Personnaliser l’animation Vous pouvez utiliser et créer une animation personnalisée vous même. S'il vous plaît se référer au point: "Paramétrage d’animation (avancé)" 3. Début de l’animation Ici vous pouvez définir le début de l’animation en définissant votre choix avec les options ci-après : a) Fade (S’affiche lentement) b) Court vers le haut (Apparaît à une courte distance dans le coin supérieur droit de la diapositive) c) Court à partir du bas (Apparaît depuis le bas de la diapositive) d) Court depuis la droite (Apparaît à une courte distance dans la droite de la diapositive) e) Court depuis la gauche (Apparaît à une courte distance dans la gauche de la diapositive) f) Long à partir du haut (Apparaît à partir du haut de la longue distance) g) Long à partir du bas (Apparaît à partir du bas de la longue distance) h) Long à partir de la droite (Apparaît à partir depuis la droite de la longue distance) i) Long à partir de la gauche (Apparaît à partir depuis la gauche de la longue distance) j) Distorsion à partir de l’extrémité droite (Apparaît en distorsion depuis la droite, et disparaît) k) Distorsion long à partir de la gauche (Apparaît en distorsion longue depuis la gauche, et disparaît) l) Distorsion courte à partir de la droite (Apparaît en distorsion courte depuis la droite, et disparaît) m) Distorsion courte à partir de la gauche (Apparaît en distorsion courte depuis la gauche, et disparaît) n) Rotation aléatoire 4. Démarrer l’atténuation Ici vous pouvez pointer sur "3" pour en ajouter un autre sur un total de 80 effets pour personnaliser encore davantage l'animation de sortie. 5. Début de durée Régler la durée de votre animation en millisecondesd. Par défaut : 300ms. 6. Texte divisé par Partager ici votre zone de texte en 3 options différentes. Les options suivantes sont disponibles: a) Pas de division (le texte ne sera pas partagé) b) Basé sur les caractères (le texte sera partagé en fonction des carcatères) c) Basé sur le texte (Le texte sera partagé en fonction des mots) d) Basé sur les lignes de texte (Le texte sera partagé en fonction des lignes de textes) 7. Split - Délai Ici vous définissez l’animation finale. Il est également nécessaire de déterminer la valeur appropriée en millisecondes. Réglage par défaut 10 ms (recommandé entre 1 et 200 ms). 8. Fin d’animation (option) Ici vous définissez la fin de l’animation. Les options suivantes sont disponibles: a) b) c) d) e) f) g) h) i) Sélection automatique (Sélection automatique de la sélection) Fade - Out (Disparait lentement) Net vers le haut (Disparaît rapidement vers le haut) Net vers le bas (Disparaît rapidement vers le bas) Court vers la gauche (Disparaît rapidement vers la gauche) Court vers la droite (Disparaît rapidement vers la droite) Long au dessus (Disparaît lentement vers le haut) Long vers le bas (Disparaît lentement vers le bas) Long vers la gauche (Disparaît lentement vers la gauche) j) Long vers la droite (Disparaît lentement vers la droite) k) Tourne dans le sens horaire (Disparaît en tournant vers la droite) l) Distorsion vers la gauche (Disparaît en tournant vers la gauche) m) Distorsion net vers la gauche (Disparaît en tournant rapidement vers la gauche) n) Distorsion courte vers la gauche (Disparaît en tournant vers la gauche) o) Arrêt rotation aléatoire 9. Fin de l’atténuation Ici vous pouvez intégrer juqu’à 8 effets différents sur un total de 80 afin de personnaliser davantage l’animation de sortie. 10. Fin de la durée Régler l’heure de fin de la durée de l’animation (en millisecondes). Réglage par défaut 300ms. 11. Texte divisé par Partager ici votre zone de texte en 3 options différentes. Les options suivantes sont disponibles: a) Pas de division (le texte ne sera pas partagé) b) Basé sur les caractères (le texte sera partagé en fonction des carcatères) c) Basé sur le texte (Le texte sera partagé en fonction des mots) d) Basé sur les lignes de texte (Le texte sera partagé en fonction des lignes de textes) 12. Fin -Split - Délai Ici vous définissez l’animation finale. Il est également nécessaire de déterminer la valeur appropriée en millisecondes. Réglage par défaut 10 ms (recommandé entre 1 et 200 ms). 13. Animation en boucle Dans cette section vous avez la possibilité d’intégrer une animation qui tourne en boucle. Ici vous pouvez paramétrer cette animation: - Animation Vous trouverez ici cinq (5) animations déjà installées Désactivé (Animation desactivéet) Pendulum (Animation pendulairet) Slide en boucle(Animation qui tourne en boucle) Pulse (Animation avec des pulsations) Vague (Animation par vague) Selon l'animation choisie, vous avez plus d'options de réglage disponibles avec lesquelles pouvez influer sur le comporte ment global de la boucle. Les options suivantes sont disponibl es : a) Répéter l’animatio n ( La valeur -1 est mise en place pour une répétition illimité) b) Vitesse de l’animatio n (Ici régler la vitesse de votre boucle; de 0.00 à 10.00) c) Slide allégé (Plus de 80 différents effets disponibles) d) Lancer degré (Attribution d’un certain nom de degré à partir duquel elle démarre) e) Degré final (Attribution d’un certain nom de degré à partir duquel elle s’arrête) f) X- Origine en % (Valeur initiale de l'animation sur l'axe des X) g) Y-Origine en % (Valeur initiale de l'animation sur l'axe des X) Niveaux – liens (paramètres avancées) Dans cette section vous pouvez insérer un lien sur votre texte, images, ou vidéo. Vous pouvez également spécifier la manière dont le lien doit être ouvert. 1. Lien (option) Lien vers le Slide. (Lien utile uniquement si plus d’un Slide sera modifié). Vous disposez des options suivantes: - Non Sélectionné - Slide suivant - Slide précédent - Scroll sous le Slide 2. Angle Net Option uniquement visible si l’arrière plan est défini Vous disposez des options suivantes (Identiques pour le coin gauche comme le coin droit): - Aucun angle - Net - Net inversé 3. Responsive – Paramètres avancés Deux options disponibles : - Responsive à tous les niveaux - Cacher sous la largeur (Conception adaptée pour les appareils mobiles - pas de défilement) 4. Titre Attribution d’un ID & d’un titre afin d'atteindre des noms uniques dans le CSS - ID : Lien ID (Défini un identifiant attribué à votre lien) - Titre : Défini un titre pour le lien attribué Attribution de classes de feuilles de style - Attributs classes : Classes de feuille de style peuvant être définis pour les liens affectés - Attributs – REL : Établit une relation de fichier logique dans ce domaine. Niveau Calendrier et Tri Dans ces paramètres, vous pouvez spécifier l'ordre et la synchronisation de vos niveaux. Vous avez le contrôle sur l'ordre des niveaux et le calendrier. Les options suivantes sont disponibles: 1. Activation des niveaux Activez ou desactivez la fonction en cliquant sur le bouton ON / OFF. 2. Index Détermine l'ordre des niveaux. Par l’utilisation de l'icône de flèche, vous pouvez commander les niveaux vers le "Haut" ou vers le "Bas". 3. Niveaux de visibilité / niveau de bloc / verrouillage du niveau - L '«œil» symbolise la visibilité de chacun des niveaux sélectionnés. Vous pouvez d’un clic de souris sur l'icône afficher ou masquer la visibilité. Les couches cachées ne sont pas représentés dans le niveau. - Le «cadenas» symbolise la libération pour éditer le niveau sélectionné. Vous pouvez verrouiller d’un clic de souris sur l'icône du niveau sélectionné, de sorte qu'aucun changement ne peut être fait. - L’ «horloge» symbolise le calendrier de chaque calque sélectionné. Ici, vous pouvez régler l'heure de début et de fin (dire combien de Millisecondes au niveau sélectionné il sera affiché dans le niveau). Par un clic de souris sur l'icône de la fin des temps sera attribué individuellement ou automatiquement. 4. Titre du Niveau Ici le titre de niveau correspondant est affiché et sert à l'orientation. Vous pouvez éditer le titre en cliquant avec le bouton de la souris sur le niveau et allez dans le module Niveau – Contenu situé à gauche. 5. Heure de départ Ici, le temps de début de chaque plan sélectionné est affiché. Vous pouvez modifier le début (quand ils doivent être affichés dans le diaporama). La valeur à attribuer est calculé en millisecondes. 6. Heure de fin Ici, la valeur limite de chaque niveau sélectionné est utilisée. La durée de l'affichage dépend de la valeur spécifiée dans ce champ. La valeur à attribuer est calculé en millisecondes.