TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Widget di scorrimento mobile CSS per Weebly

4

Ci sono molte ragioni per cui devi inserire un pulsante di invito all’azione sul tuo sito. Ad esempio, potresti essere interessato a raccogliere email per l’invio di newsletter. La sfida qui è trovare una posizione attraente per il pulsante in modo che gli utenti facciano clic e agiscano su di esso. Il pulsante mobile è una soluzione semplice a questo problema di posizionamento che galleggia su una posizione fissa quando gli utenti scorrono verso il basso la pagina. Ciò contribuirà ad aumentare la visibilità e la percentuale di clic sul pulsante. In questo articolo discutiamo su come creare un widget slideout mobile CSS che scorrerà fuori quando l’utente passa il mouse sull’immagine del pulsante mobile.



Prima di andare avanti, di seguito è riportato come apparirà il widget. Puoi posizionare l’immagine del pulsante di iscrizione mobile sul lato sinistro con il codice dell’elemento della newsletter all’interno dello slideout. Il modulo della newsletter scorrerà al passaggio del mouse e gli utenti potranno iscriversi facilmente.

Widget di scorrimento mobile CSS per Weebly

Widget di scorrimento mobile CSS

Puoi inserire qualsiasi codice personalizzato all’interno dello slideout e di seguito sono riportati alcuni esempi di casi d’uso:

  • Pulsante mobile contattaci con il modulo di contatto incorporato nello slideout. Puoi anche inviare gli utenti a una pagina di contatto separata collegandoti alla pagina.
  • Pulsante di feedback con qualsiasi modulo di contatto di terze parti incorporato.
  • Qualsiasi tipo di widget come orologio, meteo, calendario, ecc. come slideout.

Come creare una slideout mobile CSS con il pulsante di invito all’azione?

Il widget è composto da tre componenti:

  • Un’immagine
  • Codice CSS
  • codice HTML

1 – Preparazione dell’immagine

Di seguito è riportata l’immagine che abbiamo utilizzato nel widget demo. Puoi preparare un’immagine simile con una dimensione approssimativa di 50 x 200 pixel.

Widget di scorrimento mobile CSS per Weebly

Puoi utilizzare qualsiasi strumento di elaborazione delle immagini come Snagit o Photoshop per creare immagini di qualità. Altrimenti puoi utilizzare strumenti come Paint disponibili gratuitamente su tutti i PC Microsoft. Inoltre puoi scaricare i pulsanti Creative Commons da Internet che possono essere utilizzati liberamente sul tuo sito.

Una volta che l’immagine è pronta, vai alla sezione "Tema > Modifica HTML/CSS > Risorse" sul tuo editor Weebly. Carica l’immagine sul tuo sito e l’URL per accedere all’immagine dovrebbe essere come " http://yoursite.com/files /tema/nome-immagine.jpg “.

Widget di scorrimento mobile CSS per Weebly

Caricamento dell’immagine nel sito Weebly

2 – Codice CSS

Esistono due modi per utilizzare il widget: uno è posizionare il sito in modo che appaia su tutte le pagine del tuo sito e il secondo è posizionare il widget solo su determinate pagine del tuo sito Weebly.

Per l’intero sito, copia il codice seguente, incollalo nella sezione "Impostazioni > SEO > Codice intestazione" del tuo sito Weebly e salva le modifiche. Per il livello di pagina, incolla il codice CSS nella sezione "Pagine > Seleziona la pagina > Impostazioni SEO > Codice intestazione ".

<style type="text/css"> /* Slideout outer button */ #slideout { position: fixed; z-index: 1; top: 80px; left: 0; padding: 25px 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } /* Slideout inner widget area */ #slideout_inner { position: fixed; top: 80px; left: -305px; background: #ffeb3b; width: 250px; padding: 25px; height: 200px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; } /* Hover alignment */ #slideout:hover { left: 300px; } #slideout:hover #slideout_inner { left: 0; } </style>

3 – Codice HTML

Trascina e rilascia un elemento "Codice da incorporare" in qualsiasi punto del sito e inserisci il codice HTML seguente:

<div id="slideout"> /* Insert Weebly Image */ <img src="Your Weebly Image URL" alt="Subscribe" /> <div id="slideout_inner"> <div> /* Insert Code for Content Shown in Slideout */ </div> </div> </div>

Se il tuo CSS è efficace a livello di sito, il codice HTML può essere incorporato in qualsiasi pagina del tuo sito. Se il tuo codice CSS è efficace solo su una determinata pagina, inserisci il codice HTML su quella pagina specifica.

