TutorialRealizzare un sito web

Crea il tuo sito web efficace e professionale con WordPress

Realizzare un sito web in 3 ore con WordPress é possibile. Abbiamo realizzato questa lunga guida, compresi di video tutorial passo-passo – tratti dal nostro corso Il Tuo Sito Immediato – che abbiamo deciso di dare gratuitamente, per permetterti di realizzare un sito web per la tua azienda o attività in totale autonomia.

Che cos'è WordPress

WordPress è un Sistema di gestione dei contenuti, chiamato anche CMS (dall’inglese Content Management System), ovvero un software web, pensato inizialmente per creare e gestire blog in modo semplice e intuitivo ma che negli anni è stato migliorato a tal punto da diventare uno dei CMS più utilizzati al mondo.

È un software libero senza limiti di licenza, e viene costantemente aggiornato dalla sua grandissima comunità di sviluppatori che ti forniranno supporto per qualsiasi problematica. Per questo motivo WordPress è completamente gratuito.

Con questo fantastico CMS potrai creare qualsiasi tipologia di sito web, da quello personale a quello istituzionale, da quello aziendale all’e-commerce, senza dover necessariamente conoscere i linguaggi di programmazione, seppur importanti per i livelli più avanzati.

Grazie al pannello di controllo potrai creare pagine, menu, articoli, personalizzare l’aspetto grafico e tanto altro.

Per estendere le sue funzionalità e la personalizzazione possono essere implementati nel CMS degli elementi aggiuntivi, ovvero i Plug-in e i Temi.

I Plug-in sono dei mini software aggiuntivi, o meglio delle porzioni di codice, che migliorano ed estendono le funzionalità di base; ne esistono davvero tanti e sono direttamente scaricabili, in forma gratuita, dal pannello di controllo o dal sito www.wordpress.org.

Non sempre si rivelano quelli giusti, proprio perché quella di WordPress è una community enorme e spesso si rivelano fatti male, poco funzionali o di qualità scadente; starà a te, quando sarai indipendente, testarli e capire se sono di qualità.

Esistono tantissimi siti, più o meno autorevoli, che vendono Plug-in di ogni tipo, ma spesso quelli scaricabili da WordPress gratuitamente, possono estendere le loro funzionalità acquistando la versione completa.

Per poter personalizzare il suo aspetto grafico, WordPress necessita di Temi, che anch’essi, come i Plug-in, sono dei “mini software” installabili nel CMS.

Non solo permettono di personalizzare tutta la veste grafica del nostro sito ma ne aumentano anche le funzionalità, ampliando ulteriormente le sue potenzialità estetiche.

Anche in questo caso ne esistono gratuiti e a pagamento.

Prima di poter costruire un qualsiasi sito web ci serve però uno spazio nel quale inserirlo.

Cosa sono i Domini e gli Hosting

Nello scorso episodio abbiamo accennato che abbiamo bisogno di uno spazio sul quale costruire un sito web. Ma in che senso?

Ti faccio un esempio: Voglio costruire una nuova casa per poterci andare ad abitare. Naturalmente prima di poterlo fare ho bisogno di un terreno sul quale costruirla.

Questo è proprio quello che capita quando vuoi realizzare un sito web.

Infatti avrai prima la necessità di avere uno spazio dove poterlo realizzare, ovvero l’Hosting.

L’Hosting è fornito dal Provider, ovvero un’azienda che fornisce servizi web, che ci da a disposizione dello spazio sui propri server.

In poche parole, un sito web, non è nient’altro che un insieme di file contenuti dentro a delle cartelle, a loro volte contenute dentro a un computer molto capiente chiamato, appunto, Server.

Per poter visualizzare il sito web, però, è necessario disporre di un indirizzo.

Un altro esempio pratico: Per invitare i tuoi amici nella tua nuova casa dovrai comunicargli l’indirizzo, che in questo caso è chiamato Dominio.

Il dominio non è nient’altro che il nome univoco del tuo sito seguito da un’estensione, come ad esempio .it o .com.

Avrà la forma “www.iltuodominio.estensione“.

Come detto prima il dominio è univoco e quindi non ce ne possono essere due uguali, e dal momento che ci sono 966 milioni di siti web al mondo è sempre più difficile trovarne liberi.

Però grazie a tutte le estensioni disponibili è possibile usare lo stesso dominio che è già esistente in .com, per esempio, acquistando un estensione .biz, .cloud e così via.

Vedremo adesso come scegliere l’hosting migliore.

Acquistiamo l'Hosting e il Dominio

Come accennavo nell’episodio precedente, il Provider è un’azienda che si occupa di erogare servizi internet come appunto Hosting, domini, mail, pec etc.

Ce ne sono moltissimi in rete e la scelta non è sempre semplice. Ci sono diversi fattori da tenere in considerazione: prestazioni, supporto e il costo.

Il costo è volutamente messo alla fine perché le prestazioni e il supporto sono dei fattori estremamente importanti per determinare la scelta del nostro Hosting.

Infatti è inutile avere un hosting che costa poco ma che rende il tuo sito estremamente lento o addirittura non funziona e che magari quando hai bisogno di supporto tecnico ti rispondono dopo giorni.

Ma non è questo un corso per delle recensioni su tutti i Provider, perciò ti consiglierò quello che secondo me è il migliore.

Ti consiglio Siteground, velocissimo e con un supporto tecnico sempre a disposizione. Personalmente lo utilizzo per tutti i miei clienti.

Vediamo ora come acquistarlo.

Vedi il link qui sotto? Premilo e ti ritroverai nella pagina di Siteground.

Premi qui sotto per andare su Siteground

Ti verranno presentate le 3 tipologie di hosting, StartUp, GrowBig e GoGeek e in ciascun box sono riportate le caratteristiche principali di ciascuna versione.

Per il primo anno le 3 versioni sono scontate del 50% ma per un progetto su WordPress di grandezza normale è più che sufficiente la versione StartUp. Sentiti comunque libero di verificare con più precisione tutte le caratteristiche di ciascun hosting che potrai trovare poco più sotto.

Per acquistare l’hosting StartUp premi il bottone “Acquista” nel box dedicato. Potrai ora inserire il dominio che hai pensato per il tuo sito, gratuito per il primo anno, che verrà collegato all’hosting.

Premi su “Procedi“. Nella pagina successiva ti verrà confermato se il tuo dominio è disponibile, nel caso in cui non lo sia ti verrà richiesto di inserirne uno differente.

Ora, Compila tutti i campi richiesti nella sezione account.

Compila i dati relativi al proprietario dell’account.

Nella sezione Privacy Dominio scegli se mantenere le informazioni del proprietario parzialmente visibili o completamente visibili, ti consiglio l’opzione “Parzialmente Rilevato”.

Inserisci ora la carta che vuoi usare per pagare. Poco più sotto nella pagina verrà riepilogato il servizio scelto, seleziona il periodo di contratto che vuoi pagare anticipatamente, 12, 24 o 36 mesi.

Se ti interessa puoi acquistare SG Site Scanner che controllerà in automatico il sito web in cerca di codice maligno.

Infine troverai il prezzo finale dell’hosting, premi “Paga Subito” per terminare l’acquisto.

Ti verrà comunicata la corretta creazione dell’account Siteground. Premi ora su “Procedi alle impostazioni dell’account” per configurarlo.

Seleziona “Inizia nuovo sito” e scegli WordPress.

Ti verranno richiesti i dati inerenti all’installazione di WordPress, inserisci quindi la mail dell’amministratore, il nome utente e la password.

Premi su “Conferma” e poi ancora ancora “Conferma”.

Seleziona la Checkbox e premi su “Installazione completata”.

Una volta confermato che l’account è pronto premi su “Procedi all’area clienti”.

Eccoci nel tuo account Siteground.

Per vedere l’installazione di WordPress premi su “Hosting“. Come puoi vedere troverai il dominio sul quale è stato installato il CMS e il pulsante per accedere all’area di amministrazione.

Accesso a WordPress

WordPress si presenta in due vesti: una parte visibile al pubblico e una visibile solo all’amministratore (o a chi ha accesso al pannello di controllo). La parte visibile al pubblico viene detta Front-end mentre il pannello di controllo, di cui le impostazioni e le personalizzazioni si rispecchieranno nel front-end, viene detto Back-end.

Avendo cliccato precedentemente sul pulsante per accedere al pannello di controllo, quello che si presenta è il login di WordPress.

Inserisci Username e Password per accedere al pannello di controllo. Andiamo a scoprire le funzionalità principali che useremo per costruire il tuo sito.

LA BACHECA: Questa sarà la sezione che vedremo ogni volta che effettueremo l’accesso al Back-end. Si suddivide in Home e Aggiornamenti. L’Home è suddivisa a sua volta in 4 parti:

  • IN SINTESI: Un piccolo riepilogo di quanti articoli e commenti ci sono sul nostro sito. Inoltre mostra il tema in uso.
  • BOZZA RAPIDA: Ti permette di scrivere una bozza di quello che diventerà poi un articolo.
  • ATTIVITÀ: Qui sono mostrati gli ultimi articoli e commenti inseriti.
  • EVENTI E NOTIZIE SU WORDPRESS: In questa sezione vengono riportate le notizie inerenti a WordPress.

La sezione “Aggiornamenti” mostra tutti gli aggiornamenti disponibili che devono essere fatti. WordPress, Plugin e Temi.

Nella parte superiore viene riportato l’aggiornamento di WordPress che in questo caso è già aggiornato all’ultima versione.

