Come creare sezioni del sito Web Hero in Gutenberg con il tema totale

Il tema Total WordPress viene fornito con tutta una serie di strumenti di cui un sito Web aziendale potrebbe mai aver bisogno.

Il tema ti offre la modifica visiva tramite WordPress Customizer e una rapida importazione di dati demo, che sono particolarmente utili per creare una prima pagina eccezionale.

Come vedi, la versione gratuita di Total non ti blocca con alcun costruttore di pagine WordPress aggiuntivo, ma offre piuttosto un modo nativo di WordPress per progettare il tuo sito web.

Con l'arrivo di Gutenberg, l'editor WordPress basato su blocchi, qualsiasi tema WordPress, incluso Total, può essere ulteriormente personalizzato. La scelta degli elementi di contenuto (blocchi) ci dà la libertà di personalizzazione che non abbiamo mai visto prima nel core di WordPress, difficile negarlo.

Alcune impostazioni di stile dei blocchi, tuttavia, sono ancora molto limitate nell'editor predefinito. Quindi, se utilizzi il nuovo editor Gutenberg e Total cercando di creare e progettare contenuti migliori, troverai alcuni suggerimenti utili in questo tutorial.

Per essere più precisi, in questo post, vorremmo mostrare alcuni esempi di come costruire e personalizzare elementi cruciali del sito Web come sezioni di eroe, suberoe e invito all'azione in Gutenberg. Quelli che di solito aiutano le aziende:

• Crea sezioni del sito web di introduzione/benvenuto
• Promuovi prodotti o eventi chiave
• Concentrarsi su elementi o servizi specifici del portafoglio, ecc.

Per potenziare le possibilità di personalizzazione di Gutenberg, utilizzeremo il plug-in Getwid WordPress Blocks che raccomandiamo agli utenti del tema Total. Siamo sicuri che alcuni utenti di Total si siano già cimentati con Getwid.

Ma per quelli di voi che si chiedono cosa sia Getwid, quella che segue è una breve descrizione.

In poche parole, è un componente aggiuntivo gratuito nativo di Gutenberg che viene fornito finora con la più grande libreria di blocchi premium e una raccolta di design su misura per Gutenberg . Non è l'unico motivo per cui lo consigliamo.

Siamo particolarmente interessati a questo plug-in perché si integra perfettamente con lo stile Total predefinito, ti consente di disattivare tutti i blocchi che non ti servono ed è davvero ricco di funzionalità.

Il plug-in viene visualizzato come consigliato quando attivi Total: è una soluzione temporanea per vedere se è adatta ai nostri clienti.

Ma beh, devi provarlo tu stesso per vedere se è la tua soluzione. Nel frattempo, esaminiamo gli esempi che siamo riusciti a creare.

Esempi di sezioni di eroe e invito all'azione creati con Getwid in Total

Abbiamo eseguito questi test in una versione gratuita del tema Total e possiamo tranquillamente affermare che non c'erano quasi limitazioni.

Tuttavia, le opzioni di Larghezza totale del contenitore del sito Web sono limitate, quindi se stai cercando layout immersivi a schermo intero, potresti pensare a Total Plus.

Prima di tutto, dovrai quasi sempre utilizzare i blocchi Section di Getwid WordPress. È un contenitore in grado di gestire un numero qualsiasi di altri blocchi. Pertanto, le sezioni del tuo eroe possono visualizzare qualsiasi tipo di contenuto.

Un'altra cosa importante del contenitore Sezione è che ti offre molti tipi di sfondo: un'immagine, un colore, un video (dalla tua libreria multimediale WP o YouTube), gradiente multicolore e altro.

Quindi i tuoi compiti principali durante la progettazione di aree di un sito Web con il blocco Sezione sono:

• Scegli e personalizza il tipo di sfondo in modo che il contenuto su di esso rimanga leggibile e chiaro.
• Inserire i blocchi necessari nell'ordine preferito.
• Regola la spaziatura (ci sono angoli trascinabili proprio come nei costruttori visivi per impostare gli spazi interni ed esterni).
• Opzionale: aggiungi animazione, divisori di forma e altri elementi decorativi.

Andiamo ora con gli esempi.

Esempio 1. La vetrina del prodotto

Tutti i blocchi in questo esempio sono posizionati all'interno del blocco Sezione:

1. Intestazione avanzata
2. Intestazione avanzata
3. Intestazione avanzata
4. Gruppo di pulsanti
5. Sfondo della sezione: un'immagine (Posizionamento > In alto a destra; Dimensioni > Automatico)

Il blocco dell'intestazione ti consente di utilizzare qualsiasi tipo di carattere Google, dimensione del testo, peso del carattere, ecc. Esistono anche diversi stili per i pulsanti (riempimento o contorno).

La sfida più grande che può verificarsi è trovare l'immagine di sfondo giusta e scegliere la posizione corretta dell'immagine poiché viene ridimensionata automaticamente in base alla finestra.

Esempio 2. Estratto del portafoglio

Tutti i blocchi sono posizionati all'interno del blocco Sezione:

