Come creare una splendida intestazione appiccicosa usando Elementor (Tutorial Element)

Pubblicato: 2019-09-11

Potresti già sapere che Elementor è un fantastico generatore di pagine. Perché elementor page builder consente a un designer non programmatore di creare pagine WordPress uniche al 100%. In questo tutorial di Elementor, ti mostreremo come creare un'intestazione utilizzando il generatore di pagine di Elementor.

Il page builder di Elementor sta guadagnando fiducia tra gli utenti di WordPress per la sua flessibilità, visibilità, facilità di trascinamento e facilità di utilizzo.

In altre parole, oltre 1.283.275 siti Web live utilizzano Elementor.

Forse non ti piace la tua attuale intestazione del tema WordPress. In tal caso, puoi scegliere il generatore di pagine Elementor per personalizzare facilmente l'intestazione o la parte del piè di pagina del tuo sito Web.

La sezione di intestazione e piè di pagina è la parte più importante di qualsiasi sito web. Perché un visitatore o un cliente vedrà prima queste sezioni e poi navigherà su altre pagine web.

Quindi devi progettare attentamente queste due sezioni. E devi fornire alcune informazioni come icone social, pulsanti di ricerca, numeri di contatto e widget di menu.

Da notare: questo non è il tutorial sulla progettazione di un piè di pagina . Scopri come creare un footer con Elementor.

Perché dovresti scegliere Elementor

Elementor Tutorial

Se non hai idea di codifica, allora il generatore di pagine Elementor sarà l'opzione migliore per te. Perché puoi creare design sorprendenti ed efficaci con Elementor.

Inoltre, la maggior parte degli utenti di WordPress preferisce Elementor per personalizzare le pagine web. È uno dei migliori strumenti per modificare, personalizzare, progettare e altro sulla pagina web.

Ancora una volta, Elementor include componenti aggiuntivi essenziali per personalizzare facilmente il tuo sito web. Con Elementor pro, otterrai più di 30 widget per migliorare il tuo flusso di lavoro di progettazione. Quindi otterrai tutte queste strutture in generale con il generatore di pagine di Elementor.

Puoi scegliere il generatore di pagine Elementor per i seguenti motivi:

  • Facile da usare
  • Puoi progettare con il sito live
  • Widget essenziali per personalizzare la pagina web come Happyaddons
  • Funzione di editing mobile
  • Annulla/ripeti e cronologia delle revisioni
  • Costruttore di moduli visivo e innato
  • Caratteri personalizzati, widget globali
  • E altro ancora

Di cosa hai bisogno per creare un'intestazione con Elementor

Sia Elementor Free che Pro sono ricchi di punti salienti di eccezionale valore. Se gestisci un sito Web WordPress e sviluppi continuamente siti Web, Elementor Pro sarà un'espansione straordinaria per la tua cassetta degli attrezzi.

Elementor Tutorial
Intestazione personalizzata con Elementor

Prima di pensare a creare un'intestazione è necessario mantenere le due seguenti cose:

  • Devi installare la versione senza generatore di pagine di Elementor
  • E quindi esegui l'aggiornamento a Elementor pro
Fai clic per ottenere Elementor Pro

Creazione di un'intestazione straordinaria con Elementor (7 semplici passaggi)

In questa sezione, ti mostreremo come puoi progettare o creare un'intestazione straordinaria per il tuo sito web passo dopo passo.

Installa Elementor Free e la versione Pro

Il processo di installazione di Elementor free è lo stesso di altri plugin:

  • Naviga in wp-admin
  • Fare clic su Plugin→Aggiungi nuovi plug-in
  • Digita " Elementor " e fai clic su Installa ora
Elementor tutorial
Il processo di installazione di Elementor

5. Ora "Attiva" il plugin

Elementor tutorial
Il processo di installazione di Elementor

Scopri come installare elementor pro

Fatti che dovresti considerare prima di iniziare questo tutorial su Elementor

  • Per prima cosa, crea un menu
  • Installa il plug-in degli elementi Envato

Otterrai molte foto, blocchi e modelli gratuiti con il plug-in di elementi Envato. Così puoi vivere un'esperienza straordinaria con Envato e il plug-in per la creazione di pagine Elementor insieme.

