Vai al contenuto principale

Come creare un'intestazione personalizzata in WordPress con Elementor

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

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

Ti piacerebbe creare un'intestazione personalizzata in WordPress con Elementor?

L'intestazione è uno degli elementi cruciali che ogni sito web dovrebbe avere. Un'intestazione di solito contiene un menu, che facilita la navigazione dei visitatori verso pagine importanti del tuo sito web. Un altro elemento che si trova in genere nell'intestazione di un sito Web è il logo.

Scopri Come installare Elementor su WordPress

La maggior parte dei temi WordPress, gratuiti o a pagamento, ti consente di personalizzare l'intestazione aggiungendo il logo del tuo sito Web o il menu di navigazione. Alcuni temi di WordPress ti consentono di aggiungere elementi aggiuntivi come la barra di ricerca e le icone dei social media.

Ma è possibile creare un'intestazione personalizzata in WordPress per sostituire l'intestazione del tema WordPress attivo?

Naturalmente, puoi creare un'intestazione personalizzata per sovrascrivere l'intestazione predefinita per il tema attualmente attivo sul tuo sito Web WordPress.

Se hai capacità di programmazione (in questo caso PHP), creare un'intestazione personalizzata per un tema WordPress non è un grosso problema. Se non hai competenze di programmazione, Elementor ti consente di creare un'intestazione personalizzata senza scrivere una singola riga di codice. Puoi creare l'intestazione tramite un editor visivo trascinando e rilasciando.

Nota: Theme Builder è disponibile solo su Elementor Pro.

Come creare un'intestazione personalizzata in WordPress con Elementor

La versione pro di Elementor include una funzionalità chiamata Generatore di temi. Questa funzione ti consente di creare un tema WordPress senza codifica. Gli elementi del tema che puoi creare con il generatore di temi di Elementor sono i seguenti:

  • testata
  • footer
  • Modello di post singolo
  • Modello di pagina di archivio
  • Modello di pagina 404

In questo articolo, ti mostreremo come creare un'intestazione personalizzata per il tuo tema WordPress con Elementor. Una volta pubblicata, questa intestazione personalizzata sostituirà l'intestazione del tema corrente.

Prima di iniziare, assicurati di aver installato Elementor Pro sul tuo sito WordPress.

Per prima cosa, vai su Modelli -> Generatore di temi.

Nella pagina Theme Builder, vai alla scheda testata e fare clic sul pulsante aggiungere per creare una nuova intestazione.

Apparirà una finestra pop-up che ti chiederà di dare un nome al tuo modello. Digita il nome del tuo modello e clicca sul pulsante CREA UN MODELLO.

Elementor ti consente di creare un'intestazione da un modello. Seleziona uno dei modelli disponibili nella libreria modelli e fai clic sul pulsante inserire per caricarlo nell'editor di Elementor.

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]

Puoi anche creare l'intestazione da zero. Se preferisci creare l'intestazione da zero, puoi semplicemente chiudere la libreria dei modelli per aprire l'editor di Elementor.

Tecnicamente, puoi aggiungere qualsiasi widget Elementor, che puoi esplorare nel pannello di sinistra, all'intestazione. Ma non tutti i widget sono realmente necessari quando si tratta di creare l'intestazione del sito web.

In questo articolo, ti mostreremo come aggiungere gli elementi comuni di un'intestazione: logo del sito web, menu di navigazione e barra di ricerca. In questo caso, avrai bisogno di una nuova sezione con tre colonne. Fai clic sull'icona più nell'editor di Elementor e seleziona la struttura a tre colonne.

aggiungi sezione colonna

Imposta la larghezza di ogni colonna trascinando il divisore verso sinistra o verso destra. Dai un'occhiata alla cattura qui sotto.

 

  • Aggiungi il logo del sito web

Per aggiungere il logo del sito web, trascina il widget Logo del sito dal pannello di sinistra a una delle colonne nell'editor di Elementor.

il widget Logo del sito caricherà il logo del tuo sito web. Se non hai specificato il logo del tuo sito web, puoi andare su Aspetto -> Personalizza per aggiungere il tuo logo.

