Sapere come aggiungere un titolo di sito dinamico e uno slogan a un'intestazione globale Divi sarà utile durante la creazione di siti Web Divi. E ci sono alcuni buoni motivi per farlo. Da un lato, non tutti i siti hanno un logo. Il titolo di un sito è un buon sostituto del logo. Un altro motivo è aumentare il tuo marchio includendo informazioni vitali sul tuo sito dove tutti le vedranno.
In questo tutorial, ti mostreremo come aggiungere un titolo del sito dinamico e uno slogan a un'intestazione globale Divi. Questa soluzione estrarrà dinamicamente il titolo del sito e la tagline dal back-end di WordPress. Inoltre, avrai tutte le potenti opzioni di design di Divi per personalizzare il titolo e lo slogan come preferisci!
Possibile risultato
Ecco un'anteprima del design che costruiremo in questo tutorial.
Nota il titolo del sito e lo slogan nella parte superiore centrale dell'intestazione che viene visualizzata dinamicamente.
Download gratuito
Unisciti al Divi Newlsetter e ti invieremo via email una copia del Divi Ultimate Landing Page Layout Pack, oltre a molti altri risorse, suggerimenti e trucchi Divi gratuiti e sorprendenti. Seguilo e diventerai un Divi Master in pochissimo tempo. Se sei già abbonato, inserisci semplicemente il tuo indirizzo e-mail di seguito e fai clic su download per accedere al layout pack.DOWNLOAD
Per importare il modello, vai a Divi> Generatore di temi.
Fare clic sull'icona della portabilità in alto a destra nella pagina.
Nella finestra a comparsa 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 completato, il modello di intestazione generale sarà disponibile in Divi Theme Builder.
Di seguito passeremo al design.
Il titolo del sito e lo slogan su WordPress
Ogni sito WordPress ha un titolo del sito e uno slogan. Il titolo del sito è fondamentalmente il nome del sito e lo slogan è una breve frase che di solito spiega di cosa si tratta.
Non è raro aggiungere il titolo del sito durante l'installazione di WordPress e dimenticarlo.
E alcune persone non si rendono nemmeno conto che lo slogan esiste, per non parlare del tempo necessario 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 trascurarli. Tuttavia, il titolo del sito e lo slogan sono elementi essenziali del sito Web e saranno riconosciuti dai motori di ricerca.
Puoi individuare e aggiornare il titolo del sito e lo slogan in WordPress in qualsiasi momento accedendo alla dashboard di WordPress e accedendo a Impostazioni> Generali.
In alternativa, puoi seguire un altro percorso utilizzando il personalizzatore del tema per aggiornare il titolo del sito nelle impostazioni generali.
Ora che sappiamo dove si trovano il titolo e lo slogan del sito nel backend di WordPress, esploriamo come possiamo aggiungerli a un'intestazione Divi!
Come aggiungere un titolo e uno slogan dinamici del sito a un'intestazione globale in Divi
Importazione del modello di intestazione globale preimpostato
Per questo tutorial, ci concentreremo su come aggiungere il titolo del sito dinamico e lo slogan a un'intestazione esistente invece di creare un'intestazione completa da zero. Ti farà risparmiare tempo e migliorerà la chiarezza. Quindi, per iniziare questa progettazione dell'intestazione, importeremo un modello di intestazione globale predefinito dal nostro file quarto generatore di temi .
Una volta che hai scaricato il pacchetto di creazione di tema , decomprimere il file e trovare il file JSON di modello di sito web Predefinito.
Quindi vai su Divi> Theme Builder.
Fare clic sull'icona della portabilità in alto a destra. Nella finestra pop-up di portabilità, scegli il file JSON da modello di sito web predefinito e fare clic sul pulsante Importa.
Una volta che il modello è stato aggiunto al generatore di temi, elimina il modello di piè di pagina e fai clic per modificare l'intestazione generale.
Aggiunta di un titolo del sito dinamico e una tagline all'intestazione
All'interno dell'editor del layout del modello, vedrai l'intestazione predefinita già progettata. Possiamo iniziare subito a fare le nostre personalizzazioni.
Sposta logo
Per iniziare, trascina il modulo immagine che mostra il logo (dinamicamente) dalla colonna centrale della riga superiore alla colonna sinistra della riga superiore.
Aggiungi un modulo di invito all'azione per visualizzare il titolo del sito e lo slogan
Quindi aggiungi un nuovo modulo Call to Action nella colonna centrale della riga superiore (dove si trovava il logo).
Useremo il modulo Call to Action per visualizzare il titolo del sito e lo slogan.
Ma prima di iniziare ad aggiungere contenuti, seleziona prima NO per utilizzare il colore di sfondo.
Aggiungi un titolo dinamico al sito
Nelle impostazioni del contenuto, passa con il mouse sopra la casella di immissione del titolo e fai clic sull'icona "Usa contenuto dinamico". Quindi seleziona "Titolo del sito" dall'elenco.
Aggiungi uno slogan dinamico del sito
Quindi, passa il mouse sull'area del corpo e seleziona l'icona "Utilizza contenuto dinamico". Quindi seleziona "Tagline del sito" dall'elenco.
Aggiungi un link dinamico alla home page
È normale che il titolo del sito reindirizzi alla home page al clic, soprattutto se si sostituisce il logo. Per reindirizzare l'intero corso alla home page, aggiungere il collegamento alla home page come contenuto dinamico all'URL del collegamento al corso.
Progettazione del testo del titolo e dello slogan del sito
Ora il titolo del sito e lo slogan 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 testo del corpo per progettare il motto.
Passa alla scheda di progettazione e aggiorna quanto segue:
- Carattere del titolo: Heebo
- Peso carattere titolo: grassetto
- Stile carattere titolo: TT
- Dimensione testo titolo: 32 px (desktop), 24 px (tablet e telefono)
- Spaziatura lettere titolo: 0.3em
- Carattere del corpo: Roboto
- Stile carattere corpo: corsivo
- Colore del corpo:
- Dimensioni del testo del corpo: 13 px
- Distanza tra le lettere del corpo: 0.1em
- Altezza della linea del corpo: 1em
Per facilitare il centraggio, elimina l'imbottitura predefinita sotto il testo del corpo aggiungendo il seguente CSS personalizzato alla descrizione della promozione:
imbottitura inferiore: 0px
Aggiustamenti di progettazione aggiuntivi
Per quest'ultima parte del tutorial, apporteremo alcune modifiche al design dell'intestazione per assicurarci che gli elementi rimangano centrati verticalmente in ogni colonna e per dare al pulsante un design unico. Aggiungeremo anche una linea a spirale prima e dopo alla tagline (solo per i calci).
Centratura verticale delle colonne / del contenuto
In questo momento la riga superiore è "Equalize Column Heights" attiva che utilizza la proprietà flex. Possiamo trarre vantaggio da 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 le impostazioni del modulo dei pulsanti e aggiorna lo sfondo con un nuovo gradiente di sfondo come segue:
- Sfondo sfumato Colore sinistro: #ffffff
- Colore gradiente di sfondo a destra: # 1dbf73
- Direzione gradiente: 135deg
- Posizione iniziale: 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 del modulo di invito all'azione contenente lo slogan e fai clic sull'icona di modifica sul contenuto dinamico dello slogan del sito. Quindi aggiungi i caratteri alle voci prima e dopo.
Risultato finale
Per vedere il risultato, apri una pagina qualsiasi del tuo sito. Dovresti vedere il titolo del sito dinamico e lo slogan visualizzati magnificamente!
Considerazioni finali
È davvero bello poter personalizzare un'intestazione generale con un titolo del sito e uno slogan dinamici. Sembra qualcosa che sarà utile per molti siti. Mi piace anche l'idea di includere il titolo del sito e la tagline oltre al logo per una rappresentazione ancora più forte del marchio.
Fonte: Tema elegante
