Portée

Cet article couvre les options offertes pour personnaliser les épingles de localisation pour le produit Locator & Pages. Cela inclut la couleur et le logo des épingles ainsi que la couleur et le logo des groupes.

Personnaliser toutes les épingles

Couleur de l'épingle

La couleur de l'épingle Locator de base peut être modifiée avec l'attribut data-locationpincolor. Cet attribut accepte trois types différents de valeur de couleur : une valeur RVB, un code HEX ou le nom de la couleur.

data-locationpincolor = "RGB(255,0,0)"
data-locationpincolor = "#F50000"
data-locationpincolor = "red"

Couleur de l'épingle au survol

La couleur de l'épingle Locator de base au survol peut être modifiée avec l'attribut data-locationpinhovercolor. Cet attribut accepte trois types différents de valeur de couleur : une valeur RVB, un code HEX ou le nom de la couleur.

data-locationpinhovercolor = "RGB(0,255,0)"
data-locationpinhovercolor = "#00FF00"
data-locationpinhovercolor = "green"

Logo de l'épingle

Le logo de l'épingle par défaut peut être modifié avec l'attribut data-locationpinurl. Cet attribut accepte l'URL directe de l'image que vous souhaitez utiliser comme épingle. Le logo doit être un fichier .png ou .jpg pour s'afficher correctement dans le Locator.

data-locationpinurl = "https://s3.eu-central-1.amazonaws.com/uberall-downloads-prod/uberall_logo2.jpg"

Logo de l'épingle au survol

Vous pouvez changer l'épingle en un autre logo en la survolant avec l'attribut data-locationpinhoverurl. Cet attribut accepte l'URL directe de l'image que vous souhaitez utiliser comme épingle. Le logo doit être un fichier .png ou .jpg pour s'afficher correctement dans le Locator.

data-locationpinhoverurl = "https://cdn.join.com/5d4915171a5a1000068c03c7/uberall-gmb-h-logo-xl.png"

Personnaliser les logos des épingles au niveau de l'entreprise

La configuration de logo d'épingle ci-dessus applique les épingles personnalisées à tous les emplacements du Locator. Ce qui suit vous permettra de définir une épingle personnalisée avec un logo pour toutes les épingles d'une seule entreprise (compte). C'est utile si vous avez plusieurs entreprises ou marques dans le même Locator et que vous souhaitez les différencier facilement avec des épingles. Ceci peut être réalisé avec l'attribut data-locationpinurl-business. L'identifiant de l'entreprise (identifiant du compte) doit être spécifié pour l'association avec le logo d'épingle personnalisé. Vous pouvez trouver l'identifiant de l'entreprise dans l'URL lors de l'inspection d'un compte sur la plateforme Uberall. Lors de l'utilisation de logos d'épingles différents par entreprise, un logo de secours peut être défini.

data-locationpinurl = "https://s3.eu-central-1.amazonaws.com/uberall-downloads-prod/uberall_logo2.jpg"
data-locationpinurl-business = "337141=https://cdn.join.com/5d4915171a5a1000068c03c7/uberall-gmb-h-logo-xl.png"

data-locationpinurl-business="337141=https://cdn.iconscout.com/icon/premium/png-256-thumb/donut-1410601-1193527.png,
77215=https://www.top5reviewed.com/wp-content/uploads/2016/01/Donut-Cushions.png,
337143=https://cdn.iconscout.com/icon/premium/png-256-thumb/donut-174-878224.png"

Supprimer le fond blanc du logo

Si les logos que vous utilisez comme épingles personnalisées ont un fond transparent, vous souhaiterez peut-être qu'il soit transparent dans le Locator. Par défaut, l'épingle aura un fond blanc. Pour modifier la couleur de ce fond par défaut, il est nécessaire d'utiliser du CSS.

#store-finder-widget .custom-pin-default{
   background: none !important
   }


 #store-finder-widget .custom-pin-highlighted{
   background: none !important
   }