Troviamo la sezione degli aggiornamenti dei plugin, che andremo a scoprire in seguito. Come vedi un plugin è da aggiornare, selezionalo e premi su “Aggiorna plugin“.

Premi su “Ritorna alla pagina degli aggiornamenti di WordPress” per tornare indietro e potrai notare che ora tutto è aggiornato all’ultima versione.

PAGINE: Accedendo alla sezione “Pagine” potrai notare che ci sono due pagine create in automatico. La prima è solo una pagina d’esempio e puoi cancellarla, per farlo passa il mouse sopra la pagina in questione e seleziona “Cestina”.

La seconda è la pagina Privacy Policy che ci servirà in seguito per gestire l’informativa della Privacy. In alto alla pagina troverai il pulsante per creare una nuova pagina che potrai trovare anche nel menù.

ARTICOLI: Gli articoli sono delle piccole pagine che verranno visualizzate nella sezione Blog del nostro sito, qualora prevista.

Qual’è però la differenza tra articoli e pagine? Gli articoli possono essere visti come gli articoli che compongono una pagina di un quotidiano mentre le pagine compongono la struttura del sito.

Troveremo anche qui un articolo d’esempio che potremo cancellare e in alto troveremo il tasto per creare un nuovo articolo o a sinistra nel menù.

MEDIA: La sezione Media contiene una libreria contenente tutti i file come video ed immagini che abbiamo inserito all’interno del nostro sito. Possiamo inserire i file attraverso il pulsante “Aggiungi nuovo” presente anche nel menù.

PLUG-IN: Come dicevamo nel primo episodio, i Plug-in sono dei software interni alla nostra installazione di WordPress che estendono le sue funzionalità.

Si suddivide in 3 parti anche se una non è di nostro interesse:

Nella sezione “Plugin installati” vedrai tutti i plug-in installati e potrai disattivarli, attivarli, cancellarli e potrai aggiungerne dei nuovi. Per installare un nuovo plugin povrai premere sul tasto “Aggiungi nuovo”. Ricercando il plugin desiderato potrai notare che ce ne sono tantissimi gratuiti facilmente installabili attraverso il tasto “Installa ora”. Potrai decidere, eventualmente, di installarli caricandoli direttamente dal tuo pc.

TEMI: Abbiamo parlato anche dei Temi. Permettono di estendere le funzionalità di personalizzazione grafica di WordPress. Di default WordPress ne possiede alcuni ma potrai facilmente cercarne diversi cliccando su “Aggiungi nuovo”. Abbiamo quindi la possibilità di utilizzare i temi gratuiti forniti dalla community di WordPress oppure possiamo scegliere di acquistare uno professionale da uno degli store online.

MENÙ: I menù sono un altro degli aspetti principali di qualsiasi sito web. Permettono infatti alle persone di navigare il nostro sito. Potrai quindi collegare le pagine create, il blog contenente i tuoi articoli e altre funzionalità.

Come acquistare un tema su Themeforest

Ci sono tantissimi temi disponibili nella directory di WordPress ma la maggior parte non sono di alta qualità né dispongono di particolari funzionalità. Per questo motivo utilizzare un tema Premium è la soluzione perfetta per realizzare un sito professionale.

Uno dei negozi online più importanti al mondo che si occupa di plugin, temi e tanto altro, è Themeforest. Anche qui ci sono tantissimi temi disponibili, per i più svariati usi, ma ti voglio consigliare un tema che ho utilizzato spesso per i siti dei miei clienti.

Si chiama The7 ed è da diverso tempo uno dei temi più venduti proprio perché si presta a qualsiasi tipo di progetto.

Per averlo clicca sul link sotto il video e procederemo assieme, passo per passo, all’acquisto.

Premi qui sotto per andare su Themeforest

Una volta cliccato il link che ti ho fornito ti troverai nella pagina principale del tema.

Al momento di questa guida, The7 è venduto a un prezzo promozionale di 39$.

Per procedere premi su “Buy License” e poi “Add to cart”.

Premi su “Go to checkout” e verrai reindirizzato alla pagina di scelta del metodo di pagamento.

Hai 3 opzioni, carta di credito o debito, Paypal o Envato Credit.

In questo  per facilità  userò Paypal in quanto ho un account collegato al mio conto personale. Ma potrai comunque pagare con una carta se non hai un conto Paypal.

Premi su “Checkout with Paypal” e successivamente ti verrà chiesto se accedere al conto o pagare con una carta.

A te la scelta.

Se hai un conto accedi inserendo le credenziali. Ti verrà poi mostrato il riepilogo; premi su “Paga adesso”.

La transazione verrà eseguita correttamente come ti verrà confermato.

Potrai scaricare il file premendo sul link in evidenza oppure dal menù, premendo su download.

Scarica il file contenente il numero della licenza e il file del tema.

Vuoi una mano col tuo sito web? Siamo a disposizione qui per te!

Personalizzazione

Ora cominceremo a personalizzare il tuo sito. La prima cosa che dovrai fare è installare il tema acquistato. Per farlo vai su “Aspetto” e clicca su “Temi”.

Successivamente premi su “Aggiungi nuovo”. Dal momento che quello che utilizzerai è un tema acquistato dovrai inserirlo dal tuo pc, perciò seleziona in alto a sinistra il pulsante “Carica tema”.

Apparirà di conseguenza il pulsante sfoglia che ti permetterà di selezionare il tema direttamente dal tuo pc.

Seleziona il file del tema, premi su “Apri” e poi “Installa ora”.

Alla conferma dell’avvenuta installazione attiva il tema.

Si aprirà la finestra principale del tema in cui dovrai inserire il codice prodotto relativo al tema contenuto nel file testo che hai scaricato insieme al tema.

Copia il codice all’interno del campo Purchase Code.

Seleziona la checkbox per confermare la presa visione che il tuo sito e il tuo codice d’acquisto verranno salvati dal produttore del tema.

Premi infine su “Register Theme”.

Una volta registrato il tema avremo la possibilità di utilizzare i plugin premium dati insieme a The7. Per installarli premi su “Plugins” all’interno del menù del tema.

Premi la checkbox mostrata per selezionare tutti i plugin, poi deseleziona Woocommerce che per questo progetto non servirà.

Dal menù a tendina premi su “Install” e poi “Applica”.

Ti verrà confermato che tutti i plugin sono stati installati correttamente.

Ora inseriremo dei plugin molto utili per il corretto sviluppo del tuo sito.

Durante la fase di costruzione del tuo sito, per evitare che qualche cliente possa accedere prima che questo sia ultimato, ti consiglio di utilizzare un plugin per inserire una pagina di manutenzione.

In questo modo i clienti vedranno una pagina in cui si comunica che il sito è in costruzione.

Vai quindi su “Plugin” e clicca su “Aggiungi nuovo”. In alto a destra inserisci la parola “Maintenance” e ti verranno mostrati i risultati di ricerca correlati alla parola inserita.

Il plugin che devi installare è chiamato semplicemente “Maintenance”; premi quindi su “Installa ora”. Al termine dell’installazione potrai attivarlo premendo il pulsante “Attiva”.

Troverai il collegamento al plugin direttamente nel menù principale.

Premendo verrai portato alla prima pagina del plugin in cui potrai cominciare a personalizzarlo secondo le tue preferenze.

Come puoi notare di default sono già inserite alcune frasi. In alto trovi il pulsante che identifica che il plugin è attivo mentre poco più sotto troverai diverse impostazioni per la personalizzazione della pagina, tra cui una frase per il copyright del sito.

Una volta apportate le modifiche che ritieni da fare salva premendo su “Salva cambiamenti”.

Guarda il tuo sito utilizzando la modalità in incognito per emulare l’accesso di un visitatore e,così, apparirà la pagina di manutenzione.

Un altro plugin molto utile che ci servirà per indicizzare il nostro sito nei motori di ricerca è “Simple WP Sitemap”. Grazie ad esso potremo creare la sitemap del nostro sito necessaria per mostrare la struttura a Google e Bing.

Installalo e attivalo come hai fatto precedentemente.

Troverai il plugin su “Impostazioni”.

Verranno creati in automatico dei link della sitemap del tuo sito, uno dei quali ci servirà successivamente.

Ritorna alla sezione di inserimento dei plugin, cerca “Invisible Recaptcha” installalo e attivalo. Questo particolare plugin, che avrai sicuramente visto in qualche sito in modalità visibile, proteggerà dallo spam i tuoi form di contatto in modo invisibile.

Acccedi al plugin dal menù impostazioni dove troverai dei box in cui inserire dei particolari codici.

Per avere questi codici devi creare un account Google Recaptcha e registrare il tuo sito.

Cerca quindi “Google recaptcha” nella barra di ricerca. Apri il sito e seleziona “My Recaptcha”. Accedi con la tua mail personale di Google, che se non hai dovrai creare, e comparirà la pagina di configurazione.

Seleziona “Invisible Recaptcha”, inserisci il dominio del tuo sito, accetta i termini del servizio, deseleziona l’avviso ai proprietari e infine premi “Registrati”.

Copia quindi il primo codice chiamato “Chiave del sito” e incollalo nella casella “Your site key”, poi copia la “Chiave segreta” e incollalo nella casella “Your secret key”.

Sotto le chiavi potrai configurare la lingua del tuo sito, seleziona quindi l’Italiano.

