Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come aggiungere uno sfondo animato in WordPress (2 metodi)

Credete che aggiungere uno sfondo animato in WordPress sia complicato? Ripensateci.

Anche noi la pensavamo così, ma dopo qualche esperimento abbiamo scoperto che non è poi così male.

Sappiamo quanto importi stupire i visitatori fin dall’arrivo sul vostro sito. Uno sfondo animato è un ottimo elemento di design WordPress per creare una prima impressione memorabile senza sovraccaricare i contenuti.

Ma chi è preoccupato da tempi di caricamento lenti, codici complessi o plugin costosi, non si preoccupi. Abbiamo scoperto una soluzione semplice utilizzando particle.js, una libreria JavaScript leggera che crea splendidi sfondi animati senza compromettere le prestazioni del sito.

In questa guida vi mostreremo esattamente come aggiungere bellissime animazioni particellari al vostro sito WordPress, sia che preferiate usare un plugin o un po’ di codice. Facciamo risaltare il vostro sito web!

How to Add an Animated Background in WordPress

Perché aggiungere uno sfondo animato in WordPress?

Personalizzare lo sfondo del sito web potrebbe sembrare poco importante all’inizio. Ma dopo anni di lavoro nel mondo di WordPress e del web design, abbiamo notato che i siti con sfondi animati progettati con cura tendono a mantenere i visitatori impegnati più a lungo.

Uno sfondo animato può migliorare l’appeal visivo del vostro sito web, rendendolo più interattivo e accattivante per i visitatori. Dà l’impressione che il vostro sito WordPress utilizzi un design innovativo e di alta qualità.

Molti siti web utilizzano effetti animati anche quando vogliono celebrare un’occasione speciale.

Ad esempio, si possono vedere negozi di e-commerce che aggiungono fiocchi di neve animati o alberi di Natale cadenti sulle loro pagine web per creare un’atmosfera festosa per le festività natalizie.

An example of a Christmas particle background

Alcuni siti web utilizzano anche un’animazione di sfondo per il precaricamento.

In questo modo, i visitatori possono avere l’impressione che il sito si stia caricando, e sono quindi più propensi ad attendere pazientemente la comparsa degli elementi della pagina web. Per ulteriori informazioni, potete leggere il nostro articolo sull’aggiunta di un’animazione di sfondo al preloader.

In questa guida vi mostreremo come aggiungere uno sfondo animato utilizzando particle.js. Se volete scoprire di cosa si tratta, proseguite con la prossima sezione.

Che cos’è particle.js?

particle.js è una libreria JavaScript che consente di creare effetti visivi sorprendenti con le particelle, che sono piccoli elementi grafici animati.

Queste particelle possono essere personalizzate per dimensione, colore, forma e movimento. Rispondono anche alle interazioni degli utenti, come i movimenti del mouse o i clic, per aggiungere un ulteriore livello di coinvolgimento al vostro sito web.

Ora che sapete cos’è particle.js, vediamo come usarlo per aggiungere uno sfondo animato in WordPress. Ci sono due metodi per i principianti e potete navigare attraverso questa guida con i collegamenti rapidi qui sotto:

Avete bisogno di aiuto per la progettazione di un sito web WordPress? Non lasciate che il potenziale del vostro sito vada sprecato. I nostri esperti di WPBeginner Pro Services possono riprogettare il vostro sito web, ottimizzarne le prestazioni e generare contenuti ad alta conversione, in modo che possiate ricevere il focus sulla crescita della vostra attività.

Prenotate oggi stesso una chiamata di consulenza gratuita con il nostro team!

Il primo metodo consiste nell’utilizzare SeedProd, il miglior plugin per il page builder di WordPress presente sul mercato. Offre una funzione di sfondo particellare integrata e altamente personalizzabile.

È possibile scegliere una delle animazioni di particelle già disponibili o aggiungerne una personalizzata. È anche possibile modificare il numero di particelle, i movimenti dell’animazione e gli effetti di hover in base alle proprie preferenze.

