Définir la charte graphique d’un site à l’aide des options d’en-tête et de thème

En appliquant le logo et les couleurs de votre organisation à votre site, vous indiquez que le contenu est officiel et digne de confiance. Cela permet également d’incorporer à votre site d’autres contenus Web de votre organisation. Cette rubrique décrit la façon dont les administrateurs et les membres de l’équipe centrale prennent les mesures suivantes :

• Choisir un en-tête et un titre pour un site.
• Ajouter un logo à l’en-tête d’un site.
• Changer les couleurs de l’en-tête du site, des boutons, du texte et de l’arrière-plan.

Pour commencer, connectez-vous à Portal for ArcGIS et cliquez sur Sites dans 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.

Choisir un style d’en-tête

L’en-tête de votre site désigne l’emplacement où vous insérez un logo, créez une navigation pour accéder à d’autres ressources via des liens de menu et établissez des liens vers les comptes de réseaux sociaux.

1. Ouvrez un site en mode de mise à jour.
2. Ouvrez le volet latéral en cliquant sur le bouton de bascule . Le cas échéant, cliquez sur la flèche de retour en regard de Customize (Personnaliser) en haut du volet pour revenir au menu racine jusqu’à ce que l’option permettant de cliquer sur Header (En-tête) apparaisse.
3. Sous Header (En-tête), cliquez sur le menu Appearance (Apparence) pour choisir style d’en-tête. Les trois options suivantes sont disponibles :
   • • Standard : cette conception, utilisée par défaut pour chaque nouveau site, présente une fine barre compacte dans laquelle un espace est aménagé pour un logo (60 pixels), des réseaux sociaux et des liens de menu.
     • Prominent (Majeur) : cette conception offre plus d’espace pour des logos de taille supérieure (120 pixels) et des liens de menu supplémentaires.
     • Custom CSS/HTML (Code HTML/CSS personnalisé) : utilisez un éditeur de code avec syntaxe pour configurer un en-tête avec un code personnalisé.

     Remarque :

     Pour ajouter un logo, procédez comme indiqué à la section suivante.

4. Cliquez sur le menu Branding (Habillage). Tous les champs fournis dans le menu sont facultatifs.
   • Name (Nom) : indiquez le nom qui apparaîtra dans l’en-tête du site. Le nom que vous indiquez dans ce champ est seulement visible dans l’en-tête et ne sera pas reproduit dans l’URL du site ni dans votre liste de sites.
   • Short Name (Nom court) : saisissez une version abrégée du nom indiqué en en-tête. Ce nom apparaîtra uniquement si le nom d’origine de l’en-tête est trop long pour un écran de petit format (par exemple sur un téléphone portable).

     Conseil :

     Les utilisateurs naviguent de plus en plus sur Internet à partir de leur appareil mobile. Il est vivement conseillé d’ajouter un nom court pour assurer la qualité de votre site quel que soit l’appareil utilisé.

5. Choisissez une option pour Layout (Mise en page): Box (Boîte) ou Wide (Large).
6. Si vous souhaitez attribuer une marque à l’en-tête de votre site avec un code HTML/CSS personnalisé, sélectionnez Use custom HTML/CSS (Utiliser un code HTML/CSS personnalisé).

   Remarque :

   L'en-tête HTML ne prend pas en charge le JavaScript intégré. Les balises de script sont ignorées.

7. Modifiez la fenêtre CSS dans le panneau latéral et cliquez sur Apply Changes (Appliquer les changements) pour visualiser les effets sur votre code.
8. Cliquez sur Enregistrer.

Ajouter un logo à un en-tête

La taille et la position du logo de votre site dépend du style d’en-tête que vous choisissez.

1. Cliquez pour développer le menu Branding (Habillage) sous Header (En-tête) dans le volet latéral.
2. Cliquez sur le bouton bascule Logo pour l’activer.
3. Ajoutez une image en sélectionnant Image URL (URL de l’image) ou en la chargeant depuis un fichier.

   Conseil :

   Si vous chargez une image depuis un fichier, une image enregistrée au format PNG est préférable. Vous pouvez rogner et zoomer sur l’image dans la section Image settings (Paramètres d’image) de la fiche, dans le volet Customize (Personnaliser).

4. Si vous utilisez l’en-tête Prominent (Majeur), vous pouvez choisir un paramètre pour Image Alignment (Alignement d’image).
5. Pour Logo Alt Text (Texte alternatif du logo), saisissez du texte pour répondre aux normes d’accessibilité.

   Conseil :

   Si un logo inclut du texte, le texte alternatif peut correspondre au nom de la société. Si le logo est une conception de bloc-logo, vous pouvez le considérer comme décoratif et saisir “” comme texte alternatif.

6. Cliquez sur Enregistrer.

Ajouter des icônes de réseaux sociaux