Nella casella denominata “Badge Custom CSS” inserisci questo codice per nascondere completamente il badge di Google Recaptcha, rendendolo completamente invisibile:

.grecaptcha-badge {

display: none;

}

Salva le modifiche.

Nel menù del plugin, seleziona “WordPress”. In questa sezione potrai decidere se usare il Recaptcha su diverse funzionalità di WordPress, come login, registrazione utente, commenti e password dimenticata. In questo caso non è di nostro interesse quindi proteggeremo solo il form contatti.

Premi quindi “Contact Forms” e seleziona la protezione dei form di Contact Form 7, il plugin che useremo per creare i form di contatto del tuo sito.

L’ultimo plugin necessario si chiama “Insert headers and footers” che ti permetterà di inserire stringhe di codice ulteriore all’interno del tuo sito.

Cerca quindi il plugin nella barra di ricerca, installalo e attivalo.  Potrai trovarlo sotto “Impostazioni”.

Personalizzazione (aggiornamento)

Dopo aver realizzato questo corso é stato realizzato un aggiornamento WordPress 5.0, che vede diversi aggiornamenti importanti, tra cui l’inserimento di un nuovo strumento visuale per la modifica delle pagine, chiamato “Gutemberg“, che resta comunque molto basilare rispetto allo strumento che utilizzeremo per creare le pagine del tuo sito.

Con questo aggiornamento avremo un aspetto diverso dell’editor di pagina e questo potrebbe crearti delle confusioni; per questo ho ritenuto molto importante inserire questo aggiornamento per consigliarti di utilizzare un plugin che porta l’editor al suo aspetto originario, in modo che tu possa seguirmi in tutti i passaggi senza confonderti.

Aggiungi quindi un nuovo plugin e cerca “Classic Editor“, installalo e attivalo.

In automatico, l’editor di pagina sarà reimpostato come in origine.

Struttura del sito (parte 1)

Per realizzare questo corso ho preso come esempio di azienda il Team Web nel quale lavoro, ovvero Highway to Web (N.D.R. dal 2019 siamo diventati Il Web Team!).

Prima di cominciare a realizzare le pagine del sito, diamo un’occhiata alle impostazioni principali di WordPress.

Vai quindi su “Impostazioni”, “Generali”.

Qui potrai inserire il nome del tuo sito e il motto o slogan, se ne ha uno.

Troverai i link del tuo sito che non devi assolutamente modificare.

Sotto troverai la mail principale dell’amministratore del sito che eventualmente potrai cambiare e le impostazioni relative al fuso orario, il formato della data e il formato dell’ora.

Se hai cambiato qualche impostazione salva premendo il pulsante in fondo alla pagina.

Sempre su “Impostazioni” seleziona “Lettura”. In questa pagina è possibile selezionare la pagina principale del tuo sito, che in questo caso sarà l’Homepage, ma prima andrà creata.

Vai quindi su “Pagine” e “Aggiungi nuovo”.

Eccoci dentro l’editor delle pagine. Potrai notare diversi box in cui inserire del testo.

WordPress nasce con un editor di testo classico, ma grazie al tema installato potremo usufruire di Visual Composer, ovvero un sistema di costruzione visuale delle pagine.

Ti permetterà quindi di realizzare le tue pagine usando un editor drag’n’drop, righe, colonne e molti elementi utili che potrai trovare premendo il tasto “Backend Editor” e “Aggiungi elemento”.

Ci sono tantissimi elementi disponibili che vedremo tra poco, ma prima inserisci il nome della pagina e pubblicala per salvarla. Torniamo quindi sulle impostazioni di lettura e inseriamo la pagina Home come pagina statica.

Pagina statica definisce che la pagina principale che si vedrà accedendo all’indirizzo del nostro sito sarà una pagina specifica e non un insieme di Articoli.

Premi su “Salva modifiche”.

Torna adesso alla creazione dell’Homepage.

Premi su “Aggiungi elemento” e cerca “Riga”, selezionala e quella che verrà inserità sarà appunto una riga.

Le righe servono per creare le sezioni di una pagina e possono contenere più colonne.

Una riga può essere divisa in più colonne, fino a un massimo di sei ma può anche fungere da contenitore per più righe che sono a loro volta divisibili in colonne.

Apro una piccola parentesi per spiegarti che cos’è la Tecnologia Responsive.

Un sito Responsive è un sito web che si adatta a qualsiasi dispositivo, organizzando e spostando i propri contenuti in base al Pc Desktop, al tablet, al portatile o addirittura a una Smart Tv con cui stai navigando.

Per questo motivo le colonne sono organizzabili con un massimo di 6 parti, perchè fondamentalmente il layout responsive è diviso in maniera tale che i contenuti non si accavallino e siano sempre visibili.

In questa maniera se, ad esempio, abbiamo 4 colonne visibili una a fianco l’altra nella versione desktop, nella versione mobile saranno visualizzate una sotto all’altra.

Le colonne possono essere organizzate in 1 (riga normale), 2, 3, 4, 5 e 6 colonne.

Premi sul “+” al centro della riga per inserire un ulteriore elemento.

Scegli di nuovo “Riga”.

Come dicevamo poco fa, la riga può essere divisibile in diverse colonne, precisamente:

  • 2 colonne 1/2+1/2
  • 2 da 2/3 + 1/3
  • 3 da 1/3 ciascuna
  • 4 da 1/4 ciascuna
  • 2 da 1/4 + 1/3
  • 3 da 1/4+1/2+1/4
  • 2 da 5/6 + 1/6
  • 6 da 1/6 ciascuna
  • 3 da 1/6+4/6+1/6
  • 4 di cui 3 da 1/6 e una da 1/2
  • 5 da 1/5 ciascuna.

Imposta 1 riga intera.

La prima sezione che andremo a creare sarà la sezione “Chi siamo”.

Premi sul tasto “+” e scegli “Custom Heading” con il quale possiamo inserire un titolo.

Si aprirà la finestra in cui andrai a inserire “Chi Siamo” nel campo “Testo”.

Premi “Save Changes” per salvare le modifiche.

Seleziona ora il “Blocco testo” per inserire la descrizione relativa al chi siamo.

La finestra che ti verrà mostrata sarà fornita di un editor di testo con relative funzioni di scrittura.

Seleziona tutto il testo e inserisci il tuo personale, in questo caso io copierò il testo dal sito originale della mia azienda.

Per dare importanza ad alcune parole fondamentali nel testo usa il grassetto oltre che ad evitare la staticità della scrittura. Naturalmente in base alle tue esigenze o al tuo gusto personale puoi usare anche le altre funzioni, come ad esempio il corsivo.

Salva le modifiche.

Inserisci ora una nuova riga e dividila in 3 colonne da 1/3 ciascuna le quali conterranno le foto del team.

Aggiungi un nuovo elemento all’interno della prima colonna. Seleziona quindi “Singola immagine”.

All’interno della finestra troverai un piccolo box in cui premendo potrai selezionare l’immagine da inserire. Verrai infatti reindirizzato alla libreria del sito, visibile attraverso la scheda “Libreria media”, nella quale sarà presente soltanto l’immagine relativa al plugin della manutenzione.

Inserisci quindi l’immagine tornando sulla scheda “Carica File”, “Seleziona file” e scegli l’immagine da inserire.

Premi su “Apri” e l’immagine verrà inserita nella libreria.

Clicca su “Impostazioni immagine” per inserirla.

Poco più sotto potrai inserire la dimensione dell’immagine che potrà essere una dimensione in pixel o una dimensione standard in ordine di grandezza rispettivamente tra “Thumbnail”, “Medium”, “Large” e “Full”. Inserisci “Full” per avere l’immagine al massimo delle dimensioni.

Puoi scegliere la posizione orizzontale dell’immagine tra sinistra, centro e destra. Scegli “Center” per posizionarla al centro della colonna.

Sono disponibili molti stili relativi al contorno della foto per esempio squadrato, arrotondato, ombra 3D o circolare, che sarà l’opzione che sceglieremo in questo caso.

Ti invito a provarle tutte per trovare l’effetto che si adatti di più al tuo progetto.

Nella riga “On click action” potrai decidere se cliccando sopra la foto venga eseguita un’azione:

  • Link to large image” mostrerà l’immagine ingrandita in una finestra;
  • Apri con un link personalizzato” permetterà di inserire un link a una pagina specifica dentro o fuori il tuo sito;
  • Zoom” effettuerà un effetto zoom dell’immagine al passaggio del mouse;
  • Open magnific popup” aprirà l’immagine in un popup.

Per questa foto la mia scelta ricadrà su nessun effetto.

Troverai la sezione “Animazione CSS”: dal menù a tendina potrai scegliere uno degli effetti disponibili. In questo modo la foto, quando verrà mostrata, apparirà con l’animazione scelta.

Infine disabilitiamo la riga “Image hovers”, che applica un colore in sovrapposizione all’immagine, non è utilizzabile senza impostare l’effetto “On click actions”.

Come puoi notare ciascun elemento è provvisto di una piccola barra verde in cui sono riportati rispettivamente, modifica, duplica e cancella.

Puoi usare la seconda opzione per facilitarti il lavoro; infatti potrai duplicare gli elementi mantenendo le stesse impostazioni.

Premi “Duplica” per copiare la foto, la quale apparirà al di sotto dell’elemento copiato.

Clicca e tieni premuto sull’elemento per muoverlo e spostalo nella seconda colonna.

Premi la matita per modificare l’elemento immagine, quindi sostituisci la foto con un’altra inserendola dal tuo pc.

