Come spesso mi piace fare, ti mostrerò 2 tutorial per creare il tuo link di Whatsapp in codice e l’altro tramite un plugin per il sito in CMS come WordPress.

Whatsapp per il sito web in codice :

Incominciamo con quello che più mi piace ! Il codice . Se cerchi il plugin per WordPress, puoi saltare questa parte .

Utilizzeremo la libreria Font Awesome per creare l’icona, quindi come primo step, installiamo la libreria nel nostro progetto! Se non dovessi saperlo fare, puoi leggere l’articolo in cui parlo dell’icona di Instagram, in cui spiego passo passo il procedimento per installarla in maniera rapida.

Bene, adesso che hai tutto installato, procediamo con la generazione della nostra icona nel TAG “<a ></a>” .

<a href=""><i class="fab fa-whatsapp"></i></a>

Che tu ci creda o meno, abbiamo quasi finito! Adesso basterà inserire il link API di Whatsapp seguito dal tuo numero di telefono nell’ “href” ,

<a href=”https://api.whatsapp.com/send?phone=tuo-numero-di-whatsapp“><i class=”fab fa-whatsapp”></i></a>

Quindi:

<a href="https://api.whatsapp.com/send?phone=393896312092"><i class="fab fa-whatsapp"></i></a>

IMPORTANTE:

• Non inserire il “+” d’avanti al “39” ma scrivilo proprio come nell’esempio
• Il numero deve chiaramente essere registrato su whastapp

Se volessi inserire anche un messaggi pre-impostato per il mittente, potrai aggiungere “&text=” e scrivere il tuo messaggio, chiaramente per la spaziatura dovrai usare “%20” :

https://api.whatsapp.com/send?phone=393896312092&text=Ciao%20voglio%20più%20info

Adesso non ti resta che inserire l’icona dove più ti piace e goderti il collegamento all’app di Whatsapp.

Plugin per WordPress :

Vediamo subito come avere Whatsapp per il sito web attraverso il plugin per WordPress !

Ci sono davvero tanti plugin su WordPress, ma quello che mi è piaciuto molto e utilizzo spesso è Join.chat , davvero semplice da configurare e non ho mai avuto nessun tipo di conflitto con i vari temi.

Installiamolo scaricandolo attraverso il link o direttamente da WordPress e attiviamolo.

Adesso vedrai nelle impostazioni il nome del plugin appena installato :

Clicchiamo sulla voce Join.chat e settiamo la nazione cliccando sulla bandierina nel primo campo, e tutti gli altri campi utili come il delay per l’apparizione della call to action (se la volessi impostare) . Potrai anche sostituire l’icona con un’altra immagine, e decidere dove visualizzare l’icona ( DX o SX ) :

C’è qualche pagina dove non vuoi che appaia l’icona di Whatsapp? Ti basterà andare nell’editing della pagina interessata , e vedrai sulla destra l’impostazione di Join.chat, per nascondere l’icona, clicca su “hidden” (occhio sbarrato ) :

Adesso non ti resta che goderti il link di Whatsapp sul tuo sito web !

È stato utile l’articolo ? Lasciami un commento

L'articolo Chat Whatsapp per il sito Web proviene da Alessandro Albergo.

Il tutto consiste nell’integrare il un “plugin”, o meglio snippet di codice generato da Facebook stesso, nella pagina web che desideri oppure in tutte le pagine.

Attraverso il Messenger della tua pagina Facebook  che apparirà sul sito web, potrai iniziare una conversazione con gli utenti o clienti senza che loro lascino il sito. A tua volta sarai in grado di rispondere alla chat attraverso l’applicazione sul tuo Smartphone ( Business Suite Apple – Business Suite Android ) o attraverso il sito di Facebook.

Che si tratti di un sito web “statico”, “dinamico” o un CMS (come per esempio WordPress), il procedimento e il risultato sarà lo stesso.

Per prima cosa quello che ti serve, sarà una pagina Facebook , si solo per chi ha una pagina (azienda, blogger, artista ecc..) ed è amministratore della stessa, può usufruire di questi servizi.