Passaggio uno: crea un'intestazione vuota

Vai a Modello > Generatore di temi > Seleziona intestazione

  • Apparirà un pop-up. Dove hai chiesto di selezionare quello che vuoi ottenere.
Screenshot 8
  • Quindi seleziona l'intestazione come desideri creare. Dopo aver cliccato sul pulsante " Crea modello ".

Elementor ti mostrerà molti modelli e blocchi gratuiti. E puoi anche salvare il tuo modello preferito.

Screenshot 9

Fase due: impostazione del layout generale

Per creare un'intestazione personalizzata, devi decidere di quali tipi di layout hai bisogno.

  • Per cominciare, fai clic sul pulsante di personalizzazione principale della tua parte di intestazione per modificare la sezione Layout nella barra laterale:
Elementor Layout
Selezione del layout
  • E poi prendi la struttura che desideri
Page layout
Selezione della struttura

Nota: abbiamo utilizzato il layout contrassegnato nell'immagine sopra per creare l'intestazione.

Fase tre: aggiunta di un logo

Questo è un passaggio molto semplice. Puoi aggiungere un logo molto facilmente. Puoi farlo in due modi.

  1. Vai a Dasboard>Aspetto>Personalizza>Identità sito
adding logo for elementor
Aggiunta del logo
  • Successivamente, puoi scegliere il logo e impostarlo sull'intestazione.
How to add logo
Aggiunta del logo sull'intestazione

02. Seleziona il blocco Logo del sito nella barra laterale. Trascinalo dove vuoi usarlo.

Adding logo to Elementor header
  • Infine, recupererà automaticamente il tuo logo effettivo dopo aver trascinato il " Logo del sito " nell'area tratteggiata.
How to adjust logo
Regolazione del logo
  • In questa impostazione, puoi scegliere come dovrebbe apparire il logo quando fai clic e puoi anche regolarne le dimensioni e l'allineamento qui.
  • Puoi fare molte cose usando l'opzione Stile e Avanzate .
How to configure logo
Configurazione del widget del logo del sito

Fase quattro: aggiunta di un menu

  • Seleziona il widget ' Nav Menu ' dalla barra laterale di sinistra. Trascinalo nell'area dell'intestazione come nel passaggio quattro.
How to add custom menu
Aggiunta del menu
  • E regolerà il menu che hai creato. Scopri come creare un menu personalizzato.
How to add menu in elementor
Aggiunta menu cliente

Ecco le cose importanti che dovresti sapere.

Screenshot 1 2
  • Menu : seleziona il menu che desideri visualizzare. Puoi scegliere da Aspetto → Menu
  • Layout : otterrai orizzontale, verticale o a discesa
  • Allinea : a sinistra, al centro, a destra o allunga per riempire l'intera area disponibile
  • Puntatore – Come ti piace contrassegnare il collegamento attivo
  • Animazione : come ti piace l'aspetto del puntatore

Passaggio cinque: aggiunta di un campo di ricerca

Per aggiungere il campo di ricerca nell'intestazione devi solo selezionare il widget di ricerca e trascinarlo dove vuoi impostarlo.

Elementor Tutorial
Aggiunta widget di ricerca

In questa sezione otterrai:

  • Skin : otterrai Classic, Minimal, Full Screen per il
  • Segnaposto : puoi lasciare questa sezione o mantenere qualcosa come "cerca" lì
  • Allineamento , Dimensione – Allinei la casella di ricerca da qui
Screenshot 19

Passaggio sei: aggiungi altri elementi extra

Per rendere redditizia la tua intestazione puoi aggiungere un widget dal lato sinistro dello schermo. Puoi sperimentare con questi widget per ottenere l'effetto sorprendente che ti piace.

Ecco uno screenshot dei widget. Puoi cercare quello che vuoi.

Extra elements for header customization

Usando i widget puoi aggiungere icone social , testo di intestazione di pagina e altro.

Passaggio sette: pubblica la tua intestazione

Inoltre, questa è la parte più importante. Dopo aver progettato la tua intestazione devi stare molto attento.

  • Per applicarlo, fai clic sul pulsante PUBBLICA sul lato sinistro del piè di pagina. Vedrai un popup che ti chiede dove vuoi mostrare la tua nuova intestazione.