Ti è permesso caricare più immagini dal pc, in questo caso infatti ne inserirò 2 per fare più in fretta.

Una volta inserite, scegli l’immagine desiderata.

Le impostazioni sono le medesime del primo elemento, perciò salva.

Ripeti ora l’operazione per l’ultima immagine.

Gli elementi e le colonne che abbiamo inserito risulteranno troppo ravvicinate ma possiamo tranquillamente usare un elemento apposito per distanziarli.

Inserisci l’elemento “Empty Space” che andremo ad inserire tra il titolo e il testo e tra il testo e le colonne.

Come dimensione inserisci 30 px per il primo spazio.

Duplicalo e modifica la dimensione da 30 a 20 px.

Al di sotto delle immagini andremo ad inserire un titolo per mostrare il nome dei membri del team. Inserisci quindi un altro “Custom Heading”.

Nel testo inserirò il nome, e potrò scegliere la dimensione del carattere.

In HTML, il linguaggio di programmazione dei siti web, le dimensioni dei titoli sono rappresentate dai tag H, dal più piccolo H6 al più grande H1.

Il primo titolo che abbiamo messo per la sezione Chi Siamo è di dafault un H2, quindi il penultimo trai più grandi; per il nome sceglieremo l’H4.

Scegli l’allineamento centrato del testo.

Selezionando la checkbox “Use default font family” verranno utilizzati i caratteri, detti anche font, che sono stati scelti nelle opzioni del tema, che andremo a scoprire più avanti.

Ricordi che non abbiamo inserito questa impostazione nel primo titolo? Torna quindi sull’elemento, modificalo e salvalo.

Copia i titoli per gli altri due membri inserendo il relativo nome.

Sotto il nome di ciascuno dei membri andrà aggiunto il loro ruolo nel team.

Utilizza quindi il Blocco testo per inserire questa caratteristica.

Nell’editor hai la possibilità di scegliere la posizione del testo, a sinistra, centrale e a destra. Dal momento che il titolo è centrale useremo anche in questo caso il testo centrato.

Ripeti quest’operazione altre due volte.

É il caso di vedere come sta procedendo il nostro lavoro, quindi premi sul tasto “Aggiorna” e attendi che la pagina venga salvata.

Dopodichè premi sul link con il tasto destro e seleziona “Apri in una nuova scheda” in modo da non chiudere la pagina di modifica.

Puoi utilizzare anche “Anteprima modifiche” per vedere l’anteprima della pagina senza salvarla, utile per quando hai il sito aperto e vuoi vedere le modifiche prima di salvare la pagina.

Al momento il sito si presenta in questo modo.

Struttura del sito (parte 2)

In automatico ogni pagina viene mostrata con una sidebar, cioè la barra laterale, che per il nostro progetto, però, non vogliamo avere.

Per rimuoverla torna alla pagina di modifica dell’Homepage, scorri verso il basso e troverai la casella denominata “Opzioni della bar mobile” in cui potrai selezionare “disabilita”. Salva nuovamente e ricarica la pagina per vedere il risultato.

La sidebar è stata rimossa e il contenuto si è allargato alla dimensione massima disponibile.

Continuiamo la creazione del nostro sito.

Duplica l’elemento Empty Space e posizionalo sotto le colonne, poi inserisci una nuova riga.

Dividi la riga in 4 colonne da 1/4 ciascuna.

Prima di questa sezione però vorrei inserire un titolo per identificare meglio la sezione che verrà mostrata subito dopo.

Inserisci quindi un altro elemento titolo e scrivi “I nostri punti di forza”.

Scegli la dimensione, l’allineamento e il colore del titolo. In questo caso vogliamo un colore differente rispetto al colore che verrà assegnato in automatico ai titoli.

Scegli quindi il nero.

Seleziona i font del tema e salva.

Sposta il titolo al di sotto dell’elemento dello spazio e duplicalo, posizionandolo sotto il titolo.

Modifica l’elemento Empty Space incrementando la dimensione a 30px per aumentare la distanza tra titolo e le colonne superiori.

Cominciamo a popolare le 4 colonne che abbiamo inserito precedentemente.

Cerca l’elemento “Info Box”, che ti permetterà di inserire un’icona con titolo e testo.

Potrai scegliere l’icona tra quelle proposte o tramite un’immagine dalla libreria.

Scegli l’icona classica e seleziona una adeguata al testo che andrai a scrivere. In questo caso ho scelto questa perché andremo a parlare di una delle peculiarità di Highway to Web (N.d.r. si, mi ripeto, dal 2019 siamo Il Web Team!), cioè la velocità.

Inserisci 50 come dimensione dell’icona e scegli il suo colore. Voglio usare il colore principale di Highway to Web, il rosso, che ha un codice particolare per essere identificato. È chiamato codice HEX ed è utilizzato nel web per definire un colore, che in questo caso è #870000.

Le icone vengono proposte in 4 stili diversi:

  • Simple”, che non prevede nessun contorno o sfondo;
  • Circle Background”, che aggiungerà all’icona uno sfondo circolare;
  • Square Background”, che aggiungerà all’icona uno sfondo squadrato;
  • Design your own”, che ti permetterà di creare il tuo stile personale.

Userò la versione semplice.

Puoi anche scegliere un’animazione per rendere particolare la presentazione dell’icona.

Più in basso potrai inserire il titolo al di sotto dell’icona e la sua dimensione.

Mantenendo la scelta su “Default” verrà usata la dimensione H3.

Successivamente troverai la descrizione, ovvero una porzione di testo che verrà posizionata sotto il titolo.

Inserisci il testo e posizionalo al centro; infine salva le modifiche.

Copiando e modificando l’elemento potremo creare le altre Info Box che andranno posizionate nelle 3 colonne restanti.

Potrai quindi mantenere le stesse caratteristiche modificando soltanto l’icona, pertinente con l’argomento, il titolo e la descrizione.

Salva nuovamente e ricarica la scheda per vedere i cambiamenti.

Come puoi notare l’icona viene inserita alla sinistra del testo, mentre noi vorremmo che venga posizionata al di sotto, rendendo più omogeneo il layout.

Torna quindi sulla modifica della pagina, apri l’elemento Info Box e cerca la riga “Box Style”. Scegli tra le varie impostazioni l’opzione “Icon at top”, salva e ripeti la stessa operazione con gli altri elementi.

Come vedi ora la posizione è corretta.

Crea una nuova riga e copia il titolo per la nuova sezione “I nostri servizi”.

Inserisci quindi il titolo e salva.

Inserisci uno spazio di 30 px per distanziare il titolo e inserisci una nuova riga che andremo a dividere in 3 colonne.

Per creare una lista dei servizi useremo sempre l’elemento “Info box”.

Scegli l’icona circolare, inserisci 20 px come grandezza e il suo colore.

Inserisci solo il titolo per avere soltanto l’icona con un testo affiancato, poi scegli H4 come dimensione del testo.

Lascia le altre impostazioni così come sono e spostati nella scheda “Typography” dove potrai scegliere se modificare il colore del testo, il carattere e altre impostazioni avanzate.

Salva le modifiche.

Ripeti lo stesso procedimento per tutti i servizi.

Aggiorna e visualizza la pagina.

Per evitare la staticità degli elementi nelle pagine puoi utilizzare uno sfondo diverso per ciascuna riga.

Premi sulla matita in alto a destra alla riga che vuoi modificare e scegli la scheda “Background”.

Nel menù a tendina vedrai diverse impostazioni che ti permetteranno di scegliere un colore a tinta unita, un gradiente, un’immagine in parallasse, un video youtube o un video caricato su WordPress.

Scegli “Single color” per avere un colore a tinta unita.

Una volta scelto comparirà l’impostazione inerente in cui potrai selezionarlo.

Scegli un colore tenue che non risulti troppo invadente ma che spezzi tra lo sfondo e la sezione.

Una volta salvate le modifiche, torna al sito e ricarica la pagina.

Come puoi notare intorno alla pagina vengono mostrati degli spazi, sinonimo che la riga non è alla massima dimensione, non permettendo quindi al colore di coprire anche i margini laterali.

Per risolvere questo problema torna alla modifica della riga e nella prima sezione chiamata “Row stretch” scegli dal menù a tendina “Stretch row”, che allargherà la dimensione della riga fino ai margini massimi della pagina.

Infatti come vedi il colore ora copre anche i margini laterali.

Ora creeremo l’ultima sezione della pagina, cioè la sezione contatti.

Crea quindi una nuova riga contenente un’altra riga e dividila in due colonne.

Copia il titolo, spostalo al di sopra delle colonne e inserisci l’elemento “Empty space” con dimensione 30px.

Modifica il titolo con il nome della nuova sezione “Contattaci”.

Inserisci un blocco testo per scrivere una breve frase esplicativa del form contatti e posizionalo al centro.

Copia lo spazio e modificalo a 20px.

All’interno della prima colonna andremo ad inserire il form contatti, ma prima dovremo crearlo.

Struttura del sito (parte 3)

Per creare il form salva la pagina e vai nel menù cercando la riga “Contatti”.

Contact Form 7 fornisce un form di contatto precompilato, clicca sul nome per aprirlo.

All’interno dell’editor andranno inseriti una serie di codici che identificano ciascun campo, checkbox o menù a tendina del form.

Come detto prima, questo form è precompilato e, per esempio, quello che ho selezionato è un campo testo per l’inserimento del nome. Infatti all’interno delle parentesi quadre leggerai “text” e il nome univoco del campo che ci servirà successivamente.