Nota importante : Per procedere, il tuo sito web deve avere il certificato SSL , ovvero il protocollo “https://” .

Finite le premesse iniziamo subito con la generazione della nostra chat di Facebook Messenger sul sito web !

Effettua l’accesso a Facebook e vai sulla pagina che gestisci ( non il tuo profilo, ma la pagina ) .

Adesso clicchiamo “Impostazioni” , come vedi è l’ultima voce della sidebar che trovi sulla sinistra.

Adesso vedrai cambiare le voci nella sidebar, bene clicchiamo “Messaggi” :

Sulla schermata di destra ci saranno tante voci riguardanti il settaggio dei messaggi, verso la fine (esattamente la terzultima voce) ci sarà “Aggiungi Messenger al tuo sito web” :

Clicchiamo su “Inizia” !

Ora inizierà la configurazione guidata dove dovrai settare i messaggi automatici e copiare il codice che Facebook di fornisce per integrare la chat di messenger sul sito web :

Divertiti come vuoi, puoi cambiare il colore, la prima frase di saluto per avviare la conversazione e personalizzare le FAQ con risposte automatiche.

Per ottenere il plug-in, ti basterà cliccare su configura e seguire i 4 steps, dove dovrai selezionare la lingua e copiare il codice che ti verrà dato :

Adesso che abbiamo il codice, non ci resta che integrarlo sul nostro sito subito prima della chiusura del TAG “</body>” .

Su WordPress invece, dovrai cliccare su Aspetto -> Editor del tema -> Selezionare il tema in uso :

Dovrai incollare il plug-in subito prima della chiusura del “/body“, proprio dove vedi la linea blu nell’immagine esempio .

Adesso dovresti vedere sul tuo sito web la chat a comparsa, potrai anche decidere dall’impostazione della Pagina Facebook di far aprire in automatico la conversazione oppure solamente al click sull’icona.

Per la visuale Desktop dovresti vedere qualcosa del genere :

Per il mobile invece : 

Ottimo, adesso se hai seguito tutti i passaggi avrai la tua chat pronta sul sito web !

È stato utile l’articolo ? Lasciami un commento

L'articolo Facebook Messenger sul tuo sito web proviene da Alessandro Albergo.

Sicuramente potevo utilizzare un’immagine “.png” , ma avrei dovuto impiegarci più tempo per adattare la dimensione su ogni dispositivo. Quindi come quasi tutti gli sviluppatori che utilizzano le icone, ho deciso di crearla con una libreria e precisamente ho utilizzato “Fontawesome“.

Cosa è Font Awesome ?

Font Awesome è una delle tante librerie per sviluppatori che mette a disposizione le icone in codice, che prendono forma grazie al file di stile “CSS” che il sito rilascia tramite link (CDN).

Molte di queste librerie hanno icone che si possono utilizzare con un piano Free, quindi basta semplicemente registrarsi e includere il link della CDN rilasciato, altre invece hanno un piano PRO (a pagamento e con CDN a parte).

Non preoccuparti perché l’icona di Instagram rientra nel piano Free .

Quindi per iniziare come primo step, installiamo la libreria! Niente di più facile, copiamo la CDN e inseriamola nell’ “head” del nostro progetto con il tag “link”. Per semplificarti il tutto ti condivido qui la CDN da inserire direttamente nell’ “head”, in questa maniera potrai anche non registrarti sul sito.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

Adesso potrai copiare il codice di ogni icona free del sito FA (Font Awesome) e incollarla nel tuo progetto, il risultato sarà appunto l’icona visualizzabile (quella che avrai scelto ). Se dovessi prendere un’icona pro invece, non essendo inclusa nella CDN, non verrà visualizzata sul sito web.

Posso installare Font Awesome su WordPress ?

Certo, come al solito è tutto più rapido, ti basta installare il plugin FontAwesome  e poi inserire il codice nell’HTML del tuo articolo o del Widget.

