Griglia essenziale: una panoramica e una revisione dettagliate

ThemePunch produce alcuni dei plugin più popolari disponibili per WordPress. Essential Grid è uno dei migliori guadagni nella loro libreria, proprio insieme a Slider Revolution . Nel tempo, Essential Grid è diventato uno dei plugin più ricercati e di maggior successo su CodeCanyon. Quindi volevamo mettere in evidenza il plugin e lasciare che voi decideste se è qualcosa che potrebbe migliorare i vostri siti.

Griglia essenziale

I plugin per la griglia non sono rari. In effetti, il nostro Divi builder ha un modulo Portfolio che serve a questo scopo. Ma Essential Grid va ben oltre ciò che la maggior parte degli altri plug-in di griglia ha fatto, motivo per cui anche dopo che molti temi includono i propri modelli di griglia personalizzati, la gente continua ad acquistare licenze EG ogni singolo giorno.

Il semplice utilizzo della descrizione di vendita originale ti dirà cosa puoi fare con EG:

Essential Grid Gallery è un plug-in premium per WordPress che ti consente di visualizzare vari formati di contenuto in una griglia della galleria altamente personalizzabile. Le possibili applicazioni vanno da portfolio, blog, gallerie, negozi WooCommerce, tabelle dei prezzi, servizi, slider di prodotti, Instagram, YouTube, testimonianze e qualsiasi altra cosa tu possa immaginare.

Ma ciò che la loro descrizione non ti dice è in cosa consiste tutta quella personalizzazione. Questo è il nostro lavoro e intendiamo farlo. Quindi scaviamo e vediamo di cosa si tratta.

Iniziare

Prima di tutto, ricorda che questo è un plugin premium. Dovrai andare su CodeCanyon e ottenere il download per $ 27 USD. Quindi segui il processo di installazione manuale ( Plugin – Aggiungi nuovo – Carica ). A questo punto, avrai 3 nuovi elementi nella dashboard di amministrazione di WordPress: Ess. Griglia , Punch Fonts e Ess. Post di esempio di griglia . Per cominciare, diamo un'occhiata al semplice Ess. Griglia .

La prima voce di menu è dove inserisci il codice di attivazione, controlla gli aggiornamenti, i log delle modifiche, quel genere di cose. Forniscono alcune semplici istruzioni su come utilizzare il plug-in che si riducono a: utilizzare uno shortcode o trascinare il widget su una barra laterale.

Questa pagina sarà anche il punto in cui verrai a creare tutte le nuove griglie che desideri utilizzare, quindi abituati a fare clic su quel pulsante.

Editor skin per oggetti

Sotto Item Skin Editor , hai tutti i modelli di base forniti da Essential Grid. Puoi modificarli pelle per pelle, cambiando quello che vuoi al riguardo. O usandolo così com'è. Puoi persino crearne uno da zero.

Qui, EG ti dà la possibilità di ordinare tramite tab per diversi tipi di elementi della griglia. (Anche spaziatura, design in muratura, post o griglie di prodotti WooCommerce.) Passando il mouse su ciascuno di essi, verranno animati e visualizzati titoli, estratti, sovrapposizioni di colori, ecc. che puoi personalizzare facendo clic sull'icona a forma di ingranaggio verde .

All'interno di questo pannello delle opzioni, ogni singolo elemento può essere modificato. Dalla spaziatura tra gli elementi, le icone che appaiono, lo stile e la durata dell'animazione, i collegamenti, le ombre, i tipi di media e l'adattamento, tutto.

Vorrei richiamare la vostra attenzione sul fatto che Essential Grid ha le classi CSS in bella vista che potete manipolare come volete. Se per qualche motivo non riesci a trovare l'opzione di design perfetta tra le opzioni qui, puoi aggiungerla tu stesso tramite CSS personalizzato.

Nella parte inferiore della pagina, ottieni una vista dall'alto di ogni livello a cui hai accesso e di come è attualmente in stile.

Metadati e impostazioni di ricerca

L'editor di skin è probabilmente la parte individuale più robusta di Essential Grid, ma EG non si sottrae a queste opzioni altrove. Puoi creare meta box personalizzati in Meta Data Handling che ti dà la possibilità di posizionare box per funzionalità personalizzate di cui potresti aver bisogno dal plug-in.

