WebSite X5Help Center

 
Pamela V.
Pamela V.
User

Pulsante whatsapp fluttuante  it

Auteur : Pamela V.
Visité 1518, Followers 3, Partagé 0  

Buongiorno, ho creato un sito ed il Cliente mi ha chiesto di inserire il pulsante WhatsApp che galleggia in basso nella pagina come oggi se ne vedono molti. Ho utilizzato lo strumento "Messaggio pubblicitario" per farlo e va tutto bene, solo che resta bloccato nel punto in cui l'ho sistemato mentre vorrei che scorresse con la pagina (restasse sempre in basso invece di restare inchiodato lì dov'è e tra l'altro mi copre alcuni testi del sito). Come posso risolvere? Grazie mille.

P.S.: Ho appoggiato il sito temporaneamente su un hosting mio che uso per i test, potete vederlo qui: www.media-grafica.it

Posté le
27 RéPONSES - 7 UTILE
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

x Pamela, ...  io no so se ho capito cosa vorresti ottenere, ma se intendi di confinare il pulsante attualehttps://www.media-grafica.it/images/Pulsante-WhatsApp-grande.png in modo sempre visibile e sempre fisso nello scroll in basso a destra, magari sotto (o sopra) al GoToTop per non ostacolarlo, si potrebbe ottenere con semplice codice css EXTRA un qualcosa di simile a questa simulazione:

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Pamela V.
Pamela V.
User
Auteur
 ‪ KolAsim ‪ ‪
x Pamela, ...  io no so se ho capito cosa vorresti ottenere, ma se intendi di confinare il pulsante attuale in modo sempre visibile e sempre fisso nello scroll in basso a destra, magari sotto (o sopra) al GoToTop per non ostacolarlo, si potrebbe ottenere con semplice codice css EXTRA un qualcosa di simile a questa simulazione: .

KolAsim, esatto. Mi serve proprio che faccia quello. Come faccio ad ottenere quel codice css? e poi dove lo metto? considera che ora l'ho configurato utilizzando "messaggio pubblicitario" come escamotage. Non sono una programmatrice e per me è complicato anche scrivere un codice seplice.

Grazie intanto per la risposta...

Lire plus
Posté le de Pamela V.
Pamela V.
Pamela V.
User
Auteur
Giancarlo B.

Giancarlo questo sarebbe fantastico ma non ho idea di come fare per renderlo visibile sul sito. immagino che quello che vedo sopra sia il codice ma poi come creo i link al numero di telefono? e alle pagine social? e soprattutto dove lo inserisco questo codice?

Grazie per la tua risposta, sarebbe una soluzione perfetta x me.

Lire plus
Posté le de Pamela V.
Pamela V.
Pamela V.
User
Auteur

Mirko grazie, questo non l'avevo visto ma comunque per il mio cliente non va bene perchè funziona solo su mobile, a me servirebbe qualcosa che funziona anche su desktop. So che ormai oltre il 98% del traffico web è fatto da mobile ma preferisco creare dei siti che hanno massima versatilità. Gentilissimo, grazie infinite anche perché sicuramente lo utilizzerò in futuro per altri clienti.

Lire plus
Posté le de Pamela V.
Giancarlo B.
Giancarlo B.
User
pamela V.
Giancarlo B. una cosa del genere? https://codepen.io/sinasoltani164/pen/gOXdgjB Giancarlo questo sarebbe fantastico ma non ho idea di come fare per renderlo visibile sul sito. immagino che quello che vedo sopra sia il codice ma poi come creo i link al numero di telefono? e alle pagine social? e soprattutto dove lo inserisco questo codice? Grazie per la tua risposta, sarebbe una soluzione perfetta x me.

https://wa.me/TUO_NUMERO_DI_TELEFONO

Lire plus
Posté le de Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...x Pamela, ... se vuoi usare la tua struttura attuale, così com'è adesso, puoi risolvere istantaneamente  con un elementare copia/incolla di questo mio codice:
<style>
.swing {position:fixed !important;bottom:-20px !important }
</style>

.................................

... nel  Passo 3; ...devi selezionare la Home Page (casetta), poi andare in alto sul menu e cliccare su Proprietà + Esperto, quindi in > Codice personalizzato  ed incolla il mio codice nella 3^opzione...

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Giancarlo B.
Giancarlo B.
User

messo codice in oggetto HTML e CSS in esperto oggetto HTML

Lire plus
Posté le de Giancarlo B.
Giancarlo B.
Giancarlo B.
User

pagina

codice

esperto

Lire plus
Posté le de Giancarlo B.
Mirko Boschetti
Mirko Boschetti
Moderator
pamela V.
Mirko Boschetti oppure questo del programma: https://market.websitex5.com/it/oggetti/28faeb70-63d3-4214-bd05-3bee5e4739c Mirko grazie, questo non l'avevo visto ma comunque per il mio cliente non va bene perchè funziona solo su mobile, a me servirebbe qualcosa che funziona anche su desktop. So che ormai oltre il 98% del traffico web è fatto da mobile ma preferisco creare dei siti che hanno massima versatilità. Gentilissimo, grazie infinite anche perché sicuramente lo utilizzerò in futuro per altri clienti.