Per Sapere come utilizzare l’HTML nella pagine puoi vedere l’articolo Immagini Responsive , dove spiego come farlo .

Creiamo l’icona di Instagram con il suo vero colore

Come prima cosa, dopo aver installato la libreria sul tuo sito, cerchiamo l’icona di Instagram nella barra di ricerca del sito FA , semplicemente cercando la parola chiave (che in questo caso sarà “Instagram”).

Io ho usato questa icona:

<i class="fab fa-instagram fa-3x"></i>

Ho aggiunto la classe “fa-3x” che rende l’icona più grande. Ci sono varie misure del css di FA, e vanno da “fa-1x” a “fa-5x”, tu puoi scegliere la misura che più ti soddisfa.

Adesso non ci resta che aggiungere il nostro stile tramite CSS.

Utilizzando WordPress potrai aggiungere lo stile tramite il menù Personalizza -> CSS Personalizzato (Lo stesso menù che usi per modificare la Favicon del tuo sito) oppure installando il Plugin Simple Custom CSS and JS .

Copia e incolla questo codice all’interno del tuo CSS o del Plugin:

.insta-colore{
	color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

Su WordPress :

Inseriamo quindi la classe che abbiamo istanziato con il nome di  “insta-colore” all’interno dell’icona di Font Awesome, quindi il risultato finale nell’ HTML sarà :

<i class="fab fa-instagram fa-3x insta-colore"></i>

Adesso dovresti vedere la tua icona di Instagram con lo stesso colore e sfumature di quella originale.

È stato utile questo articolo ?

Lasciami un commento per qualsiasi domanda o per qualche osservazione

L'articolo Colore icona Instagram Font Awesome proviene da Alessandro Albergo.

Cosa è la barra di progressione lettura ?

È semplicemente una barra di caricamento che trovi di solito in alto o in basso ad un articolo o pagina, che aumenta con l’avanzamento della lettura ( scroll ).

Proprio come quella che vedi su questo articolo in alto!

Perché dovrei averne una ?

In realtà non è niente di obbligatorio, ma una barra di progressione per la lettura, è un piccolo aiuto e un invito a scorrere la pagina fino in fondo e motiva il visitatore a leggere l’articolo fino in fondo.

Quindi oltre ad essere un’animazione carina, è anche un incentivo per l’utente a leggere tutto l’articolo e quindi restare più tempo sul sito web.

Sapevi che i visitatori di un sito impiegano solo un paio di secondi per decidere se rimanere sul sito o abbandonarlo ? È difficile mantenere alto l’interesse del lettore e catturare la sua attenzione, specialmente se si tratta di articoli lunghi.

Bene, quindi adesso che sappiamo i vantaggi di una barra di progressione lettura, possiamo scoprire come crearne una per il nostro sito web.

Barra di progressione lettura in codice

Qui ti spiegherò come creare la progress bar lettura in codice da inserire sul tuo sito web, se tu dovessi avere un sito in wordpress, potrai saltare questa parte e vedere il prossimo tutorial e i plugin da scaricare.

Vediamo subito il codice da inserire per il nostro sito web:

Il primo codice sarà in HTML e sarà semplicemente un”<div>” con una classe e un “ID” che sarà richiamato dal codice in Javascript

<div class="progressbarlettura" id="progressbarlettura"></div>

Come vedi sia la classe e sia l’ID hanno lo stesso nome per convenzione e per rendere tutto più semplice.

Supponiamo che hai un tag “article” dove all’interno hai tanti TAG  “p” e “h1 ” , bene ora quello che dobbiamo fare, sarà inserire quel codice HTML subito prima del TAG article, come in questo esempio:

<div class="progressbarlettura" id="progressbarlettura"></div>

<article>
	<h1>Titolo Articolo</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic doloribus nisi repellat officia voluptas, cum praesentium, temporibus distinctio quos. Facilis suscipit, consectetur labore optio quia beatae magni dolores iusto alias iste, in repellat adipisci aliquid cumque earum asperiores. Eligendi sint aperiam facilis quos</p>
</article>

Ora creiamo il foglio di stile CSS , e inseriamo il codice per la nostra progress bar :

.progressbarlettura {
    background: yellow;
    position: fixed;
    top: 0;
    bottom: auto;
    left: 0;
    width: 0%;
    height: 5px;
    z-index: 1000;
}

Come vedi il codice, creerà la Barra di progressione lettura di colore giallo, puoi cambiare colore inserendo il “codice colore” al posto di “yellow”.

Vediamo il codice in Javascrip da incorporare nel nostro sito web:

let prog = document.getElementById('progressbarlettura');

let body = document.body,
    html = document.documentElement;

let height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);

