Umfang

Dieser Artikel behandelt die Optionen zum Anpassen der Standort-Pins für das Locator & Pages Produkt. Dies umfasst die Pin-Farbe und das Logo sowie die Cluster-Farbe und das Logo.

Alle Pins anpassen

Pin-Farbe

Die Farbe des Standard-Locator-Pins kann mit dem Attribut data-locationpincolor geändert werden. Dieses Attribut akzeptiert drei verschiedene Arten von Farbwerten: einen RGB-Wert, einen HEX-Code oder den Namen der Farbe.

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

Pin-Hover-Farbe

Die Farbe des Standard-Locator-Pins beim Überfahren mit der Maus kann mit dem Attribut data-locationpinhovercolor geändert werden. Dieses Attribut akzeptiert drei verschiedene Arten von Farbwerten: einen RGB-Wert, einen HEX-Code oder den Namen der Farbe.

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

Pin-Logo

Das Standard-Pin-Logo kann mit dem Attribut data-locationpinurl geändert werden. Dieses Attribut akzeptiert die direkte URL zu dem Bild, das du als Pin verwenden möchtest. Das Logo muss entweder eine .png- oder .jpg-Datei sein, damit es ordnungsgemäß im Locator angezeigt wird.

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

Pin-Hover-Logo

Du kannst den Pin beim Überfahren mit der Maus mit dem Attribut data-locationpinhoverurl zu einem anderen Logo wechseln. Dieses Attribut akzeptiert die direkte URL zu dem Bild, das du als Pin verwenden möchtest. Das Logo muss entweder eine .png- oder .jpg-Datei sein, damit es ordnungsgemäß im Locator angezeigt wird.

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

Pin-Logos auf Business-Ebene anpassen

Die oben beschriebene Pin-Logo-Konfiguration wendet die benutzerdefinierten Pins auf alle Standorte des Locators an. Das Folgende ermöglicht dir, einen benutzerdefinierten Pin mit einem Logo auf alle Pins eines einzelnen Unternehmens (Kontos) anzuwenden. Dies ist nützlich, wenn du mehrere Unternehmen oder Marken im gleichen Locator hast und diese leicht mit Pins unterscheiden möchtest. Dies kann mit dem Attribut data-locationpinurl-business erreicht werden. Die Business-ID (Account-ID) muss für die Zuordnung zum benutzerdefinierten Pin-Logo angegeben werden. Du findest die Business-ID in der URL, wenn du ein Konto in der Uberall-Plattform überprüfst. Bei Verwendung verschiedener Pin-Logos pro Business kann ein Fallback-Logo definiert werden.

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"

Entfernen des weißen Hintergrunds vom Logo

Falls die Logos, die du als benutzerdefinierte Pins verwendest, einen transparenten Hintergrund haben, möchtest du möglicherweise, dass dieser im Locator transparent ist. Standardmäßig hat der Pin einen weißen Hintergrund. Um die Farbe dieses Standardhintergrunds zu ändern, musst du CSS verwenden.

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


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