Intorno ad esse è presente il tag “label” che spiega all’utente a cosa è relativo quel campo, infatti troverai scritto “Your name”, ciò il tuo nome.

Noi personalizzeremo i nostri campi senza la label, che andremo ad inserire invece all’interno del campo stesso sfruttando il cosìddetto “Placeholder”.

Cancella quindi tutti i tag label e il suo contenuto, lasciando solo il codice del campo.

Nel primo campo scrivi al posto di “your-name”, “Nome” e a fianco ad esso scrivi: placeholder”nome”.

Ripeti la stessa cosa per gli altri campi inserendo però il relativo contenuto come mostrato.

Sotto la text-area, cioè il campo in cui l’utente inserirà il suo messaggio, dovrai aggiungere una checkbox per la conferma della presa visione della Privacy, obbligatoria per legge.

Premi quindi sul pulsante “accettazione”.

Nella finestra che si aprirà potrai personalizzare il campo checkbox.

Per prima cosa inserisci un nome più comodo da visualizzare e nel campo “Condizione” scrivi il testo come mostrato. Utilizza il tag <a> per permettere alle persone di cliccare e visualizzare la pagina della privacy. Più avanti inserirai, al posto del cancelletto che ho inserito come esempio, il link delle pagine della privacy.

Infine premi su “Inserisci tag” per inserire la checkbox.

Come puoi notare, la scheda “Mail”, che possiamo trovare in alto, è segnalata con un bollino rosso, facendoti notare che c’è un problema relativo alle impostazioni degli indirizzi.

Cliccandoci e ti verrà mostrato il contenuto relativo.

La prima cosa da fare è salvare la pagina in quanto non sono stati aggiornati i tag che hai inserito.

Dopodichè dovrai andare a sostituire i tag vecchi con quelli nuovi.

your-name” diventerà “nome”, “your-subject” diventerà “oggetto” e così via.

Nel corpo del messaggio, cioè la mail che riceverai quando sarai contattato, dovrai fare la stessa cosa e potrai cambiare un po’ la struttura per renderlo migliore.

Puoi anche modificare la frase finale a tuo piacimento.

In fondo alla pagina premi su “salva”.

Puoi anche scegliere un nome differente per questo modulo di contatto, ricordati sempre di salvare.

Come puoi vedere è stato genereato un codice. Questo tipo di codice è chiamato anche Shortcode ed è utile quando abbiamo necessità di mettere il modulo in pagine specifiche.

Torna su “Pagine” e seleziona l’home.

Vai in fondo alla pagina dove abbiamo lasciato le due colonne vuote.

Nella colonna di sinistra clicca sul tasto “+” e scegli l’elemento “Contact Form 7”, ovvero il plugin dei form. In automatico verrà inserito l’unico form che hai creato.

Salva la pagina e visualizza le modifiche ricaricandola.

Il modulo di contatto è pronto.

Torna nell’editor di pagina e nella seconda colonna vuota inserisci l’elemento chiamato “List Icon” che useremo per mostrare i nostri contatti.

Inserisci 20px come grandezza dell’icona e 10px come distanza tra l’icona e il testo.

All’interno dell’elemento creato dovrai inserire un nuovo elemento lista premendo sul tasto “+” e selezionando l’elemento mostrato.

La finestra di modifica ti mostrerà diversi parametri. Il primo sarà l’icona che potrai scegliere da una lunga lista proposta oppure dalla barra di ricerca.

Scrivi “phone” per cercare l’icona del telefono in quanto andremo ad inserire il numero di telefono.

Inserisci il colore desiderato, ti consiglio uno dei colori aziendali.

Scegli la scheda “List content” per inserire il titolo, in questo caso il tuo numero di telefono.

Salva.

Copia il sotto-elemento creato precedentemente e scegli un’icona per la mail.

Inserisci la tua e-mail aziendale e salva.

Sarà interessante inserire anche una mappa che indichi dove è situata la tua azienda o attività.

Seleziona quindi un nuovo elemento, in questo caso “Google Maps”.

Al momento dell’apertura ti verrà mostrato un lungo codice complicato; quello è l’ “Embed Code”, codice di incorporamento, ottenibile direttamente dal sito di Google Maps.

Dovrai quindi andare sul sito, inserire il tuo indirizzo e tramite il pulsante “Condividi” potrai copiare il codice di incorporamento.

Scegli “Grandi”, copia il codice ed inseriscilo nel campo dentro l’editor di pagina.

Salva i cambiamenti e guarda il risultato.

Come vedi la mappa è molto alta, quindi se vuoi modificare la dimensione torna nell’editor di pagina, apri l’elemento di Google Maps e vai su “Altezza mappa”, inserisci 300px.

Il risultato è più gradevole, ma potremmo portarlo a combaciare con la lunghezza del form.

Torna alle modifiche e inserisci 400px.

Ricarica e vedi il risultato delle modifiche.

Vuoi una mano col tuo sito web? Siamo a disposizione qui per te!

Struttura del sito (parte 4)

Ora dovremo personalizzare l’header del nostro sito, ovvero la parte che contiene il menù, il logo e altre informazioni del sito.

Per fare questo vai su “Opzioni del tema” e scegli “Branding”.

Nella parte superiore, alla sezione “Main”, rimuovi i due loghi di The 7 preinseriti.

Nel secondo riquadro inserisci il tuo logo e salva.

Nell’anteprima a destra verrà mostrato il logo.

Successivamente rimuovi tutti i loghi preinseriti, come mostrato.

Facendo lo scroll dell’anteprima sulla destra, possiamo notare che il logo precedente andrà sostituito con quello nuovo.

Quindi, alla sezione “Floating Navigation” nel secondo campo, inserisci nuovamente il logo.

Potresti addirittura inserire solo il simbolo del tuo logo se ti piace di più.

Inserisci e salva.

Dal momento che il logo è identico alla versione principale, possiamo selezionare “Main logo”.

Facendo in questo modo il logo sarà lo stesso della versione principale.

Nella sezione “Intestazione per device mobili” scegli “Desktop logo” per utilizzare lo stesso logo che abbiamo nella versione da pc.

Fai lo stesso per la sezione “Transparent mobile header”.

Nella sezione Favicon dovrai inserire il simbolo del tuo logo o se non ne hai uno qualcosa che richiami la tua azienda. Verrà visualizzato nella scheda del browser.

Nella versione 32×32 seleziona l’immagine e inseriscila.

Ricaricando la pagina del sito potrai notare che l’immagine appare a fianco al nome del sito.

Ora, dalle opzioni del tema, scegli “General appearance”.

Qui potrai scegliere quale tipo di layout utilizzare, se a tutto schermo o in versione incorniciata, ovvero con una distanza laterale tra la pagina e la finestra del browser.

Rimuovi il pattern come mostrato.

Scegli il bianco come colore di sfondo.

Color Accent” definisce il colore principale del sito e andrà a modificare i link, i titoli, i bottoni e il menù ma potranno essere gestiti singolarmente come vedremo in seguito.

Anche in questo caso scegli il colore aziendale.

Poco più sotto troverai “Curvatura dell’angolo” che creerà una smussatura negli elementi grafici come i bottoni.

Disabilita “Beautiful loading” perchè ho notato che spesso rallenta la visualizzazione del sito.

Infine salva le modifiche.

Dal menù “opzioni del tema” scegli “Typography” dove modificherai le impostazioni dei testi.

Modifica i colori dei titoli, chiamati headings, con il colore che preferisci, ti consiglio sempre il colore aziendale.

Scegli poi un colore per i testi a piacimento.

Scegli i font di Google che preferisci dal menù a tendina. Se preferisci puoi visitare fonts.google.com per trovare quello che preferisci e cercarlo qui.

Potrai scegliere le dimensioni dei testi e poco più sotto potrai modificare i titoli.

Seleziona per ciascun tag H il font scelto, solitamente sono tutti con lo stesso font, e salva.

Nell’anteprima potrai vedere il risultato.

Precedentemente abbiamo modificato i colori dei titoli, dal nero al rosso.

In questo caso nei servizi il risultato non è ottimale, quindi andremo a sostituire i colori solo per questa lista.

Scegli dal menù “Dashboard” per tornare alla bacheca di WordPress, accedi poi alle pagine e all’homepage.

Apriamo l’elemento “Info box” e nella tab “Typography” modifichiamo il colore del titolo.

Così per tutti gli altri elementi.

Salva e guarda il risultato.

Struttura del sito (parte 5)

Continuiamo a personalizzare il nostro header. Vai su “Opzioni del tema” e scegli “Top bar & Header”.

Qui potrai modificare il layout dell’header in diversi modi. Di default trovi “Inline” come layout, ma puoi provare “Classic”, la versione “Side” che trasporta il menù lateralmente, la versione “Side line” e così via, ma in questo progetto lasceremo il layout invariato.

Puoi modificare l’altezza dell’header a piacimento impostandola con un valore in pixel.

Potrai anche impostare l’header a tutta larghezza e decidere la posizione del menù.

Torna su e scegli la scheda “Microwidgets”, elementi aggiuntivi all’header, come per esempio l’elemento di ricerca o i pulsanti social.

Infatti nelle impostazioni vedrai diversi Microwidget inseriti come il telefono, l’indirizzo eccetera.

Puoi comunque sostituirli con degli altri dalla finestra sottostante.