const setProgress = () => {
   let scrollFromTop = (document.documentElement.scrollTop || body.scrollTop) + html.clientHeight;
   let width = scrollFromTop / height * 100 + '%';

   console.log('scroll', html.clientHeight, body.scrollTop);

   prog.style.width = width;
}

window.addEventListener('scroll', setProgress);

setProgress();

Bene, adesso che avrai importato tutto, potrai vedere la tua barra di progressione lettura visibile e animata durante lo scorrimento del tuo articolo !

Barra di progressione lettura con WordPress

Vediamo come poter avere la nostra barra di progressione lettura in maniere davvero semplice, con l’utilizzo dei plugin per WordPress.

Il primo plugin che possiamo utilizzare è Worth the Read mentre il secondo è Reading Progressbar .

Possiamo utilizzare uno dei 2, sono davvero molto simili ed è possibile modificare il colore e lo stile della barra di caricamento in entrambi.

Se dovessi installare Worth the Read, troverai una volta attivato il plugin, la voce nel menù della tua Daschboard altrimenti con Reading Progressbar verrà aggiunta la voce nel menù delle impostazioni della Dashboard.

Worth The Road :

Reading Progressbar :

Forse Worth the Read è più completo, ma in realtà io punterei più su una scelta di compatibilità.

Prova ad installare uno dei due, se non ci dovessero essere errori e riesci a visualizzare tutte le immagini nei tuoi articoli, allora potrai tenerlo installato, altrimenti potrai utilizzare l’altro .

Che ne pensi ? È stato utile questo articolo ?

Lasciamo un commento se non vai troppo di fretta

L'articolo Barra di progressione lettura Articolo e pagina web proviene da Alessandro Albergo.

Cosa è la Favicon di un sito web ?

La Favicon, è quel logo che vedi sulla tab del tuo browser quando navighi su un sito web :

Perchè dovresti averne una ?

Perchè le favicon non sono direttamente responsabili dell’ottimizzazione dei motori di ricerca; tuttavia sono indirettamente responsabili perché sono uno strumento importante per migliorare il posizionamento sui motori di ricerca. Una favicon ( icona ) ti offre un vantaggio rispetto ad un sito web che non ne utilizza una.

Quindi ora che abbiamo capito l’importanza, vediamo subito come procedere per poterne creare una in maniere semplice:

Come primo passo, procurati il tuo logo, e ridimensionalo con le dimensioni 32×32 px (dimensione consigliata ).

Ora inserisci la favicon  “logo.png” (il nome non è importante) in una nuova cartella (che chiameremo IMG per convenzione) all’interno del progetto del tuo sito.

Adesso andiamo ad inserire nel tag “<head></head>” del tuo sito (che di solito è la prima parte che dovresti trovare nel codice ) la seguente stringa:

<link rel="icon" type="image/png" href="/IMG/logo.png">

Bene adesso ricaricando la pagina dovresti vedere la tua icona su ogni tab che raffiguri il tuo sito web.

Invece come inserisco la Favicon per il sito web in WordPress ?

Niente di più facile! Andiamo sul nostro sito in WordPress , effettuiamo l’accesso e cliccando personalizza, vedremo la voce denominazione del sito all’interno del menù, che ci permetterà di impostare la nostra favicon .

Ora non ti resta che caricare il logo da te creato e ridimensionarlo nel passaggio successivo (se dovesse esserci il bisogno) con WordPress .

