Fenêtre Style des Lignes

Étape 4 - Pages > Commandes Barre d’Outils et Grille >

Fenêtre Style des Lignes

Previous pageReturn to chapter overviewNext page
Montrer/Cacher le texte caché

Avec les commandes de cette fenêtre, que vous pouvez rappeler à l'aide du bouton Style des Lignes présent dans la barre d'outils de la Grille de mise en page proposée dans la fenêtre Création de la page, vous pouvez définir l'aspect graphique d'une Ligne, c'est-à-dire d'une bande horizontale occupée par un groupe d'Objets placés dans une Page.

Cette fenêtre comprend les sections suivantes :

Général
Full Height
Cliquez pour etendre/reduireRéférence : Les commandes de la Section Général

Cette section propose :

une Grille qui reprend la configuration de la Page telle qu'elle a été définie dans la fenêtre Création de la page ;
une Barre d'Outils ;
la liste des options disponibles.

Il suffit de sélectionner la Ligne sur laquelle vous souhaitez travailler et d'utiliser les options disponibles pour en définir l'aspect. La Ligne sélectionnée est colorée en bleu et le chiffre qui l'identifie est écrit en gras.

A côté de chaque Ligne une petite boule s'affiche pleine ou vide selon l'aspect de la Ligne (déjà défini ou pas).

Il est possible de relier entre elles plusieurs Lignes consécutives afin qu'elles aient le même aspect graphique. Parfois, selon la disposition des Objets sur la Grille ou bien leur ordre en cas de Site Adaptatif, certaines Lignes sont automatiquement unies. Pour plus d'informations, voir Comment travailler sur l'Aspect d'une Ligne.

Sur la Barre d'Outils présent au-dessus de la Grille on retrouve ces commandes :

Couper, Copier et Coller

On peut couper ou copier un style défini pur une Ligne et le coller sur une autre. Ces commandes sont disponibles aussi dans le menu contextuel qui s'ouvre avec un clic droit  sur la Ligne.

Agrandir à la largeur de la fenêtre du Navigateur

Avec cette option le style défini pour la ligne s'etende pour toute la largeur de la fenêtre du navigateur.  

Les lignes pour lesquelles on a activé la fonction Élargir sont  facilement identifiables parce que elles sont plus large que les colonnes de la page. Avec un clic sur le bouton Agrandir à la largeur de la fenêtre du Navigateur, la largeur de la ligne se réduit à la largeur de la page.

Ancre

On peut créer une ancre associée à la Ligne sélectionnée. Avec un clic sur la flèche à côté du bouton on peut ouvrir un manu avec ces commandes : Insérez Ancre..., Modifier... et Supprimer.

L'Ancre est une référence qui permet d'identifier la position d'un Objet dans la Page: elle est utilisée pour définir des liens direct à l'Objet même ou à une Ligne.

Superposition

Indépendamment du type d’Arrière-plan choisi, il est possible d’appliquer un filtre coloré, en définissant les paramètres suivants :

Couleur  : spécifie la couleur à utiliser pour créer le filtre à appliquer sur l’arrière-plan.
Opacité : définit le degré d’opacité de la couleur du filtre à appliquer. Pour des valeurs proches de 0, l'opacité diminue et le filtre devient plus transparent, laissant voir l'arrière-plan de la Page.
Activer transition de couleur : en activant cette option, la Superposition appliquée sur l'arrière-plan est animée. L'animation prévoit la transition en loop de la couleur initiale à la Couleur finale en passant, le cas échéant, par la Couleur intermédiaire .

Effet

On peut activer un effet parallaxe pour la Ligne sélectionnée. La parallaxe est une technique visuelle qui, grâce au mouvement d'images à différentes vitesses, donne de la profondeur et de la richesse au design d'une Page Web, en créent une illusion 3D. De cette façon le déroulement de la page devient une  expérience immersive pour le Visiteur.

On peut choisir entre trois types de parallaxe différent :

Parallaxe ;
Parallaxe inversé ;
Parallaxe fixe.

Comment la parallaxe est basée sur le mouvement d'images à différentes vitesses, il ne peut pas être activé si on a un fond avec une couleur uniforme.

