E ora siete pronti per la configurazione del sito wordpress: impostare, definire la struttura del Vostro sito o blog, lavorando sulla Bacheca WordPress, allora entrate nella bacheca wordpress del Vostro sito.
Come in entrare in bacheca di WordPress
Si entra nella bacheca di WordPress digitando la url del sito e aggiungere /wp-admin: https://tuosito.it/wp-admin, nella prima riga di ricerca, la più alta. Compare la griglia di ingresso alla bacheca di WordPress, che chiede: Nome utente o indirizzo email e password. ora siete in bacheca di WordPress. Guardate il video di Pascal: https://www.youtube.com/watch?v=oTyG3kdIv4g&t=71s,
La scelta del tema
Template o tema è un impostazione di Layout, deve essere sicuro e stabile. Il Layout è quello che noi vediamo dal pc, tablet, smartphone. Un tema di base è come avere un appartamento già arredato, non è personalizzabile.
Un tema gratis
WordPress assicura alcuni temi gratuiti, già installati che vanno solo attivati, che per lavori semplici sono più che sufficienti. Elementor è sempre gratis ma è un po’ più elaborato. Se volete fare qualcosa di professionale come la vetrina di un negozio è meglio un tema a pagamento. Un tema di questo tipo Vi permette di saltare da una sezione all’altra della Vostra Vetrina. Un poi,…. un tema premium ha in genere una Seo migliore, così dicono.
Un tema a pagamento
Quale Tema? Divi. Divi è a pagamento, la licenza annuale costa 89 $, mentre la licenza lifetime (perenne) a 249 $. Ovviamente il prezzo in dollari va convertito in euro e bisogna aggiungere l’IVA. Attenzione: con una spesa di 89 $ potete installare Divi su tutti i siti che volete, un acquisto per mille siti, conviene ? Dipende dalle tasche. Se avete scaricato WP in italiano, anche Divi sarà in italiano. Per iniziare comprate quella annuale e l’anno successivo compri la licenza lifetime a metà prezzo nel fatidico Black Friday. https://www.elegantthemes.com/join/
Il caricamento di Divi
Divi pur essendo in formato zip non è necessario che Voi lo scompattiate, ci penserà WP nel momento del caricamento a scompattarlo.
Bacheca wp > aspetto > temi > Aggiungi nuovo > Carica tema > Scegli file >
Prendetelo dal download > Installa adesso, attivatelo.
Account > Your Api Kei per attivare la licenza su WP.
Ora siete pronti per personalizzare l’impostazione generale.
Configurazione del sito di wordpress: Personalizzate le impostazioni generali
Le impostazioni generali contengono: identità del sito, impostazioni layout, tipografia, sfondo.
bacheca > aspetto > personalizza> impostazioni generali > identità del sito
Qui c’è il titolo, il motto e l’icona e la fivicon
Titolo e motto
Titolo e motto sono importanti per la SEO, devono contenere le parole chiave.
Icona
L’icona del sito si vede nelle schede del browser, nella barra dei preferiti, e all’interno delle app mobile di WordPress. Le dimensioni dell’icona sono 512 × 512 pixel per lato. Nel sito gratuito flaticon.com si possono reperire tante icone specifiche. Se siete bravini con Paint potete farvela da Voi.
Caratteri
Bacheca > aspetto > personalizza> impostazioni generali > tipografia
Si usano solo 2 font: per il titolo e per il testo, per non generare confusione.
Font tondo amichevole, squadrato più serio. Caratteri: Serif (grazie) e Sanserif. Sulla carta stampata funziona il Serif, nei monitor è meglio il Sanserif è più leggibile più moderno, ma nelle riveste femminili si usa il Serif. (Serif sono baroccamenti dello scrivano). Carattere: Times regular, Baskerville, Perpetua, Roboto, Opensans, Lato, Montserrat, Poppins, Raleway. Se fra i vari font non c’è quello che cerchi, puoi andare su Google font, prendi un codice da inserire. Attenzione a non perdere troppo tempo.
Configurazione del sito di wordpress: i colori
Colori delle parole
Impostate il colore del link del body, il colore del testo del body, il colore del testo dell’heather (heather sono i titoli del corpo).
Colori e immagini dello sfondo
E’ la scelta del colore di sfondo o di una immagine di sfondo.
L’80% delle persone acquista in base al colore. Andate sul sito Behance.net per vedere progetti diversi: è un network online di Adobe per creativi, designer ed artisti. Una piattaforma su cui postare i propri lavori. Guardate il video “Canone” del designer Massimo Vignelli: il bello è quello che arriva.
bacheca > Divi > Opzioni tema > Generale > Imposto i colori per la tavolozza
Il colore dipende dal contesto, scegliere pochi colori. Scegliete il colore in base all’emozione che volete trasmettere. L’ Azzurro trasmette serenità, fiducia. Il Rosso nel cibo spazzatura, stimola l’appetito (Mac Donald’s). Il Verde è biologico.
Il Colore dei link uso il colore del logo. Usate il tool: materialpalette.com per avere i colori sempre in armonia.
Video dal minuto 33 : https://www.youtube.com/watch?v=oTyG3kdIv4g&t=71s,
Per trovare i codici dei colori c’è ColorZilla, un’estensione di Google Crome: minuto 34,45
bacheca > aspetto > personalizza> impostazioni generali > impostazioni layout
Colore dettagli tema (è lo sfondo della sezione).
Le combinazioni di colore: bacheca > aspetto > personalizza> combinazione colori: predefinito
L’immagini dello sfondo
bacheca > aspetto > personalizza> impostazioni generali > sfondo
L’immagine vale più di mille parole.
Immagini con dimensione al di sotto dei 100KB. Per ridurre un’immagine usa Photoshop o Gimp. O dal web TinyPNG per immagini PNG o JPEGmini per immagini JPEG.
L’immagine si può caricare nella cartella Media anche direttamente dal desktop.
L’heather, cioè la barra di navigazione superiore
L’ heater è il titolo.
bacheca > aspetto > personalizza> heather e navigazione > formato heather
Avete 5 stili di intestazione: i primi tre sono adatti per il pc: predefinito (logo sulla sinistra), centrato, logo centrato in linea. Gli ultimi due stili di intestazione sono adatti per lo smartphone (tre righette parallele): scorrimento e schermo intero. Nel predefinito si può avere il menù verticale sulla sinistra se abilito alla navigazione verticale sul pc, e diventa simile alla modalità scorrimento sul telefonino.
Inserimento del logo nella barra di navigazione superiore
L’immagine del logo deve pesare al massimo 500 pixel. Nei dettagli dell’immagine mettere parole chiave che vengono lette dai robot di Google.
bacheca > Divi > opzioni tema > Generale > Logo > carica
barra menù primario, barra menù secondario, impostazioni di navigazione fisse, elementi heather.
Il footer, cioè la barra di navigazione inferiore
Bacheca > aspetto > personalizza> impostazioni generali > footer > layout
colore dello sfondo piè di pagina.
Bacheca > aspetto > personalizza> impostazioni generali > footer > widget
colore e impostazione dei widget sottostanti.
Bacheca > aspetto > personalizza> impostazioni generali > footer > elementi del footer
mostra icone social, nella penultima riga della pagina.
Bacheca > aspetto > personalizza> impostazioni generali > footer > Menu piè di pagina
Bacheca > aspetto > personalizza> impostazioni generali > footer > Barra in fondo
Bacheca > Divi > modificatore tema > footer > Barra in fondo
Bottoni o pulsanti
Bacheca > aspetto > personalizza> impostazioni generali > footer > Bottoni > stile bottoni
Bacheca > aspetto > personalizza> impostazioni generali > footer > Bottoni > stile bottoni all’Hover
l’Hover è il cambiamento di colore quando ci passo sopra.
Stile mobile
Bacheca > aspetto > personalizza> stile mobile
avete 3 voci: tablet, cellulari e menù mobile,
Configurazione del sito di wordpress: i collegamenti o link
Il link interno, cioè su un’altra pagina dello stesso sito.
Il link esterno, cioè su un’altra pagina dello stesso sito
Fate attenzione ai collegamenti esterni non autorizzati, potrebbero penalizzarvi. Ricordate che l’obiettivo è farci restare visitatori nel sito, non farli migrare fuori. In alcuni siti compare espressamente la voce di divieto per collegamenti intertestuali fra siti. Es.American express vieta collegamenti intertestuali fra siti.
Creare un link interno a una sezione diversa della stessa pagina dello stesso sito con Divi
Sono link che permettono di saltare da un punto all’altro della stessa pagina. In genere si costruiscono su siti di presentazione elaborati quasi integralmente sulla prima pagina, una prima pagina molto più grande del normale, di presentazione appunto, ma agile.
Ogni discorso, paragrafo sta su una sezione. Il link è ancorato direttamente alle sezioni.
Video di minuti 2,42, come spostarci con Divi in sezioni diverse della pagina con dei pulsanti: /www.youtube.com/watch?v=XvE5pPk_ZLM
Nel video vediamo che prima crea quattro sezioni, che colora in modo diverso per rendere il tutto più comprensibile. Nel video la prima sezione viene colorata di rosso,… Poi entrate nelle avanzate, ID CSS che nomina col colore usato, Quindi entrate in ogni sezione e inserisce il modulo: pulsante > contenuto > testo pulsante > Nel video nella prima sezione (era rossa) pulsante > contenuto > testo pulsante > colore nero e nell’URL di collegamento pulsante scrive #nero, ecc…
Nella terza sezione posiziona le email e nella quarta la posta.
Emailmarketing porta il 7% di fatturato. Con Benchmarkemail x non finire nello spam, non inviate la mail dal Vostro server ma da Benchmarkemail. Fino un centinaio è gratuito.
Create la quarta e ultima sezione per la posta: contattaci
Video Pascal …71s: 1.49,31 – 2.02,00: 13 minuti di filmato.
rotellina grigia > elimino vecchio modulo > inserisci nuovo modulo > modulo di contatto > entro nel modulo > contenuti >
appaiono 3 righe grige: name, e-mail, message, entrando in ognuna potete modificare l’etichetta del modulo di contatto. Scendendo trovate > testo > titolo “frase facoltativa”, una frase facoltativa a introduzione del modulo di contatto. Scendendo trovate un messaggio per l’invio con successo: “grazie per il messaggio” praticamente è la risposta automatica di cortesia che date a chi Vi scrive. Scendendo trovate pulsante invia: “invia” finalmente la riga indirizzo e-mail: “miamail@gmail.com” cioè l’indirizzo su cui volete giungano le mail inviateVi. Se poi volete inserire una immagine tra il sottotitolo contattaci e la mascherina della posta, andate sopra la rotellina grigia del contattaci, compare un bottoncino grigio > aggiungi immagine.
Tutto quel che abbiamo visto è con il tema di Divi, ma se volete utilizzare quelli dati di default da wordpress è ormai per Voi un gioco da ragazzi.
Menù di WP semplice con i temi di WordPress
Non c’è niente di più intuitivo dei temi di WordPress
Configurazione del sito di wordpress: Create il menu
Bacheca > aspetto > menu > struttura menu > nome menu:
Date un nome al menù, es “principale” > crea
al menu andranno aggiunte le diverse voci, però prima dovete andare su impostazioni schermata che si trova in alto a destra della pagina Menu: entra. Ora potete aggiungere le pagine al nostro menu. Sulla colonna di sinistra della videata menu, è scritto aggiungi voci al menu. Al menu potete aggiungere: pagine, articoli, link personalizzati e categorie. Se il Vostro fosse un ecommerce trovereste anche prodotti. Spuntate quello che volete sul menu, avete la possibilità di cercare tra le molte pagine che potreste avere. E aggiungete al menu. Sulla struttura del menu, a destra, trovate le pagine aggiunte. Volendo potete cambiare la parola che compare sul menu, ad esempio una parola più corta, se ad esempio la pagina che va nel menu si chiama “dove andiamo?”, potete semplificare farla più corta: struttura > “dove andiamo?” > etichetta di navigazione che cambio con “dove?”. Sulla voce del menu potete aggiungere un attributo che si legge quando col mouse scorro sopra le singole voci del menu: struttura > “dove?” > Attributo del titolo: “a Milano”.
Social
I social vanno posizionati sempre in basso, mai in alto. Ci sono due domande nell’utente: una consapevole e una latente. Il social è domanda latente. Ma è la domanda consapevole che vende di più. La logica è portare i contatti sul Vostro sito non sui social. Avete deciso il collegamento ai social? Proseguite.
L’inserimento di una immagine in evidenza per i social
Vedi il video: https://www.youtube.com/watch?v=oTyG3kdIv4g&t=71s, dal minuto 58,41 al minuto 1.03,00: 5 minuti di filmato.
Abbiamo finito la configurazione possiamo iniziare a scrivere pagine del articoli.