Come vedi per WordPress è davvero molto facile! Ora potrai impostare la tua icona personalizzata sul tuo sito web!

È stato utile l’articolo?

Lasciamo un commento per farmelo sapere

L'articolo Aggiungere Favicon (icona – logo) sul sito web proviene da Alessandro Albergo.

Ciao, oggi ho deciso di condividere i vari metodi html personalizzati, per creare un link di email sul proprio sito .

Per quanto io preferisca (come già accennato in qualche articolo scorso ) , il form di contatto rispetto il link email, penso che conoscere questi metodi potrebbe essere sempre utile.

Attributo MAILTO

L’attributo “mailto” , è la parola chiave che puoi scrivere all’interno di un “ href ”, creando link collegato ad un indirizzo e-mail per far si che l’utente, cliccandoci sopra, possa aprire il proprio client di posta per scrivere una mail all’indirizzo specificato nel link stesso.

ES:

<a href="mailto:iltuoindirizzoemail@email.it">Invia email </a>

Come vedi, in questa maniera andiamo a creare un link che al click, il browser creerà una nuova email con l’indirizzo specificato come destinatario (in questo caso iltuoindirizzoemail@email.it).

Quindi per creare un semplice link di invio email, ti basterà copiare e incollare quel codice nell’ html sostituendo “iltuoindirizzoemail@email.it” con la tua email.

Per WordPress potrai scrivere anche semplicemente mailto:iltuoindirizzoemail@email.it all’interno della generazione link:

Come vedi in WordPress non hai bisogno di scrivere il codice, ti basta sottolineare la parola e fare click sul bottone link (quelle 2 parentesi con il trattino al centro, che in realtà dovrebbe essere una catena ).

Abbiamo visto come creare un invio al click semplice, ma se volessimo personalizzarlo ?

Niente di più facile!

Aggiungere un secondo indirizzo:

Per esempio, se volessimo inviare l’email a più indirizzi, ti basterà aggiungere una virgola dopo il primo e scrivere il secondo :

<a href="mailto:iltuoindirizzoemail@email.it, ilmiosecondoindirizzoemail@email.it">Invia email </a>

Aggiungere un indirizzo in conoscenza:

Per inserire un indirizzo in conoscenza (CC) ci basterà scrivere subito dopo la prima email il punto interrogativo (?) seguito da “cc=” e l’indirizzo:

<a href="mailto:iltuoindirizzoemail@email.it?cc=ilmiosecondoindirizzoemail@email.it">Invia email </a>

Posso creare l’oggetto ?

Certamente! In questo caso scriveremo la solita email nel link, seguita da “&subject=Quello che ci voglio scrivere”, es:

<a href="mailto:iltuoindirizzoemail@email.it&subject=Preventivo sito web">Invia email </a>

Chiaramente potrai combinare più soluzioni, come per esempio inviare l’email html a più persone con l’oggetto preimpostato e un indirizzo in conoscenza:

<a href="mailto:iltuoindirizzoemail@email.it, ilmiosecondoindirizzoemail@email.it?cc=emailcc@conoscenza.it&subject=Preventivo sito web">Invia email </a>

È stato utile l’articolo ?

Lasciamo un commento per farmelo sapere

L'articolo Link email in HTML proviene da Alessandro Albergo.

Ultimamente, dopo aver visto alcuni video da cui ho preso ispirazione, ho pubblicato un post su Instagram in cui provavo a replicare il logo di Netflix in codice html e css.

Il risultato finale del logo era davvero molto simile a quello originale del famigerato marchio cinematografico, infatti ne sono rimasto così sodisfatto da creare un video e ora condividere tutto il necessario per poterlo riprodurre.

PS: Per visualizzare il post pubblicato su instagram clicca qui.

Bene, come al solito ho cercato di ridurre tutto in pochi passaggi e rendere la guida facile facile, quindi vediamo subito come creare il codice html e css per riprodurre appunto il logo di Netflix.