Une fois que vous avez sélectionné la Ligne ou le groupe de Lignes sur lesquelles vous souhaitez travailler, vous pouvez continuer en définissant, tout d'abord, le type Arrière-plan que vous souhaitez configurer en choisissant entre :

Coloré : l'arrière-plan de la Ligne est coloré en teinte unie.

Bordure nuancée : l'arrière-plan de la Ligne est rempli par un gradient dont vous pouvez définir les couleurs de départ et de fin ainsi que la direction du dégradé.

Image : l'arrière plan de la Ligne est créé en important une image.

Liste des images : un diaporama où défilent les images les unes après les autres est configuré en arrière-plan de la Ligne.

Vidéo : une vidéo est utilisée en arrière-plan de la Ligne.

Plan : une Carte est utilisée en arrière-plan de la Ligne.

Selon le type d'Arrière-plan, vous pouvez agir sur différentes options de l'encadré Paramètres. Les options qui peuvent être disponibles sont :

Couleur  : permet de définir la couleur à utiliser pour remplir l'arrière-plan de la cellule.
Couleur initiale  / Couleur finale  : permettent d'indiquer les couleurs de départ et de fin à utiliser pour composer le dégradé.
Diffusion  : permet d'établir si la première ou la dernière couleur doit être prédominante dans le dégradé, en définissant l'espace (en %) à l'intérieur duquel doit avoir lieu la transition du premier au second.
Sens  : configure l’ouverture de l’angle qui définit l’orientation du dégradé.
Fichier local sur l'ordinateur  : sélectionner le fichier graphique (.JPG, .GIF, .PNG.) relatif à l'image à utiliser comme arrière-plan. Vous pouvez rechercher l'image dans la Bibliothèque en ligne consultable à l'aide du bouton ou dans les dossiers locaux avec le bouton Sélection fichier.
Disposition  : permet d'indiquer si l'image insérée comme arrière-plan doit être répétée ou non. L'image peut être répétée horizontalement, verticalement ou dans les deux sens pour remplir tout l'espace disponible. En plus, il est possible de faire en sorte que l'image soit adaptée, autrement redimensionnée  de façon à couvrir tout l'arrière-plan.
Alignement  : spécifie comment l'image insérée comme arrière-plan doit être alignée par rapport à la zone occupée par la Ligne.
Ajouter... / Supprimer : permettent de créer la liste d’images à utiliser en arrière-plan de la Ligne, en ajoutant de nouveaux fichiers (en format .JPG, .GIF, .PNG) ou en supprimant les fichiers sélectionnés parmi ceux déjà insérés.

En cliquant sur le petit triangle présent sur le bouton Ajouter... vous pouvez afficher un sous-menu avec les éléments suivants : Ajouter une image... et Image depuis Bibliothèque en ligne....

La fenêtre rappelée par la commande Image depuis Bibliothèque en ligne... permet d’afficher une Bibliothèque en ligne contenant des millions d’Images Premium et d’Images gratuites, parmi lesquelles vous pouvez facilement choisir celles que vous souhaitez importer.

Déplacer au-dessus / Déplacer en dessous : agissent sur l’ordre d’affichage des images déjà insérées dans la liste, en déplaçant vers le haut ou vers le bas l’image sélectionnée.
Affichage  : précise de quelle manière doit se produire la transition entre les images utilisées en arrière-plan de la Ligne. Vous pouvez choisir parmi les choix suivants :
Images en séquence temporelle : les images s’affichent les unes après les autres avec un effet de fondu. La transition a lieu après un intervalle prédéfini de 3 secondes.
Images en séquence en fonction du défilement : les images s’affichent les unes après les autres, sans aucun effet de transition. L’affichage dépend de la position du curseur de défilement de la page.
Images superposées entre elles : les images s’affichent toutes simultanément, les unes sur les autres. Dans ce cas, il convient d’utiliser un effet de parallaxe sur des images sauvegardées en format .PNG avec un effet de transparence.
Type de vidéo  : définit si pour la vidéo à configurer comme arrière-plan de la Ligne, vous devez utiliser un Fichier local sur l'ordinateur, un Fichier Internet ou un Vidéo de YouTube.
Fichier local sur l'ordinateur  / Fichier Internet / URL Vidéo YouTube  : proposés selon le Type de vidéo sélectionné, ces champs permettent de sélectionner le fichier vidéo à importer ou de saisir l'adresse URL où le fichier de la vidéo est déjà disponible en ligne.
Couverture  : spécifie une image d'aperçu à associer à la Vidéo. Dans ce cas également, vous pouvez rechercher l'image dans la Bibliothèque en ligne consultable à l'aide du bouton ou dans les dossiers locaux avec le bouton Sélection fichier.