Per ulteriori informazioni su SeedProd, potete consultare la nostra recensione approfondita di SeedProd. Abbiamo trattato tutto, comprese le opzioni di personalizzazione, la scelta dei modelli e dei blocchi e le integrazioni di terze parti.

The SeedProd page builder plugin for WordPress

In questa guida utilizzeremo la versione premium di SeedProd, in quanto la funzione di sfondo particellare è disponibile.

Per utilizzare SeedProd, è necessario installare e attivare il plugin. Per maggiori dettagli, consultare la nostra guida per principianti sull’installazione di un plugin di WordPress.

Dopodiché, è sufficiente copiare-incollare la chiave di licenza nel plugin. Basta andare nella dashboard di WordPress, navigare in SeedProd ” Impostazioni, e inserire la chiave di licenza nel campo appropriato. Quindi, fare clic su “Verifica chiave”.

Adding a SeedProd license key to WordPress

Se volete personalizzare il vostro tema prima di aggiungere uno sfondo particellare in WordPress, potete seguire la nostra guida su come creare facilmente un tema personalizzato con SeedProd.

A questo punto, è necessario aprire il costruttore drag-and-drop per la pagina in cui si desidera inserire lo sfondo particellare. Se avete creato un tema con SeedProd, dovreste avere già alcune pagine aggiunte in WordPress.

Successivamente, è sufficiente andare su Pagine ” Tutte le pagine e passare il cursore su una pagina, come la homepage, la pagina informativa o altro. Quindi, scegliere il pulsante “Modifica con SeedProd”.

Clicking Edit with SeedProd on a WordPress page

Se questa opzione non appare sul vostro computer, non preoccupatevi.

È sufficiente fare clic sul pulsante “Modifica” e nell’editor dei blocchi fare clic sul pulsante “Modifica con SeedProd”.

Clicking Edit with SeedProd inside the WordPress block editor

Ora dovreste trovarvi all’interno del costruttore di pagine di SeedProd.

È sufficiente passare il cursore sulla sezione della pagina in cui si desidera aggiungere lo sfondo particellare in WordPress e selezionarla. Saprete di aver selezionato una sezione se nella parte superiore di essa appariranno un bordo viola e una barra degli strumenti.

Una volta cliccato su una sezione, dovrebbe apparire la barra laterale delle sezioni sulla sinistra.

A questo punto è sufficiente passare alla scheda ‘Avanzate’ e attivare l’impostazione ‘Abilita sfondo particelle’.

Enabling the particle background settings in SeedProd

È possibile configurare diverse impostazioni dello sfondo delle particelle.

Uno è Stile, dove è possibile scegliere uno qualsiasi degli effetti di animazione disponibili, ovvero Poligono, Spazio, Neve, Fiocchi di neve, Natale, Halloween e Personalizzato.

Parleremo più avanti dell’aggiunta di un’animazione di sfondo personalizzata per le particelle.

Configuring the basic particle background settings in SeedProd

Sono presenti anche l’Opacità, che controlla l’aspetto opaco dell’animazione, e la Direzione del flusso, che imposta la direzione verso cui le particelle devono dirigersi.

Per alcuni stili di particelle è possibile personalizzare anche i colori.

Tuttavia, per Natale e Halloween non ci sono impostazioni di colore, poiché le particelle sono immagini.

What the Christmas particle background in SeedProd looks like

Sotto il colore si trova l’opzione “Impostazioni avanzate”. Abilitato, consente di personalizzare il numero di particelle, la dimensione delle particelle, la velocità di spostamento e l’abilitazione dell’effetto Hover.

Con quest’ultima caratteristica, le particelle si muoveranno in base alla direzione del mouse. Si noti che non funzionerà quando si visualizza il sito web WordPress nell’area del builder o se il contenuto della sezione occupa l’intero spazio della sezione stessa.

The particle background's advanced settings in SeedProd

E questo è tutto ciò che dovete fare.