How to add condition in elementor
Condizione di applicazione
  • La condizione di base per questa sezione è selezionare " Intero sito ", quindi premere il pulsante Salva e chiudi.
Elementor Tutorial
Condizione aggiunta

Finalmente, la tua parte di intestazione è pronta. Evviva!!!

Elementor Tutorial
Esercitazione su Elementor

Quindi, seguendo questi passaggi, puoi facilmente progettare la tua intestazione per il tuo sito web.

Controlla il video qui sotto per creare un'intestazione di un sito Web in WordPress:

I 5 migliori siti Crea con elementor

All'esterno della creazione, Elementor si è trasformato in un importante Page Builder per WordPress e una risorsa utile, offrendo una soluzione compatta per gli sviluppatori di siti Web.

Di conseguenza, molti designer utilizzano Elementor e aggiungono nuovi utenti ogni mese. Qui condivideremo i 5 migliori siti Web che hanno progettato e sviluppato il proprio sito Web tramite il generatore di pagine Elementor.

Elementor ha raggiunto circa 2 milioni di installazioni attive

Portare il web

Elementor Tutorial

Bringing The Web è una cooperativa specializzata per un'ampia gamma di accordi online. Esibisce un linguaggio strutturale ben combinato, proprio come una delicata sfumatura tematica verde mare/blu.

MO SCHALKX

MO SCHALKX

MO SCHALKX è un sito web di fotografia e film commerciale. Il proprietario di questo sito web è un olandese. E sviluppa il suo sito Web con Elementor. Questo è un sito web di portfolio. Su questo sito, carica tutti i suoi progetti attuali.

CASA DA COMIDA

CASA DA COMIDA

CASA Da Comida è un ristorante con sede a Lisbona che mostra tutto ciò che un sito di cucina ha bisogno di incorporare. Il sito scopre come trasmettere l'alta qualità del ristorante.

Soprattutto, include video e immagini HD a schermo intero. Troverai anche un'impressionante sezione di recensioni per i punteggi di Google, Facebook e Tripadvisor.

CREATORE

Elementor Tutorial

CREATER è un fornitore di servizi di soluzioni web dalla Malesia. I visitatori rimarranno sorpresi nel vedere a prima vista lo sfondo della miscela nera e verde.

Il prevedibile sfondo scuro e verde che appare su tutte le pagine ed è allo stesso modo dominante nelle diverse illustrazioni personalizzate sul sito.

WEB ESAGONALE

HEXAGON WEB

HEXAGON WEB è un sito di sviluppo francese. Il loro sito Web è colorato con illustrazioni alla moda e un raffinato design ad alveare sullo sfondo.

Inoltre, hanno utilizzato divisori di forma e illustrazioni di curve sul loro sito Web, di conseguenza, hanno ottenuto un effetto di layout fluido.

Guardando avanti con Elementor

Soprattutto, puoi presumere che il page builder Elementor stia diventando la prima scelta per lo sviluppatore web. Persone provenienti da tutto il mondo stanno utilizzando il generatore di pagine Elementor per progettare il proprio sito Web.

Ogni mese il team di Elementor pubblica la vetrina. In questa vetrina, otterrai i primi 10 siti Web che utilizzano il generatore di pagine Elementor. Pertanto, la nostra lista è in base alla vetrina del mese dal sito Web Elementor.

Per potenziare il tuo sito realizzato con Elementor o personalizzare le tue pagine web, abbiamo sviluppato HappyAddons e quasi tutti i nostri widget sono completamente gratuiti per te. Non dimenticare di provare HappyAddons, la raccolta di widget definitiva per Elementor.

Non dimenticare di provare HappyAddons!

Sei pronto a creare la tua splendida intestazione con Elementor?

Crediamo che in questo blog tutorial di Elementor e anche tu abbia imparato qualcosa di utile. E sarai in grado di progettare qualsiasi intestazione per il tuo sito Web, blog o sito Web aziendale.

Tuttavia, se hai qualcosa da dire o hai domande, non esitare a chiedere nella sezione commenti. Saremo lieti di risponderti.