La Home page
Nella Home page deve comparire il nome del brand, cosa fate, come posso aiutarVi: Call to action (una chiamata alle armi). Potete inserire i link ai migliori articoli del Vostro sito.
Come una pagina diventa Home page
La Vostra home page può apparire o mostrando gli ultimi articoli oppure mostrando una pagina statica. Se scegliete la pagina statica:
Bacheca > aspetto > menu > personalizza > impostazioni home page > una pagina statica, pubblico.
Una Home page statica
Una home page di impatto è una pagina lunga pagina suddivisa in più sezioni sovrapposte. Questa operazione è fattibile con un tema tipo Divi. Di questo se ne parla nella pagina dedicata Configurazione del sito WordPress.
La seconda sezione dà il benvenuto.
La terza sezione è per le news del blog.
La quarta sezione è per i contatti.
Nella parte alta della Home, c’è la barra primaria in cui viene messo un menù coi link alle sezioni della Home e ad altre pagine o articoli.
Costruiamo Home page statica con Divi
Video: https://www.youtube.com/watch?v=oTyG3kdIv4g&t=71s,
Video Pascal …71s: dal minuto 50 al 51,20: 1 minuto di filmato.
bacheca > pagine > aggiungi pagina > titolo:
Home come costruire un sito in wordpress in una settimana.
Il titolo è lungo, ma sulla barra del menù faremo comparire solo la parola Home.
La prima sezione della pagina principale Home
Nella prima sezione della pagina principale Home, ci deve essere una immagine o un video con una frase di impatto che accolga i lettori.
Video Pascal …71s: 1.03,20 – 1.07,25: 4 minuti di filmato.
Il plugin Divi aiuta a costruire le pagine, con moduli regolabili nelle dimensioni, in cui si possono inserire testi, immagini, video, contatti, news…
Invece nella costruzione degli articoli è meglio usare Gutemberg di WP, molto più pratico da compilare e più amato dalla Seo .
Divi Builder > inizia a costruire
Vado nella sezione azzurra o viola, cliccando sul Bottone azzurro o viola.
Bottone azzurro o viola > aggiungi nuova sezione > ho 3 possibilità: standard, specialità, larghezza piena.
La standard (azzurra) può essere divisa in diverse colonne, (1.04,10-1.04,30). La specialità (rossa) è divisa in strutture più complesse, (1.04,31-1.04,55). La larghezza piena (viola) è molto utile per una pagina di impatto, come la home, (1.04,55-1.05,45).
Nella home l’immagine di sfondo deve riempire tutta la videata, ma se l’immagine che utilizzate non è abbastanza grande, scegliete l’opzione: larghezza piena, Vi chiede quale modulo inserire: intestazione a larghezza piena. Il modulo a sezione intera prende tutto il layout del pc, va bene per mettere una immagine di impatto nella home. Adesso entrate nel modulo grigio cliccando sulla rotellina (1.06,15), mettete il titolo: Home come costruire un sito in wordpress in una settimana; e il sottotitolo (1.06,45): Conquista il mondo con wordpress, dedicagli una settimana intensamente. Aggiungete un bottone o pulsante #1, scrivete ad es. “entra nel blog ” o più semplicemente “click” oppure “chi siamo” (1.06,51). Il bottone deve essere linkato alla seconda sezione. Scendete finchè trovate link o collegamento, aprite, sul pulsante 1 mettete l’URL di collegamento: #entra. (1.07,25).
La modifica dei pulsanti
La modifica dei pulsanti veloce: lo stile, i colori, il font, con o senza icona e l’hover. L’hover è un effetto visibile quando si passa sopra il bottone con il mouse, cambia di colore del bottone. Video Pascal …71s: 1.08,31 – 1.19,40: 11 minuti di filmato.
Uscite dal bilder visivo (in alto), a sinistra in alto aprite la tendina: modificatore di tema > bottoni (1.09,20). Ricordate che la modifica dello stile dei bottoni, i colori, font…può avvenire anche all’interno del builder, rotellina grigia > design > pulsante > usa stili personalizzati.
Centrate il titolo, la descrizione e il pulsante
Video Pascal …71s: 1.19,40 – 1.20,10 : 1 minuto di filmato: uscite e riattivate il builder visivo:
rotellina nera> design > layout > allineamento di testo e logo > centro e a schermo intero
Modificate lo sfondo
Il colore sfondo di default appare come configurato precedentemente: bacheca > aspetto > personalizza> impostazioni generali > impostazioni layout. Adesso posso modificare lo sfondo solo per questa pagina. Lo sfondo ha 4 possibilità: colore, gradiente, immagine, video. Video Pascal …71s: 1.23,31 – 1.24,10: 1 minuto di filmato: rotellina grigia > impostazioni intestazione > contenuti > sfondo. Potete mettere anche il gradiente, cioè un colore che sfuma in un altro. (1.24). Infine potete mettere anche un video.
Mettete un video di impatto
Il video funziona sui PC, sui tablet e sugli smartphone. Sugli smartphone vecchi il video potrebbe non funzionare. Se inserite un video, dovete mettere anche una immagine per i telefonini nella sezione grigia. (1.25.30). Il Vostro video va nella sezione viola: rotellina viola > impostazioni sezione > contenuti > sfondo > video.Video Pascal …71s: 1.24,11 – 1.33,00: 9 minuti di filmato. Bisogna mettere sia la versione MP4 che la versione WEBM. La versione MP4 è quella classica che si ha scaricando da You tube. La versione WEBM assieme alla classica MP4 Vi garantiscono di essere visibili con tutti i dispositivi.
Dove cercare video di impatto gratis
Trovate immagini, vettoriali e video di pochi secondi e compressi per cui leggeri su Pixabay.com (1.25,30).
I vettoriali sono immagini ad altissima risoluzione, che se zoommati non sgranano. I loghi sono vettoriali. Cerco il video su esplora di Pixabay, attenzione i video in alto sono a pagamento. Durano non più di quindici secondi, è specificato che è libero per usi commerciali.
Convertite il video dal formato MP4 al formato WEBM
Su Online-convert.com possono essere convertiti in WEBM i video scaricati in MP4. Andate su video-convert > converti in WEBM > scegli file, cioè prendete il file MP4 che avete appena scaricato col Vostro download, convert e scarico file.
Caricate sulla home page il video MP4 e WEBM
Tornate sul Vostro sito, caricate il video nei due formati sullo sfondo sezione azzurra. Non compare ancora nulla perché i video risultano coperti dal colore di sfondo dato nella sezione grigia. Andate su design, potete dare una trasparenza, per cui il video comparirà in trasparenza. (1.33,00).
Modificare il menù
Per modificare il menù, si accede alla bacheca, si passa o al modificatore di tema o al menù. Video Pascal …71s: 1.33,30 – 1.36,45: 3 minuti di filmato. Icona alto sin > modificatore di tema > menù > aggiungi menù > menù primario. Il menù primario comparirà nella barra di navigazione in alto. (1.34,00). Aggiungete voci al menù primario: pagine >
Trovate la Home che stavate costruendo: Home-wordpress-in-una-settimana, ci cliccate a destra, poi passate a sinistra e ci cliccate nuovamente, nell’etichetta di navigazione cambiate il lungo nome e lo rinominate semplificandolo a Home. Aggiungete voci: link personalizzato > URL: #entra, questo è quello che avevo scritto nel link della seconda sezione. Il testo del link: chi siamo, aggiungi al menù, pubblica. (1.35,20).
La Vostra Home diventa la pagina iniziale statica
Ora va configurata la Home page (1.35,40), in modo che quando cliccate sul logo del menù primario, si possa entrare nella Home e non nel “Ciao mondo”. Prima di tutto l’Home va pubblicata (1.36,00), poi la impostate come Home page. Andate su modificatore di tema > pagina iniziale statica > una pagina statica e selezionare sotto > pagina iniziale la mia Home-wordpress-in-una-settimana. e pubblicate. (1.36,45). Oppure andate su modificatore di tema > impostazioni homepage > una pagina statica e selezionare sotto > pagina iniziale la mia Home-wordpress-in-una-settimana e pubblicate. (1.36,45). Finalmente cliccando sul logo non trovate più il saluto “Ciao mondo”, ma la Vostra Home.
La seconda sezione della pagina principale Home
Nella seconda sezione mettete “chi siamo”. Farete in modo di arrivare alla seconda sezione sia attraverso il menù primario in alto, sia attraverso il pulsante posto nella prima sezione. Video Pascal …71s: 1.37,01 – 1.: minuti di filmato.
Inserite due moduli di testo e immagine
La seconda sezione del “Chi siamo” è di benvenuto.
Attivate il builder visivo, scorro in basso, bottone blu > inserisci sezione > standard. Mettete un testo sulla sinistra e una immagine sulla destra, cliccate sulla sezione doppia, e inserite i due moduli: testo e immagine.
Inserite un titolo della seconda sezione
Video Pascal …71s: 1.40,31 – 1.44,20: 4 minuti di filmato. builder: bottone verde > sezione intera > modulo di testo: “il titolo..” (qualche parola chiave.) Dategli una dimensione da titolo: paragrafo, heading 1, andate su design per centrare il testo, se volete mettere uno sfondo, andate su contenuto > sfondo > colore, se il testo si vede poco, andate su design e schiarisco, se volete cambiare il colore del sottotitolo, andate su design > test del sottotilolo.
Collegate il menu e il bottone “chi siamo” alla seconda sezione: rotellina azzurra > avanzate > ID & Classi CSS > ID CSS > entra (senza cancelletto), uscite dal builder visivo e visualizza. (1.45,10)
Create la terza sezione per le ultime news
Copiate la seconda sezione: di fianco alla rotellina azzurra ci sono due rettangoli sovrapposti, ci cliccate e voilà la copia è fatta. Video Pascal …71s: 1.45,11 – 1.49,30: 4 minuti di filmato. Fate le modifiche del titolo, eliminate i due moduli testo e immagine. Trasformate la sezione fatta da 2 colonne, in 1 una sola colonna: sezione verde > modifica struttura colonna (a destra dei rettangoli sovrapposti), > layout a schermo intero > rotellina grigia > slider post > n° articoli che scorreranno (3,4, o 5), poi categoria, ordinamento data, script sul pulsante “leggi di più”, mostra riassunto, se togliete il mostra meta del post scompariranno autore, data, categorie e commenti. Se volete stringere questo post: rotellina verde > design > larghezza personalizzata o dimensionamento > larghezza massima, es 700px.