Per modificarne uno premi sulla matita alla sua destra, si aprirà la finestra di personalizzazione in cui potrai sostituire il testo e decidere varie altre impostazioni che ora lasceremo invariate.

Per rimuovere un Microwidget clicca e tieni premuto sopra di esso, poi spostalo sugli altri widget inattivi.

Personalizza ora le icone dei social.

Qui potrai selezionare il colore delle icone, in cui lasciando vuoto userai il colore che hai impostato come colore di risalto

Potrai eventualmente decidere tutte le impostazioni che desideri anche per quanto riguarda il Mouse Hover, cioè il colore che sarà visualizzato quando il mouse passa sopra l’icona.

Poco più sotto vedrai i nomi dei social inseriti di default.

Per inserire un collegamento ai social seleziona l’icona tra quelle proposte, inserisci l’indirizzo della tua pagina e premi aggiungi.

Per ora modificheremo l’icona di facebook preinserita, scrivendo il link alla pagina e cancelleremo le altre icone che non ci interessano.

Inseriremo invece l’indirizzo e-mail scegliendo l’omonima icona e scrivendo l’indirizzo.

Infine premi “Change and close”.

Salva le modifiche.

Vedrai già il risultato nell’anteprima di pagina.

Andando più giù potrai scegliere il font che preferisci, in questo caso metterò il font aziendale.

Ora che il font è inserito potremmo rendere le scritte dei microwidget più visibili scegliendo un colore più scuro.

Passiamo alla scheda “Barra superiore” che riguarderà proprio la barra in cui stavamo modificando l’ultimo microwidget.

Potrai selezionare la sua altezza, il suo colore, un’eventuale trama di sfondo, la linea di decorazione che divide la barra superiore dall’header.

Quest’ultima ha diverse opzioni tra cui la larghezza della linea di decorazione, il suo colore, lo spessore e lo stile.

Puoi capire quale stile di piace di più, personalmente ho scelto una normale linea sottile.

Un’altra scheda che andremo a vedere è la scheda “Intestazione” che ci permetterà di cambiare lo sfondo dell’header e, anche qui, la sua linea decorativa.

Nella scheda “menù” sceglierai i font per il menù del tuo sito, così come per i sottomenù. Seleziona poi il colore del menù al passaggio del mouse e per il menù attivo scegli colore di risalto mentre più sotto potrai personalizzare lo stile del menù in 3 varianti.

Selezionando “Background” farai in modo che il menù abbia dei pulsanti classici con sfondo o eventualmente solo con la cornice, invece, selezionando “Underline” sceglierai un menù con delle linee animate modificabili in 4 tipologie:

  • Da sinistra a destra;
  • Dal centro;
  • Verso l’alto;
  • Verso il basso.

Scegli il colore di risalto come colore della linea e se vuoi modifica il suo spessore.

Salva le modifiche.

Torna alle opzioni del tema e scegli “Page titles” dove modificheremo la visualizzazione del titolo di pagina.

Qui troverai diverse impostazioni per il titolo e i breadcrumbs, cioè il percorso della pagina e rispettivamente:

  • Titolo a sinistra, percorso a destra
  • Titolo a destra, percorso a sinistra
  • Tutto a sinistra
  • Tutto a destra
  • Centrato

Potrai modificare l’altezza dell’intera area e la distanza interna tra il titolo e la parte superiore e inferiore dell’area.

Scegli lo stile dell’area del titolo tra vuoto, sfondo, gradiente e linea. Usando lo stile sfondo scegli il suo colore o eventualmente un’immagine oppure scegli se avere l’header trasparente e mostrare un eventuale sfondo di pagina che hai impostato precedentemente.

Nella scheda “Titolo” seleziona il font di tua scelta e il colore. Se preferisci modifica anche la sua dimensione.

Allo stesso modo del titolo nella sezione “Breadcrumbs” modifica il font, i colori e la dimensione del percorso delle pagine. In più potrai scegliere se avere uno sfondo e di quale colore.

Per rimuovere il percorso premi su “Disabilitato”.

Premi infine su “Save Options”.

Struttura del sito (parte 6)

Dalle opzioni del tema vai su “Barra Mobile”. Qui potrai modificare le impostazioni della barra laterale, che abbiamo rimosso nella parte 2 ma che riutilizzeremo più avanti.

Potrai modificare la sua larghezza, la distanza tra i widget e varie altre impostazioni.

Seleziona ora “Footer & Bottom bar”. Il piè di pagina, detto Footer, è la parte finale del sito in cui vengono inseriti i widget, attualmente non visibili in quanto non sono stati inseriti.

Scegli lo stile di sfondo, il suo colore, la decorazione e se utilizzare l’interessante funzionalità Slide-out che farà comparire il footer dal basso.

Più sotto potrai modificare il padding inferiore e superiore e in quante colonne suddividere il piè di pagina.

Nella scheda “Barra inferiore” potrai modificare la barra attualmente visualizzata dove potrai decidere di abilitarla o disabilitarla, scegliere lo stile di sfondo e il colore, l’altezza, il padding superiore e inferiore, il colore del carattere e, infine, inserire un testo.

Qui è il posto ideale per inserire il collegamento alla privacy policy, come mostrato.

Come puoi notare c’è ancora un testo di default che dovrai sostituire. Lo potrai fare andando su “Branding”.

Rimuovi la checkbox “Dai i crediti a Dream-Theme” e inserisci i dati aziendali per il copyright.

Accedi alla sezione “Buttons” dal menù “Opzioni del tema”. Queste impostazioni modificheranno l’aspetto dei bottoni del sito, come quello del form di contatto.

Le scelte di stile prevedono un colore in tinta unita, in 3D o “Material Design”.

Scegli poi il colore dei pulsanti sfruttando il colore di risalto mentre per il colore hover scegli il colore personalizzato inserendone uno differente come per esempio il nero.

Modifica il colore del testo in bianco e scegli i font per il testo del bottone.

Sostituisci il colore di risalto con il colore personalizzato, inserendo il bianco, poi salva.

Vai su “Contact Forms”. Ci sono diverse funzioni di modifica del form di contatto ma ci focalizzeremo sul colore del testo. Scegli un colore più scuro per risaltare il testo all’interno del form.

Salva e dal menù seleziona “Post Types”. Dalla scheda “General” scegli il font usato per visualizzare le categorie dei post o del portfolio.

Infine vai su “Share buttons”. Da questa scheda potrai attivare e personalizzare i pulsanti di condivisione nelle pagine blog e portfolio.

Potrai farli comparire al passaggio del mouse o renderli sempre visibili.

Dalla sezione inattiva clicca e tieni premuto su ciascun social che vuoi rendere visibile e spostalo sulla sezione attiva.

Io sceglierò di far visualizzare i bottoni al passaggio del mouse.

Salva e poi dal menù scegli “visita il sito”.

Quello che possiamo notare è che ci comparirà la pagina blog.

Questo perché dobbiamo impostare correttamente la prima pagina dalle impostazioni.

Torna quindi alla dashboard e accedi alle impostazioni, poi premi su “Lettura”.

Seleziona “Una pagina statica” e nella sezione “Homepage” scegli “Home” come prima pagina.

Quindi salva.

Struttura del sito (parte 7)

Ritorna all’editor dell’homepage e vai in fondo alla sezione “Opzioni dell’intestazione della pagina”.

Qui potrai scegliere per ciascuna pagina se mostrare il titolo, nasconderlo e renderlo trasparente, mostrare un titolo personalizzato o una presentazione.

La presentazione prevede diverse tipologie:

  • Dispositivo di scorrimento ad oblò;
  • Foto scroller;
  • Slider Revolution;
  • Layer Slider.

Quello che utilizzeremo è Slider Revolution, perciò dal menù a sinistra seleziona il plugin omonimo.

Scegli “Nuova slider”.

Inserisci il nome dello slider e ripetilo nel campo a fianco per lo shortcode.

Ci sono diversi tipi di slider:

  • Standard;
  • Scena eroe;
  • Carosello;

Scegli “Scena eroe” in quanto dovremo usare una sola immagine.

Anche per il layout della slider ci sono 3 tipologie, ma seleziona “Auto” per permettere alla slider di adattarsi automaticamente.

Imposta la dimensione della slider e salva tramite il pulsante verde che troverai in alto.

Verrai reindirizzato alla modifica della slider.

Seleziona un’immagine di sfondo per la slider e poi salva le modifiche.

Torna alle pagine e vai alla modifica dell’homepage.

In fondo alla pagina seleziona “Presentazione”, scegli “Slider Revolution”, e dalla scelta delle slider scegli “Home”.

Salva e visualizza le modifiche.

Puoi anche modificare la posizione della slide sopra l’header. Per fare questo abilitalo come mostrato.

Ora realizzeremo la pagina Blog, perciò aggiungi una nuova pagina.

Inserisci il titolo e una nuova riga.

Aggiungi un nuovo elemento e seleziona “Post Grid”.

Grazie a questo elemento potrai mostrare i post del tuo blog con uno stile personalizzato.

Scegli quanti post visualizzare e se vuoi mostrare tutti i post illimitatamente inserisci “-1”.

Scegli il formato di visualizzazione:

  • mostra tutto, che mostrerà tutti i post;
  • “Load more button” che includerà un bottone per caricare altri post;
  • “Lazy loading” che caricherà poco per volta i post tramite lo scroll della pagina;
  • Pagination che creerà più pagine contenenti i post.

Scegli “Lazy Loading” e lascia invariato 10 come numero di post visualizzati.