L'image d'aperçu s'affiche avant la vidéo et disparaît avec un effet de fondu uniquement après le lancement de la vidéo. La configuration d'une image d'aperçu est donc particulièrement utile pour gérer l'affichage sur des dispositifs mobiles où le lancement de la vidéo n'est jamais automatique.

Adresse  : il s’agit de l'adresse qui doit s’afficher sur la Carte configurée comme arrière-plan de la Ligne.
Style  : spécifie la modalité d’affichage de la Carte, au choix entre Routier, Satellite, Hybride et Terrain.
Facteur de Zoom  : définit le facteur d’agrandissement avec lequel afficher la carte.
Opacité: définit le degré d'opacité de la couleur/de la nuance/de l'image de la vidéo/de la carte d'arrière-plan appliqué. Pour des valeurs proches de 0, l'opacité diminue et l'arrière-plan de la Ligne devient plus transparent, laissant voir l'arrière-plan de la Page.
Cliquez pour etendre/reduireRéférence : Les commandes de la Section Full Height

Grâce aux commandes présentes dans cette section, vous pouvez faire en sorte que chaque Ligne (ou groupe de Lignes unies entre elles) prenne toujours au moins la hauteur de la fenêtre du Navigateur, indépendamment de la hauteur des contenus qu’elle présente. Ce faisant, la navigation de la Page implique l’affichage des Lignes comme s’il s’agissait de diapositives qui se succèdent ou, selon la transition configurée, qui se superposent l’une sur l’autre.

Pour faire en sorte que chaque Ligne prenne la hauteur exacte de la fenêtre du Navigateur, il faut activer l’option Activer la visualisation en pleine hauteur pour toutes les lignes de cette Page .

Cela fait, vous pouvez spécifier comment on peut passer d'une Ligne à l'autre :

Défilement automatique: en activant cette option, lorsque vous faites défiler la Page, une nouvelle Ligne commence a apparaître, la Page défile alors automatiquement afin d’afficher complètement la Ligne.

Finalement, c'est aussi possible de définir des Commandes de navigation :

Afficher les boutons de défilement vers le bas : permet d’afficher un bouton, superposé en bas sur la Ligne, qui permet de faire défiler automatiquement la page pour afficher la Ligne suivante.
Affichage des boutons  : disponible si l’option Afficher les boutons de défilement vers le bas a été activée, cette option permet de choisir si les boutons de défilement doivent être Toujours visibles ou Visibles au survol de la souris.
Style des Boutons : disponible si l’option Afficher les boutons de défilement vers le bas a été activée, cette option permet d’importer l’image à utiliser pour définir l'aspect du bouton ou de la choisir dans une bibliothèque prédéfinie.
Afficher le curseur: fait en sorte d’afficher un indicateur graphique informant l’Utilisateur du nombre et/ou de la position des Lignes de la Page. L’Utilisateur peut cliquer directement sur les indicateurs de position pour faire défiler la Page et mettre en premier plan la Ligne qui l’intéresse.
Style des Boutons  : disponible si l’option Afficher le curseur a été activée, cette option permet de choisir entre différents kits graphiques pour déterminer l’aspect de l’Indicateur.
Alignement  : disponible si l’option Afficher le curseur a été activée, cette option permet de choisir l’alignement de l’Indicateur par rapport à la Page.

 


Bonnes pratiques :

-

Comment travailler sur le Style des Lignes

-

Comment créer une bande horizontale avec une couleur ou une image de fond

-

Comment définir le lien vers une Ancre

-

Comment créer l'effet parallaxe

-

Comment utiliser la propriété Full Height pour créer un effet de déroulement de la page avec des fiches