Come creare un menu di navigazione con Elementor su WordPress

Scritto da Tiziano Fogliata

Quando si crea una pagina, e soprattutto una landing page o un sito monopagina, utilizzando Elementor su WordPress, può essere utile inserire un menu per permettere ai visitatori di raggiungere facilmente le varie sezioni della pagina.

Si tratta in pratica di un menu diverso rispetto a quelli solitamente presenti in un sito. In questo caso infatti il menu non contiene link che puntano ad altre pagine, ma link che puntano a sezioni all’interno della stessa pagina. Questo tipo di menu evita di costringere a scrollare in continuazione con la rotella del mouse, ma fornisce un rapido accesso ai contenuti principali della pagina.

Essendo però una forma di menu differente rispetto a quella standard presente sulla maggior parte dei siti, molte persone che si avvicinano all’utilizzo di WordPress e di Elementor, non sanno come impostarla.

Per questo motivo, ho deciso di realizzare un video tutorial che ti spiega come inserire un menu che ti permette di creare dei link interni alla stessa pagina realizzata con Elementor. Ma non solo. Nel video ti mostro come soddisfare questa esigenza sia con la versione gratuita di Elementor, sia con quella Pro a pagamento.

Creare menu di navigazione con Elementor

Creare menu di navigazione con Elementor

Nel video faccio riferimento anche a un codice CSS utile per aumentare lo spazio prima del punto di atterraggio del link, in modo da evitare che le varie sezioni siano troppo vicine al bordo inferiore della barra di navigazione. Ecco il codice:

body:not(.elementor-editor-active) .elementor-menu-anchor:before {
  content: "";
  display:block;
  height: 80px; /* fixed header height*/
  margin: -80px 0 0; /* negative fixed header height */
  visibility: hidden;
  pointer-events: none;
}

Se utilizzi la versione gratuita di Elementor, ti potrebbe essere utile il plugin Elementor – Header, Footer & Blocks che ti permette di creare testate, piè di pagina del tuo sito anche senza acquistare la versione a pagamento di Elementor. Inoltre mette a disposizione la possibilità di inserire anche i menu di navigazione. Se non hai la versione Pro di Elementor, questo plugin ti permette di aggiungere qualche funzionalità in più alla versione gratuita di Elementor.

Per imparare a utilizzare meglio Elementor, ti consiglio anche di dare un’occhiata all’articolo e al video tutorial sull’errore da evitare quando crei un layout a colonne con Elementor.

Restando sull’argomento menu, ti suggerisco anche la lettura dell’articolo dedicato a come gestire la visibilità delle voci di un menu su WordPress.

Se ti è piaciuto e hai trovato utile questo articolo, eccone altri che potrebbero interessarti

2 commenti su “Come creare un menu di navigazione con Elementor su WordPress”

Lascia un commento