{"id":53500,"date":"2022-04-22T07:27:50","date_gmt":"2022-04-22T06:27:50","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=53500&preview=true&preview_id=53500"},"modified":"2023-02-03T12:54:07","modified_gmt":"2023-02-03T11:54:07","slug":"sticky-header-elementor","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/","title":{"rendered":"Guida Definitiva agli Sticky Header di Elementor"},"content":{"rendered":"

Che siate aspiranti sviluppatrici o sviluppatori web<\/a> o stiate avviando un ecommerce, i vostri siti web probabilmente condividono alcuni elementi essenziali. Per esempio, ogni sito ha bisogno di un header chiaro per aiutare le persone a navigare tra le diverse pagine. Tuttavia, se usate un page builder<\/a> come Elementor per accorciare il lavoro di codifica, vi starete chiedendo se \u00e8 ancora possibile creare uno sticky header di Elementor sofisticato ma facile da usare.<\/p>\n

Per fortuna, usare un header Elementor<\/a> pu\u00f2 fornire ai vostri utenti un modo semplificato per esplorare il vostro sito web. Con questo popolare page builder<\/a> potete costruire un’ampia variet\u00e0 di header che non scompaiono quando gli utenti scorrono il sito. Questa caratteristica \u00e8 ci\u00f2 che li rende sticky, che significa ‘appiccicosi’.<\/p>\n

In questo articolo, parleremo di come funziona uno sticky header e dei suoi vantaggi. Poi vi mostreremo come creare uno sticky header di Elementor sia con la versione gratuita che con quella a pagamento. Infine, vi forniremo ulteriori opzioni di personalizzazione per i vostri sticky header usando i CSS. Iniziamo!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Un’Introduzione agli Sticky Header di Elementor<\/h2>\n

Non esistono due siti web uguali. Tuttavia, ci sono alcune caratteristiche che accomunano i siti di qualit\u00e0.<\/p>\n

Se state gestendo un sito a pi\u00f9 pagine, uno di questi elementi \u00e8 un header. Con questo termine intendiamo la barra orizzontale con informazioni utili che si trova in cima a qualsiasi pagina web.<\/p>\n

Di solito un header include il vostro menu di navigazione e pagine come Chi Siamo<\/strong> o Contatti<\/strong>:<\/p>\n

\"Homepage
Header del sito di Kinsta<\/figcaption><\/figure>\n

Quando le persone esplorano la vostra pagina, probabilmente si aspettano un header organizzato che le guidi nella navigazione del vostro sito. Dato che la User Experience (UX) \u00e8 la chiave per il successo di un sito web, fareste bene a creare un header intuitivo e diretto. \u00c8 qui che uno sticky header progettato con Elementor pu\u00f2 fare una grande differenza.<\/p>\n\n

Come Funziona uno Sticky Header<\/h3>\n

Prima di imparare come funziona uno Sticky Header di Elementor, diamo un’occhiata a come si comporta un header standard quando si scorre una pagina:<\/p>\n

\"Animazione
Header standard<\/figcaption><\/figure>\n

Come potete vedere nell’esempio qui sopra, questo header contiene una complessa barra di navigazione con categorie come Vendite<\/strong>, Abbigliamento<\/strong>, Scarpe<\/strong> e altro. Queste schede aiutano senza dubbio le persone a trovare quello che stanno cercando. Tuttavia, quando si scorre la pagina verso il basso, l\u2019header scompare.<\/p>\n

Gli utenti possono trovare questo comportamento frustrante, perch\u00e9 richiede loro di scorrere indietro fino alla parte superiore della pagina per accedere al menu di navigazione. Per fortuna, uno sticky header offre una soluzione semplice.<\/p>\n

Rimanendo sempre in posizione all’inizio della pagina (come se vi fosse appiccicato sopra con l\u2019adesivo) uno sticky header pu\u00f2 migliorare in modo netto l\u2019esperienza utente del vostro sito web:<\/p>\n

\"Animazione
Sticky header<\/figcaption><\/figure>\n

Quando il design del vostro sito include uno sticky header, i vostri utenti possono saltare rapidamente a nuove pagine senza perdere tempo a scorrere.<\/p>\n

Inoltre, con questo elemento fisso, potete tenere il vostro logo davanti e al centro in ogni momento. Questa caratteristica pu\u00f2 aiutare gli utenti a ricordare il vostro brand pi\u00f9 facilmente e incoraggiarli a rimanere sul vostro sito pi\u00f9 a lungo.<\/p>\n

Quando Dovreste Considerare l’Uso di uno Sticky Header<\/h3>\n

Le persone avranno meno probabilit\u00e0 di perdersi quando esplorano siti pi\u00f9 grandi con uno sticky header. Per questo potreste voler approfittare di questa caratteristica se il vostro sito ha molte pagine. Ecco perch\u00e9 vedrete spesso sticky header sui siti di ecommerce<\/a>.<\/p>\n

Uno sticky header pu\u00f2 essere particolarmente utile se volete includere una funzione di ricerca nel vostro header. In questo modo, quando gli utenti stanno scorrendo la pagine e si rendono conto che non riescono a trovare quello che stanno cercando, possono inserire rapidamente una query nella barra di ricerca.<\/p>\n

Inoltre, uno sticky header pu\u00f2 essere un elemento rivoluzionario se gestite un blog monetizzato<\/a> che mostra tutti i vostri articoli nella homepage. In generale, questo header pu\u00f2 assicurare che il vostro sito web sia mantenibile e scalabile<\/a>.<\/p>\n

Tuttavia, se il vostro sito ha una sola pagina, non ha molto senso trasformare il vostro header in questo modo. Inoltre, se avete una buona quantit\u00e0 di pagine sul vostro sito, ma ognuna di esse \u00e8 relativamente breve, probabilmente non avete nemmeno bisogno di uno sticky header.<\/p>\n

Nel complesso, uno sticky header riduce il tempo di scorrimento e aumenta l’usabilit\u00e0 del sito e la navigazione. Se non avete la sicurezza che questa caratteristica gioverebbe al vostro sito web, potreste voler fare un rapido controllo della lunghezza delle vostre pagine e poi decidere.<\/p>\n

Come Creare uno Sticky Header di Elementor<\/h2>\n

Per questo tutorial, vi guideremo attraverso i passaggi per creare uno sticky header di Elementor. Assumiamo che abbiate gi\u00e0 installato e attivato il plugin Elementor<\/a> sul vostro sito.<\/p>\n

Parleremo di come potete creare questo header sia con la versione gratuita che con Elementor Pro<\/a>. Sarete probabilmente felici di sapere che non avrete bisogno di imparare l’HTML<\/a> o di modificare<\/a> significativamente il codice<\/a> per fare tutto questo!<\/p>\n

Come Creare uno Sticky Header con Elementor (Gratuito)<\/h3>\n

La versione gratuita di Elementor offre alcune potenti funzioni per la costruzione di pagine. Tuttavia, se volete apportare modifiche ai vostri header e footer, avrete bisogno di alcuni strumenti aggiuntivi (anch’essi gratuiti).<\/p>\n

Detto questo, vediamo come potete creare uno sticky header con Elementor!<\/p>\n

Passo 1: Installare e Attivare i Vostri Plugin Essenziali<\/h4>\n

Per fortuna alcuni affidabili strumenti possono facilmente espandere la funzionalit\u00e0 della versione gratuita di Elementor.<\/p>\n

Navigate nella vostra bacheca di WordPress per trovare il vostro primo strumento. Andate su Plugins > Aggiungi nuovo<\/strong> e cercate ElementsKit Elementor addons<\/a> tramite la funzione di ricerca:<\/p>\n

\"Admin
Installate e attivate ElementsKit<\/figcaption><\/figure>\n

Installate e attivate<\/a> questo plugin come fareste normalmente. Quando finite questo procedimento, verrete reindirizzati alla pagina principale dei plugin:<\/p>\n

\"Pagina
Plugin ora installato<\/figcaption><\/figure>\n

Ora fate nuovamente clic su Aggiungi nuovo<\/strong> per individuare il plugin Sticky Header Effects for Elementor<\/a> dalla barra di ricerca:<\/p>\n

\"Cercate
Sticky Header Effects for Elementor<\/figcaption><\/figure>\n

Ripetete il procedimento di installazione e attivazione di questo strumento e tutto sar\u00e0 pronto per il prossimo passo!<\/p>\n

Passo 2: Creare il Vostro Menu<\/h4>\n

Prima di poter creare qualsiasi tipo di header, avrete bisogno di un menu di navigazione. Faremo un semplice menu con gli elementi pi\u00f9 comuni: includeremo un logo, delle pagine e una call to action (CTA).<\/p>\n

Per creare il vostro menu nella bacheca di WordPress, andate su Aspetto > Menu<\/strong>. Accanto al campo Nome del menu<\/strong>, date al vostro menu un nome descrittivo. Noi lo chiameremo “Sticky Header Menu”:<\/p>\n

\"Schermata
Date un nome al vostro menu sticky header<\/figcaption><\/figure>\n

Assicuratevi di scegliere Header<\/strong> come opzione in Gestione posizioni<\/strong>. Potreste anche voler selezionare la casella per aggiungere automaticamente nuove pagine al vostro menu.<\/p>\n

Avrete poi bisogno di aggiungere alcune pagine al vostro menu. Nella sezione Pagine<\/strong> sulla sinistra, spuntate le caselle di tutte le pagine che vorreste includere, poi fate clic su Aggiungi al menu<\/strong>:<\/p>\n

\"Area
Aggiungere le pagine al vostro menu sticky header<\/figcaption><\/figure>\n

Poi vedrete le vostre pagine trasferite al menu sulla destra. Andate avanti e fate clic su Salva menu<\/strong> in basso a destra dello schermo:<\/p>\n

\"Fate
Salvare il menu sticky header<\/figcaption><\/figure>\n

Come potete vedere, abbiamo aggiunto alcune pagine di base, tra cui Contact Us<\/strong>, About<\/strong><\/a>, e Sample page<\/strong>. Potreste voler riordinare le vostre pagine in modo che la sequenza risulti intuitiva per i visitatori.<\/p>\n

Passo 3: Creare l\u2019Header<\/h4>\n

Ora il vostro menu di navigazione esiste, ma non potete accedervi da nessuna parte. Questo perch\u00e9 dovete creare un header apposito.<\/p>\n

Per farlo, andate alla scheda ElementsKit<\/strong> nel vostro menu di sinistra. Se non l\u2019avete gi\u00e0 fatto, a questo punto dovete cliccare su alcune pagine “per iniziare”.<\/p>\n

Ogni persona avr\u00e0 preferenze diverse, quindi prendetevi tutto il tempo per selezionare le caratteristiche che volete attivare. Comunque, assicuratevi che il modulo Header Footer<\/strong> sia impostato su ON<\/strong>:<\/p>\n

\"Lista
Attivare l’opzione Header Footer in Elements Kit<\/figcaption><\/figure>\n

Ora andate su ElementsKit > Header Footer<\/strong>:<\/p>\n

\"Opzione
Aggiungere un nuovo template<\/figcaption><\/figure>\n

Questa pagina sar\u00e0 vuota perch\u00e9 non avete ancora nessun template di header o footer. Fate clic su Add new<\/strong> nella parte superiore dello schermo per creare il vostro primo template di header:<\/p>\n

\"Area
Compilare le impostazioni del template<\/figcaption><\/figure>\n

Nella schermata precedente, inserite un nome descrittivo e assicuratevi che Header<\/strong> sia selezionato nel campo Type<\/strong>. Dato che state usando la versione gratuita, questo header apparir\u00e0 su tutto il sito<\/strong>.<\/p>\n

Attivate\/disattivate<\/strong> l’interruttore su ON<\/strong> e fare clic su SAVE CHANGES<\/strong>. Ora verrete reindirizzati alla pagina con la lista dei vostri template, dove potrete vedere il vostro nuovo template per l\u2019header:<\/p>\n

\"Ora
Il nuovo template per l\u2019header \u00e8 ora disponibile<\/figcaption><\/figure>\n

Potreste anche notare un’icona verde attiva<\/strong> accanto a questo header. Tuttavia, non \u00e8 ancora attivo.<\/p>\n

Per completare l\u2019header, passate sopra l’elenco dei template e fate clic su Edit in Elementor<\/strong>, proprio sotto il suo nome. Questo vi porter\u00e0 alla schermata di Elementor Builder.<\/p>\n

Qui fate clic sull’icona ElementsKit<\/strong>:<\/p>\n

\"L\u2019icona
Clic sull’icona ElementsKit<\/figcaption><\/figure>\n

Nella schermata seguente, selezionate la scheda Sections<\/strong>:<\/p>\n

\"Schermata
Selezionare la scheda “Sections”<\/figcaption><\/figure>\n

Scorrete un po’ in basso per trovare una sezione header che vi piace, poi fate clic su Insert<\/strong>. Noi abbiamo scelto Header – Section 5<\/strong>:<\/p>\n

\"Editor
Inserite l\u2019header dove volete<\/figcaption><\/figure>\n

Come probabilmente potete vedere, il nostro menu di navigazione non \u00e8 visibile. Quindi andiamo avanti e aggiungiamolo al nostro template di header. Per farlo, passate il mouse sulla sezione del menu di navigazione del vostro header. In questo caso \u00e8 proprio al centro:<\/p>\n

\"Menu
Passate sopra la sezione del menu di navigazione dell\u2019header<\/figcaption><\/figure>\n

Fate clic su quest’area e nel pannello di sinistra dovrebbero apparire le impostazioni del menu<\/strong>. Ora, individuate il campo Select menu<\/strong>. Nel menu a tendina, scegliete il menu che avete creato in precedenza:<\/p>\n

\"Selezione
Scegliete il menu che avete creato poco fa<\/figcaption><\/figure>\n

A questo punto, dovreste vedere il menu popolarsi nel vostro template di header. Fate clic su UPDATE<\/strong> nell’angolo in basso a sinistra dello schermo e il vostro header standard \u00e8 terminato.<\/p>\n

Vediamo come funziona in azione:<\/p>\n

\"Anteprima
Nuovo header<\/figcaption><\/figure>\n

Come potete vedere, il nostro header \u00e8 bellissimo. Tuttavia, scompare quando scorriamo verso il basso. Vediamo come possiamo renderlo \u201csticky\u201d.<\/p>\n

Passo 4: Rendere l\u2019Header \u201cSticky\u201d<\/h4>\n

Per il nostro passo finale, andate su ElementsKit > Header Footer > Edit with Elementor<\/strong>. Poi selezionate il vostro header e fate clic sull’icona centrale tratteggiata con sei punti:<\/p>\n

\"Icona
Fate clic sull’icona tratteggiata<\/figcaption><\/figure>\n

Quando ci passate sopra, vedrete che questo vi permette di modificare la sezione<\/strong>. Una volta che ci fate clic sopra, le vostre opzioni di modifica appariranno nel pannello di sinistra.<\/p>\n

Fate clic sulla scheda Advanced<\/strong> e scorrete verso il basso fino a Sticky Header Effects<\/strong>. Ci sar\u00e0 un messaggio di avvertimento che dice che il plugin non controlla lo sticky header, ma potete ignorarlo. Dato che abbiamo aggiunto anche il plugin Sticky Header Effects for Elementor, funzioner\u00e0 benissimo.<\/p>\n

Ora abilitate lo sticky header di Elementor spostando l’interruttore su ON<\/strong>:<\/p>\n

\"Abilitate
Abilitate lo sticky header di Elementor<\/figcaption><\/figure>\n

A seconda del vostro tema, il vostro sticky header potrebbe apparire trasparente. Se questo \u00e8 il caso, potreste voler fare un cambiamento stilistico.<\/p>\n

Nel vostro pannello Edit section<\/strong>, sotto Style<\/strong>, andate su Background > Color<\/strong> e assicuratevi di aver selezionato una tonalit\u00e0 che risalti sullo sfondo normale:<\/p>\n

\"Sezione
Modificate lo stile se necessario<\/figcaption><\/figure>\n

Poi fate clic su UPDATE<\/strong>. Ora potete vedere l’anteprima del vostro sito per dare un\u2019occhiata al risultato finale:<\/p>\n

\"Lo
Sticky header in azione<\/figcaption><\/figure>\n

Questo \u00e8 tutto! Abbiamo creato un semplice sticky header di Elementor, ma anche solo questo pu\u00f2 dare un nuovo aspetto al vostro sito.<\/p>\n

Come Creare uno Sticky Header con Elementor Pro<\/h3>\n

Quando usate Elementor Pro, creare uno sticky header \u00e8 un po’ pi\u00f9 semplice. Potete aggiungere questa caratteristica al vostro sito in soli tre semplici passi.<\/p>\n

Passo 1: Creare il Vostro Menu<\/h4>\n

Per creare il vostro menu, andate su Appearance > Menu<\/strong> nella vostra bacheca di WordPress:<\/p>\n

\"Editor
Create un menu<\/figcaption><\/figure>\n

Date al vostro menu un nome descrittivo, selezionate Menu primario<\/strong> accanto alla posizione di visualizzazione<\/strong> e poi fate clic su Crea menu<\/strong>:<\/p>\n

\"Sezione
Date un nome al vostro menu e selezionate una posizione<\/figcaption><\/figure>\n

A questo punto, dovreste avere alcune pagine esistenti sul vostro sito web. Selezionate le pagine che vorreste includere nel vostro menu dal pannello di sinistra.<\/p>\n

Poi fate clic su Aggiungi al menu<\/strong>, seguito da Salva menu<\/strong>:<\/p>\n

\"Selezione
Selezionate le pagine da includere nel menu<\/figcaption><\/figure>\n

Ora le vostre pagine dovrebbero essere popolate sul lato destro sotto Struttura del menu<\/strong>.<\/p>\n

Passo 2: Creare il Vostro Header<\/h4>\n

Successivamente, avremo bisogno di creare la nostra base. Creiamo un classico header.<\/p>\n

Per iniziare, individuate la scheda Elementor<\/strong> nella vostra barra laterale sinistra. Appena sotto, andate su Templates > Theme builder<\/strong>. La pagina seguente sar\u00e0 simile a questa:<\/p>\n

\"Theme
Trovate “Templates” dentro “Theme Builder”<\/figcaption><\/figure>\n

Come potete vedere, con Elementor Pro, potete facilmente iniziare a progettare ogni elemento del vostro sito.<\/p>\n

Fate clic sull’icona pi\u00f9 (+)<\/strong> sull’elemento Header<\/strong>. Ora dovreste vedere un pop-up che mostra pi\u00f9 blocchi di header tra cui potete scegliere:<\/p>\n

\"Libreria
Scegliete tra pi\u00f9 blocchi header<\/figcaption><\/figure>\n

Se avete gi\u00e0 salvato un template di header, potete selezionarlo nella scheda My Templates<\/strong>. Altrimenti, potreste voler utilizzare uno dei blocchi di sezione inclusi in Elementor Pro.<\/p>\n

Quando avete fatto la vostra selezione, passate il mouse sul blocco desiderato e fate clic su Insert<\/strong>:<\/p>\n

\"Selezione
Inserite il blocco desiderato<\/figcaption><\/figure>\n

Qui vedrete che questo blocco \u00e8 dotato di un proprio logo, ma il nostro menu di navigazione si \u00e8 popolato automaticamente. Ora fate clic su PUBLISH<\/strong>:<\/p>\n

\"Sezione
Fate clic su “Add Condition” nella sezione delle impostazioni di pubblicazione<\/figcaption><\/figure>\n

La seguente schermata vi chieder\u00e0 di definire le vostre impostazioni di pubblicazione<\/strong>. Qui, selezionate ADD CONDITION<\/strong> per decidere dove volete visualizzare il vostro header:<\/p>\n

\"Sezione
Selezionate il punto in cui volete visualizzare il template<\/figcaption><\/figure>\n

Probabilmente vorrete selezionare Entire site<\/strong> accanto a INCLUDE<\/strong>. Potete anche escludere alcune aree del sito facendo clic sulla freccia accanto a INCLUDE<\/strong> e passando all’alternativa. Quando le vostre selezioni vi soddisfano, fate clic su SAVE & CLOSE<\/strong>.<\/p>\n

A questo punto, un messaggio pop-up apparir\u00e0 nell’angolo in basso a destra del vostro schermo. Se non scompare prima che possiate farci clic sopra, selezionate l’opzione per visualizzare il vostro sito live.<\/p>\n

In alternativa, tornate alla vostra bacheca di WordPress<\/a> e visualizzate l’anteprima del sito facendo clic sull’icona della casa nell’angolo in alto a sinistra e poi selezionando Visit site<\/strong>:<\/p>\n

\"Anteprima
L\u2019header \u00e8 ora disponibile<\/figcaption><\/figure>\n

Come potete vedere, il nostro header \u00e8 ora funzionante, ma quando scorriamo la pagina verso il basso, scompare. Vediamo cosa possiamo fare per cambiare questo comportamento!<\/p>\n

Passo 3: Rendere l\u2019Header Sticky<\/h4>\n

Ora vediamo come creare uno sticky header di Elementor con lo strumento pro!<\/p>\n

Andate su Template > Theme Builder<\/strong> e selezionate l\u2019header che avete appena creato. Poi fate clic su Edit<\/strong> accanto all’icona della matita nella schermata seguente. Questo vi riporter\u00e0 all’editor di Elementor.<\/p>\n

Passate sopra il vostro modello di header, poi fate clic sull’icona tratteggiata con sei puntini al centro. Questo aprir\u00e0 il vostro pannello Edit section<\/strong> sulla sinistra:<\/p>\n

\"L\u2019icona
Fate clic sull\u2019icona tratteggiata per modificare<\/figcaption><\/figure>\n

Ora, passate alla scheda Advanced<\/strong> e individuate la sezione Motion Effects<\/strong>. Qui, abilitate l\u2019opzione Scrolling Effects<\/strong> spostando l’interruttore su ON<\/strong>:<\/p>\n

\"Spostare
Impostate l’opzione “Scrolling Effects” su “ON”<\/figcaption><\/figure>\n

Poi, scorrete la sezione Motion Effects<\/strong> per trovare il campo Sticky<\/strong>. Nel menu a tendina, selezionate Top<\/strong>:<\/p>\n

\"Selezione
Selezionate “Top” nel menu a tendina dell’opzione “Sticky”<\/figcaption><\/figure>\n

Ora fate clic su UPDATE<\/strong>. Tenete presente che a seconda della combinazione di colori del vostro tema, lo sticky header di Elementor potrebbe sembrare trasparente:<\/p>\n

\"Anteprima
Lo sticky header ora funziona correttamente<\/figcaption><\/figure>\n

Se questo \u00e8 il caso e non vi piace come appare, potete sempre cambiare il colore di sfondo. Nel vostro pannello Edit section<\/strong>, andate su Style > Background<\/strong> e selezionate Classic<\/strong> come tipo di sfondo.<\/p>\n

Ora, selezionate un nuovo colore di sfondo per il vostro template di header. Potete scegliere una tonalit\u00e0 che sia complementare al resto della pagina ma che crei anche un bel contrasto:<\/p>\n

\"Opzioni
Modificate lo sticky header se applicabile<\/figcaption><\/figure>\n

Questo \u00e8 solo un esempio: stiamo solo scegliendo un colore grigio per rendere il nostro header meno trasparente.<\/p>\n

Ora fate clic su UPDATE<\/strong> per salvare le modifiche. Andate avanti e visualizzate l’anteprima con il risultato finale:<\/p>\n

\"Anteprima
Visualizzare le modifiche<\/figcaption><\/figure>\n

Questo \u00e8 tutto! Probabilmente vorrete modificare lo stile e i colori in base al vostro brand. Assicuratevi solo di salvare sempre le vostre modifiche quando avete finito.<\/p>\n

Come Usare i CSS per Migliorare il Vostro Sticky Header di Elementor<\/h2>\n

Quando aggiungete uno sticky header Elementor sul vostro sito web, il design del vostro sito pu\u00f2 apparire rigenerato. Tuttavia, potrebbero interessarvi ulteriori personalizzazioni o caratteristiche pi\u00f9 dinamiche.<\/p>\n

Ora che sapete come creare uno sticky header di base, vediamo come far evolvere ancora di pi\u00f9 il vostro design. Potete farlo usando il codice <\/a>CSS (Cascading Style Sheets)<\/a> in WordPress.<\/a><\/p>\n

Se siete principianti o non avete esperienza di programmazione, non preoccupatevi. Migliorare il design \u00e8 un gioco da ragazzi con Elementor.<\/p>\n

Per farlo, andate su Templates > Theme Builder > Header<\/strong>:<\/p>\n

\"Area
Aggiungere CSS personalizzato per apportare modifiche all\u2019header<\/figcaption><\/figure>\n

Sotto Edit section > Advanced > Custom CSS<\/strong>,<\/em> potete aggiungere un piccolo snippet CSS per apportare modifiche stilistiche.<\/p>\n

Tipi di Sticky Header di Elementor<\/h2>\n

Ecco alcuni popolari miglioramenti che potreste voler considerare per il vostro sticky header di Elementor!<\/p>\n

Sticky Header Trasparente<\/h3>\n

Alcuni temi possono impostare automaticamente gli sticky header come trasparenti. Tuttavia, se volete farlo con i CSS<\/a>, potete usare uno snippet di codice<\/a> come questo:<\/p>\n

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }\n\nselector{ transition: background-color 4s ease !important; }\n\nselector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }\n\nselector > .elementor-container{ transition: min-height 1s ease !important; }<\/code><\/pre>\n
Copiate e incollate questo codice nel campo CSS personalizzato<\/strong> e regolate i campi secondo le vostre preferenze. Questo snippet modifica il colore di sfondo, la trasparenza e l’altezza del vostro header, con un effetto di animazione:<\/p>\n
\"Area
CSS addizionale per personalizzare lo sfondo dell\u2019header<\/figcaption><\/figure>\n
Le possibilit\u00e0 per questo tipo sono infinite.<\/p>\n
Sticky Header Che Si Restringe<\/h3>\n
Un’altra scelta popolare \u00e8 un header che si ingrandisce o si restringe mentre le persone scorrono la pagina. Ecco il codice di cui avrete bisogno per questo tipo di sticky header di Elementor:<\/p>\n
header.sticky-header {\n    --header-height: 90px;\n    --opacity: 0.90;\n    --shrink-me: 0.80;\n    --sticky-background-color: #0e41e5;\n    --transition: .3s ease-in-out;\n\n    transition: background-color var(--transition),\n                background-image var(--transition),\n                backdrop-filter var(--transition),\n                opacity var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects {\n    background-color: var(--sticky-background-color) !important;\n    background-image: none !important;\n    opacity: var(--opacity) !important;\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n}\nheader.sticky-header > .elementor-container {\n    transition: min-height var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects > .elementor-container {\n    min-height: calc(var(--header-height) * var(--shrink-me))!important;\n    height: calc(var(--header-height) * var(--shrink-me));\n}\nheader.sticky-header .elementor-nav-menu .elementor-item {\n    transition: padding var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {\n    padding-bottom: 10px !important;\n    padding-top: 10px !important;\n}\nheader.sticky-header > .elementor-container .logo img {\n    transition: max-width var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects .logo img {\n    max-width: calc(100% * var(--shrink-me));\n}\n<\/code><\/pre>\n
Se non vi sentite a vostro agio con un codice cos\u00ec esteso, potete consultare la guida di Elementor per creare uno sticky header che si restringe<\/a>.<\/p>\n
Con questo design, otterrete questo effetto:<\/p>\n
\"Animazione
Nuovo effetto per l\u2019header<\/figcaption><\/figure>\n
Anche se l\u2019effetto di questo header \u00e8 delicato, la sua raffinatezza pu\u00f2 dare al vostro design un tocco pi\u00f9 professionale.<\/p>\n
Fade-In \/ Fade-Out (Dissolvenza)<\/h3>\n
Oltre a queste opzioni alla moda, c’\u00e8 anche la funzione fade-in \/ fade-out (chiamata anche ‘reveal’), che prevede cio\u00e8 la dissolvenza dell\u2019header durante lo scorrimento. Ha un aspetto simile a questo:<\/p>\n
\"Animazione
Effetto fade-in \/ fade-out<\/figcaption><\/figure>\n
Per questo effetto, non avrete bisogno di toccare il codice. Navigate fino al vostro header nel costruttore di temi. Poi andate su Edit section > Advanced > Motion Effects > Scrolling Effects<\/strong>:<\/p>\n
\"Editor
Modificare l’opzione “Trasparenza”<\/figcaption><\/figure>\n
Qui fate clic sull’icona della matita accanto al campo Transparency<\/strong> e cambiate la direzione<\/strong> in Fade In<\/strong> o Fade Out<\/strong>. Poi, regolate il design secondo le vostre preferenze.<\/p>\n
Ci sono molte opzioni per questi effetti di trasparenza, quindi vi consigliamo di leggere la documentazione di Elementor<\/a>. In questo modo sarete in grado di ottenere l’esatto aspetto che desiderate.<\/p>\n\n
Riepilogo<\/h2>\n
Lavorare con un costruttore di siti web \u00e8 un’ottima alternativa al pagare professionisti veterani dello sviluppo web<\/a> per creare il vostro sito. Con alcuni dei migliori software di progettazione di siti web<\/a>, potete facilmente gettare le basi per costruire qualsiasi sito web. Questi includono sticky header pratici ma belli.<\/p>\n
Uno sticky header pu\u00f2 creare un’esperienza pi\u00f9 piacevole per i vostri utenti. Potete scegliere tra vari stili dinamici di header, tra cui quello che diventa trasparente o si restringe. Ancora meglio, potete creare questi splendidi header sia con Elementor Pro<\/a> che con la sua versione gratuita.<\/p>\n
Progettare il vostro sito web \u00e8 uno dei primi passi per lanciarlo. Tuttavia, avrete prima bisogno di un hosting affidabile. Date un’occhiata ai piani di hosting gestito<\/a> di Kinsta per vedere come possiamo ottimizzare le prestazioni del vostro sito!<\/p>\n","protected":false},"excerpt":{"rendered":"
Che siate aspiranti sviluppatrici o sviluppatori web o stiate avviando un ecommerce, i vostri siti web probabilmente condividono alcuni elementi essenziali. Per esempio, ogni sito ha …<\/p>\n","protected":false},"author":117,"featured_media":53501,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[25564,25837],"topic":[25873],"class_list":["post-53500","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-elementor","tag-page-builder","topic-sviluppo-wordpress"],"yoast_head":"\nGuida Definitiva agli Sticky Header di Elementor<\/title>\n<meta name=\"description\" content=\"Uno sticky header mantiene le informazioni importanti in vista. Scopri come creare uno sticky header con Elementor per coinvolgere il tuo pubblico.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guida Definitiva agli Sticky Header di Elementor\" \/>\n<meta property=\"og:description\" content=\"Uno sticky header mantiene le informazioni importanti in vista. Scopri come creare uno sticky header con Elementor per coinvolgere il tuo pubblico.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-22T06:27:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-03T11:54:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/04\/elementor-sticky-header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Uno sticky header mantiene le informazioni importanti in vista. Scopri come creare uno sticky header con Elementor per coinvolgere il tuo pubblico.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/04\/elementor-sticky-header.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Guida Definitiva agli Sticky Header di Elementor\",\"datePublished\":\"2022-04-22T06:27:50+00:00\",\"dateModified\":\"2023-02-03T11:54:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/\"},\"wordCount\":3602,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/04\/elementor-sticky-header.jpg\",\"keywords\":[\"Elementor\",\"page builder\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/\",\"name\":\"Guida Definitiva agli Sticky Header di Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/04\/elementor-sticky-header.jpg\",\"datePublished\":\"2022-04-22T06:27:50+00:00\",\"dateModified\":\"2023-02-03T11:54:07+00:00\",\"description\":\"Uno sticky header mantiene le informazioni importanti in vista. Scopri come creare uno sticky header con Elementor per coinvolgere il tuo pubblico.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/04\/elementor-sticky-header.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/04\/elementor-sticky-header.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Guida Definitiva agli Sticky Header di Elementor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sviluppo di WordPress\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/sviluppo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guida Definitiva agli Sticky Header di Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Guida Definitiva agli Sticky Header di Elementor","description":"Uno sticky header mantiene le informazioni importanti in vista. Scopri come creare uno sticky header con Elementor per coinvolgere il tuo pubblico.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/","og_locale":"it_IT","og_type":"article","og_title":"Guida Definitiva agli Sticky Header di Elementor","og_description":"Uno sticky header mantiene le informazioni importanti in vista. Scopri come creare uno sticky header con Elementor per coinvolgere il tuo pubblico.","og_url":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2022-04-22T06:27:50+00:00","article_modified_time":"2023-02-03T11:54:07+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/04\/elementor-sticky-header.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Uno sticky header mantiene le informazioni importanti in vista. Scopri come creare uno sticky header con Elementor per coinvolgere il tuo pubblico.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/04\/elementor-sticky-header.jpg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Salman Ravoof","Tempo di lettura stimato":"18 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Guida Definitiva agli Sticky Header di Elementor","datePublished":"2022-04-22T06:27:50+00:00","dateModified":"2023-02-03T11:54:07+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/"},"wordCount":3602,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/04\/elementor-sticky-header.jpg","keywords":["Elementor","page builder"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/","url":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/","name":"Guida Definitiva agli Sticky Header di Elementor","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/04\/elementor-sticky-header.jpg","datePublished":"2022-04-22T06:27:50+00:00","dateModified":"2023-02-03T11:54:07+00:00","description":"Uno sticky header mantiene le informazioni importanti in vista. Scopri come creare uno sticky header con Elementor per coinvolgere il tuo pubblico.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/04\/elementor-sticky-header.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/04\/elementor-sticky-header.jpg","width":1460,"height":730,"caption":"Guida Definitiva agli Sticky Header di Elementor"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/sticky-header-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Sviluppo di WordPress","item":"https:\/\/kinsta.com\/it\/argomenti\/sviluppo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Guida Definitiva agli Sticky Header di Elementor"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/53500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=53500"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/53500\/revisions"}],"predecessor-version":[{"id":54007,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/53500\/revisions\/54007"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/53500\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/53500\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/53500\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/53500\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/53500\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/53500\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/53500\/translations\/nl"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/53500\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/53501"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=53500"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=53500"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=53500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}