Iniziamo con l’html, ti basterà creare un file con il blocco note, inserire bil codice riportato e salvarlo con estensione html (nomefile.html) dentro una cartella:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Netflix Logo</title>
</head>

<body>
    
    <div class="logo">
        <div class="netflix">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <h3>Netflix</h3>
    </div>

</body>

</html>

Adesso all’interno della stessa cartella, creiamo un altro dile chiamato style.css e incolliamoci il seguente codice:

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: centet;
    align-items: center;
    background: black;
    height: 100vh;
}

h3{
    color: white;
    position: absolute;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 60px;
    text-transform: uppercase;
    font-family: arial;
    letter-spacing: 12px;
    font-weight: 800;
}

.netflix{
    position: relative;
    width: 350px;
    height: 500px;
}

.netflix span{
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
}

.netflix span:nth-child(1){
    background: #b00612;
    left: 0;
}

.netflix span:nth-child(2){
    background: #e50810;
    left: 0;
    transform-origin: top;
    z-index: 1;
    transform: skewX(25deg);
    box-shadow:  0 0 40px rgba(0,0,0,1);
}

.netflix span:nth-child(3){
    background: #b00612;
    right: 0px;

}

Salviamo tutte le modifiche. Ora aprendo il tuo file .html con Chrome o con Firefox, vedrai il logo creato!  Ricordati di lasciare i file in una cartella, altrimenti dovrai cambiare il path del foglio di stile (.css).

Ti è piaciuto questo articolo ?

Lasciami un commento per farmelo sapere

L'articolo Logo Netflix in codice Html e CSS proviene da Alessandro Albergo.

Sei nel posto giusto per poter scoprire 4 strumenti fondamentali che DEVI avere nella tua cassetta degli attrezzi!

L’estensioni che sto per elencarti sono disponibili per Google Chrome e anche per Firefox.

Il primo add-on che uso quotidianamente, è ColorZilla (Chrome) – ColorZilla (Firefox) ,  utilissimo per identificare il colore sulle pagine Web . Con questo strumento hai la possibilità di scoprire il codice colore che ha ogni singolo elemento di un sito, crearne uno tuo e vedere la cronologia di colori usati. Uno strumento di cui non potrai più farne a meno :

Il secondo strumento molto utile che utilizzo è WhatFont (Chrome) – WhatFont (Firefox) , utilissimo per riconoscere i fonts sulle pagine web , e poter ottenere il nome esatto per poter poi scaricare lo stesso stile di scrittura scoperto:

Il terzo strumento che ti consiglio è Fake Filler (Chrome) – Fake Filler (Firefox) , ottimo in campo di testing sui form.

Utile per quando provi a riempire durante uno sviluppo i tuoi form di contatto (o altri campi) per capire se funziona tutto alla perfezione.

Non dovrai più scrivere tante volte all’interno dei campi durante il tuo sviluppo. Il plugin riconosce il form e lo riempirà con parole in latino, date casuali o numeri di telefono fake:

Ultimo ma non per ordine di importanza è uno strumento molto conosciuto, si chiama Wappalyzer (Chrome) – Wappalyzer (Firefox) , ottimo add-on per chi ama capire quali strumenti sono stati utilizzati per sviluppare un website.

Basta cliccare sulla sua icona per avere un reso-conto di tutti i plugin e librerie utilizzati. Inoltre potrai capire anche se il sito è stato sviluppato con un CMS o meno :

Adesso potrai divertirti a scoprire come è stato realizzato qualsiasi sito web e raccogliere informazioni per creare lo stile che ti piace !

È stato utile questo articolo ??

Lasciami un commento

L'articolo Estensioni Chrome e Firefox per il Web proviene da Alessandro Albergo.

Stai cercando una guida su come creare un effetto per cambiare il background durante lo scroll in una tua pagina web ? Sei nel posto giusto!

In questa guida spiegherò come realizzare questo fantastico effetto grazie a l’utilizzo del codice Jquery, infatti sarà possibile realizzarlo su qualsiasi sito, anche su un CMS come WordPress.

