Style du texte

Étape 2 - Modèle >

Style du texte

Previous pageReturn to chapter overviewNext page

Les commandes de cette fenêtre permettent de définir les Styles disponibles pour les textes présents sur le site.

En général, un Style peut être défini comme un ensemble de caractéristiques de formatage du texte et graphique pouvant être appliqué à un élément pour modifier son aspect. L'application d'un style permet donc d'associer plusieurs formats simultanément à travers une seule opération.

Tout d'abord, vous devez choisir l'Élément de page dont vous voulez définir le Style, en le sélectionnant dans la liste déroulante ou, autrement, en cliquant directement sur l'élément dans l'Aperçu.

Dans le détail, les Éléments de page auxquels vous pouvez appliquer un style sont:

Titre de la page : il s'agit du titre des pages du site. Il est pris dans le nom donné aux pages lors de la phase de construction du plan dans la fenêtre Création du plan ou, s'il est spécifié différemment, dans le Titre complet de la fenêtre Propriétés de la page.

Chemin de la page : il s'agit du texte situé sous le titre de la page qui permet de reconstruire le chemin logique (chemin de navigation ou "fil d'Ariane") conduisant à cette page. Le chemin logique est automatiquement recréé par le programme.

En-têtes : Les titres des différents paragraphes et sous-paragraphes de la Page peuvent être configurés comme En-têtes. Vous pouvez définir jusqu’à 6 niveaux d’En-tête : dans l’édition Pro, si vous activez l’option Définir les balises H1...H6 pour les En-têtes du Modèle disponible dans la fenêtre Statistiques, SEO et code |  SEO, en appliquant un Style d’En-tête, la balise correspondante <h1>..<h6> est automatiquement attribuée au texte.

Texte de la page : c'est le texte des paragraphes insérés au moyen de l'Objet Texte. Le style de cet élément est appliqué par défaut quand vous ouvrez l'éditeur relatif à l'Objet Texte. En modifiant le style, tous les textes auxquels il est appliqué sont automatiquement mis à jour. Avec les commandes mises à disposition par l'éditeur de texte, vous pouvez ensuite procéder à des modifications et personnalisations ultérieures, que vous pouvez éliminer facilement avec le bouton Réinitialiser le format.

Le Style défini pour ce type d'élément est appliqué à tous les textes créés et insérés automatiquement par le programme comme, par exemple, les pages de la Zone réservée, du Blog, du Moteur de recherche interne et du Plan du site.

Le type de police configuré pour cet élément est utilisé comme Police par défaut pour les textes du Site et proposé dans le menu déroulant pour le choix du Type de Police.

Lien : ce sont les liens hypertextuels créés au moyen de l'Objet Texte. Un lien peut avoir un aspect différent selon son état: actif, au passage de la souris (effet mouseover) ou cliqué. Distinguer visuellement un lien actif d'un lien déjà cliqué simplifie la navigation de l'utilisateur, en lui rappelant les sections qu'il a déjà explorées.

Champ / Bouton : ce sont des champs et des boutons des formulaires créés au moyen de l'Objet Formulaire de Contact, l'Objet Recherche ou le Panier e-commerce, les champs Connexion/Déconnexion de la Zone Réservée, etc. Le style de ces éléments est appliqué par défaut lorsque vous créez un nouvel Objet Formulaire de Contact : ensuite, vous pouvez modifier ces paramètres pour votre formulaire au moyen de les options dans la section Objet Formulaire de Contact | Style.

Bouton Retour vers le haut : ce bouton, qui s’affiche au pied de la Page, permet à l’Utilisateur de retourner directement au début de la Page, en lui évitant de la faire défiler manuellement.

Après avoir sélectionné l'Élément de page, vous pouvez modifier son style à l'aide des options du cadre Style :

Visible : si vous sélectionnez cette option, vous pouvez faire en sorte que l'élément de page soit visible ou non. Cette option, bien évidemment, n'est pas disponible pour les En-têtes, le Texte de la page et les différents états du Lien, des Champs et des Boutons des formulaires qui ne peuvent pas être invisibles. Il est important de souligner que rendre un élément de la page invisible ne signifie pas le supprimer du code de la page: vous pouvez, par exemple, rendre invisible le Titre de la page car vous préférez utiliser une image mais, dans ce cas également, le tag <title> ne sera pas supprimé du code HTML.
Élément : permet de sélectionner le niveau d’En-tête (En-tête 1- En-tête 6) ou l’état du Lien (Lien actif / Lien au passage de la souris / Lien cliqué) dans la définition du style.
Couleur d'arrière-plan  / Couleur de texte  : permettent d'indiquer la couleur de l'arrière-plan et du texte de l'élément de page sélectionné. Uniquement pour le Texte de la page, vous ne pouvez pas définir la couleur de l'arrière-plan car elle est définie en fonction du modèle choisi (voir Sélection du Template) et/ou du Style de l'Objet défini pour l'Objet Texte. De même, il n’est pas non plus possible de définir la couleur d’arrière-plan pour le Bouton Retour vers le haut car elle dépend du style choisi.
Police  : spécifie le type de Police, le Style et la taille du texte. Le menu déroulant propose : la liste des Polices sécurisées, c'est-à-dire des polices présentes sur tous les dispositifs et qui ne requièrent aucune publication, tous les Google Fonts et les Polices Web ajoutés à l’aide de la fenêtre Police web rappelée par la commande Autres types de caractère.
Alignement : permet d'indiquer l'alignement de l'élément de page, en choisissant entre Gauche, Centre et Droite. Cette option n'est pas disponible pour les différents états du Lien car l'alignement des liens hypertextuels est défini, quel que soit le Style, lors de la création de l'Objet Texte, comme pour les Champs et les Boutons.
Style de textes  : disponible pour le Lien dans ses différents états, permet de définir le style du texte comme Normal ou Souligné.
Pointeur  : disponible seulement pour le Lien actif, il est automatiquement hérité des deux autres états du Lien, il permet d'indiquer l'aspect du pointeur de la souris lors du passage sur le lien. Si vous cliquez sur , vous pouvez sélectionner le fichier .CUR, .ICO, .ANI à utiliser.
Couleur bordure  : permet d'indiquer la couleur de la bordure qui peut être ajoutée au Titre de la page, au Chemin de la page au Champ et au Bouton des formulaires et au Menu de pied de page.
Épaisseur : configure l’épaisseur de la bordure du Champ et du Bouton des formulaires, même séparément.
Coins arrondis  : permet d'indiquer le facteur d'arrondissement pour les angles en particulier pour les options de style de Champ / Bouton des formulaires, même séparément.
Marge  : configure la valeur en pixels des marges internes appliquées au texte du Champ et du Bouton des formulaires. Dans le cas des En-têtes, il spécifie en revanche la valeur des marges supérieure et inférieure.
Ombre portée : applique une ombre dans le Champ, pour définir la couleur, la position, la diffusion et la taille.
Marge horizontale  : permet d'indiquer la marge horizontale pour le Titre de la page, le Chemin de la page et le Menu de pied de page.
Style  : définit le style graphique du Bouton Haut de Page en choisissant parmi les styles disponibles. Sur le Bouton, un effet de passage de souris est automatiquement appliqué afin d'en favoriser l'utilisation de la part des Utilisateurs.