Muro sociale 
Analisi dei feed 
Ieri il tuo feed mostrava correttamente i tuoi post. Oggi sembra che ci sia qualcosa che non va.
Forse le colonne si sono fuse in un’unica colonna. Forse le immagini appaiono schiacciate o allungate. Forse gli spazi sono scomparsi, oppure l’intera pagina lampeggia per un secondo senza stile prima di tornare alla normalità. I contenuti sono comunque visibili. È solo che l’aspetto non è corretto, specialmente sui dispositivi mobili.
Se ti è capitato, non preoccuparti. Quasi mai si tratta di un vero e proprio bug. È un problema di impostazioni e puoi risolverlo senza toccare una sola riga di codice, anche se non sei uno sviluppatore.
Una volta individuata la causa che corrisponde al tuo sintomo, spesso basta un solo clic per risolvere il problema.
Allora, cerchiamo di abbinare ciò che vedi all'impostazione che risolve il problema. Ci occuperemo delle colonne, della spaziatura e della visualizzazione su dispositivi mobili in quest'ordine, così potrai correggere prima l'impostazione e saltare il CSS che probabilmente non ti serve.
- Perché il mio feed sembra danneggiato o privo di formattazione? (Risposta rapida)
- Abbina il tuo sintomo alla causa (Inizia da qui)
- Imposta il numero di colonne e la spaziatura
- Risolvere i problemi di layout specifici per i dispositivi mobili
- Quando il tema sovrascrive lo stile del feed
- Risolvi il problema con la correzione per il caricamento del tema AJAX
- Modifiche CSS personalizzate sicure che non comprometteranno il funzionamento del tuo tema
- Un feed che si adatta davvero al tuo sito
Perché il mio feed sembra danneggiato o privo di formattazione? (Risposta rapida)
Il tuo feed non è guasto. Quasi sempre si tratta di uno dei tre problemi legati alle impostazioni.
- Il tuo layout non è mai stato adattato allo spazio disponibile. Il numero di colonne e la spaziatura sono ancora quelli predefiniti, quindi i post risultano troppo affollati o si comprimono.
- Il tuo tema sta sovrascrivendo gli stili del feed. Il CSS del tuo tema ha la precedenza e il feed perde l'aspetto previsto.
- Un conflitto durante il caricamento del tema blocca l'applicazione degli stili al momento del caricamento. È proprio questo il sintomo che si manifesta con un “bagliore senza stile, seguito da un allineamento immediato”.
Ecco la parte rassicurante. Queste impostazioni si configurano direttamente nelle impostazioni del feed stesso e la maggior parte delle persone non ha mai bisogno di modificare un foglio di stile. Non serve scrivere codice.
Abbina il tuo sintomo alla causa (Inizia da qui)
Prima di cambiare qualsiasi cosa, dai un nome a ciò che vedi.
Ogni problema di impaginazione ha una causa più probabile. Abbina il tuo sintomo a tale causa e passerai direttamente alla soluzione giusta.
Ecco le cause più comuni, nell'ordine in cui vale la pena verificarle.
| Quello che vedi | Causa più probabile | Dove andare |
|---|---|---|
| Troppe o troppo poche colonne, spaziatura troppo stretta | Impostazioni di layout non modificate | Imposta il numero di colonne e la spaziatura |
| Sul desktop si vede bene, ma sul cellulare non va bene | L'impostazione della colonna mobile separata rimane invariata | Risolvere i problemi di layout specifici per i dispositivi mobili |
| Gli stili dei feed sembrano sovrascritti o non in linea con l'immagine del marchio | Conflitto di specificità CSS tra temi | Quando il tema sovrascrive lo stile del feed |
| Lampeggia senza stile, poi si posiziona correttamente | Caricamento del tema o conflitto JavaScript | Risolvi il problema con la correzione per il caricamento del tema AJAX |
E ora, l'ordine.
Controlla prima le impostazioni. Si tratta delle prime due righe. Le colonne del desktop e la visualizzazione su dispositivi mobili si trovano entrambe nelle impostazioni. Poi c’è un conflitto tra temi. Poi un conflitto di caricamento. Il CSS personalizzato viene per ultimo, se proprio deve essere preso in considerazione.
L'ordine non è casuale. Si va dalla soluzione che risolve il maggior numero di casi a quella che ne risolve il minor numero.
Ecco dove la maggior parte delle persone sbaglia. Quando si imbattono in un feed non funzionante, ricorrono immediatamente al codice personalizzato. Cominciano a scrivere codice CSS per forzare il layout.
Non farlo ancora. Nella maggior parte dei casi, un’impostazione predefinita o una semplice casella di selezione risolvono esattamente lo stesso problema. Selezionandole in questo ordine, eviterai di scrivere codice CSS superfluo.
Quindi individua il tuo sintomo nella tabella. Vai a quella sezione. Risolvilo lì.
Imposta il numero di colonne e la spaziatura
Troppe colonne? Troppo poche? I post sono stipati l’uno contro l’altro senza spazio per respirare?
Quasi sempre il problema è che il numero di colonne e la spaziatura sono impostati sui valori predefiniti, ma è piuttosto facile risolvere la questione utilizzando il personalizzatore in tempo reale incluso in ogni plugin Smash Balloon.
Imposta le righe e le colonne, osserva l'aggiornamento del feed nell'anteprima in tempo reale e salva le modifiche.
Ecco come impostare le colonne e la spaziatura.
- Nella dashboard di WordPress, apri il tuo feed e clicca su “Personalizza”.
- Fai clic sulla scheda " Layout ".
- Individua il controllo del numero di colonne. Imposta il numero di colonne per desktop, tablet e dispositivi mobili. Per ogni dimensione dello schermo è prevista un'impostazione specifica.
- Per i feed di Instagram, imposta il valore di "Padding" per modificare lo spazio tra i post.
- Fai clic su “Salva”.
Vuoi una griglia ordinata con 3 colonne sul desktop? Imposta il numero di colonne del desktop su 3. È tutto qui.
La scheda "Layout" consente inoltre di controllare la forma delle immagini. È possibile impostare i propri post con un formato quadrato 1:1, verticale 4:5 o 3:4. Questa funzione è utile quando le immagini appaiono schiacciate o allungate, poiché un formato adeguato le ritaglia in modo netto.
Risolvere i problemi di layout specifici per i dispositivi mobili
Il tuo feed può apparire perfetto sul computer. Sul cellulare, invece, potrebbe essere un disastro.
Ecco perché. L’impostazione delle colonne per dispositivi mobili è indipendente da quella per desktop. Modificare le colonne su desktop non ha alcun effetto su quelle dei dispositivi mobili.
Quindi, un feed impostato su 4 colonne sul desktop cerca di stipare tutte e 4 le colonne sullo schermo stretto di uno smartphone. Ora ogni immagine è ridotta a una minuscola striscia. Il tutto sembra angusto e schiacciato.
La soluzione consiste nell'impostare le colonne per dispositivi mobili separatamente. Vai alla stessa scheda "Layout" che hai utilizzato in precedenza.
- Apri il tuo feed, clicca su “Personalizza”, quindi clicca sulla scheda “Layout ”.
- Individua i controlli delle colonne per tablet e dispositivi mobili. Si trovano proprio accanto al controllo per desktop.
- Impostale su un valore inferiore rispetto a quello del desktop, quindi fai clic su “Salva”.
Lo schermo di un telefono è stretto, quindi un numero inferiore di colonne risulta quasi sempre più gradevole. Se la versione desktop ha 4 colonne, riduci quella mobile a 1 o 2, non a 4.
Quella singola modifica risolve immediatamente la maggior parte dei problemi di layout sui dispositivi mobili.
Quando il tema sovrascrive lo stile del feed
A volte imposti le colonne. Hai sistemato la spaziatura. Eppure il risultato non corrisponde ancora a quello che vedi nell'anteprima del Customizer.
Ecco come stanno le cose. Il tuo tema ha un proprio CSS, ovvero il codice che controlla l'aspetto grafico. Lo stesso vale per il tuo feed. Quando entrambi cercano di applicare uno stile allo stesso elemento, uno dei due deve prevalere.
E se il CSS del tuo tema ha la meglio, il tuo feed perde il suo aspetto.
Ecco i segnali che indicano che il problema è causato dal tema.
- L'anteprima nel Customizer sembra corretta, ma il feed in tempo reale non è corretto.
- I caratteri, i colori o i bordi non corrispondono a quanto impostato.
- Il problema persiste anche dopo aver modificato le impostazioni e salvato.
Se ti riconosci in questa descrizione, non metterti subito a scrivere codice. Il CSS personalizzato è l'ultimo passo, non il primo.
Prova prima a modificare le impostazioni, poi applica la soluzione per il caricamento del tema AJAX descritta nella sezione successiva. La maggior parte dei conflitti tra temi si risolve proprio in questo modo. Solo se entrambe queste soluzioni non funzionano, dovrai ricorrere a un CSS personalizzato.
E quando ne avrai bisogno, inseriscilo nel posto giusto. Aggiungilo in Aspetto » Personalizza » CSS aggiuntivo, non nei file del tema.
Se stai utilizzando un tema a blocchi, vai su Aspetto » Editor » Stili, clicca sul menu con i tre puntini (⋮) e seleziona CSS aggiuntivo per incollare il tuo codice.
In questo modo la tua modifica rimane al sicuro e non verrà cancellata da un aggiornamento del tema.
Più avanti vi indicherò alcune soluzioni alternative sicure. Per ora, tenete il CSS come riserve. Servirà per le messe a punto, una volta applicate le correzioni più semplici.
Risolvi il problema con la correzione per il caricamento del tema AJAX
Il feed appare senza formattazione per una frazione di secondo, per poi tornare alla normalità?
Si tratta di un conflitto tra i temi. E c'è un pulsante che permette di risolverlo con un solo clic. Senza bisogno di scrivere codice.
Ecco cosa succede. Sia il tema che il feed caricano i propri stili all’apertura della pagina. A volte il processo di caricamento del tema crea qualche interferenza. Di conseguenza, il feed viene visualizzato senza formattazione per un istante, prima che gli stili vengano applicati.
Hai due modi per affrontare la situazione.
Il metodo manuale consiste nell'esaminare attentamente i file di script del tema. Bisognerebbe individuare il codice che causa il conflitto e modificarne il modo in cui viene caricato. Ciò richiede tempo, pazienza e una dimestichezza con il codice che la maggior parte delle persone non possiede.
Il modo più semplice è utilizzare un'impostazione integrata chiamata "Correzione del caricamento del tema AJAX". Questa funzione carica il feed in modo da aggirare i conflitti di transizione del tema, garantendo così che gli stili vengano applicati correttamente al primo rendering. Basta spuntare una casella.
Ecco dove trovarlo.
- Apri Feed di Instagram » Impostazioni » Avanzate (oppure Feed di Facebook » Impostazioni » Avanzate).
- Attiva la correzione per il caricamento del tema AJAX.
- Fai clic su “Salva modifiche”.
Questo chiarisce subito la questione per la maggior parte delle persone.
Hai anche tu immagini con dimensioni strane o errate? C'è una versione più completa di questa soluzione.
Nella stessa schermata Impostazioni » Avanzate, attiva contemporaneamente tre impostazioni.
- Correzione del caricamento del tema AJAX
- Inserire il codice JavaScript nel tag
- Caricamento delle immagini in JavaScript
Fai clic su “Salva modifiche”. Quindi svuota la cache del plugin nella scheda “Feed” selezionando “Svuota tutte le cache”.
In questo modo il feed ricarica correttamente le immagini in base alle nuove impostazioni.
Un consiglio sul caricamento differito. Se un conflitto legato al caricamento differito sta causando la compressione delle immagini, la soluzione è fare il contrario. Vai su Impostazioni » Avanzate e disattiva invece l’opzione “Caricamento immagini tramite JavaScript”.
Quindi queste due opzioni sono in contrasto tra loro. Attivare il caricamento delle immagini tramite JavaScript risolve alcuni problemi, mentre disattivarlo ne risolve altri. Provale una alla volta e controlla il tuo feed dopo ogni modifica per capire quale sia la soluzione più adatta al tuo sito.
Modifiche CSS personalizzate sicure che non comprometteranno il funzionamento del tuo tema
Non va ancora bene dopo tutto questo? Allora è il momento di ricorrere un po’ ai CSS.
Ecco prima di tutto la buona notizia. È raro arrivare a questo punto. Nella maggior parte dei casi, basta modificare un’impostazione o applicare la correzione AJAX per risolvere il problema. Se stai leggendo queste righe, sei l’eccezione, non la regola.
E questi snippet non entreranno in conflitto con il tuo tema. Sono piccoli, mirati e sicuri.
Questo è il metodo manuale, quindi richiede un po’ più di impegno. Bisogna incollare il codice invece di modificare un valore. Tuttavia, ogni frammento di codice riportato di seguito svolge una singola operazione semplice, e puoi copiarli direttamente.
Ecco quattro soluzioni alternative a basso rischio da provare.
- Ridurre la distanza tra i pali. Utilizzo
#sb_instagram .sbi_photo { padding: 4px; }per ridurre lo spazio. Abbassa il numero per renderlo più stretto, aumentalo per avere più spazio. - Imposta un'altezza fissa per l'immagine. Utilizzo
#sb_instagram .sbi_photo { height: 200px; }in modo che ogni colonna sia allineata. Questo permette di correggere le righe che appaiono irregolari o disallineate. - Mantenere la forma dell'immagine uniforme. Aggiungi
#sb_instagram .sbi_photo { background-size: cover; }in modo che le foto vengano ritagliate in modo netto invece di risultare allungate. - Regola la spaziatura tra le colonne sui dispositivi mobili. Racchiudi la tua regola di spaziatura in
@media (max-width: 480px) { ... }per modificare solo la visualizzazione su telefono, non quella su desktop.
Basta aprire Aspetto » Personalizza » CSS aggiuntivo, inserire il codice CSS che desideri utilizzare e verificare come funziona ora il tuo feed.
Se stai utilizzando un tema a blocchi, puoi invece aprire Aspetto » Editor » Stili, fare clic sul menu con i tre puntini (⋮) e selezionare CSS aggiuntivo.
Un ultimo passaggio. Dopo aver salvato, svuota la cache del plugin nella scheda “Feed” selezionando “Svuota tutte le cache”. In questo modo i nuovi stili verranno visualizzati immediatamente.
Ecco fatto. Modifica un frammento, salva, controlla il tuo feed e ripeti solo se necessario.
Domande frequenti
Perché sul cellulare il mio feed mostra un numero errato di colonne?
Le impostazioni delle colonne per dispositivi mobili sono separate da quelle per il desktop. Vai su Personalizza » Layout e imposta separatamente le colonne per il breakpoint mobile. Impostale su 1 o 2 per lo schermo stretto di uno smartphone.
Posso personalizzare completamente il design del mio feed con i CSS?
Sì, è possibile, ma di solito non è necessario. L'editor in tempo reale integrato in Smash Balloon copre la maggior parte dei casi. Riserva il CSS alle modifiche di rifinitura, nel caso in cui l'editor in tempo reale non offra l'opzione di cui hai bisogno.
Perché il mio feed appare per un secondo senza formattazione quando si carica la pagina?
Quel lampo è dovuto a un conflitto nel caricamento del tema, non a un bug. Attiva la correzione per il caricamento AJAX del tema in Impostazioni » Avanzate, quindi fai clic su “Salva modifiche”. Nella maggior parte dei casi, questo risolve il problema del lampo.
Se cambio il tema, le impostazioni di layout del mio feed vengono azzerate?
No, le impostazioni del feed rimangono salvate quando si cambia tema. Tuttavia, il CSS del nuovo tema può sovrascrivere l'aspetto del feed. Verifica nuovamente se ci sono conflitti di specificità e, se necessario, applica nuovamente la correzione per il caricamento del tema tramite AJAX.
Devo avere conoscenze di programmazione per risolvere un problema di layout?
No, non serve. Quasi tutte le impostazioni relative al layout si regolano tramite un pulsante o un cursore nel pannello di personalizzazione del feed. Non c'è bisogno di scrivere codice, anche se non sei un mago della tecnologia.
Un feed che si adatta davvero al tuo sito
Un feed che sembra non funzionare quasi mai è effettivamente guasto. Si tratta quasi sempre di un’impostazione.
Per prima cosa, individua la causa del problema in base al sintomo. Correggi l'impostazione prima di modificare il foglio di stile. E per la maggior parte delle persone, la soluzione richiede un solo clic, non una riga di codice.
Sono disponibili controlli di layout integrati per le colonne e la spaziatura. Sono presenti impostazioni separate per i dispositivi mobili, in particolare per gli schermi dei telefoni. Inoltre, è stata implementata la correzione per il caricamento dei temi tramite AJAX, che elimina quel breve lampo che si verifica per una frazione di secondo. È disponibile anche il CSS personalizzato, ma solo per quelle rare modifiche di rifinitura.
Vuoi che i tuoi contenuti incorporati abbiano lo stesso aspetto impeccabile in ogni altra parte del tuo sito? Queste guide ti spiegano come fare, passo dopo passo:
- Aggiungere un codice di incorporamento Instagram responsive a WordPress
- Aggiungi un video di Facebook incorporato con layout adattivo
- Aggiungi un codice di incorporamento Twitter adattivo
Inizia subito a sistemare il layout del tuo feed
Scarica Instagram Feed Pro o Facebook Feed Pro e ottieni feed perfettamente integrati con il tuo sito su ogni schermo.
