Blog

[Tutoriel Vidéo] La Section Map

Un des outils les plus populaires et puissants de la plateforme GoodBarber est la section Map. Vous pouvez l'utiliser pour créer des annuaires géolocalisés répertoriant des entreprises, des produits ou des services, etc. en utilisant votre propre section map customisée (si vous en avez les compétences!) ou en choisissant l'option mCMS, dont nous allons parler dans ce tutoriel.
 
 
La première chose à faire est d'ajouter et choisir un nom pour votre section Map. Vous aurez donc le choix entre le mCMS ou une source de contenu personnelle, mais pour cette fois, nous allons choisir le mCMS.

Après avoir choisi, vous serez redirigé vers un menu à partir duquel vous pourrez commencer à ajouter des points à votre carte.
 
Pour chaque point, entrer l'adresse dans le champs (la latitude et la longitude seront automatiquement remplis).

Créez vos points

Vous pouvez rendre vos points plus intéressants et utiles en y ajoutant du texte, des images et des vidéos, ou encore des boutons de call-to-action (lien, téléphone ou email). Il s'agit d'une bonne opportunité pour ceux qui souhaitent fournir aux utilisateurs de l'app un moyen facile d'entrer en contact avec ce qu'ils recherchent.

L'option "Voir le trajet" apparaîtra par défaut. Elle permet de rediriger l'utilisateur en dehors de l'app vers n'importe quelle application de localisation utilisée par son device. Il aura ensuite accès à l'itinéraire entre son lieu actuel et le lieu recherché.

Personnalisez

Si vous désirez customiser l'icône qui représentera le point sur la carte, vous pouvez choisir entre celles proposées par GoodBarber  (vous pouvez en changer également la couleur), ou télécharger la votre. Si vous utilisez votre propre image, assurez vous qu'elle soit blanche, au format .png et avec un fond transparent. Sa taille doit être comprise entre 150x150 px et 150x300 px.

Et voilà! Publiez votre travail et retournez ajouter d'autres points si vous le désirez. Une fois que vous aurez terminé ce travail vous pourrez commencer à ajouter des fonctionnalités supplémentaires comme le moteur de recherche, les commentaires Disqus, ou encore l'organisation du contenu par catégorie!

Vous pouvez choisir les modalités d'affichage de votre contenu:
- Par ordre alphabétique
- Les plus vus
- Les plus commentés
- Par distance

En cliquant sur "Liste des points" vous pouvez également choisir si vous voulez que les points soient affichés en liste ou bien directement sur la map, customiser le design de la liste (couleur de fond, couleurs de police, titres, etc.) et configurer les vignettes et leur affichage.

 
Comme toujours, n'oubliez pas de cliquer sur le bouton vert "Update App" en haut à droite de l'écran afin de sauvegarder vos modifications.
 

À lire aussi

  4 min de lecture

Vos événements, adhésions et dons HelloAsso s'affichent dans votre app

En bref. HelloAsso Événements et HelloAsso Campagnes sont deux extensions de GoodBarber, l'app builder sans code, qui lisent les formulaires publics d'une association sur HelloAsso. HelloAsso Événements remplit une section Agenda avec les événements à venir, leur date, leur lieu et leurs tarifs, et un bouton pour s'inscrire dans l'app. HelloAsso Campagnes remplit une section Article avec les adhésions, les formulaires de don et les collectes : l'adhésion s'ouvre dans l'app, le don dans le navigateur du téléphone. Vous les connectez avec les identifiants d'API HelloAsso de votre association. Elles sont gratuites pour les apps Content : chaque section compte pour une des extensions incluses dans votre plan.HelloAsso est déjà l'outil de billetterie et d'adhésion de nombreuses associations. En février 2025, la plateforme a franchi les deux milliards d'euros collectés pour les associations depuis 2009, dont la moitié en 18 mois, et elle revendique 376 000 associations inscrites, selon Le Journal des Entreprises du 6 mars 2025. Voici comment les deux extensions fonctionnent pour un club sportif de quartier.

  7 min de lecture

Comment régler les bordures dans mon app ?

Dans GoodBarber, chaque cellule, widget et champ a déjà sa bordure de 1 px. Donnez-lui une couleur, 1, 2 ou 4 px d'épaisseur, ou un seul côté sous un titre.

Conseils pour créer une app