PS: Trovi il video in fondo alla pagina.

Mi concentrerò però sulla guida in WordPress, visto che potrei dare per scontato che per chi sviluppi senza l’utilizzo di un CMS, sappia già come incorporare il codice nel proprio sito.

Inoltre per creare questo effetto, incorporerò i miei snippset (righe di codice) all’interno del famoso page builder Elementor , vista la sua possibilità di poterli inserire all’interno della pagina .

Quindi il primo passo da fare, è scaricare il nostro plugin (anche la versione Free va bene) dal sito o direttamente dal solito “aggiungi nuovo plugin” di WordPress.

Ora andiamo a creare una pagina nuova con Elementor (io utilizzerò per la guida la modalità Elementor Canvas che rende la pagina totalmente vuota).

Aggiungiamo la nostra prima sezione, e inseriamo all’interno l’elemento “html” in cui andremo ad inserire il codice:

Bene adesso inseriamo nel nostro primo blocco html, l’ attivatore jquery che farà funzionare il nostro codice:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Il prossimo passo ora, è creare 2 sezioni abbastanza grandi per far si che la pagina abbia uno scroll.

Io per esempio ho inserito le parole Giallo e Blu (il colore dello sfondo che vedrai sarà bianco, non cambiarlo in giallo perché avverrà tutto automaticamente).

Infine creiamo un altro blocco “html” in fondo alla pagina in cui inseriremo il codice che ho creato per te:

<script>
    $(document).ready(function(){       
            var scroll_pos = 0;
            $(document).scroll(function() { 
                scroll_pos = $(this).scrollTop();
                if(scroll_pos > 280) {
                    $("body").css('background-color', 'blue');
                } else {
                    $("body").css('background-color', 'yellow');
                }
            });
        });
</script>

Come vedi il codice ha: if(scroll_pos > 280) :  Questo ci indica che, superando un’altezza di 280px, il “body” (il corpo della pagina) avrà un colore blu, altrimenti “else” un colore giallo. 

Quindi se quello che stai creando dovesse aver bisogno di uno scroll maggiore prima di cambiare colore, dovrai aumentare il valore di “280” .

Adesso dovresti vedere la tua pagina simile a questo screenshot:

Bene, salviamo il tutto e godiamoci l’effetto sulla pagina Web!

Che ne pensi ? È stato utile l’articolo ?

Lasciamo un commento per farmelo sapere

L'articolo Cambiare Background durante uno scroll – Web proviene da Alessandro Albergo.

Ciao oggi vediamo come creare un form di contatto per WordPress in maniera davvero semplice.

Il Form di contatto è il modulo che permette a chi visita il tuo sito di contattarti, scrivendo il suo messaggio, proprio come un’email.

Ma perché allora creare un form di contatto ? Potrei mettere un’email semplicemente sulla mia pagina.

In realtà lo puoi fare e a dire la verità io sono uno di quelli che preferirebbe mettere direttamente l’email in modalità “link” , in maniera tale che cliccando, si apra la casella di posta elettronica con la mia email impostata come destinatario.

Esempio link email:

<a href="mailto:indirizzoemail@email.it" >indirizzoemail</a>

Ma perché come la maggior parte di chi ha un sito internet allora non lo fa ?

In realtà i motivi più comuni sono 2:

• Il primo è per il solito e dannato SPAM !

Devi sapere che ci sono i cosiddetti Bot/Hackers che girano per il web, ed oltre che cercar di estrapolare informazioni o provare ad accedere al tuo pannello di amministrazione provando gli username e password comuni, cercando l’email di ogni sito web, per poi provare a fare spamming o phishing sull’indirizzo trovato .

• Il secondo motivo invece, è per non lasciare l’email a qualsiasi utente

Immagina di avere un sito web molto visitato, e immagina di ricevere ogni secondo email da tutti gli utenti che ti contattano per delle informazioni o perché sei un Influencer. Non riusciresti a gestire tutti gli utenti, se conti anche tutti gli spam che ti arrivano in maniera esponenziale.