Una volta terminata la personalizzazione dello sfondo particellare di WordPress, è possibile fare clic sul pulsante “Salva” nell’angolo in alto a destra per pubblicare le modifiche. Potete anche scegliere il pulsante “Anteprima” per vedere l’aspetto dello sfondo particellare.

Saving or previewing changes in SeedProd

Creazione di uno sfondo personalizzato con particelle per il vostro sito web

Se gli effetti animati disponibili non sono adatti alle vostre esigenze, potete crearne uno personalizzato. È sufficiente selezionare lo stile ‘Personalizzato’ nelle impostazioni dello Sfondo particellare.

Successivamente, fare clic sul cliccato nella riga “Visita il link qui e scegli gli attributi necessari per la particella”.

Questo link porta al sito web di Vincent Garreau, caratterizzato da una libreria Javascript per le animazioni di particelle.

Selecting the Custom style and clicking the link provided in SeedProd to make a custom particle background

Su questo sito web è possibile personalizzare il design della particella desiderata, la sua interattività e il colore dello sfondo.

Nell’impostazione “particelle” è possibile regolare il numero di particelle, il colore, la forma, la dimensione, l’opacità, le linee che collegano le particelle e il movimento.

Editing the Particles settings in Vincent Garreau's particle.js website

Al di sotto di questo c’è l'”interattività”.

Qui è possibile regolare il comportamento delle particelle quando ci si passa sopra e si fa clic su di esse.

The particle interactivity settings in Vincent Garreau's website

Infine, c’è “sfondo della pagina (css)”. Qui è possibile cambiare il colore di sfondo dell’animazione delle particelle e modificarne le dimensioni, la posizione e la ripetizione.

Se necessario, è possibile caricare anche un’immagine di sfondo personalizzata.

The particle page background settings in Vincent Garreau's website

Una volta terminato, si può fare clic sul pulsante “Download current config (json)” in basso.

In questo modo si scaricherà il file di codice JSON dello sfondo delle particelle, che dovrà essere aperto con un editor di testo. Tenere aperta la finestra dell’editor di testo mentre si procede con i passi successivi.

Downloading the JSON file for the particle background

Torniamo ora al costruttore di pagine SeedProd.

Passare nuovamente al menu Sfondo particellare delle impostazioni avanzate. Quindi, copiare e incollare il codice JSON nella casella di testo appropriata.

Ora si dovrebbe vedere lo sfondo delle particelle nella sezione di anteprima.

Inserting the JSON code  in the particle background settings of SeedProd

Fare clic su ‘Anteprima’ per vedere l’aspetto dello sfondo delle particelle sul front-end e su ‘Salva’ per finalizzare le modifiche.

Ecco un esempio di come potrebbe apparire lo sfondo delle particelle:

Example of an animated particle background made with SeedProd

Metodo 2: Come aggiungere uno sfondo animato con il codice (gratuito)

Se l’utilizzo di un builder di pagina per inserire uno sfondo animato sembra troppo impegnativo, è possibile aggiungerlo anche tramite codice. Non preoccupatevi se non siete esperti di codifica, perché useremo WPCode per rendere questo processo sicuro e semplice.

Per questa esercitazione è possibile utilizzare la versione gratuita o premium di WPCode. Mentre la versione gratuita funziona perfettamente, la versione premium include caratteristiche utili come la generazione di codice AI e una modalità di test.

Se volete saperne di più, potete leggere la nostra recensione di WPCode.

Per prima cosa, installate il plugin sull’amministrazione di WordPress.

Dopo l’attivazione, andare su Code Snippets ” + Add Snippet nella Bacheca, quindi cliccare su “Add Your Custom Code (New Snippet)” e poi sul pulsante “+ Add Custom Snippet”.

Adding custom code in WPCode

Ora è necessario selezionare il tipo di snippet.

Poiché lavoreremo con una combinazione di HTML, JavaScript e CSS, è possibile scegliere “HTML Snippet” tra le opzioni.

Choosing HTML in WPCode

