Ambito

Questo articolo copre le opzioni offerte per personalizzare i pin di posizione per il prodotto Locator & Pages. Questo include il colore e il logo del pin, così come il colore e il logo del cluster.

Personalizza tutti i pin

Colore del pin

Il colore del pin Locator di base può essere modificato con l'attributo data-locationpincolor. Questo attributo accetta tre diversi tipi di valore di colore: un valore RGB, un codice HEX o il nome del colore.

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

Colore del pin al passaggio del mouse

Il colore del pin Locator di base quando ci passi il mouse sopra può essere modificato con l'attributo data-locationpinhovercolor. Questo attributo accetta tre diversi tipi di valore di colore: un valore RGB, un codice HEX o il nome del colore.

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

Logo del pin

Il logo del pin predefinito può essere modificato con l'attributo data-locationpinurl. Questo attributo accetta l'URL diretto all'immagine che desideri utilizzare come pin. Il logo deve essere un file .png o .jpg affinché si visualizzi correttamente nel Locator.

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

Logo del pin al passaggio del mouse

Puoi cambiare il pin con un altro logo quando ci passi il mouse sopra usando l'attributo data-locationpinhoverurl. Questo attributo accetta l'URL diretto all'immagine che desideri utilizzare come pin. Il logo deve essere un file .png o .jpg affinché si visualizzi correttamente nel Locator.

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

Personalizza i logo dei pin a livello aziendale

La configurazione del logo del pin precedente applica i pin personalizzati a tutte le posizioni del Locator. La seguente ti permetterà di impostare un pin personalizzato con un logo per tutti i pin di una singola azienda (account). Questo è utile se hai più aziende o marchi nello stesso Locator e vuoi differenziarli facilmente con i pin. Questo può essere ottenuto con l'attributo data-locationpinurl-business. L'ID dell'azienda (ID account) deve essere specificato per l'associazione con il logo del pin personalizzato. Puoi trovare l'ID aziendale nell'URL quando ispezioni un account nella piattaforma Uberall. Quando utilizzi diversi logo dei pin per azienda, è possibile definire un logo di fallback.

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"

Rimozione dello sfondo bianco dal logo

Se i logo che stai utilizzando come pin personalizzati hanno uno sfondo trasparente, potresti volerlo trasparente anche nel Locator. Per impostazione predefinita, il pin avrà uno sfondo bianco. Per modificare il colore di questo sfondo predefinito, è necessario utilizzare CSS.

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


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