Imposta 4 elementi per riga con distanza 35px.

Se preferisci scegli un’animazione per il caricamento dei post.

Puoi scegliere l’ordine dei post in diversi modi, generalmente ordinati per data in ordine decrescente.

Testa il template che più ti si addice, ce ne sono diversi molto interessanti.

Infine pubblica.

Visualizza la pagina, ma noterai che risulterà vuota perché non ci sono articoli creati.

Quindi dal menù scegli “Articoli”, “Tutti gli articoli” e “Aggiungi nuovo”.

Inserisci il titolo dell’articolo e crea una categoria alla quale far appartenere l’articolo stesso.

Puoi creare anche sottocategorie selezionando la categoria genitore.

La creazione dei contenuti di un articolo è uguale a quello di una pagina, sfrutta quindi la potenza di Visual Composer.

Crea una nuova riga e inserisci un blocco testo.

Ricordati che puoi utilizzare il grassetto, il corsivo, l’elenco puntato, citazioni e link esterni o ad altre pagine.

Salva e ricarica la pagina blog.

Non avendo inserito l’immagine del post, verrà visualizzata un’immagine vuota.

Per inserire la foto principale del post vai sull’editor e nella colonna di destra scegli “Imposta immagine in evidenza” e scegli l’immagine che desideri.

Aggiorna le modifiche.

L’immagine è stata inserita e ora è visibile nella pagina blog. Cliccandoci sopra potrai visualizzare l’articolo e come vedrai l’immagine in evidenza verrà posizionata in alto all’articolo.

Prima abbiamo creato una categoria di prova, forse ti sarai chiesto com’è possibile eliminarla.

Dal menù “Articoli”, vai su “Categorie”.

Per eliminare una categoria non devi far altro che cliccare su “Elimina” e poi confermare.

Potrai eliminare tutte le categorie fatta eccezione per la categoria nominata “Senza categoria” che dovrà rimanere sempre presente nel sistema.

Anche da qui potrai inserire una nuova categoria, scrivendo il nome ed eventualmente se appartiene ad una categoria padre, premi poi il tasto “Aggiungi una nuova categoria”.

Struttura del sito (parte 8)

L’impostazione che abbiamo dato alla griglia degli articoli non è ottimale: ogni post visualizzato sarà molto stretto in modo da farcene stare quattro consecutivi.

Torna quindi alla modifica della pagina blog e accedi alle impostazioni dell’elemento “Post Grid”.

Nel campo in cui ti è stato chiesto la quantità di post per riga sostituisci “4” con “2”, e salva.

In questo modo la visualizzazione di ciascun post è migliore a prima, soprattutto per via dello spazio occupato dalla sidebar e che ora andremo a personalizzare.

Dal menù principale a sinistra, seleziona “Aspetto” e poi “Widget”.

I widget sono degli elementi personalizzabili che hanno specifiche funzioni; possono essere utilizzati nella barra laterale ma anche nel footer come vedremo più avanti.

Per rimuovere dei widget dalla barra laterale è sufficiente cliccarci sopra, tenere premuto e spostarli al di fuori della finestrella.

Ci sono diversi widget disponibili e attivabili tramite il trascinamento all’interno della finestra della sidebar.

Qualsiasi modifica alla struttura verrà salvata in automatico.

Puoi, per esempio, utilizzare il widget testo per aggiungere una frase alla barra laterale, e premendo salva, verrà aggiunto.

Puoi anche inserire un’immagine scegliendo l’omonimo widget; Non dovrai far altro che scegliere la foto, un eventuale link e salvare.

Se volessi invece rimuovere la barra laterale nella pagina blog ti basterà tornare alla sua modifica e premere su “Disabilita” nella sezione “Opzioni della barra mobile”.

Avendo rimosso la barra laterale avremo molto più spazio a disposizione e gli articoli, disposti 2 per riga, saranno troppo grandi.

Ricorda quindi di modificare la loro impostazione dalle opzioni dell’elemento “Post grid”.

Ora ti mostro il risultato inserendo altri 3 articoli d’esempio.

Aprendo uno degli articoli creati, vedrai che sono stati inseriti degli elementi in fondo a ciascuno.

Ritorna su “Post Types” in “Opzioni del tema”, accedi poi alla scheda “Blog”.

Qui vi saranno diverse impostazioni, ma le più utili sono per esempio il pulsante indietro che ti permette di tornare alla pagina blog, o la pagina che preferisci, da ciascun articolo.

Rimuovi le “Meta informazioni” per eliminare l’autore del post, la data ecc.

Disabilita anche i “Post collegati”, poi salva.

Come vedi alcune cose scompariranno e altre compariranno.

Se invece non volessi i commenti?

Torna all’editor dell’articolo.

In alto trovi “Impostazioni di schermata” , attiva “Discussione” e in fondo alla pagina troverai l’impostazione per permettere o meno i commenti per quell’articolo.

Vuoi una mano col tuo sito web? Siamo a disposizione qui per te!

Struttura del sito (parte 9)

Abbiamo detto che anche il footer prevede l’uso di widget.

Nella pagina “Widget”, inserisci l’elemento che desideri, nella finestra “Piè di pagina predefinito”.

Puoi inserire un’immagine, gli articoli recenti, le tue informazioni di contatto come ad esempio la pagina Facebook, Instagram, la mail o il contatto Whatsapp.

Puoi anche utilizzare il widget per il collegamento alle pagine del sito.

Ora arriva il momento di personalizzare il menù.

Torna quindi alla Dashboard e dal menù scegli “Aspetto” e “Menù”.

La prima cosa da fare è assegnare il nome al nuovo menù, quindi scegline uno.

Seleziona le pagine che vuoi inserire nel menù, e premi il pulsante “Aggiungi al menù“.

Per riordinare gli elementi del menù premi e trascina l’elemento che vuoi spostare, rendi poi il menù primario tramite la checkbox ”Primary menù”.

Vorremo però inserire anche altri elementi contenuti all’interno della pagina home, come la sezione “Chi siamo”, “I nostri servizi” e “Contattaci”.

Come si può fare?

Prima di tutto torna alla modifica del menù e salva.

Vai poi alla modifica dell’homepage e premi sulla modifica della riga in cui è contenuto il titolo “Chi siamo”.

Nel campo “Row ID” inserisci il nome della sezione senza spazi e salva.

Fai lo stesso per i servizi e poi per la sezione di contatto.

Salva le modifiche.

Dalla modifica del menù vai sulla scheda “Link personalizzati” dove ti mostrerò come creare un anchor link, ovvero un link ancorato ad un contenuto di una pagina.

Nel campo URL inserisci prima dell’ID inserito nell’homepage i caratteri “#!/” creando un effetto scroll al momento del click.

Inserisci poi il Testo del link e aggiungi al menù.

Farai lo stesso per i servizi e per la sezione contattaci.

Riordina gli elementi del menù in modo da renderlo pertinente. Potrai anche decidere di creare dei sottomenù cliccando e trascinando l’elemento all’interno come mostrato.

Salva e ricarica la pagina per vedere il risultato.

Ecco fatto. Premendo sugli elementi anchor link verremo spostati in posizioni specifiche di una pagina.

Non hai notato niente di strano? Cliccando sul tasto Home si ricarica l’intera pagina.

Questo perché è stato inserito il collegamento alla pagina stessa, ma noi vogliamo invece che quando siamo nell’homepage ci riporti in alto alla pagina.

Per fare questo rimuoviamo l’elemento e inseriamo un link personalizzato.

Inserendo nell’URL “#!/up” attiveremo la funzione di scroll verso l’alto.

Scrivi “Home” come testo del link.

Porta in alto l’elemento e salva le modifiche.

Ora funziona perfettamente. Ti voglio mostrare, però, un altro caso.

Se ci sono anchor link nel menù, andranno impostati diversamente per le altre pagine.

Come vedi nell’indirizzo del sito viene inserito in automatico il blog e questo non permette all’anchor link di funzionare, perché cerca il collegamento all’interno della stessa pagina e non nella pagina home.

Dovremo quindi creare un menù alternativo per le pagine premendo su “crea un nuovo menù”.

Inserisci il nome del menù, distinguendolo dal principale.

Qui potremo inserire tranquillamente anche la pagina home. Riscriviamo ora tutti i link personalizzati per creare gli anchor link, ma nell’URL inseriremo l’indirizzo completo della pagina home seguito dall’anchor link.

Inserisci il testo del link e ripeti l’operazione per gli altri link. Dopodichè risistema gli elementi del menù.

L’ultima cosa importante da fare è sostituire questo menù come menù primario rispetto a quello dell’homepage in modo che venga assegnato in automatico a tutte le pagine che verranno create.

Infine torna all’homepage e nella colonna a destra scegli dal menù a tendina “Microsite” che ti permetterà di selezionare un menù specifico per questa pagina; rimuovi anche il beautiful loading.

Nel campo “Primary menù” scegli “menù”.

Salva e torna al sito per vedere il risultato.

Indicizzazione del sito

Il tuo sito è praticamente pronto perciò possiamo dire ai motori di ricerca che può indicizzarlo. Cosa significa però indicizzare?

Questa pratica consiste nell’inserire il proprio indirizzo web negli archivi dei motori di ricerca per facilitare il processo di ricerca e archiviazione di nuovi siti.

Non è da confondere con il posizionamento e cioè la pratica che permette al proprio sito web di avanzare nella posizione dei risultati di ricerca di Google.