Puoi fare praticamente la stessa cosa in Impostazioni di ricerca , ma per le ricerche (hai indovinato). EG funziona anche come pagina dei risultati di ricerca, quindi se non sei soddisfatto del modo in cui i tuoi archivi normali e simili appaiono, questo è un ottimo modo per risolverli rapidamente.

Impostazioni globali

Proprio come sembrano, le Impostazioni globali coprono tutte le tue basi. Puoi impostare le autorizzazioni per chi può cambiare e modificare le griglie, come vengono caricati i caratteri e JavaScript, cosa fai per la memorizzazione nella cache, da dove ottieni le icone, impostando un'immagine predefinita per gli elementi della griglia e così via. Se si applica all'intero plug-in anziché a un singolo elemento come solo le skin, sarai in grado di trovarlo qui. La parte impressionante è il controllo che ottieni: molti plugin non ti danno un'opzione per scegliere il tipo di query che usi, ma EG ti consente di scegliere se get_posts() o WP_Query() funziona meglio per il tuo sito (e se non lo fai "Non so cosa significhi, lascialo come predefinito. Va bene così com'è.

Importa/Esporta

Quando configuri per la prima volta il plugin, dovresti assolutamente controllare la pagina Importa/Esporta . Se fai clic su Importa dati demo completi e Importa griglie demo social media , avrai una vasta gamma di modelli iniziali con cui puoi iniziare. Sono anche buoni, quindi basta fare clic sul pulsante e l'importazione/scaricamento è quasi istantaneo.

Le griglie importate appariranno in fondo all'elenco quando tornerai a Ess. Griglia . La tua nuova libreria di griglie ti incontrerà lì.

ess. Post di esempio di griglia

La seconda delle nuove opzioni del menu di amministrazione è Ess. Post di esempio di griglia . È una scelta strana da fare per un titolo di menu, poiché è qui che probabilmente vivranno gli elementi della griglia basati su modelli. Vedete, tutti quei post che sono elencati in questa pagina sono in realtà i contenuti delle caselle contenute nelle griglie sotto Ess. Panoramica della griglia .

Quando utilizzi gli shortcode che ottieni dalla pagina panoramica in qualsiasi post o pagina in cui desideri visualizzare la griglia, questi sono i singoli elementi che compaiono.

Anche creare un post per una nuova griglia è facile. Funziona proprio come aggiungere un nuovo post di qualsiasi altro tipo. Basta premere il pulsante Aggiungi nuovo sotto questa intestazione e impostare i parametri.

Utilizzo di una griglia essenziale salvata

Sia che tu stia utilizzando i modelli o che ne crei uno tuo, devi sapere come usarli. Tutto ruota attorno agli shortcode con Essential Grid. Se hai una griglia specifica che desideri utilizzare più e più volte, dovrai fare clic su Crea nuova griglia Ess sotto Ess. La pagina della panoramica di Grid nel pannello di amministrazione. All'interno, scegli tutto da come puoi ordinare gli elementi nella griglia, quale animazione di caricamento ha, da dove provengono effettivamente i suoi elementi e puoi dargli un nome.

Quando lo chiami, puoi anche scegliere il suo alias shortcode. Questo alias viene utilizzato solo per chiamare questa particolare griglia utilizzando lo shortcode Essential Grid. Ho anche scelto di utilizzare lo stesso ID per l'ID CSS nel caso in cui in futuro volessi apportare modifiche esterne.

Basta inserire lo shortcode nell'editor di testo di un articolo o di una pagina, quindi.

E voilà!

Utilizzo di una griglia essenziale unica nel suo genere

Se sai che hai solo bisogno di visualizzare qualcosa su una pagina o in un post, potrebbe non esserci alcun motivo per affrontare il problema di impostare una griglia completamente nuova, creare nuovi post per il suo contenuto come modelli e creare alias e tutto il resto Quello. Puoi invece semplicemente generare uno shortcode dinamico dall'interno dell'editor di post stesso. Basta premere il pulsante Essential Grid Shortcode Creator nella barra degli strumenti.

