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 de votre site. Chacune des fiches doit être imbriquée dans une fiche ligne. Vous pouvez ajouter des images et des couleurs d’arrière-plan à votre fiche 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 cliquez sur Sites (Sites) dans la page Overview (Vue d’ensemble) pour afficher une 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 incluent le style (ajout d’en-têtes, d’extraits de code et de guillemets), la mise en gras, 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 choisissez un alignement. Vous pouvez appliquer un retrait positif ou négatif à une ligne de texte en choisissant l’option de paragraphe et en sélectionnant l’option voulue.

   Conseil :

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

7. Cliquez sur Enregistrer.

Changer la couleur du texte

Vous pouvez changer la couleur du texte à l’aide des paramètres Theme (Thème) du site si vous voulez appliquer la même couleur à l’ensemble du texte de votre site. Vous avez également la possibilité d’ajuster la couleur du texte par ligne à l’aide des paramètres correspondants.

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, cliquez sur le crayon de mise à jour de cette ligne.
4. Changez la couleur en saisissant un code de 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 votre 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. Cliquez sur 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 Formatage du texte sur vos sites ArcGIS Hub et ArcGIS Enterprise.

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. Cliquez sur la liste non triée pour créer une liste à puces ou sur la liste triée pour ajouter une liste numérotée.
5. Cliquez sur 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. Cliquez sur Enregistrer.

Ajouter une image autonome

Ajoutez des images en les chargeant à partir d’un fichier ou en fournissant l’URL vers une image hébergée. Les images partagées en interne sont visibles uniquement par les utilisateurs ayant ouvert une session et qui font partie de l’équipe centrale 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. Vous avez la possibilité de charger un fichier image ou de saisir une URL d’image. Dans les deux cas, les formats d’image JPG, JPEG et PNG sont pris en charge.
   • Pour charger un fichier image, sélectionnez Upload Image (Charger une image) et faites glisser le fichier souhaité dans l’éditeur de site, ou cliquez sur Browse for Image (Rechercher une image) pour accéder au fichier souhaité et l’ajouter. La taille de fichier maximale est 3 Mo.
   • Pour ajouter l’URL d’une image, vous pouvez également sélectionner Image URL (URL de l’image) et coller le lien d’une image prise en charge dans le champ URL.
4. Si vous utilisez un fichier image, vous pouvez personnaliser l’image chargée en cliquant sur le bouton Rogner, puis en faisant glisser une poignée pour ajuster le cadre de rognage. Vous pouvez repositionner le cadre de rognage en cliquant dessus et en le faisant glisser le long de la ligne en pointillé. Vous pouvez également appliquer un zoom en ajustant le curseur situé sous l’image, puis vous pouvez repositionner 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, puis choisissez d’ouvrir le lien 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) pour définir dans l’image un point focal. Votre image s’adapte ainsi à partir de ce point focal aux différentes tailles d'écran.
9. Cliquez sur 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 à 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 choisissez Button (Bouton).
4. Mettez à jour le texte sur le bouton pour inclure votre appel à l’action.
5. Cliquez sur le bouton que vous venez d’ajouter et cliquez sur le bouton Lier.
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 cliquent sur le bouton.
8. Cliquez sur Insert Link (Insérer le lien) pour confirmer vos modifications.
9. Cliquez sur 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 claire ou foncée. Si, par exemple, vous utilisez un texte de couleur claire ou 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 votre 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.
3. Sous Background Image (Image d’arrière-plan), choisissez une source d’image. Vous avez la possibilité de charger un fichier image ou de saisir une URL d’image. Dans les deux cas, les formats d’image JPG, JPEG et PNG sont pris en charge.
   • Pour charger un fichier image, sélectionnez Upload Image (Charger une image) et faites glisser ce fichier dans l’éditeur de site, ou cliquez sur Browse for Image (Rechercher une image) pour accéder à votre fichier et l’ajouter. La taille de fichier maximale est 3 Mo.
   • Pour ajouter l’URL d’une image, vous pouvez également sélectionner Image URL (URL de l’image) et coller le lien d’une image prise en charge dans le champ URL.
4. Après avoir ajouté une image, sélectionnez une couleur pour le paramètre Background Color (Couleur d’arrière-plan) sous Row Settings (Paramètres de ligne) en saisissant un code hexadécimal ou en utilisant le sélecteur de couleurs.

   Remarque :

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

5. Sous Appearance (Apparence), réglez la transparence de l’image en utilisant le curseur ou en saisissant une valeur dans le champ de pourcentage. En réglant la transparence de l’image, la couleur d’arrière-plan s’éclaire ou s’atténue selon la façon dont vous l’avez ajustée. Cette technique est utile pour s’assurer que l’image et le texte restent accessibles aux utilisateurs non-voyants.
6. Cliquez sur 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 ligne, vous pouvez choisir une disposition large ou fixe pour l’image et le contenu affiché éventuellement sur la fiche.
   • Choisissez Wide (Large) si vous souhaitez que votre image couvre la largeur de votre site.
   • Choisissez Fixed (Fixe) pour que l’image reste fixe.
2. Définissez Image Focal Point (Point focal de l’image) pour que l’image reste attachée au point focal spécifié lorsqu’elle s’adapte aux différentes tailles d’écran.
3. Cliquez sur 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 cliquez sur </> Edit in HTML (Mettre à jour en HTML).
3. Entrez votre code et cliquez sur Save (Enregistrer).

Attention :

Pour des raisons de sécurité, les fiches texte ne prennent pas en charge le JavaScript intégré. 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']