Ajouter du texte et des images

Les membres de l’équipe centrale 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). Vous pouvez également créer un effet de parallaxe à l’aide de cette fiche.
• 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é à votre site.
• Fiche Image : ajoutez des images autonomes à toute fiche ligne, n’importe dans votre site.

Pour commencer, connectez-vous à ArcGIS Enterprise et sélectionnez Sites sur la page Overview (Vue d’ensemble) pour afficher la liste de vos sites.

Conseil :

Vous pouvez également mettre à jour un site en l’affichant dans un navigateur. Cependant, veillez à être connecté et cherchez le bouton de mise à jour à 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 Enterprise.

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 dans le sélecteur de couleurs.

   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 ajoutées à votre site et aux pages d’aperçu du contenu accessibles par la fonction de recherche du site.

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. Ajouter du texte et le mettre en forme
5. Sélectionnez Enregistrer.

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

Ajoutez des images en les chargeant à partir d’un fichier ou en indiquant l’URL d’une image hébergée. 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. Sélectionnez une source d’image dans Layout editor (Éditeur de mise en page). Vous pouvez soit indiquer l’URL d’une image, soit charger un fichier image. Dans les deux cas, les formats d’image JPG, JPEG et PNG sont pris en charge.
   • 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, sélectionnez Upload image (Charger l’image) et faites glisser le fichier dans la zone, ou sélectionnez Browse for image (Rechercher une image) pour localiser et ajouter un fichier. 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é sous l’image et repositionnez l’image en cliquant dans le cadre de rognage.
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. 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. Mettez à jour le texte sur le bouton pour inclure votre appel à l’action.
5. Sélectionnez le bouton que vous venez d’ajouter, puis sélectionnez le bouton de lien.
6. Dans la zone de texte Text to display (Texte à afficher), ajoutez un texte si vous ne l’avez pas déjà fait.
7. Dans la zone de texte de l’URL, copiez le lien vers lequel vous souhaitez que les utilisateurs soient dirigés lorsqu’ils sélectionnent le bouton.
8. Cliquez sur Insert Link (Insérer le lien) pour confirmer les modifications.
9. Sélectionnez 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 :

Si vous affichez 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. Vous pouvez soit indiquer l’URL d’une image, soit charger un fichier image. Dans les deux cas, les formats d’image JPG, JPEG et PNG sont pris en charge.
   • 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, sélectionnez Upload image (Charger l’image) et faites glisser le fichier dans la zone, ou sélectionnez Browse for image (Rechercher une image) pour localiser et ajouter un fichier. La taille maximale du fichier est de 3 Mo.
4. Après avoir ajouté une image, sélectionnez une couleur pour le paramètre Background color (Couleur d’arrière-plan) en saisissant un code hexadécimal ou à l’aide du sélecteur de couleurs.

   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. Vous pouvez ainsi éclaircir ou assombrir la couleur d’arrière-plan en fonction de l’ajustement. Cela 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

Si vous désirez utiliser le code HTML pour personnaliser le texte, vous pouvez utiliser les éléments HTML suivants :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Ajoutez une fiche Text (Texte) à la mise en page et sélectionnez </> Edit in HTML (Mettre à jour en HTML).
3. Saisissez le code et cliquez sur 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.

Les éléments HTML autorisés sont les suivants :

'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', 'img', 'input', 'ins', 'kbd', 'keygen', 'li', 'link', 'main', 'map',
	'mark', 'menu', 'meter', 'nav', 'ol', 'optgroup', option', 'output', '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 :

 All supported HTML elements allow : ['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']