Il codice HTML ha due parti:

  • Immagine: aggiungi l’URL dell’immagine del tuo sito Weebly dal passaggio 1.
  • Codice widget da mostrare sullo slideout. Qui puoi aggiungere qualsiasi codice di incorporamento di terze parti così com’è. Se desideri utilizzare gli elementi predefiniti di Weebly come newsletter o modulo di contatto, continua a leggere.

Ottenere il codice HTML dell’elemento Weebly predefinito

Qui spieghiamo con l’elemento newsletter e il processo rimane lo stesso per altri elementi come i moduli di contatto e RSVP. Inserisci un elemento di newsletter in una pagina e pubblica il tuo sito. Se hai già un elemento della newsletter esistente, puoi riutilizzare lo stesso elemento. Ora apri la pagina con la newsletter sul browser vai alla vista sviluppatore facendo clic con il tasto destro e scegliendo l’opzione ispeziona elemento.

Widget di scorrimento mobile CSS per Weebly

Copiare il codice dell’elemento della newsletter

Passa il mouse sul codice e copia l’intero blocco di codice relativo all’elemento newsletter. Su browser come Chrome, puoi semplicemente fare clic sul primo tag div e premere "controllo + v" o "comando + v". Questo copierà l’intero blocco di codice per l’elemento della newsletter selezionato. Ulteriori informazioni su come visualizzare il codice sorgente in Google Chrome. Usa questo codice all’interno del codice HTML per il widget slideout e il codice HTML completo apparirà come di seguito:

<div id="slideout"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88392-61320d0b64b6e.png" alt="Subscribe" /> <div id="slideout_inner"> /* START OF NEWSLETTER ELEMENT CODE */ <div> <form enctype="multipart/form-data" action="https://widgetcode.weebly.com/ajax/apps/formSubmitAjax.php" method="POST" id="form-100440182464484169" accept-charset="UTF-8" target="form-100440182464484169-target-1480443240994"> <div id="100440182464484169-form-parent" class="wsite-form-container" style="margin-top:10px;"> <ul class="formlist" id="100440182464484169-form-list"> <div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;"> <label class="wsite-form-label" for="input-885026583907653749">Email <span class="form-required">*</span></label> <div class="wsite-form-input-container"> <input id="input-885026583907653749" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="_u885026583907653749"> </div> <div id="instructions-885026583907653749" class="wsite-form-instructions" style="display:none;"></div> </div></div> </ul> </div> <div style="display:none; visibility:hidden;"> <input type="text" name="wsite_subject"> </div> <div style="text-align:center; margin-top:10px; margin-bottom:10px;"> <input type="hidden" name="form_version" value="2"> <input type="hidden" name="wsite_approved" id="wsite-approved" value="approved"> <input type="hidden" name="ucfid" value="100440182464484169"> <input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px"><a class="wsite-button" onclick="document.getElementById('form-100440182464484169').submit()"><span class="wsite-button-inner">Subscribe to Newsletter</span></a> </div> </form><iframe name="form-100440182464484169-target-1480443240994" id="form-100440182464484169-target-1480443240994" style="display: none;"></iframe> </div> /* END OF NEWSLETTER ELEMENT CODE */ </div> </div>

È possibile utilizzare i moduli di contatto e RSVP in modo simile a quanto spiegato sopra. Assicurati di non eliminare la newsletter originale o l’elemento del modulo di contatto dal tuo sito, se il modulo originale viene eliminato il codice incorporato all’interno del widget non funzionerà. Per un’implementazione a livello di sito, puoi aggiungere il codice HTML nel layout del piè di pagina del sito in modo da non dover incorporare il codice in ogni singola pagina.

Personalizzazione del widget

Il codice del widget è molto flessibile e puoi personalizzarlo in base alle tue necessità modificando i parametri. Ecco alcune opzioni di cui potresti aver bisogno per adattare il widget al tuo sito:

  • Altezza fissa: l’altezza fissa del pulsante mobile è 80 px come definito utilizzando "top" nelle classi CSS #slideout e #slideout_inner. Puoi cambiare a qualsiasi altezza richiesta secondo le tue necessità.
  • Larghezza della diapositiva: la larghezza della diapositiva è definita come 300 px in totale. Puoi regolare la larghezza modificando il parametro "sinistra" nelle classi CSS #slideout, #slideout_inner e slideout:hover.
  • Colori: regola il colore dello slideout cambiando lo "sfondo" nella classe #slideout_inner.
  • Immagine di scorrimento e widget: puoi utilizzare qualsiasi immagine personale e incorporare qualsiasi codice widget di terze parti invece dell’elemento della newsletter come spiegato sopra.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More