Digita nella barra di ricerca “Google Webmasters Tool” e clicca sul link nominato “Search Console”.

Scrivi l’indirizzo del tuo sito web e premi sul tasto rosso “Aggiungi una proprietà”.

Successivamente dovrai comprovare che il dominio inserito sia di tua proprietà tramite diverse possibilità.

Ti consiglio la via più breve che è quella di scegliere il Tag HTML, raggiungibile dalla scheda “Metodi alternativi”.

Copia il tag, torna al tuo sito e dalle impostazioni scegli “Insert Header and Footers”.

Nel primo campo denominato “Scripts in header” incolla il tag e salva.

Torna alla Search Console e premi sul tasto “Verifica”.

Ops! Come mai da errore?

Ricordi che abbiamo attivato la modalità manutenzione? Torna al sito e disattivala, per permettere a Google di accedere al sito e verificare il tag.

Ripeti la verifica e potrai notare che è andata a buon fine.

Ora puoi caricare la mappa del sito per dire a Google come è costruito il tuo sito e quante pagine ha.

Sotto “Scansione” premi su “Sitemap” ma hai necessità di sapere qual è il suo link.

Torna quindi al sito e accedi alle impostazioni, premi su “Simple WP sitemap”.

Il link che dovrai utilizzare è quello XML.

Torna alla Search Console e digita soltanto “sitemap.xml”.

Premi su invia e alla conferma dell’invio premi su “Aggiorna la pagina”.

Ora dovrai inserire il tuo nuovo sito anche su Bing, che se non conosci è un altro motore di ricerca.

Digita “Bing Webmaster Tools”. Effettua l’accesso con un account Microsoft , indirizzo mail Google o Facebook.

Una volta fatto l’accesso premi sul tasto “Aggiungi sito”; compila le varie informazioni richieste.

Infine salva.

Come Google, anche Bing ti darà la possibilità di inserire il tag sul tuo sito, copialo e inseriscilo nel plugin, salva e clicca su “Verifica”.

Una volta confermato l’inserimento su Bing torna sul sito e riattiva la modalità manutenzione.

Google Analytics

Analytics è uno strumento offerto da Google che ti permetterà di analizzare e tenere traccia del traffico sul tuo sito e, soprattutto, da dove viene.

Per accedere digita sulla barra di ricerca “Google Analytics” e premi sul primo risultato.

Ti verrà richiesto di registrarti e nella pagina successiva dovrai inserire alcuni dati.

Per primo ti verrà richiesto il nome dell’account e in seguito il nome del sito web.

Scegli se l’indirizzo del tuo sito è https:// o http:// e inserisci l’indirizzo del tuo sito a partire da www.

Scegli il settore del sito e il fuso orario.

Premi su “Ottieni l’ID di monitoraggio” e, dopo averle lette, accetta i termini e le condizioni.

Questo è l’ID di monitoraggio che andrà incluso nel tuo sito.

Copialo e inseriscilo nel plugin “Insert headers and footers” nel primo box sotto gli altri tag.

Infine salva.

Riaccedendo ad Analytics potrai vedere la dashboard che conterrà giorno per giorno i dati di visualizzazione del sito, quanto tempo hanno visitato le pagine, da dove e che cosa hanno usato.

Iubenda e Cookiebot

L’avvento del GDPR, la nuova legge che rimette in riga tutti i siti web, ha fatto un po’ di confusione e molti siti ancora non hanno adottato nessuna modifica, nonostante sia obbligatorio per legge, pena multe salate.

Prima di cominciare questo episodio ci tengo a precisare che non sono un esperto di GDPR né di leggi sul copyright, tantomeno sono un avvocato e se vuoi essere sicuro che il tuo sito web sia a norma con la nuova legge ti consiglio di rivolgerti ad un esperto.

Detto questo, useremo Iubenda per creare il testo della privacy policy. Iubenda è un sistema che ti permette di creare con semplicità una privacy policy professionale, senza dover pagare un’avvocato specializzato.

Vai quindi all’indirizzo iubenda.com.

In alto a destra troverai un tasto verde, premilo. Ti verrà richiesto di inserire l’indirizzo del tuo sito web, premi poi “Inizia la generazione”.

Premi su “registrati ora” ed inserisci email e password nella fase successiva.

Leggi la privacy e premi il pulsante “Accetta e concludi”.

Dalle 3 colonne mostrate, scegli la prima e premi il bottone “Genera ora” per avviare la generazione della privacy e cookie policy.

Prima di tutto devi acquistare la licenza per questa privacy policy al costo di 19€ l’anno, premi quindi su “Passa a Pro”.

Successivamente scegli “Una licenza solo per questa policy” e verrà avviata la procedura di pagamento.

Puoi pagare tramite Paypal o carta di credito.

Dopo aver inserito i dati premi il pulsante in basso.

Il pagamento non verrà effettuato finchè non verranno inseriti i dati di fatturazione; inserisci quindi tutti i campi richiesti.

Dopo premi “Salva ed invia il pagamento”.

A destra troverai un’impostazione specifica per il GDPR, lascia la protezione invariata su “tutti”. Torna su e premi su “Aggiungi un servizio”.

Qui potrai cercare le funzioni che hai inserito nel tuo sito web come ad esempio un modulo di contatto.

Per inserirlo cliccaci sopra e ti verranno chiesti quali dati richiedi.

Una volta inseriti salva le modifiche.

Un altro servizio potrebbe essere i commenti sul sito.

Oppure Google Analytics, visto che lo stiamo utilizzando.

Dal momento che i commenti sul nostro sito sono stati oscurati elimina il servizio premendo sul pulsante come mostrato.

Procedi premendo il tasto “Avanti” in basso a destra.

Inserisci i dati del titolare del sito web ovvero nome o ragione sociale e l’indirizzo completo.

Seleziona la mail alla quale gli utenti potranno fare reclami o richiedere informazioni sui propri dati.

Procedi premendo “Avanti”.

Ti verrà mostrata la privacy generata.

Premi ancora “Avanti”.

Verrai riportato alla dashboard del tuo account. Viene ora la generazione della cookie solution, cioè l’integrazione della barra informativa sulla policy.

Dal momento che utilizzeremo un altro sistema per la barra informativa, premi su avanti senza apportare nessuna modifica.

Premi sulla scheda “Integra” e verrai portato più sotto dove potrai premere ulteriormente un’altra scheda chiamata “Integra il testo nel body”.

In questo modo potrai copiare i testi generati direttamente nella pagina della policy sul tuo sito web.

Copia il codice generato per la privacy policy e torna al tuo sito.

Accedi alla sezione “Pagine” e apri la pagina “Privacy Policy”.

Seleziona tutto il contenuto generato automaticamente da WordPress e attiva il Backend editor di Visual Composer.

Aggiungi quindi una nuova riga e un blocco testo.

Apri la tab “Testo” e incolla il codice precedentemente copiato al posto del contenuto.

Copia l’elemento appena modificato e torna su Iubenda per copiare il codice per la Cookie Policy.

Modifica l’elemento copiato e nella tab “testo” incolla il codice sostituendo il contenuto precedente.

Salva la pagina.

Questa è la pagina della Privacy Policy del tuo sito.

Ma manca ancora qualcosa.

Infatti manca il consenso dell’utente per l’utilizzo dei cookie e la revoca del consenso.

Quindi vai sul sito cookiebot.com e premi sul bottone “Provalo gratuitamente”.

Inserisci l’indirizzo email e crea una password. Procedi premendo su “Successivo”.

Via mail ti verrà inviato una chiave di registrazione, copiala nel campo per attivare l’abbonamento gratuito.

Clicca su “Configura Cookiebot”.

Nella scheda “Domini” premi sul tasto “+”e scrivi il dominio del tuo sito.

La scheda successiva è “Finestra di dialogo” dove potrai selezionare lo stile di comparsa della barra e altre informazioni relative ad esse.

Seleziona “Consenso esplicito” dal menù a tendina “Metodo”.

Lascia selezionato il tipo su “Multilivello” e se preferisci puoi selezionare o deselezionare le caselle che includono il consenso ai cookie.

Nella tab “Contenuto” troverai tutti i testi contenuti nella barra. Integra il link alla pagina della privacy policy.

Scrivi quindi “Leggi la nostra privacy policy” ed evidenzia la parola Privacy Policy, premi sul pulsante di collegamento per inserire il link.

Nell’ultima scheda potrai reperire i codici, detti script, da inserire sul sito.

Copia il primo script e torna al tuo sito web. Incollalo poi sul plugin “Insert headers and footers”.

Salva e visualizza le modifiche.

Torna su Cookiebot per copiare il secondo script per inserire l’informativa sui cookie.

Riapri la modifica alla Privacy Policy, inserisci un nuovo elemento di blocco testo e incolla lo script.

Salva la pagina e guarda le modifiche.

L’ultima cosa da fare è inserire il link nel footer e nel form di contatto dell’homepage.

Accedi alla pagina “Contatto” e apri la modifica del form. Al posto del cancelletto inserisci il link alla pagina della Privacy.

Accedi a “Footer e bottom bar” e nella tab “Barra inferiore” inserisci il link al posto del cancelletto.

Apertura del sito

Siamo giunti al termine di questo corso. Vai quindi sul plugin della manutenzione e disattivalo.

Diamo un’occhiata al tuo sito!

Congratulazioni, hai realizzato il tuo primo sito web!

Vuoi una mano col tuo sito web? Siamo a disposizione qui per te!