Ajouter du texte et des images

Les éditeurs du site peuvent ajouter des images et du texte à un site à l’aide des fiches suivantes :

• Fiche Row (Ligne) : éléments constitutifs du site. Chacune des fiches doit être imbriquée dans une fiche ligne. Vous pouvez ajouter des images et des couleurs d’arrière-plan aux fiches Row (Ligne).
• Fiche Text (Texte) : ajoutez du texte à l’emplacement de votre choix sur le site en faisant glisser cette fiche sur une fiche Row (Ligne). Vous pouvez également utiliser cette fiche pour ajouter des boutons, des listes, des tables et un code personnalisé au site.
• Fiche Image : ajoutez des images autonomes à toute fiche ligne, n’importe dans votre site.

Ajouter du texte et le mettre en forme

Le texte peut être ajouté à votre site partout où se trouve une fiche ligne.

Pour ajouter et mettre en forme du texte, procédez comme suit :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Dans le volet latéral Customize (Personnaliser), sélectionnez Layout (Mise en page).
3. Faites glisser une fiche Text (Texte) sur une ligne dans la mise en page.
4. Sélectionnez le texte à mettre en forme. Les options de mise en forme concernent le style (Normal, Code, En-têtes, etc.), la mise en gras, la mise en italique et les liens.
5. Pour ajuster la taille du texte, cliquez sur le bouton de style et sélectionnez une taille d’en-tête.
6. Pour ajuster l’alignement du texte, cliquez sur les options de paragraphe et sélectionnez un alignement. Pour déplacer une ligne de texte, sélectionnez l’option de paragraphe, puis le retrait positif ou négatif.

   Conseil :

   Si vous vous trompez, utilisez le raccourci clavier Commande+Z ou Ctrl+Z pour annuler les modifications.

7. Sélectionnez Enregistrer.

Changer la couleur du texte

Pour appliquer la même couleur à la totalité du texte du site, changez la couleur du texte à l’aide des paramètres Theme (Thème) du site. Vous pouvez aussi ajuster la couleur du texte à l’aide des paramètres de ligne.

Pour changer de couleur de texte, procédez comme suit :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Pour attribuer une couleur à l’ensemble du texte de votre site ou page, ouvrez le volet latéral et développez le menu Theme (Thème). Pour plus d’informations sur les thèmes, reportez-vous à la rubrique Attribuer une identité visuelle à votre site avec les options En-tête et Thème..
3. Pour définir une couleur pour une ligne spécifique, sélectionnez le crayon de mise à jour de cette ligne.
4. Changez la couleur en saisissant un code couleur hexadécimal ou en choisissant une couleur.

   Conseil :

   Les codes hexadécimaux sont utiles pour garantir une homogénéité au niveau de l’ensemble des ressources de l’organisation. Si vous ignorez les spécificités liées à la charte graphique de votre organisation, recherchez s’il existe une documentation ou des directives en ce sens.

5. Sélectionnez Enregistrer.

Modifier les polices

Vous pouvez modifier la police des en-têtes de texte et du texte de base grâce aux polices Google. Le texte de base correspond à tout le texte sur la mise en page de votre site. Cette police est également appliquée à toutes les pages que vous avez ajoutées à votre site, aux pages des détails des éléments auxquelles vous accédez via la fonction de recherche du site et toutes les vues des événements.

Ajouter une liste à puces ou une liste numérotée

Créez une liste en procédant comme suit.

Pour changer de couleur de texte, procédez comme suit :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Ajoutez une fiche Text (Texte) à une ligne.
3. Ajoutez du texte ou sélectionnez un texte existant.
4. Sélectionnez Unordered list (Liste non triée) pour créer une liste à puces ou Ordered list (Liste triée) pour créer une liste numérotée.
5. Sélectionnez Enregistrer.

Ajouter une image autonome

Vous pouvez ajouter des images autonomes à toute fiche ligne.

Pour ajouter une image autonome, procédez comme suit :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Faites glisser une fiche Image sur une ligne dans la mise en page.
3. Sous Image, sélectionnez une source d’image. Les deux options prennent en charge les formats d’image JPG, JPEG, PNG, etc.
   • Pour indiquer une URL, sélectionnez Image URL (URL de l’image) et collez un lien d’image pris en charge dans le champ URL.
   • Pour charger un fichier, choisissez Upload image (Charger une image). Faites glisser le fichier dans la zone ou sélectionnez Browse for image (Rechercher une image) pour ajouter une image (la taille maximale du fichier est de 3 Mo).
