Gestion documentaire

Quix : élément "Titre"

L'éditeur Quix

L'élément titre de Quix vous permet de définir un ou plusieurs titres à l'intérieur de votre page, comme dans un document Word.

L'élément permettant d'ajouter un titre s'appelle "Heading".

Siteweb_quix_titre1.png

Lorsque vous ajoutez un élément Quix, une pop-up s'affiche avec 3 onglets :

  • Général
  • Styles
  • Advanced

Ces onglets vous permettent de définir tout ce dont vous avez besoin pour la création de votre titre.

 

Onglet Général

Siteweb_quix_titre2.png

L'onglet général contient les paramètres de base de l'élément d'en-tête. Vous pouvez effectuer les modifications suivantes :

Title (Titre) :

Inscrivez le texte de votre titre dans ce champs.
Astuce : Si vous avez besoin de faire un retour à la ligne, ajouter " <br> " à l'endroit souhaité.  

HTML Tag (Balise HTML) :

C'est le niveau de titre dans votre page. Il y a 6 balises définies pour la taille du titre, de H1 à H6. H1 représente la taille la plus élevée et à mesure que le nombre augmente, la taille de la police diminue. Cette balise sert notamment pour le référencement. Attention, il ne faut pas avoir plusieurs titres H1 dans votre page !

Link (Lien) :

Cette partie est facultative. Vous pouvez définir un lien vers une autre page.

 

Onglet Styles

Siteweb_quix_titre3.png

L'onglet Styles vous aidera à designer votre titre. Vous trouverez 2 catégories : Options et Typographie . Les options d'édition sont décrites en détail ci-dessous.

Options :

  • Alignement : Vous pouvez définir l'alignement du titre : à gauche, au centre ou à droite. Vous pouvez définir un alignement différent sur mobile et tablette en cliquant sur le bouton responsive (l'ordinateur).
  • Couleur : Choisissez votre couleur via le sélecteur, ou entrez directement votre code couleur.

Typographie :

  • Font (Police) - L'option Police permet de changer la police du texte. Laissez la police sur "Default" pour laisser la police de votre site.
  • Weight (Graisse) : Cet onglet permet de gérer la graisse de votre texte. Plus le nombre que vous définissez est élevé, plus votre texte apparaîtra en gras.
  • Size (Taille) : Vous pouvez contrôler la taille du texte, faites simplement défiler le curseur et définissez la taille. Si vous n'inscrivez rien, la taille par défaut de votre site sera prise en compte.
  • Transform - Ce champ vous aidera à changer la capitalisation du texte. Vous avez 4 options :
    • None (aucun changement) : Voici mon texte.
    • Uppercase (majuscule) : VOICI MON TEXTE.
    • Lowercaze (minuscule): voici mon texte.
    • Capitalize (capitaliser) : Voici Mon Texte. 
  • Style : Ce champ vous permettra de définir le style de police. Vous pouvez définir normal, italique ou oblique.
  • Decoration : Vous pouvez décorer le texte en sélectionnant surligner (overline), souligner (underline) ou barré (line through).
  • Line Height (Hauteur de ligne) : L'option de hauteur de ligne vous aidera à définir la hauteur de chaque ligne. Cela va insérer un espace entre les lignes.
  • Letter Spacing (Espacement des lettres) : L'option d'espacement des lettres vous aidera à définir un espace entre chaque lettre. 
  • Text shadow (Ombre de texte) : L'effet d'ombre de texte vous aidera à ajouter une ombre sous le chiffre ou le texte pour donner un aspect 3D. Vous pouvez même brouiller l'effet pour montrer clairement votre texte.

Astuce : Pour tous ces champs, si vous ne changez rien, ce sont les paramètres par défaut de votre site qui sont pris en compte !

 

Onglet Advanced

Siteweb_quix_titre4.png

L'onglet avancé concerne les paramètres plus poussés. Vous pouvez les modifier si vous le jugez nécessaire ou simplement les laisser tels quels. Vous trouverez ici six champs : Styles d'élément, Arrière-plan, Bordure et ombre de boîte, Animation, CSS personnalisé et Identifiant.

  • Element Style (Style d'élément) : Vous trouverez ici les options de marge (Margin / Padding) et d'index z. Pour bien comprendre comment définir les marges avec le margin ou padding, lisez cet article. L'index Z est utile si vous avez 2 éléments qui se chevauchent et que vous souhaitez afficher un élément au dessus de l'autre. Plus la valeur du z-index est élevé, plus l'élément apparaîtra par dessus le reste.
  • Background (Arrière-plan) : Le champ Arrière-plan vous permettra de définir un arrière-plan dans la colonne. Vous pouvez définir une image, une couleur unie ou un effet dégradé de plusieurs couleurs.
  • Border & Box Shadow (Bordures et ombres) : Vous pouvez donner une belle bordure et une ombre de boîte à votre colonne. 
    • Border Type : il s'agit du type de bordure. Vous avez le choix entre rien (None), continue (solid), double (double), pointillés (dotted), tirets (dashed).
    • Border radius : c'est le rayon de bordure, qui permet d'arrondir les coins.
    • Box shadow : c'est l'effet d'ombre à donner à votre colonne. 
  • Animation : Le champ Animation vous permettra d'ajouter un effet de transition à l'élément. Sélectionnez l'animation d'entrée parmi les effets donnés, définissez le temps de retard et activez l'option de répétition si besoin (ceci est facultatif).
  • CSS personnalisé - Ce champ est utilisé par les développeurs pour affecter un css personnalisé.
  • Identifiant - Ce champ contient l'identifiant CSS de chaque contenu spécifique. C'est ici qu'il faudra ajouter les classes personnalisées si vous en avez.

 

Dès que vous avez effectué une modification, pensez bien à cliquer sur le bouton vert "Apply" pour enregistrer vos changements.