Ajouter du texte et des images

Les membres de l’équipe centrale du site ou de l’initiative 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.

Pour commencer, connectez-vous à ArcGIS Hub et sélectionnez Sites sur la page Overview (Vue d’ensemble) pour afficher la liste de vos sites. Si votre organisation possède une licence ArcGIS Hub Premium, vos sites figurent sous Initiatives (Initiatives).

Conseil :

Vous pouvez également mettre à jour un site en l’affichant dans un navigateur. Connectez-vous à ArcGIS Hub et cherchez le bouton de mise à jour sur la gauche de votre site.

Ajouter du texte et le mettre en forme

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

1. Ouvrez un site ou une page en mode de mise à jour.
2. Ajoutez une fiche Text (Texte) à une ligne et ajoutez un texte.
3. 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.
4. Pour ajuster la taille du texte, cliquez sur le bouton de style et sélectionnez une taille d’en-tête.
5. 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.

6. Sélectionnez Enregistrer.

Remarque :

La taille de police du texte de la police de base a été augmentée sur tous les sites et toutes les pages en 2021/2022 pour améliorer la lisibilité et rendre le contenu Web accessible par des personnes aux aptitudes diverses.Pour plus de détails, lisez l’article FAQ : modifications à venir dans la taille de police de base et les unités rem sur les sites ArcGIS Hub.

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). Vous pouvez aussi ajuster la couleur du texte à l’aide des paramètres de ligne.

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.

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. Les images partagées en interne sont visibles uniquement par les utilisateurs connectés et qui font partie de l’équipe principale ou de l’organisation.

1. Ouvrez un site ou une page en mode de mise à jour.
2. Ajoutez une fiche Image à une ligne.
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 de la fiche Row (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.

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.

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.

Créer 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.

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).
Pour plus d’informations sur les couleurs des boutons, reportez-vous à la rubrique Créer un thème.

Créer un menu en accordéon

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

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.

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. 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']