1) Perché abbiamo creato un nuovo sito Web e non potevamo semplicemente "cambiare tema"

Quando abbiamo identificato per la prima volta la necessità di un cambiamento, il compito sembrava semplice: "Cambiare il blocco superiore e rendere più efficace la call to action". A prima vista, potrebbe sembrare una soluzione rapida, ma ci siamo presto resi conto che questo piccolo compito rivelava problemi di fondo molto più grandi con la struttura e il design del sito. Il problema non era solo un blocco; era l'intera architettura del sito che necessitava di una revisione.

Il nostro sito web era stato costruito nel tempo, con diverse pagine aggiunte utilizzando vari design e layout, senza alcun tema o modello unificante. Ogni pagina era unica nel suo design, il che potrebbe sembrare creativo ma ha portato a un problema significativo: l'incoerenza. Se fossimo andati avanti e avessimo creato un nuovo design solo per il blocco superiore mantenendo il resto del sito così com'era, avremmo dovuto aggiornare manualmente quel blocco su oltre 700 pagine e post. Ancora peggio, questo processo manuale avrebbe dovuto essere ripetuto ogni volta che avessimo voluto apportare modifiche future. Immagina l'inefficienza di dover setacciare centinaia di pagine, assicurandoci che ognuna avesse gli ultimi aggiornamenti. È diventato subito chiaro che continuare a lavorare con il vecchio sito non sarebbe stato sostenibile.

Oltre alla logistica dell'aggiornamento di ogni pagina, abbiamo dovuto considerare l'esperienza utente complessiva. Gli utenti oggi si aspettano esperienze fluide e coese quando visitano un sito web. Se scorrono una pagina verso il basso e vedono che il design è incoerente, con ogni blocco che utilizza stili diversi, crea un'impressione sconnessa e poco professionale. Ancora peggio, quando un utente passa da una pagina all'altra e nota che il layout e il design sono completamente diversi, rafforza un senso di disordine.

L'incoerenza si estendeva oltre il layout. Molte delle immagini sul sito erano obsolete, mal progettate o addirittura generate in modo inappropriato dalle reti neurali. Queste immagini non erano in linea con gli standard di progettazione moderni e sostituirle era un altro compito arduo. L'uso di immagini scadenti rifletteva negativamente sulla qualità complessiva del sito, lasciando agli utenti un'impressione negativa del prodotto o del servizio che stavamo offrendo.

Non c'era un modo semplice per aggiornare il sito in modo completo usando uno strumento come Elementor. Ogni pagina e blocco conteneva i propri stili in linea, il che significava che le modifiche non potevano essere apportate globalmente. Se avessimo voluto aggiornare lo stile del sito, avremmo dovuto esaminare ogni singola pagina e aggiornare manualmente ogni blocco, il che sarebbe stato dispendioso in termini di tempo e inefficiente. Con questo in mente, è diventato evidente che la nostra unica soluzione era quella di creare un nuovo sito Web da zero. Ciò ci avrebbe consentito di trasferire tutti i contenuti mantenendo gli stessi URL ma con un design nuovo, coerente e facilmente aggiornabile.

2) Perché abbiamo deciso di non usare Elementor

Elementor è uno dei page builder più popolari per WordPress. In superficie, sembra un ottimo strumento che consente la creazione di pagine in modo rapido e semplice. Tuttavia, dopo averci lavorato a lungo, abbiamo riscontrato diverse limitazioni che ci hanno fatto decidere di abbandonare Elementor e optare per un sito web personalizzato.

Limitazioni e sfide di Elementor:

1. Bug e glitch : sebbene Elementor offra molte funzionalità utili, non è esente da problemi tecnici. Ad esempio, quando abbiamo copiato una pagina e provato a modificarla, la nuova pagina spesso appariva diversa dall'originale, anche prima di apportare modifiche. C'erano frequenti bug nel modo in cui venivano visualizzati gli elementi, come la proprietà "larghezza massima immagine" che non funzionava correttamente. Questi glitch hanno reso difficile garantire uno stile coerente tra le pagine.
2. Troppa libertà creativa, che porta a incoerenza : uno dei principali punti di forza di Elementor è la possibilità di personalizzare tutto. Tuttavia, questa flessibilità può essere un'arma a doppio taglio, soprattutto quando più editor lavorano sul sito. È facile per i non professionisti creare involontariamente pagine con design incoerenti. Ad esempio, abbiamo visto casi di editor che utilizzavano testo rosa su pulsanti rosa o aggiungevano triangoli arancioni volanti sullo sfondo, con conseguente design disordinato e confuso. Senza un rigido sistema di progettazione, è diventato impossibile mantenere un'identità visiva coesa.
3. Personalizzazione limitata per funzionalità avanzate : sebbene Elementor eccella nella creazione di pagine di base con testo e immagini, diventa più impegnativo quando è necessario aggiungere funzionalità personalizzate. Spesso ci siamo trovati limitati ai blocchi integrati, che erano difficili da personalizzare per funzionalità più complesse. Man mano che le nostre esigenze andavano oltre i layout di base, i limiti di Elementor diventavano sempre più evidenti.
4. Codice gonfio e problemi di prestazioni : il metodo di creazione delle pagine di Elementor introduce un'eccessiva annidamento di elementi. Ad esempio, Elementor genera automaticamente più
   contenitori all'interno di altri

   elementi, ognuno con il suo set di stili. Ciò si traduce in una struttura gonfia che influisce negativamente sulla velocità di caricamento, sulle prestazioni della pagina e, in ultima analisi, sul posizionamento SEO del sito web. Quando abbiamo eseguito test di velocità, i risultati erano costantemente scarsi e la colpa era in gran parte del codice pesante generato da Elementor.
5. Nessuna capacità di test A/B : nel panorama digitale odierno, i test A/B sono essenziali per ottimizzare l'esperienza utente. Tuttavia, Elementor non offre la possibilità di mostrare diverse versioni del sito a utenti diversi. Tutti vedono lo stesso sito, il che limita la nostra capacità di testare e perfezionare elementi di design come colori, forme dei pulsanti e immagini di sfondo. Senza questa funzionalità, non potremmo ottimizzare il sito in base al comportamento reale dell'utente.
6. Database Bloat : forse uno degli svantaggi più significativi di Elementor è il modo in cui gestisce stili e contenuti. Elementor memorizza stili, strutture nidificate e altri tag non necessari mescolati al contenuto nel database. Ciò porta a un database gonfio che non viene ripulito nemmeno quando Elementor viene disabilitato o disinstallato. Di conseguenza, passare a un nuovo tema o framework non risolve il problema: quegli stili rimangono incorporati nelle pagine, continuando a causare problemi.

Con tutte queste sfide in mente, è diventato chiaro che avevamo bisogno di una soluzione più solida. Abbiamo deciso di creare un nuovo sito web indipendente senza Elementor, optando per un approccio più sostenibile e flessibile.

3) Come creare una pagina sul nuovo sito

Costruire il nuovo sito da zero ci ha dato l'opportunità di stabilire un processo pulito e semplificato per la creazione delle pagine. Nel nuovo sistema, creare una pagina è semplice:

1. Accedi al pannello di amministrazione di WordPress e clicca su Pagine -> Aggiungi nuova pagina .
2. Visualizzerai l'editor standard di WordPress, dove potrai scrivere o incollare testo, aggiungere link e caricare immagini.

Questo processo è semplice ma flessibile. Invece di affidarsi al complicato sistema a blocchi di Elementor, l'editor di contenuti in WordPress è molto più pulito, consentendo aggiornamenti rapidi e una facile personalizzazione. Sotto l'editor, ci sono impostazioni per Advanced Custom Fields (ACF), che sono già configurate per mantenere la coerenza nell'intero sito.

