Come aggiungere un titolo e uno slogan dinamico del sito a un'intestazione globale Divi

Pubblicato: 2020-05-15

Sapere come aggiungere un titolo di un sito dinamico e uno slogan a un Divi Global Header sarà utile durante la creazione di siti Web Divi. E ci sono alcune buone ragioni per farlo. Per uno, non tutti i siti hanno un logo. Il titolo di un sito è un buon sostituto del logo. Un altro motivo è quello di potenziare il tuo marchio includendo informazioni vitali sul tuo sito in cui tutti lo vedranno.

In questo tutorial, ti mostreremo come aggiungere un titolo e una tagline di un sito dinamico a un'intestazione globale Divi. Questa soluzione estrarrà dinamicamente il titolo del sito e lo slogan dal back-end di WordPress. Inoltre, avrai tutte le potenti opzioni di design di Divi per personalizzare il titolo e lo slogan come preferisci!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Notare il titolo del sito e lo slogan nella parte superiore centrale dell'intestazione che viene visualizzata dinamicamente.

Scarica GRATUITAMENTE il titolo dinamico del sito e lo slogan Divi Global Header Template

Per mettere le mani sul modello di intestazione globale di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il modello, vai su Divi > Generatore di temi.

Fare clic sull'icona della portabilità in alto a destra della pagina.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il modello di intestazione globale sarà disponibile nel Divi Theme Builder.

Passiamo al tutorial, vero?

Il titolo del sito e lo slogan in WordPress

Ogni sito WordPress ha un titolo e uno slogan. Il titolo del sito è essenzialmente il nome del sito e lo slogan è una breve frase che di solito spiega di cosa tratta il sito.

Non è raro aggiungere il titolo del sito durante l'installazione di WordPress e dimenticarsene.

E alcune persone non si rendono nemmeno conto che lo slogan esiste, tanto meno si prendono il tempo per aggiornarlo. Inoltre, quando si utilizza il tema Divi, il titolo e lo slogan del sito non saranno visibili sul tuo sito per impostazione predefinita, quindi è facile ignorarli. Tuttavia, sia il titolo del sito che lo slogan sono elementi vitali del sito Web e saranno riconosciuti dai motori di ricerca.

Puoi individuare e aggiornare il titolo e lo slogan del sito in WordPress in qualsiasi momento accedendo alla dashboard di WordPress e andando su Impostazioni > Generali.

In alternativa, puoi prendere un'altra strada utilizzando il personalizzatore del tema per aggiornare il titolo del sito nelle impostazioni generali.

Ora che sappiamo dove si trovano il titolo del sito e lo slogan sul backend di WordPress, esploriamo come possiamo aggiungerli a un'intestazione Divi!

Come aggiungere un titolo e uno slogan dinamico del sito a un'intestazione globale in Divi

Importazione del modello di intestazione globale predefinito

Per questo tutorial, ci concentreremo su come aggiungere il titolo e lo slogan del sito dinamico a un'intestazione esistente invece di creare un'intestazione completa da zero. Ciò contribuirà a risparmiare tempo e a migliorare la chiarezza. Quindi, per avviare questo design di intestazione, importeremo un modello di intestazione globale predefinito dal nostro quarto pacchetto di creazione di temi.

Una volta scaricato il pacchetto del generatore di temi, decomprimi il file e trova il file JSON del modello di sito Web predefinito.

Quindi vai a Divi > Generatore di temi.

Fare clic sull'icona della portabilità in alto a destra. All'interno del popup di portabilità, scegli il file JSON del modello di sito Web predefinito e fai clic sul pulsante di importazione.

Una volta che il modello è stato aggiunto al generatore di temi, elimina il modello del piè di pagina e fai clic per modificare l'intestazione globale.

Aggiunta di titolo e slogan dinamico del sito all'intestazione

All'interno dell'editor di layout del modello, vedrai l'intestazione già progettata. Possiamo iniziare subito a realizzare le nostre personalizzazioni.

Sposta il logo

Per iniziare, trascina il modulo immagine che mostra il logo (dinamicamente) dalla colonna centrale nella riga superiore alla colonna sinistra nella riga superiore.

Aggiungi il modulo di invito all'azione per visualizzare il titolo e lo slogan del sito

Quindi aggiungi un nuovo modulo Call to Action alla colonna centrale della riga superiore (dove si trovava il logo).

Utilizzeremo il modulo Call to Action per visualizzare il titolo del sito e lo slogan.