Ora, date al vostro snippet un nome facile da ricordare.

Può essere qualcosa di semplice come “Particle.js sfondo”.

Naming a particle.js code snippet in WPCode

Ora, procedete a incollare il codice qui sotto.

Questo codice è stato adattato dallo stesso sito web di Vincent Garreau caratterizzato dal primo metodo, ma vi mostreremo come personalizzarlo ulteriormente con il solo codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Particles.js Background</title>
 
  <!-- Include the particles.js library -->
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
 
  <!-- Include your custom styles -->
  <style>
    /* Reset styles */
    body {
      margin: 0;
      font: normal 75% Arial, Helvetica, sans-serif;
    }
    canvas {
      display: block;
      vertical-align: bottom;
    }
 
    /* Particles.js container */
    #particles-js {
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
 
      /* Background color; change this to any valid CSS color value */
      background-color: #b61924; /* <-- Customize background color here */
 
      /* Optional background image; add the URL inside the quotes */
      background-image: url(""); /* <-- Add background image URL here */
 
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
      z-index: -1; /* Ensure the particles are behind other content */
    }
 
    /* Optional stats styles */
    .count-particles {
      background: #000022;
      position: absolute;
      top: 48px;
      left: 0;
      width: 80px;
      color: #13E8E9;
      font-size: 0.8em;
      text-align: left;
      text-indent: 4px;
      line-height: 14px;
      padding-bottom: 2px;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      border-radius: 0 0 3px 3px;
      -webkit-user-select: none;
      margin-top: 5px;
      margin-left: 5px;
    }
    .js-count-particles {
      font-size: 1.1em;
    }
  </style>
</head>
<body>
  <!-- Particles.js container -->
  <div id="particles-js"></div>
 
  <!-- Optional Stats Display -->
  <div class="count-particles">
    <span class="js-count-particles">--</span> particles
  </div>
 
  <!-- Initialize particles.js -->
  <script>
    /* Customize the particles.js parameters below */
    particlesJS("particles-js", {
      "particles": {
        "number": {
          "value": 80, /* <-- Number of particles; adjust this value */
          "density": {
            "enable": true,
            "value_area": 800 /* <-- Particle density area */
          }
        },
        "color": {
          "value": "#ffffff" /* <-- Particle color; change to any valid CSS color */
        },
        "shape": {
          "type": "circle", /* <-- Particle shape: "circle", "edge", "triangle", etc. */
          "stroke": {
            "width": 0,
            "color": "#000000" /* <-- Stroke color of particles */
          },
          "polygon": {
            "nb_sides": 5 /* <-- Number of sides for polygon shape */
          },
          "image": {
            "src": "img/github.svg", /* <-- URL of custom image for particles */
            "width": 100,
            "height": 100
          }
        },
        "opacity": {
          "value": 0.5, /* <-- Opacity of particles */
          "random": false, /* <-- Whether opacity is random */
          "anim": {
            "enable": false,
            "speed": 1,
            "opacity_min": 0.1,
            "sync": false
          }
        },
        "size": {
          "value": 3, /* <-- Size of particles; adjust to change particle size */
          "random": true, /* <-- Whether particle size is random */
          "anim": {
            "enable": false,
            "speed": 40,
            "size_min": 0.1,
            "sync": false
          }
        },
        "line_linked": {
          "enable": true, /* <-- Enable lines between particles */
          "distance": 150, /* <-- Maximum distance for linking particles */
          "color": "#ffffff", /* <-- Color of the lines */
          "opacity": 0.4, /* <-- Opacity of the lines */
          "width": 1 /* <-- Width of the lines */
        },
        "move": {
          "enable": true, /* <-- Enable particle movement */
          "speed": 6, /* <-- Speed of particle movement */
          "direction": "none", /* <-- Direction of movement */
          "random": false, /* <-- Randomize movement direction */
          "straight": false, /* <-- Move in straight lines */
          "out_mode": "out", /* <-- Action when particles go out of canvas */
          "bounce": false, /* <-- Enable particles to bounce off edges */
          "attract": {
            "enable": false, /* <-- Attract particles toward mouse */
            "rotateX": 600,
            "rotateY": 1200
          }
        }
      },
      "interactivity": {
        "detect_on": "canvas", /* <-- Interaction events occur on "canvas" or "window" */
        "events": {
          "onhover": {
            "enable": true, /* <-- Enable interaction on hover */
            "mode": "repulse" /* <-- Interaction mode on hover: "grab", "bubble", "repulse" */
          },
          "onclick": {
            "enable": true, /* <-- Enable interaction on click */
            "mode": "push" /* <-- Interaction mode on click: "push", "remove", "bubble", "repulse" */
          },
          "resize": true /* <-- Enable reactivity to window resize */
        },
        "modes": {
          "grab": {
            "distance": 400, /* <-- Distance for grab mode */
            "line_linked": {
              "opacity": 1
            }
          },
          "bubble": {
            "distance": 400, /* <-- Distance for bubble mode */
            "size": 40, /* <-- Size of particles in bubble mode */
            "duration": 2, /* <-- Duration of bubble effect */
            "opacity": 8, /* <-- Opacity of particles in bubble mode */
            "speed": 3 /* <-- Speed of bubble effect */
          },
          "repulse": {
            "distance": 200, /* <-- Distance for repulse mode */
            "duration": 0.4 /* <-- Duration of repulse effect */
          },
          "push": {
            "particles_nb": 4 /* <-- Number of particles added on click */
          },
          "remove": {
            "particles_nb": 2 /* <-- Number of particles removed on click */
          }
        }
      },
      "retina_detect": true /* <-- Enable retina display support */
    });
 
    /* Optional: Variables for stats.js (if used) */
    var count_particles, stats, update;
  </script>