1. Intestazione avanzata
2. Intestazione avanzata
3. Tre colonne (Paragrafo, Immagine, Immagine, Immagine)
4. Sfondo della sezione: gradiente

Puoi anche inserire un pulsante di invito all'azione per collegarti alla pagina completa del portfolio.

Esempio 3. Carta caratteristica o evento

In una sezione di questo tipo puoi mostrare un prodotto, un evento, un servizio, una cosa, una persona, ecc.

Il blocco Intestazione avanzata ti consente di scegliere qualsiasi tipo di carattere:

In questo esempio, abbiamo utilizzato uno sfondo sfumato e un divisore di forma inferiore dello sfondo (Waves Multilayered).

1. Due titoli avanzati
2. Paragrafo
3. Pulsante
4. Immagine
5. Sfondo della sezione: gradiente + divisori di forma

Esempio 4. Sezione di invito all'azione

Ancora una volta, devi iniziare con il blocco Sezione. Per posizionare intestazioni come nell'esempio seguente, puoi utilizzare un modello dalla libreria di modelli Getwid o creare un modello da zero.

È una sezione molto semplice con l'immagine di sfondo, alcune intestazioni e un pulsante centralizzato.

1. Tre blocchi di intestazione avanzati
2. Il blocco dei pulsanti
3. Sfondo della sezione: un'immagine con opacità (Taglia > copertina)

Ti divertirai anche con la facilità con cui puoi regolare l'allineamento del contenuto con gli angoli trascinabili:

È anche una tendenza creare layout offset inserendo intestazioni sulle immagini:

In Getwid, puoi ottenerlo impostando un'immagine di sfondo appropriata con uno spazio vuoto per la riga di testo.

Esempio 5. Sezioni di sub-eroi

Molto spesso le sezioni dei sub-eroi forniscono maggiori informazioni su un progetto o una persona. È adatto per presentare la tua biografia, storia o obiettivi chiave.

Come elemento visivo, abbiamo utilizzato il blocco Image Stack Gallery di Getwid, che viene fornito con diversi stili. Puoi, tuttavia, sostituirlo con un'immagine, un video o qualsiasi altro elemento di contenuto.

1. Due titoli avanzati
2. Paragrafo
3. Pulsante
4. Il blocco Galleria Stack di immagini
5. Fondo della sezione: tinta unita

Esempio 6. Accenti visivi

Gallerie di immagini, slider e video sono strumenti visivi molto comuni per creare sezioni che attirino l'attenzione.

Ad esempio, puoi utilizzare il blocco Media & Text Slider di Getwid per creare una presentazione con contenuto di testo opzionale:

1. Dispositivo di scorrimento per file multimediali e testo
2. Sfondo della sezione: gradiente + divisori superiore e inferiore con altezza personalizzata

Ci sono anche numerosi blocchi Getwid basati su post che possono essere presentati in un dispositivo di scorrimento (verranno automaticamente ricavati dal contenuto del tuo sito web). Vuoi presentare alcuni post più recenti o selezionati manualmente in un formato slider o griglia/elenco? C'è un blocco per questo.

Esempio 7. Banner

Getwid viene fornito con un pratico blocco Banner che offre contenitori predefiniti di immagini e testo. Ha anche una scelta di effetti di animazione che ti consentono di creare sezioni con banner più dinamiche.

Il blocco è un abbinamento perfetto sia per le vendite temporanee che per i momenti salienti costanti.

1. Banner
2. Fondo della sezione: gradiente monocromatico

Esempio 8. Sezioni informative

Se vuoi mostrare più informazioni in modo strutturato e compatto, Getwid offre tre blocchi dedicati a questo scopo: Tabs, Accordion e Toggle.

Ecco un layout a due colonne con il blocco Accordion e un'immagine accanto ad esso:

La caratteristica unica di questi blocchi è la capacità di contenere qualsiasi blocco all'interno dei widget a schede. Ciò significa che, oltre al testo, puoi aggiungere immagini, elenchi, video, gallerie, slider alle schede.

Ci sono molti altri blocchi che possono aggiungere funzionalità uniche alle tue sezioni di marketing, ad esempio Image Hotspot per creare sezioni di immagini informative, Icon Box per i servizi, un feed della galleria di Instagram in tempo reale e altro ancora.

Puoi creare e progettare sezioni simili da una pagina Gutenberg vuota, optando per il layout di pagina necessario nelle impostazioni della pagina Totale.

Per concludere

Sai qual è la cosa migliore dell'utilizzo della combinazione Gutenberg e Getwid nel tema Total gratuito? No, non è solo il numero di blocchi che conta.

Cosa più importante, non è necessario avere l'occhio di un designer (o le capacità di uno sviluppatore) per creare contenuti di bell'aspetto. Ci sono così tante skin prefabbricate, modelli a blocchi e design pronti all'uso che sono lì per aiutarti. Getwid WordPress Blocks sono anche una buona alternativa ai page builder per quelli di voi che soggiornano con la versione gratuita di Total.

Fino a quando l'editor di blocchi non sarà sufficientemente maturo, un componente aggiuntivo nativo di Gutenberg può essere un ottimo punto di partenza.

Hai provato Gutenberg o Getwid? Fateci sapere nei commenti.