Vai al contenuto principale

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

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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.

Modello di intestazione globale del titolo del sito dinamico 6

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

Esempio di modifica del titolo Divi

Download gratuito

Unisciti a Divi Newlsetter e ti invieremo via e-mail una copia dell'Ultimate Divi Landing Page Layout Pack, insieme a tantissime altre incredibili risorse, suggerimenti e trucchi Divi gratuiti. Seguilo e sarai un maestro Divi 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.

Scegli un modello divi

Una volta completato, il modello di intestazione generale sarà disponibile in Divi Theme Builder.

Modifica intestazione divi globale

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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Personalizza titolo divi

E alcune persone non si rendono nemmeno conto che lo slogan esiste, per non parlare del tempo per aggiornarlo. Inoltre, quando utilizzi il tema Divi, il titolo del sito e lo slogan non saranno visibili sul tuo sito per impostazione predefinita, quindi è facile ignorarli. Tuttavia, il titolo del sito e lo slogan sono parti 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.

Personalizza l'identità di wordpress

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 individuare il file JSON del modello di sito Web predefinito.

Quindi vai su Divi> Theme Builder.

Fare clic sull'icona della portabilità in alto a destra. Nella finestra a comparsa della portabilità, scegli il file JSON del modello di sito Web predefinito e fai clic sul pulsante Importa.

Importazione del modello Divi

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.

Rimuovi modello dal piè di pagina

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.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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).

Personalizza l'invito all'azione

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.

Configura azioni di invito all'azione

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 uno slogan del sito divi

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.

Aggiungi un collegamento alla home page

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
Personalizza il carattere del titolo divi

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
Aggiungi codice css divi personalizzato

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.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Personalizza il pulsante di contatto divi

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%
Personalizza lo sfondo del pulsante divi

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.

Mostra lo slogan divi

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!

Risultato finale divi

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

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
0 azioni
quota
Tweet
Enregistrer