Leggi anche: Come importare o esportare modelli in Elementor 

Puoi personalizzare il tuo logo tramite il pannello di sinistra. Puoi definire elementi come allineamento, collegamento, larghezza, ecc.

Gioca con il pannello di sinistra finché non sei soddisfatto del risultato.

  • Aggiungi menu di navigazione

Per aggiungere il menu di navigazione, trascina il widget Menu di navigazione a una delle colonne nell'editor di Elementor.

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]

il widget Menu di navigazione caricherà il menu principale del tuo sito web. Se non hai creato alcun menu sul tuo sito web, puoi andare su Aspetto -> Menu per crearne uno. Se hai più menu sul tuo sito web, puoi specificare quale vuoi visualizzare dal menu a discesa delle opzioni Menu del pannello di sinistra.

Ancora una volta, puoi giocare con il pannello di sinistra per personalizzare il tuo menu. È possibile impostare il layout (orizzontale, verticale), l'allineamento, l'effetto di animazione e così via.

  • Aggiungi barra di ricerca

Per aggiungere la barra di ricerca, puoi trascinare il widget Modulo di ricerca nella colonna rimanente.

Una volta aggiunto il modulo, puoi andare nel pannello di sinistra per personalizzarlo.

Personalizza l'intestazione

Per impostazione predefinita, l'intestazione avrà uno sfondo bianco. Puoi cambiare questo colore in modo che corrisponda al colore del tuo tema. Per farlo, attiva la sezione cliccandoci sopra nel browser (Ctrl + i)

Vai alla scheda Stile sul pannello di sinistra e seleziona il tuo colore preferito facendo clic sul selettore di colori nell'opzione Colore sezione sfondo.

Come creare un'intestazione in WordPress con Elementor

Se vuoi avere un'intestazione adesiva, puoi andare alla scheda Avanzate. Nell'opzione Appiccicoso, sotto la sezione Effetti di movimento, impostare la posizione Sticky. Per impostazione predefinita, l'effetto Sticky verrà applicato a tutti i tipi di dispositivi (desktop, tablet e smartphone).

Leggi anche: Elementor Pro: 10 fantastiche funzionalità da sbloccare - Parte I

Se vuoi disattivare l'effetto Sticky su un certo tipo di dispositivo, rimuovi semplicemente il dispositivo dal campo.

Come creare un'intestazione in WordPress con Elementor

Pubblica la tua intestazione personalizzata

Finora hai creato con successo la tua intestazione personalizzata. Ci sono molte altre opzioni di ottimizzazione che puoi impostare ed è impossibile trattarle tutte in questo post.

Vedi anche: Come creare un modello di post unico con Elementor Pro

Gioca con il pannello di sinistra finché non sei davvero soddisfatto del risultato. Quando hai finito, fai clic sul pulsante PUBBLICARE nella parte inferiore del pannello di sinistra per pubblicare il modello di intestazione.

Nel passaggio successivo, ti verrà chiesto di impostare le condizioni di visualizzazione. Fare clic sul pulsante AGGIUNGI CONDIZIONE

Per impostazione predefinita, il modello di intestazione verrà applicato all'intero sito web. Quindi, se vuoi che il tuo modello di intestazione venga applicato all'intero sito web, puoi semplicemente fare clic sul pulsante SALVA E CHIUDI.

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]

Leggi anche: Come creare un piè di pagina in WordPress con Elementor

Oppure, se desideri applicare il modello di intestazione a una pagina specifica, puoi specificare la pagina facendo clic sul menu a discesa. Seleziona la pagina dall'altro menu a tendina che compare di seguito. Fare clic sul pulsante SALVA E CHIUDI una volta che hai finito di specificare la pagina.

Come creare un'intestazione in WordPress con Elementor

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questo articolo che ti mostra come creare un'intestazione personalizzata in WordPress con Elementor. Se hai dubbi su come arrivarci, faccelo sapere nel commentaires.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...

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