4. Pour personnaliser une image chargée, cliquez sur le bouton Crop image (Rogner l’image) et faites glisser une poignée pour redimensionner le cadre de rognage. Pour repositionner le cadre de rognage, sélectionnez et faites glisser la ligne en pointillé. Pour ajuster le zoom, utilisez le curseur situé en dessous de l’image.
5. Dans le menu Options, saisissez un texte de remplacement correspondant à l'image, afin d’aider les utilisateurs non-voyants et d’améliorer l’accessibilité de votre site.
6. Le cas échéant, ajoutez l’hyperlien d’une image et paramétrez le lien pour qu’il s’ouvre dans le même onglet ou dans un nouvel onglet.

   Remarque :

   Les directives sur l’accessibilité (On Input 3.2.2 et Technique G201) recommandent d’éviter d’ouvrir les liens dans de nouveaux onglets ou de nouvelles fenêtres sans produire un avertissement avancé.

7. Saisissez du texte dans Image caption (Légende de l’image) et définissez l’alignement du texte.
8. Vous pouvez également cliquer sur Scale image to fill (Mettre l’image à l’échelle pour remplir) afin de définir un point focal pour l’image. L’image s’adapte ainsi à partir de ce point focal aux différentes tailles d’écran.
9. Sélectionnez Enregistrer.

Ajouter des images d’arrière-plan et une couleur

Vous pouvez ajouter des images à l’arrière des autres fiches à l’aide d’une fiche Ligne.

Conseil :

Pour afficher du texte ou du contenu au-dessus d’une image, choisissez une couleur d’arrière-plan contrastée. Si, par exemple, vous utilisez un texte de couleur claire ou que vous affichez une carte aux couleurs claires, choisissez une couleur d’arrière-plan foncée (du noir, par exemple), pour veiller à ce que le texte reste parfaitement lisible. Ajustez ensuite la transparence de la couleur de sorte que l’image demeure visible.

Pour ajouter des images et couleur d’arrière-plan, procédez comme suit :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Ajoutez une fiche Row (Ligne) à la mise en page et à la mise en forme sous Appearance (Apparence).
3. Sous Background image (Image d’arrière-plan), sélectionnez une source d’image. Les deux options prennent en charge les formats d’image JPG, JPEG, PNG, etc.
   • Pour indiquer une URL, sélectionnez Image URL (URL de l’image) et collez un lien d’image pris en charge dans le champ URL.
   • Pour charger un fichier, choisissez Upload image (Charger une image). Faites glisser le fichier dans la zone ou sélectionnez Browse for image (Rechercher une image) pour ajouter une image (la taille maximale du fichier est de 3 Mo).
4. Sélectionnez une Background color (Couleur d’arrière-plan) en saisissant un code hexadécimal ou en choisissant une couleur.

   Remarque :

   Seules les fiches lignes prennent en charge les couleurs d’arrière-plan.

5. Pour ajuster le paramètre Image transparency (Transparence de l’image), utilisez le curseur ou saisissez une valeur dans le champ de pourcentage. Cela éclaircit ou assombrit la couleur d’arrière-plan et permet de vérifier que l’image et le texte restent accessibles aux utilisateurs non-voyants.
6. Sélectionnez Enregistrer.

Choisir une disposition d’image sur une fiche ligne

Chaque fiche Row (Ligne) présente deux options de mise en page pour l’affichage de votre image.

Pour choisir la mise en page d’une image, procédez comme suit :

1. Après avoir ajouté une image à une fiche Row (Ligne), vous pouvez choisir une mise en page large ou fixe pour l’image et le contenu affichés sur la fiche.
   • Sélectionnez Box (Zone) si vous souhaitez que l’image reste fixe.
   • Sélectionnez Wide (Large) si vous souhaitez que l’image couvre la largeur du site.
2. Définissez le paramètre Image focal point (Point focal de l’image) pour que l’image s’adapte à partir de ce point focal aux différentes tailles d’écran.
3. Sélectionnez Enregistrer.

Ajouter un bouton

Un bouton avec un lien vers un autre emplacement, tel qu’une section ou une page, représente un outil de navigation utile. Les boutons peuvent également inclure des appels à l’action, invitant les utilisateurs à agir en se connectant, en approfondissant leurs connaissances ou en répondant à une enquête. Les boutons utilisent les paramètres Body link color (Couleur du lien du corps) et Body background color (Couleur d’arrière-plan du corps) pour que les boutons soient accessibles à tous les types d’utilisateur. Pour en savoir plus, consultez le blog Update to Hub button theme colors.

Pour ajouter un bouton, procédez comme suit :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Ajoutez une fiche Text (Texte) à la mise en page.
3. Cliquez sur le bouton Insert (Insérer) et sélectionnez Button (Bouton).
4. Sélectionnez </> Edit in HTML (Mettre à jour en HTML).
5. Dans la balise 'href', saisissez URL à la place de '#' et le texte du lien à la place de 'Button' (Bouton) (Conseils sur les composants Calcite).
6. Sélectionnez Apply (Appliquer) et Save (Enregistrer).

Ajouter un menu en accordéon

Ajoutez un menu réductible, une option utile pour ajouter les questions fréquentes.