ACF ci consente di creare sezioni di contenuto flessibili, con blocchi come Contenuto 1…Contenuto 15 , in cui puoi facilmente impostare il titolo, il testo, l'immagine e le etichette dei pulsanti per ogni sezione della pagina. Questi blocchi alternano automaticamente il posizionamento di immagini e testo, assicurando che il layout rimanga visivamente accattivante senza richiedere regolazioni manuali.

Per le immagini, abbiamo implementato un sistema di abbinamento dei colori che applica automaticamente un gradiente nei colori principali del sito. Ciò garantisce che tutte le immagini siano allineate con l'estetica generale. Per i loghi o gli screenshot in cui i colori devono rimanere intatti, c'è un'opzione "mantieni colori" che sostituisce il gradiente.

Questo sistema semplifica la gestione dei contenuti mantenendo la coerenza di progettazione in tutte le pagine.

4) Come creare un nuovo post

La creazione di post sul nuovo sito segue lo stesso processo semplificato della creazione di pagine, con alcune differenze fondamentali:

• I post hanno URL che includono ../blog/.. , distinguendoli dalle pagine.
• Nella barra laterale destra, un blocco mostra automaticamente gli ultimi tre articoli, contribuendo a mantenere il blog dinamico e coinvolgente.

Il modello per tutti i post si trova nel file template-parts/content/content-single.php , che gestisce la struttura e il layout di ogni post del blog. Questo modello coerente consente aggiornamenti facili e garantisce che tutti i post aderiscano alle stesse linee guida di progettazione.

5) Campi personalizzati avanzati (ACF)

ACF è stato una parte essenziale dello sviluppo del nostro nuovo sito web. Ci consente di creare campi personalizzati che possono essere facilmente gestiti tramite il pannello di amministrazione di WordPress. Campi come content_1 sono referenziati nel codice PHP, consentendoci di estrarre dinamicamente il contenuto corretto per ogni pagina e post.

Questa flessibilità è fondamentale per garantire la gestione e l'aggiornamento efficiente del sito, lasciando comunque spazio alla personalizzazione quando necessario.

6) Test A/B

Uno dei miglioramenti più significativi che abbiamo apportato al nuovo sito è stata l'implementazione del test A/B. Il test A/B ci consente di confrontare due versioni del sito per vedere quale funziona meglio con gli utenti. Questo può includere il test di colori, forme di pulsanti, sfondi o persino layout diversi.

Abbiamo implementato questa funzionalità utilizzando parametri GET nell'URL. Ad esempio, possono essere create due campagne pubblicitarie identiche, ma con URL diversi:

• https://www.conveythis.com/?param=1

• https://www.conveythis.com/?param=2

Quando gli utenti cliccano su questi link, il parametro viene salvato in un cookie. A seconda del valore del parametro, il sito mostrerà diverse versioni della pagina, come colori dei pulsanti o immagini di sfondo diversi. Ciò ci consente di raccogliere dati preziosi sulle preferenze e sui comportamenti degli utenti.

Tutti gli eventi vengono registrati in un.csvfile, nonché in un database MySQL, consentendoci di analizzare i dati e prendere decisioni informate sui miglioramenti del sito.

7) Il file functions.php

8) Gestione SEO e velocità del sito

Un obiettivo importante durante la revisione del sito web è stato il miglioramento della SEO e delle prestazioni complessive del sito. Il sito originale, creato utilizzando Elementor, aveva problemi con tempi di caricamento lenti e pratiche SEO non ottimali a causa di codice gonfio e immagini non ottimizzate.

Migliorare la SEO

Per garantire che il nostro nuovo sito fosse SEO-friendly, abbiamo implementato fin dall'inizio diverse best practice:

• HTML semantico : abbiamo strutturato attentamente l'HTML del sito con un uso corretto dei tag di intestazione (
  ,
  , ecc.), assicurando che i motori di ricerca possano analizzare e comprendere facilmente la gerarchia dei contenuti. Ciò è particolarmente importante sia per le classifiche SEO che per l'accessibilità.