Quindi dovrai seguire i passaggi per dire a questo shortcode quale contenuto vuoi che venga visualizzato. Puoi scegliere uno di quelli predefiniti dal menu di panoramica (senza dover copiare/incollare manualmente il suo shortcode), oppure puoi crearne uno personalizzato in base alle opzioni presentate.

Passerai attraverso le pagine per scegliere tutte le stesse opzioni che hai altrove (animazioni, layout, ecc.) E quando sei pronto per andare, premi il pulsante Generate Shortcode .

Come puoi vedere, lo shortcode che viene generato dinamicamente è molto più complesso perché contiene tutte le informazioni sulla griglia stessa.

Ma quando è renderizzato, non c'è differenza. Soprattutto se hai scelto di applicare una pelle durante la creazione.

Widget griglia essenziale

Infine, hai la possibilità di inserire qualsiasi griglia essenziale che hai creato in un widget. Questo è più facile di tutti gli altri da configurare perché è letteralmente drag-and-drop. Vai in Aspetto - Widget , seleziona il widget Griglia essenziale e trascinalo dove vuoi che venga visualizzato. Se lo vuoi solo sulla home page, puoi impostarlo oppure puoi scegliere una delle tue griglie predefinite. Tuttavia, non puoi creare una griglia dinamica in questo modo come hai fatto sopra. Questi devono essere pre-generati.

Una cosa da tenere a mente, tuttavia, è che non tutti i layout hanno un bell'aspetto in una barra laterale. Potresti visualizzare alcuni dei tuoi contenuti in modo molto strano, ma non spaventarti. Se ciò accade, modifica le impostazioni in modo che vengano visualizzate in modo diverso: forse in box anziché a schermo intero o Even invece di Masonry, forse. Sperimenta finché non avrà l'aspetto che desideri. Probabilmente è una buona idea creare una griglia specifica per la barra laterale per questo. (Puoi semplicemente duplicare quello che vuoi lì e modificarlo invece dell'originale.)

Caratteri di pugno

E infine, c'è l'ultimo pezzo di personalizzazione che ottieni con Essential Grid. Punch Fonts è una semplice interfaccia per l'utilizzo di Google Fonts in EG. Questo è tutto.

Puoi scegliere i caratteri che desideri installare premendo il pulsante Aggiungi nuovo carattere ben intitolato. Se segui il collegamento nel modale a Google Fonts, troverai i parametri di cui hai bisogno e il plug-in inserirà il carattere nel tuo sito.

E quando dice che il tp- moniker è solo per uso interno, significa semplicemente che è sostanzialmente lo stesso dell'alias precedente. Lo vedrai quando applichi i caratteri alle cose. Quindi nominali in modo appropriato.

Pensieri finali

Nel complesso, Essential Grid è uno dei plug-in di griglia più robusti e potenti in circolazione. Se hai mai usato Slider Revolution, i layout e i livelli funzionano in modo molto simile e dovresti sentirti come a casa. In caso contrario, potrebbe esserci un po' di curva di apprendimento mentre capisci quali pezzi si incastrano. Ma una volta fatto, sarai in grado di creare delle pagine davvero belle.

Se non hai bisogno di questo livello di personalizzazione, potresti non voler pagare il prezzo premium. Ci sono molti altri plugin di griglia là fuori che potrebbero soddisfare le tue esigenze. Inoltre, a seconda di quanto siano pesanti le griglie, la velocità del sito potrebbe diventare un problema. Voglio dire, puoi personalizzare la tua animazione di caricamento per un motivo.

Tuttavia, se necessario e se eseguito correttamente, il plug-in brilla davvero. C'è un motivo se Essential Grid è il venditore numero 1 nella sua categoria. E se controlli le valutazioni e i thread di supporto, ThemePunch risponde rapidamente e ti aiuta.

Quindi per $ 27, probabilmente vale il prezzo del biglietto. Inoltre, se sei un designer di temi, puoi acquistare la loro licenza estesa e includerla come pacchetto per i tuoi temi. Il che è piuttosto interessante.

Usi Essential Grid? Fateci vedere alcune delle vostre creazioni nei commenti!

Immagine in primo piano dell'articolo di Bloomicon / shutterstock.com