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 où vous le désirez dans le site en faisant glisser cette fiche sur une fiche 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.
3. Ajoutez un texte.
4. Sélectionnez le texte que vous voulez mettre en forme. Les options de mise en forme concernent le style (Normal, Code, Headers (En-têtes), etc.), la mise en gras, la mise en italique et les liens.
5. Pour modifier 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. Vous pouvez également déplacer une ligne de texte en cliquant sur l’option de paragraphe et en sélectionnant 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.

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 avez également la possibilité d’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.

Pour en savoir plus, reportez-vous à la rubrique Mise en forme du texte sur ArcGIS Hub et ArcGIS Enterprise Sites

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) à la mise en page d’un site ou d’une page.
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.

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'

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 (Image) sur la ligne existante.
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.

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.

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 ligne dispose de deux options de présentation qui vous permettent de choisir la manière dont votre image apparaît.

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.

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