Pour ajouter un menu en accordéon, procédez comme suit :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Ajoutez une fiche Text (Texte) à la mise en page.
3. Cliquez sur le bouton Insert (Insérer) et sélectionnez Accordion (Accordéon).
4. Sélectionnez </> Edit in HTML (Mettre à jour en HTML) pour ajouter du texte et le mettre en forme (Conseils sur les composants Calcite).
5. Sélectionnez Apply (Appliquer) et Save (Enregistrer).

Voir les composants Calcite pris en charge

La fiche Text (Texte) prend en charge les composants Calcite Design System ci-après. Reportez-vous au catalogue de tous les composants Calcite qui inclut des descriptions, des optimisations, des exemples, et plus encore.

'calcite-action' 'calcite-accordion' 'calcite-accordion-item' 'calcite-avatar' 'calcite-block' 'calcite-button' 'calcite-card' 'calcite-chip' 'calcite-dropdown-group'

'calcite-dropdown-item' 'calcite-fab' 'calcite-flow' 'calcite-icon' 'calcite-link' 'calcite-modal' 'calcite-panel' 'calcite-rating' 'calcite-split-button'

'calcite-stepper' 'calcite-stepper-item' 'calcite-tab' 'calcite-tab-nav' 'calcite-tab-title' 'calcite-tabs' 'calcite-tile' 'calcite-tip' 'calcite-tooltip'

Configurer le texte via HTML

Personnalisez votre texte avec du HTML à l’aide des éléments et des attributs ci-dessous.

Pour configurer le texte avec une syntaxe HTML, procédez comme suit :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Ajoutez une fiche Text (Texte) à la mise en page.
3. Sélectionnez </> Edit in HTML (Mettre à jour en HTML) pour ajouter du texte et le mettre en forme (Conseils sur les composants Calcite).
4. Vous pouvez utiliser la balise <a> pour créer un lien renvoyant à une page. Collez le slug de la page entre l’attribut href="" de votre balise <a>. Par exemple, <a href="/pages/target-page">Visit the linked page</a>.

Conseil :

Si vous utilisez un chemin relatif dans la balise <a> au lieu du chemin absolu, la page n’est pas actualisée entièrement lorsque vous sélectionnez le lien. Pour ouvrir le lien dans un nouvel onglet, ajoutez target="_blank" directement après l’attribut href dans la balise <a>.

5. Sélectionnez Apply (Appliquer) et Save (Enregistrer).

Attention :

Pour des raisons de sécurité, les fiches Text (Texte) ne prennent pas en charge le JavaScript imbriqué. Les balises de script sont ignorées.

Éléments HTML autorisés

'a' 'abbr' 'acronym' 'address' 'article' 'audio' 'b' 'bdi' 'bdo' 'big' 'blockquote' 'br' 'caption' 'center' 'cite' 'code' 'col'

'colgroup' 'datalist' 'dd' 'del' 'details' 'dfn' 'div' 'dl' 'dt' 'em' 'embed' 'fieldset' 'figcaption' 'figure' 'font' ''footer' 'frameset'

'h1' 'h2' 'h3' 'h4' 'h5' 'h6' ''head' ''header' 'hgroup' 'hr' 'i' 'image' 'input' 'ins' 'kbd' 'keygen' 'li'

'link' 'main' 'map' 'mark' 'menu' 'meter' 'nav' 'ol' 'optgroup' 'option' 'output' 'br' 'p' 'param' 'pre' ''progress' 'q'

'rp' 'rt' 'ruby' 's' 'samp' 'section' 'small' 'source' 'span' 'strike' 'strong' 'style' 'sub' 'summary' 'sup' 'table' 'tbody'

'td' 'tfoot' 'textarea' 'th' 'thead' 'time' 'title' 'tr' 'track' 'tt' 'u' 'ul'

Les attributs suivants pour ces éléments sont autorisés : Tous les éléments HTML pris en charge autorisent : ['class', 'style'].

• 'a' : ['href', 'title', 'data-toggle', 'data-target', 'data-toggle' 'name', 'rel', 'style', 'target']
• 'audio' : ['autoplay', 'controls', 'loop', 'muted', 'preload']
• 'blockquote' : ['cite']
• 'button' : ['name', 'value', 'data-toggle', 'data-target', 'data-dismiss']
• 'col' : ['span', 'width']
• 'colgroup' : ['span', 'width']
• 'div' : ['style', 'align', 'data-show', 'data-target', 'data-toggle']
• 'font' : ['size', 'color', 'style']
• 'img' : ['align', 'alt', 'border', 'height', 'style', 'src', 'title', 'width']
• 'ol' : ['align', 'start', 'type']
• 'p' : ['style']
• 'q' : ['cite']
• 'source' : ['media', 'src', 'type']
• 'span' : [style]
• 'table' : ['border', 'cellspacing', 'cellpadding', 'class', 'height' 'style', 'summary', 'width']
• 'td' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap', 'rowspan', 'style', 'valign', 'width']
• 'th' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap', 'rowspan', 'style', 'valign', 'width']
• 'tr' : [alignt, 'height', style', valign']
• 'ul' : ['type']