</body>
</html>

Il codice è piuttosto lungo, quindi vediamo le parti che si possono personalizzare.

Per cambiare il colore di sfondo, modificare la proprietà background-color sotto #particles-js. Sostituire #b61924 con qualsiasi valore valido di colore CSS, come #FF0000 per il rosso o rgb(255,0,0) o anche nomi di colori come red.

1
background-color: #b61924; /* <-- Customize background color here */

Per aggiungere un’immagine di sfondo, impostare la proprietà background-image aggiungendo l’URL dell’immagine all’interno del campo url("").

Assicurarsi che il percorso o l’URL dell’immagine di sfondo sia corretto.

1
background-image: url("path/to/your/image.jpg"); /* <-- Add background image URL here */

Per modificare il numero di particelle, regolare il "valore" alla voce "numero".

Aumentando il valore si aggiungono più particelle, mentre diminuendolo se ne riduce il numero.

1
2
3
4
"number": {
  "value": 80, /* <-- Number of particles; adjust this value */
  // ...
}

Per modificare la dimensione delle particelle, è possibile modificare il "valore" alla voce "dimensione".

Un numero maggiore aumenta la dimensione delle particelle e viceversa.

1
2
3
4
5
"size": {
  "value": 3, /* <-- Size of particles; adjust to change particle size */
  "random": true, /* <-- Set to false for uniform size */
  // ...
}

Per modificare il colore delle particelle, sostituite il "valore" di "color" con un valido valore di colore CSS.

1
2
3
"color": {
  "value": "#ffffff" /* <-- Particle color; change to any valid CSS color */
},

Per modificare la forma delle particelle, è possibile modificare il "tipo" alla voce "forma".

È possibile utilizzare forme come "cerchio", "bordo", "triangolo", "poligono" o anche "stella".

1
2
3
4
"shape": {
  "type": "circle", /* <-- Particle shape: "circle", "edge", "triangle", etc. */
  // ...
},

Per modificare le proprietà delle linee tra le particelle, è possibile regolare le proprietà sotto "linea_collegata".

Ad esempio, se si modifica "abilita": true in "abilita": false, non si vedrà alcuna linea che collega le particelle.