Ajoutez des icônes de réseaux sociaux à un en-tête.

1. Cliquez pour développer le menu Branding (Habillage) sous Header (En-tête) dans le volet latéral.
2. Cliquez sur le menu Social Icons (Icônes de réseaux sociaux).
3. Cliquez sur le bouton de bascule pour ajouter une icône de réseaux sociaux pour Facebook, Twitter, Instagram ou YouTube.
4. Spécifiez l’URL du compte de votre plateforme.
5. Cliquez sur Enregistrer.

Créer un thème

Attribuez un thème à votre site en sélectionnant les couleurs de l’en-tête, du texte et des boutons. Les couleurs que vous choisissez dans le menu Theme (Thème) du site s’appliquent à l’ensemble de votre site. Vous pouvez remplacer ces sélections en attribuant des couleurs à des lignes spécifiques. Pour plus d’informations, reportez-vous à la rubrique Couleurs et polices.

Conseil :

Lorsque vous choisissez une couleur, passez en revue les directives concernant la charte graphique de votre organisation. De nombreuses directives fournissent le code de couleur exact des sites Web et des logos. En l’absence de directives, consultez votre équipe ou les parties concernées pour vous assurer que le thème de votre site reflète votre organisation.

1. Ouvrez un site en mode de mise à jour.
2. Ouvrez le volet latéral en cliquant sur le bouton de bascule . Le cas échéant, cliquez sur la flèche de retour en regard de Customize (Personnaliser) en haut du volet pour revenir au menu racine jusqu’à ce que l’option permettant de cliquer sur Theme (Thème) apparaisse.
3. Pour sélectionner une couleur pour une des options suivantes, saisissez un code de couleur de valeur hexadécimale ou choisissez une couleur dans le sélecteur de couleurs en regard du champ de code de couleur.
   • Global Nav Background Color (Couleur d’arrière-plan de la navigation globale) applique une couleur à la barre de navigation globale du site.
   • Global Nav Text Color (Couleur de texte de la navigation globale) applique une couleur au texte dans la barre de navigation globale.

     Remarque :

     Pour plus d’informations sur la navigation mondiale, reportez-vous à la rubrique Qu’est-ce que la navigation mondiale ?

   • Header Background Color (Couleur d’arrière-plan de l’en-tête) applique une couleur à l’en-tête du site.
   • Header Text Color (Couleur du texte de l’en-tête) applique une couleur à tout le texte de l’en-tête.
   • Global Background Color (Couleur d’arrière-plan du corps) applique une couleur aux lignes du site. La couleur de ligne et la couleur de texte peuvent également être configurées pour chaque ligne en suivant les étapes indiquées dans Couleur et polices.
   • Body Text Color (Couleur du corps de texte) applique une couleur au texte sur l’ensemble du site.
   • Body Link Color (Couleur du lien du corps) applique une couleur à tous les liens fournis sur le site.
   • Button Background Color (Couleur d’arrière-plan des boutons) applique une couleur aux boutons fournis sur le site.
   • Button Text Color (Couleur de texte des boutons) applique une couleur au texte des boutons fournis sur le site.
4. Une fois que vous avez défini les couleurs, cliquez sur Apply Changes (Appliquer les changements).
5. Vous pouvez également appliquer des polices au texte dans l’en-tête et le corps du site.
   • Pour choisir une police à attribuer au corps du site, cliquez sur le bouton des paramètres Base Font (Police de base).
   • Pour changer la police d’en-tête du site, cliquez sur le bouton des paramètres Header Font (Police d’en-tête).

Remarque :

Pour recommencer ou revenir aux couleurs par défaut, sélectionnez Reset to Defaults (Rétablir les valeurs par défaut) en bas du menu Theme (Thème).

Créer un pied de page

Vous pouvez utiliser un HTML personnalisé pour ajouter un pied de page au site qui persiste sur toutes les pages jointes au site.

1. Développez le menu Footer (Pied de page) dans le volet latéral.
2. Cliquez sur le bouton bascule en regard de Custom (Personnalisé).
3. Modifiez la zone CSS et HTML dans le volet latéral et cliquez sur Apply Changes (Appliquer les modifications) pour voir les effets sur votre HTML.

   Remarque :

   Le pied de page HTML ne prend pas en charge le JavaScript intégré. Les balises de script sont ignorées.

Etapes suivantes

Pour personnaliser davantage votre site, vous pouvez procéder comme suit :

• Ajoutez des liens de menu et assurez-vous que la navigation globale est activée. Pour plus d’informations, reportez-vous à la rubrique Configurer les liens de menu et la navigation globale.
• Chaque site comporte une URL (adresse Web). Si votre organisation possède son propre domaine, vous pouvez configurer cette URL pour personnaliser davantage votre site. Pour plus d’informations, reportez-vous à la rubrique Configurer une URL personnalisée.