Invece con il form di contatto sul tuo sito (in WordPress o no), potresti integrare un modulo che non rilascia la tua email, ma comunque è in grado di inoltrare il messaggio nella tua casella di posta, oltre a proteggerti dagli spam con delle integrazioni.

Poi chiaramente, potrai rispondere all’utente e quindi lasciargli la possibilità di mettersi in contatto con te senza utilizzare il form.

Bene ora che abbiamo analizzato perché è utile avere un form di contatto, vediamo subito qual’ é il plugin che fa per noi!

Il plugin che consiglio è Contact Form 7 , è il numero 1 dei plugins e ha la possibilità come ti ho detto qualche paragrafo prima, di integrare i sistemi per lo spam.

Quindi scarichiamolo o installiamolo direttamente da WordPress .

Finita l’installazione e attivato il plugin (Contact Form 7 – CF7) , noterai nel menù della tua Dashboard la voce contatto:

Adesso cliccando “Contatto”, noterai che si aprirà un pannello con un modulo già creato, clicchiamo su modifica e vediamo come personalizzarlo :

Come vedi dall’immagine, la costruzione del form di contatto è molto semplice, in alto hai a disposizione dei bottoni che ti generano i  campi, checkbox, menù a discesa (il seleziona), pulsanti di accettazione ecc.. Puoi aggiungere tutti gli elementi di cui hai bisogno.

PS: Cancellando l’asterisco in un campo, come per esempio [email* your-email] , lo renderai facoltativo e non più obbligatorio.

Adesso vediamo la sezione Mail

Come vedi è già tutto compilato.

Di default il messaggio arriverà al tuo indirizzo email registrato su WordPress, ma se non volessi utilizzare quell’ indirizzo potrai sostituire [site_admin_email] con altro (mioindirizzoditesting@gmail.com). Lo stesso vale per tutti gli altri input da personalizzare.

Dove leggi [your-message], [your-email] , [your-name] e così via, sono le informazioni di chi ti sta contattando, quindi almeno che tu non voglia ricevere un email bianca (vuota) , non ti consiglio di eliminarli.

Quello che ti consiglio invece, è di creare dei form semplici e senza troppi obblighi.

Per esempio, cerca di non rendere obbligatorio il numero di telefono o altri moduli aggiuntivi che potrebbero infastidire, cerca di rendere tutto molto semplice e veloce .

Personalizza il pulsante “Invia”. Cerca di scriverci qualcosa, anche un semplice “Invia il messaggio”, tenderà a frenare meno il procedimento della richiesta, molte volte l’utente si sente frenato nell’ inviare il messaggio, una personalizzazione potrebbe aiutare ad ispirare più fiducia.

Hai anche la possibilità di inviare un’email di risposta automatica cliccando la casella “mail (2)” , lì si aprirà una pagina simile alla precedente, dove potrai scrivere la risposta automatica anche in HTML se dovessi saper utilizzare il linguaggio.

Come vedi ci sono tutti i campi , quello che ti consiglio, è di impostare l’email “Da” scrivendo noreply@miosito.it , in questa maniera sarà più intuibile da parte dell’utente che si tratta di un email automatica a cui non è possibile rispondere.

Contact Form 7 ti dà anche la possibilità di personalizzare i messaggi di errore o di avvenuto invio del messaggio, nella sezione “messaggi”, come vedi è un plugin davvero molto valido.

Bene ora non ti resta che salvare tutte le tue modifiche e implementare lo Shortcode che ti viene mostrato nella pagina principale del plugin:

Copialo e incollalo nella pagina in cui vuoi che venga mostrato.

Adesso avrai il tuo form di contatto pronto da essere utilizzato! Se hai bisogno dell’integrazione per lo Spam, trovi tutte le indicazioni sul mio articolo riguardante Google reCAPTCHA e l’integrazione con Contact Form 7 .

È stato utile questo articolo ?

Lasciami un commento se non vai troppo di fretta

L'articolo Form di contatto per WordPress proviene da Alessandro Albergo.