• Meta tag e dati Open Graph : abbiamo sfruttato il plugin Yoast SEO per gestire meta titoli, descrizioni e dati Open Graph per la condivisione sui social. Utilizzando Yoast, abbiamo garantito che ogni pagina e post avesse metadati ottimizzati, il che è fondamentale per la visibilità sui motori di ricerca e i tassi di clic dalle piattaforme dei social media.
• Schema Markup : utilizzando il file functions.php , abbiamo aggiunto uno schema markup personalizzato per i dati strutturati, migliorando il modo in cui i motori di ricerca visualizzano le nostre pagine nei risultati di ricerca. Ad esempio, abbiamo incluso uno schema per articoli, case study e prodotti, aiutando i motori di ricerca a categorizzare meglio i nostri contenuti.

funzione add_schema_markup() {
eco '
  {
"@contesto": "http://schema.org",
"@type": "Organizzazione",
"nome": "ConveyThis",
"url": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
"sameAs": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
>
';
>
add_action( 'wp_head', 'add_schema_markup' );


Ottimizzazione della velocità del sito

Le prestazioni sono un fattore critico non solo per l'esperienza utente ma anche per le classifiche SEO. Abbiamo adottato diverse misure per migliorare la velocità del sito:

• Ottimizzazione delle immagini : abbiamo utilizzato formati di immagini moderni come WebP , che offrono tassi di compressione migliori rispetto ai formati tradizionali come PNG e JPEG. Tutte le immagini sono state servite nella dimensione appropriata in base alla risoluzione dello schermo dell'utente, garantendo tempi di caricamento rapidi anche sui dispositivi mobili.
• Caricamento lento : implementando il caricamento lento per le immagini, abbiamo fatto in modo che inizialmente venissero caricate solo le immagini visibili sullo schermo dell'utente. Le immagini aggiuntive venivano caricate mentre l'utente scorreva, riducendo i tempi di caricamento iniziale della pagina.
• Memorizzazione nella cache e minimizzazione : abbiamo utilizzato WP Rocket per la memorizzazione nella cache, la minimizzazione e la compressione di file HTML, CSS e JavaScript. WP Rocket ci ha aiutato a ottenere tempi di caricamento più rapidi riducendo le dimensioni complessive del file e offrendo versioni statiche memorizzate nella cache delle pagine ai visitatori abituali.

9) Ottimizzazione e pulizia del database

Il vecchio sito web aveva accumulato una notevole quantità di dati "spazzatura" a causa del bloat di Elementor e della struttura inefficiente del database. Per garantire che il nuovo sito funzionasse senza problemi, abbiamo eseguito una pulizia e un'ottimizzazione complete del database.

• Rimozione dei vecchi dati Elementor

Come accennato in precedenza, anche dopo aver disattivato Elementor, i suoi stili e le sue impostazioni erano ancora incorporati nel database. Abbiamo utilizzato query personalizzate per eliminare questi dati in eccesso e ripulire il database. Inoltre, abbiamo rimosso tutti i file multimediali inutilizzati, le revisioni dei post e i transienti scaduti che si erano accumulati nel tempo.

• Indicizzazione del database

Abbiamo anche ottimizzato il database aggiungendo indici alle colonne interrogate di frequente, assicurando che le query del database fossero più veloci ed efficienti. Ad esempio, aggiungendo un indice aldata di pubblicazionela colonna ha velocizzato le query relative ai post recenti, migliorando le prestazioni delle pagine del nostro blog.

Conclusione

La decisione di creare un nuovo sito web da zero è stata guidata dalle limitazioni e dalle inefficienze del vecchio sito. Cambiare semplicemente il tema non era un'opzione praticabile a causa di incongruenze di design, stili gonfi e problemi di prestazioni causati da Elementor. Creando un nuovo sito con sviluppo personalizzato e Advanced Custom Fields, abbiamo ottenuto un sito web più efficiente, coeso e professionale che migliora l'esperienza utente consentendo al contempo aggiornamenti semplificati e funzionalità di test A/B. Questo nuovo sito fornisce una solida base per la crescita e i miglioramenti futuri.