non è proprio cosi, io nel mio sito ho messo un semplicissimo codice e lo vedo anche da desktop... wink

Lire plus
Posté le de Mirko Boschetti
Roberto M.
Roberto M.
User
Giancarlo B.
pagina codice esperto

Ciao Giancarlo approfitto del thd. Ma per farlo scendere un po o addirittura che scorra con lo scrool come si fa? Si piazza in alto e quando scende la stiky da 150px lo copre.

Lire plus
Posté le de Roberto M.
Giancarlo B.
Giancarlo B.
User
Roberto M.
Giancarlo B. pagina codice esperto Ciao Giancarlo approfitto del thd. Ma per farlo scendere un po o addirittura che scorra con lo scrool come si fa? Si piazza in alto e quando scende la stiky da 150px lo copre.

Buongiorno Roberto, io ho messo 250px, ma puoi variarlo in base alle tue necessita.

Ciao.

Lire plus
Posté le de Giancarlo B.
Roberto M.
Roberto M.
User

Ah...ok ora provo

Lire plus
Posté le de Roberto M.
Roberto M.
Roberto M.
User

Funziona! Tank Giancarlo.wink

Lire plus
Posté le de Roberto M.
Giancarlo B.
Giancarlo B.
User

prego Roberto figurati, volendo se più pratico, anche la percentuale della pagina esempio 70%

Lire plus
Posté le de Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

.. io penso che si possa più semplicemente usare il pulsante collegamento previsto dal programma, e poi magari fissarlo dove lo si vuole...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Giancarlo B.
Giancarlo B.
User

certo che si, ma questo è gratis e semplice da personalizzare, ognuno è libero di dare la propria scelta. wink

Lire plus
Posté le de Giancarlo B.
Pamela V.
Pamela V.
User
Auteur

Sei fantastico! funziona esattamente come volevo io. L'unica cosa è che sta praticamente attaccato al bordo in basso alla pagina. per farlo salire leggermente c'è un'opzione da inserire al codice?

intanto mi hai risolto in modo semplice un problema enorme quindi grazie ancora.

P.S.: è corretto lasciare come opzione "prima della chiusura del TAG HEAD"? Sta cosa non l'ho mai capita cosa significa ma non sono una programmatrice quindi immagino di essere scusata...

 ‪ KolAsim ‪ ‪
...x Pamela, ... se vuoi usare la tua struttura attuale, così com'è adesso, puoi risolvere istantaneamente  con un elementare copia/incolla di questo mio codice: <style> .swing {position:fixed !important;bottom:-20px !important } </style> ................................. ... nel  Passo 3; ...devi selezionare la Home Page (casetta), poi andare in alto sul menu e cliccare su Proprietà + Esperto, quindi in > Codice personalizzato  ed incolla il mio codice nella 3^opzione... . ciao .
Lire plus
Posté le de Pamela V.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... come ti avevo detto, adesso viene posizionato sul fondo per non ostacolare il GoToTop...
... però in questo modo invece si posiziona appena sopra il GoToTop:

<style>
.swing {position:fixed !important;bottom:60px !important }
</style>

... basta controllare il valore della coordinata in  bottom:60px

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Pamela V.
Pamela V.
User
Auteur

Grazie mille, sei stato davvero prezioso. Codice facile e versatile.

‪ KolAsim ‪ ‪
... come ti avevo detto, adesso viene posizionato sul fondo per non ostacolare il GoToTop... ... però in questo modo invece si posiziona appena sopra il GoToTop: <style> .swing {position:fixed !important;bottom:60px !important } </style> ... basta controllare il valore della coordinata in  bottom:60px ciao .
Lire plus
Posté le de Pamela V.
Stefano N.
Stefano N.
User

Bellissimo, ma scusate l'intrusione, 

se volessi cambiare instagram con email?

e come inserire nelle righe di codice i riferimenti per essere contattato su whatsapp, telegram e mail?

grazie

Lire plus
Posté le de Stefano N.
Pamela V.
Pamela V.
User
Auteur

Se utilizzi lo strumento "Messaggio pubblicitario" come ho fatto io basta che cambi l'icona e nel collegamento del messaggio pubblicitario metti quello che ti serve...

Ti allego screenshot

Stefano N.
Bellissimo, ma scusate l'intrusione,  se volessi cambiare instagram con email? e come inserire nelle righe di codice i riferimenti per essere contattato su whatsapp, telegram e mail? grazie
Lire plus
Posté le de Pamela V.
Pamela V.
Pamela V.
User
Auteur
Stefano N.
Bellissimo, ma scusate l'intrusione,  se volessi cambiare instagram con email? e come inserire nelle righe di codice i riferimenti per essere contattato su whatsapp, telegram e mail? grazie
Lire plus
Posté le de Pamela V.
Giancarlo B.
Giancarlo B.
User
Stefano N.
Bellissimo, ma scusate l'intrusione,  se volessi cambiare instagram con email? e come inserire nelle righe di codice i riferimenti per essere contattato su whatsapp, telegram e mail? grazie

ti ho inviato il codice per email...

Lire plus
Posté le de Giancarlo B.