Le blog francophone consacré
aux technologies Esri

Conseils & Astuces ArcGIS Online - N°15

N° 15 - Rendre sa page d'accueil plus interactive avec un peu d'HTML

Dans les articles précédents, nous avons vu différentes options permettant d'adapter le "look-and-feel" de la page d'accueil de son portail ArcGIS Online à la charte graphique de votre organisation. Vous savez désormais personnaliser la page d'accueil en utilisant l'interface d'administration et même un peu plus en utilisant des styles CSS personnalisés (nous y reviendrons d'ailleurs dans un prochain article). Mais on peut aller encore bien plus loin. En effet, si vous maîtriser quelques notions de base d'HTML, vous allez pouvoir améliorer encore votre page d'accueil, notamment en la rendant plus interactive.

Ajouter des éléments à votre bannière

Dans l'exemple ci-dessous, on a rédigé quelques lignes d'HTML pour afficher l'image de la bannière et rajouter par-dessus un bouton permettant d'accéder au site web de l'organisation. Le principe consiste à créer un cadre avec une balise "div" avec l'image en arrière-plan puis à y insérer une seconde balise "div" pour le bouton.



Ci-dessous, le code source de cet exemple:



Autres améliorations

Dans la version actuelle d'ArcGIS Online, il n'est pas possible de modifier la couleur des titres des éléments de la vitrine. Ainsi, selon les tonalités de l'image, ils sont parfois difficiles à lire (comme ici dans notre exemple). L'accès au code HTML de la bannière permet de corriger ce problème en insérant une bande transparente atténuant, sur cette zone, les couleurs de l'image d'arrière-plan. 

Le code HTML ci-dessous montre l'insertion d'une bande blanche d'une transparence de 20% de 960 x 50 pixels:


Notre page d'accueil est désormais terminée, ci-dessous le rendu de la page finalisée:


Une autre option pour rendre plus visible les titres des éléments en vitrine consisterai à modifier leur couleur. Ceci peut se faire en redéfinissant leur style CSS. nous verrons cela dans le prochain article.

Pour en savoir plus sur l'utilisation d'HTML dans le cadre de la personnalisation des pages d'accueil de portails ArcGIS Online, vous pouvez vous reporter à la page d'aide suivante.



Bonne route sur ArcGIS Online !

Pour retrouver l'ensemble des Conseils & Astuces ArcGIS Online, cliquez sur ce lien

Partager cet article:

Rejoindre la discussion

    Les commentaires à propos de cet article:

1 comments :

Sandrine a dit…

Il est possible de modifier la couleur de la police de la vitrine en insérant dans le code html de la bannière les lignes suivantes :
.galleryNode .galleryLabelContainer {
color: #000000 !important;
}
Dans ce cas, les titres s'écriront alors en blanc.