Ma prima di iniziare ad aggiungere contenuto, seleziona NON per utilizzare il colore di sfondo.

Aggiungi il titolo del sito dinamico

Sotto le impostazioni del contenuto, passa il mouse sopra la casella di inserimento del titolo e fai clic sull'icona "Usa contenuto dinamico". Quindi seleziona "Titolo sito" dall'elenco.

Aggiungi slogan dinamico del sito

Quindi, passa il mouse sull'area del corpo e seleziona l'icona "Usa contenuto dinamico". Quindi seleziona "Site Tagline" dall'elenco.

Aggiungi link dinamico alla home page

È comune che il titolo del sito reindirizzi alla home page al clic, soprattutto se si sostituisce il logo. Per fare in modo che l'intero modulo reindirizzi alla home page, aggiungi il link della home page come contenuto dinamico all'URL del link del modulo.

Titolo del sito e design del testo dello slogan

Ora il titolo e lo slogan del sito vengono visualizzati dinamicamente nell'intestazione. Tutto quello che dobbiamo fare ora è aggiungere un po' di stile. Ricorda, dobbiamo personalizzare il testo del titolo per progettare il titolo del sito e il corpo del testo per progettare lo slogan.

Passa alla scheda Progettazione e aggiorna quanto segue:

Carattere del titolo: Heebo
Peso del carattere del titolo: grassetto
Stile carattere titolo: TT
Dimensione del testo del titolo: 32px (desktop), 24px (tablet e telefono)
Spaziatura delle lettere del titolo: 0.3em
Carattere del corpo: Roboto
Stile del carattere del corpo: corsivo
Colore del corpo del testo:
Dimensione del testo del corpo: 13px
Spaziatura delle lettere del corpo: 0,1 em
Altezza della linea del corpo: 1em

Per aiutare con il centraggio, elimina il riempimento predefinito sotto il corpo del testo aggiungendo il seguente CSS personalizzato alla descrizione della promozione:

padding-bottom: 0px

Ulteriori modifiche al design

Per quest'ultima parte del tutorial, apporteremo alcune modifiche di design aggiuntive all'intestazione per assicurarci che gli elementi rimangano centrati verticalmente in ogni colonna e per dare al pulsante un design unico. Aggiungeremo anche una linea ondulata prima e dopo allo slogan (solo per i calci).

Centrare verticalmente le colonne/il contenuto

In questo momento la riga superiore è attiva "Equalizza altezze colonne" che utilizza la proprietà flex. Possiamo capitalizzare su questo aggiungendo un piccolo frammento CSS per assicurarci che tutte le colonne rimangano centrate verticalmente all'interno della riga. Per fare ciò, apri le impostazioni per la riga superiore e aggiungi il seguente CSS all'elemento principale:

align-items: center;

Aggiornamento della colonna con il pulsante

Quindi, apri le impostazioni per la colonna 3 nella riga superiore ed elimina il colore di sfondo e il riempimento.

Aggiornamento dello sfondo del pulsante

Quindi apri l'impostazione per il modulo pulsante e aggiorna lo sfondo con un nuovo gradiente di sfondo come segue:

Colore di sfondo sfumato a sinistra: #ffffff
Colore di sfondo sfumato a destra: #1dbf73
Direzione del gradiente: 135 gradi
Posizione di partenza: 10%
Posizione finale: 0%

Aggiunta di caratteri prima e dopo allo slogan

Ogni elemento di contenuto dinamico può essere modificato facendo clic sull'icona a forma di ingranaggio. Per aggiungere caratteri prima e dopo allo slogan, apri le impostazioni per il modulo di invito all'azione che contiene lo slogan e fai clic sull'icona di modifica nel contenuto dinamico dello slogan del sito. Quindi aggiungi i caratteri agli input prima e dopo.

Risultato finale

Per visualizzare il risultato, apri qualsiasi pagina del tuo sito. Dovresti vedere il titolo del sito dinamico e lo slogan visualizzati magnificamente!

Ecco come si impila su tablet e telefono.

Pensieri finali

È davvero bello poter personalizzare un'intestazione globale con un titolo del sito dinamico e uno slogan. Sembra qualcosa che tornerà utile per molti siti. Mi piace anche l'idea di includere il titolo del sito e lo slogan oltre al logo per una rappresentazione del marchio ancora più forte.

Non vedo l'ora di sentirti nei commenti.

Saluti!