1
2
3
4
"line_linked": {
  "enable": true, /* <-- Enable lines between particles */
  // ...
},

È inoltre possibile modificare il colore, l’opacità e la larghezza della linea.

1
2
3
4
5
6
"line_linked": {
  "color": "#ffffff", /* <-- Line color */
  "opacity": 0.4, /* <-- Line opacity */
  "width": 1, /* <-- Line width */
  // ...
},

Non preoccupatevi se dovrete apportare delle modifiche in seguito, perché potrete sempre modificare il codice anche dopo l’attivazione.

Dopo aver personalizzato il codice a proprio piacimento, è il momento di impostare dove e quando appare lo sfondo animato.

Scorrere verso il basso fino alla sezione Inserimento del frammento di WPCode. Assicurarsi di selezionare ‘Auto Insert’ come metodo di inserimento e scegliere ‘Site Wide Footer’ come posizione.

Choosing Site Wide Footer for the code snippet location in WPCode

WPCode offre anche una potente caratteristica chiamata logica condizionale, disponibile sia nella versione gratuita che in quella premium. Questa caratteristica permette di controllare esattamente l’aspetto dello sfondo animato sul sito web.

Per utilizzare questa caratteristica, individuare la sezione “Logica condizionale intelligente” e attivare/disattivare “Logica abilitata”. Verranno visualizzate le opzioni per impostare condizioni specifiche per la visualizzazione dello sfondo.

Using the conditional logic feature in WPCode

Ad esempio, se si desidera che lo sfondo animato appaia solo sulla homepage, selezionare “URL pagina” dal menu a discesa delle condizioni, scegliere “Is” e inserire l’URL della homepage.

È possibile aggiungere più gruppi di condizioni facendo clic sul pulsante “+ Aggiungi nuovo gruppo”.

Il passo finale consiste nell’attivazione dello snippet. Cercare la levetta “Inattivo” in alto nella pagina e fare clic su di essa per modificarla in “Attivo”. Non dimenticate di fare clic su “Salva snippet” per conservare le modifiche.

È tutto-in-uno! Visitate il vostro sito web su mobile o desktop per vedere il vostro nuovo sfondo animato in azione. Ecco come appare sul nostro sito di prova:

Example of a particle.js background made with WPCode

Gli sfondi animati rallentano i siti web?

Se non sono fatti bene, gli sfondi animati possono rallentare il vostro sito web. Ma ci sono modi per evitarlo.

Per gli sfondi particellari, il numero di particelle e la loro velocità di movimento possono influire sulla velocità di caricamento della pagina. Un numero maggiore di particelle e un movimento più veloce richiedono una maggiore potenza di elaborazione, che può rallentare il caricamento.

Per risolvere questo problema, potete provare diverse impostazioni per la densità e la velocità delle particelle per trovare quella che funziona meglio per il vostro sito web. Durante questo processo, è possibile eseguire test di velocità di WordPress per vedere gli effetti.

È anche una buona idea utilizzare gli sfondi animati solo nelle pagine in cui sono più importanti. Non è necessario utilizzarli ovunque, altrimenti potrebbero risultare noiosi.

Infine, per mantenere il vostro sito web veloce con uno sfondo particellare, assicuratevi di seguire le migliori pratiche per la velocità dei siti web. Per saperne di più, consultate la nostra guida definitiva su come rendere WordPress più veloce.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere uno sfondo di particelle animate in WordPress. Potreste anche voler dare un’occhiata alla nostra guida su come ottenere feedback sul design di un sito web in WordPress e alla nostra scelta dei migliori builder di temi per WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

2 commentiLeave a Reply

  1. Carlos Rangel

    Nice article. I wonder if is possible to achieve this effect using some code like vanilla JavaScript and maybe some CSS styles. This as become my favorite WordPress blog :)

    • WPBeginner Support

      While possible, it would require coding knowledge and would not be a beginner task which is why we do not currently recommend it.

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.