Grille essentielle : aperçu détaillé et examen

ThemePunch fabrique certains des plugins les plus populaires pour WordPress. Essential Grid est l'un des meilleurs revenus de leur bibliothèque, juste à côté de Slider Revolution . Au fil du temps, Essential Grid est devenu l'un des plugins les plus recherchés et les plus réussis sur CodeCanyon. Nous voulions donc mettre le plugin en évidence et vous laisser décider si c'est quelque chose qui pourrait améliorer vos sites.

Grille essentielle

Les plugins de grille ne sont pas rares. En fait, notre propre constructeur Divi dispose d'un module Portfolio qui sert à cet effet. Mais Essential Grid va bien au-delà de ce que la plupart des autres plugins de grille ont fait, c'est pourquoi même après que de nombreux thèmes aient inclus leurs propres modèles de grille personnalisés, les gens achètent toujours des licences EG chaque jour.

Le simple fait d'utiliser le texte de présentation d'origine vous indiquera ce que vous pouvez faire avec EG :

Essential Grid Gallery est un plugin premium pour WordPress qui vous permet d'afficher divers formats de contenu dans une grille de galerie hautement personnalisable. Les applications possibles vont des portefeuilles, des blogs, des galeries, des boutiques WooCommerce, des tableaux de prix, des services, des curseurs de produits, Instagram, YouTube, des témoignages et tout ce que vous pouvez imaginer.

Mais ce que leur texte de présentation ne vous dit pas, c'est en quoi consiste toute cette personnalisation. C'est notre travail, et nous avons l'intention de le faire. Alors creusons et voyons de quoi il s'agit.

Commencer

Tout d'abord, rappelez-vous qu'il s'agit d'un plugin premium. Vous devrez vous rendre sur CodeCanyon et récupérer le téléchargement pour 27 $ USD. Ensuite, suivez le processus d'installation manuelle ( Plugins - Ajouter un nouveau - Télécharger ). À ce stade, vous aurez 3 nouveaux éléments dans votre tableau de bord d'administration WordPress : Ess. Grid , Punch Fonts et Ess. Exemples de messages de grille . Pour commencer, regardons le simple Ess. Grille .

Le premier élément de menu est l'endroit où vous mettez votre code d'activation, vérifiez les mises à jour, les journaux des modifications, ce genre de choses. Ils donnent quelques instructions simples sur la façon d'utiliser le plugin qui se résument à : utiliser un shortcode ou faire glisser le widget vers une barre latérale.

Cette page sera également l'endroit où vous créerez les nouvelles grilles que vous souhaitez utiliser, alors habituez-vous à cliquer sur ce bouton.

Éditeur d'apparence d'élément

Sous Item Skin Editor , vous avez tous les modèles de base fournis avec Essential Grid. Vous pouvez les modifier peau par peau, en changeant ce que vous voulez à ce sujet. Ou l'utiliser tel quel. Vous pouvez même créer le vôtre à partir de zéro.

Ici, EG vous donne la possibilité de trier via un onglet pour différents types d'éléments de grille. (Espacement uniforme, conception de maçonnerie, publications ou grilles de produits WooCommerce.) Lorsque vous survolez chacun d'eux, il animera et affichera des titres, des extraits, des superpositions de couleurs, etc. que vous pouvez personnaliser en cliquant sur l' icône d'engrenage vert .

Dans ce panneau d'options, chaque élément peut être modifié. De l'espacement entre les éléments, les icônes qui s'affichent, le style et la durée de l'animation, les liens, les ombres, les types de médias et l'ajustement, tout.

Je voudrais attirer votre attention sur le fait qu'Essential Grid a les classes CSS bien en vue pour que vous puissiez les manipuler comme vous le souhaitez. Si, pour une raison quelconque, vous ne trouvez pas l'option de conception parfaite dans les options ici, vous pouvez l'ajouter vous-même via CSS personnalisé.

Au bas de la page, vous obtenez une vue d'ensemble de chaque calque auquel vous avez accès et de son style actuel.

Métadonnées et paramètres de recherche

L'éditeur de skin est probablement la partie individuelle la plus robuste d'Essential Grid, mais EG ne se dérobe pas à ces options ailleurs. Vous pouvez créer des boîtes méta personnalisées sous Gestion des métadonnées, ce qui vous donne la possibilité de placer des boîtes pour les fonctionnalités personnalisées dont vous pourriez avoir besoin en dehors du plug-in.

Vous pouvez faire à peu près la même chose sous Paramètres de recherche , mais pour (vous l'aurez deviné) les recherches. EG fonctionne également comme une page de résultats de recherche, donc si vous n'êtes pas satisfait de l'apparence de vos archives normales, c'est un excellent moyen de les réparer rapidement.

Paramètres globaux

Tout comme ils sonnent, les paramètres globaux couvrent toutes vos bases. Vous pouvez définir des autorisations pour savoir qui peut modifier et modifier les grilles, comment les polices et JavaScript se chargent, ce que vous faites pour la mise en cache, d'où vous obtenez les icônes, définir une image par défaut pour les éléments de grille, etc. Si cela s'applique à l'ensemble du plugin au lieu d'un seul élément comme les skins uniquement, vous pourrez le trouver ici. La partie impressionnante est le contrôle que vous obtenez - de nombreux plugins ne vous donnent pas la possibilité de choisir le type de requête que vous utilisez, mais EG vous permet de choisir si get_posts() ou WP_Query() fonctionne le mieux pour votre site (et si vous ne Je ne sais pas ce que cela signifie, laissez-le par défaut. C'est bien comme ça.

Importer / Exporter

Lorsque vous configurez le plugin pour la première fois, vous devez absolument consulter la page Import/Export . Si vous cliquez sur Importer les données de démonstration complètes et Importer les grilles de démonstration des médias sociaux , vous disposerez d'une vaste gamme de modèles initiaux avec lesquels vous pouvez commencer. Ils sont bons aussi, alors cliquez simplement sur le bouton et l'importation/le téléchargement est presque instantané.

Les grilles importées apparaîtront au bas de la liste lorsque vous revenez à Ess. Grille . Votre nouvelle bibliothèque de grilles vous y retrouvera.

Ess. Grille d'exemples de messages

La deuxième des nouvelles options du menu d'administration est l' Ess. Grille d'exemples de messages . C'est un choix étrange à faire pour un titre de menu, car c'est là que vos éléments de grille modélisés vivront probablement. Vous voyez, tous ces messages qui sont répertoriés sur cette page sont en fait le contenu des boîtes contenues dans les grilles sous le Ess. Aperçu de la grille .

Lorsque vous utilisez les codes abrégés que vous obtenez de la page d'aperçu dans n'importe quel article ou page sur lequel vous souhaitez afficher la grille, ce sont les éléments individuels qui s'affichent.

Créer un article pour une nouvelle grille est également facile. Cela fonctionne comme l'ajout d'un nouveau message de tout autre type. Appuyez simplement sur le bouton Ajouter un nouveau sous cette rubrique et définissez vos paramètres.

Utilisation d'une grille essentielle enregistrée

Que vous utilisiez les modèles ou que vous créiez les vôtres, vous devez savoir comment les utiliser. Tout tourne autour des shortcodes avec Essential Grid. Si vous avez une grille spécifique que vous souhaitez utiliser encore et encore, vous devrez cliquer sur Créer une nouvelle grille Ess sous Ess. Page de présentation de Grid dans votre panneau d'administration. À l'intérieur, vous choisissez tout, depuis la manière dont vous pouvez trier les éléments de la grille, l'animation de chargement dont elle dispose, la provenance réelle de ses éléments et vous pouvez la nommer.

Lorsque vous le nommez, vous pouvez également choisir son alias de shortcode. Cet alias est uniquement utilisé pour appeler cette grille particulière à l'aide du shortcode Essential Grid. J'ai également choisi d'utiliser le même ID pour l'ID CSS juste au cas où à l'avenir, je voulais faire des ajustements externes.

Mettez simplement le shortcode dans l'éditeur de texte d'un article ou d'une page, ensuite.

Et voila !

Utiliser une grille essentielle unique en son genre

Si vous savez que vous avez juste besoin d'afficher quelque chose sur une page ou dans un message, il n'y a peut-être aucune raison de vous donner la peine de configurer une toute nouvelle grille, de créer de nouveaux messages pour son contenu en tant que modèles, et de créer des alias et tout cette. Au lieu de cela, vous pouvez simplement générer un shortcode dynamique à partir de l'éditeur de publication lui-même. Appuyez simplement sur le bouton Essential Grid Shortcode Creator dans la barre d'outils.

Ensuite, vous devrez suivre les étapes pour indiquer à ce shortcode le contenu que vous souhaitez qu'il restitue. Vous pouvez choisir l'un des codes prédéfinis dans le menu de présentation (sans avoir à copier/coller son shortcode manuellement), ou vous pouvez créer le vôtre en fonction des options présentées.

Vous allez parcourir les pages pour choisir toutes les mêmes options que vous avez ailleurs (animations, mise en page, etc.), et lorsque vous êtes prêt à partir, appuyez sur le bouton Générer un shortcode .

Comme vous pouvez le voir, le shortcode généré dynamiquement est beaucoup plus complexe car il contient toutes les informations sur la grille elle-même.

Mais quand c'est rendu, il n'y a pas de différence. Surtout si vous avez choisi d'appliquer un skin lors de la création.

Widget de grille essentiel

Enfin, vous avez la possibilité de mettre n'importe quelle grille essentielle que vous avez créée dans un widget. Celui-ci est plus facile que les autres à configurer car il s'agit littéralement d'un glisser-déposer. Allez dans Apparence - Widgets , sélectionnez le widget Grille essentielle et faites-le glisser vers l'endroit où vous souhaitez qu'il s'affiche. Si vous le souhaitez uniquement sur la page d'accueil, vous pouvez le définir ou choisir l'une de vos grilles prédéfinies. Cependant, vous ne pouvez pas créer une grille dynamique de cette façon comme vous l'avez fait ci-dessus. Ceux-ci doivent être pré-générés.

Une chose à garder à l'esprit, cependant, est que toutes les mises en page ne sont pas belles dans une barre latérale. Vous pourriez obtenir une partie de votre contenu rendue très étrangement, mais ne paniquez pas. Si cela se produit, modifiez simplement les paramètres pour qu'il s'affiche différemment - en boîte au lieu du plein écran peut-être ou même au lieu de la maçonnerie, peut-être. Expérimentez jusqu'à ce qu'il ressemble à ce que vous voulez. C'est probablement une bonne idée de créer une grille spécifique à la barre latérale pour cela. (Vous pouvez simplement dupliquer celui que vous voulez et le modifier à la place de l'original.)

Polices de perforation

Et enfin, il y a le dernier peu de personnalisation que vous obtenez avec Essential Grid. Punch Fonts est une interface simple pour utiliser les polices Google dans EG. C'est ça.

Vous pouvez choisir les polices que vous souhaitez installer en appuyant sur le bouton bien intitulé Ajouter une nouvelle police . Si vous suivez le lien dans le modal vers Google Fonts, vous trouverez les paramètres dont vous avez besoin, et le plugin introduira la police dans votre site.

Et quand il est dit que le tp- moniker est à usage interne uniquement, cela signifie simplement que c'est fondamentalement le même que l'alias précédent. Vous le verrez lorsque vous appliquerez les polices aux choses. Alors nommez-les convenablement.

Dernières pensées

Dans l'ensemble, Essential Grid est l'un des plugins de grille les plus robustes et les plus puissants du marché. Si vous avez déjà utilisé Slider Revolution, les mises en page et les calques fonctionnent de manière très similaire et vous devriez vous sentir comme chez vous. Sinon, il peut y avoir un peu de courbe d'apprentissage lorsque vous déterminerez quelles pièces s'emboîtent. Mais une fois que vous l'aurez fait, vous pourrez créer de très belles pages.

Si vous n'avez pas besoin de ce niveau de personnalisation, vous ne voudrez peut-être pas payer le prix fort. Il existe de nombreux autres plugins de grille qui peuvent répondre à vos besoins. De plus, selon le poids des grilles, la vitesse du site peut devenir un problème. Je veux dire, vous pouvez personnaliser votre animation de chargement pour une raison.

Cependant, si à la fois nécessaire et fait correctement, le plugin brille vraiment. Il y a une raison pour laquelle Essential Grid est le vendeur numéro 1 dans sa catégorie. Et si vous vérifiez les évaluations et les fils de support, ThemePunch répond rapidement et vous aide.

Donc, pour 27 $, cela vaut probablement le prix d'entrée. De plus, si vous êtes un concepteur de thèmes, vous pouvez acheter leur licence étendue et l'inclure en tant que pack-in pour vos propres thèmes. Ce qui est plutôt cool.

Utilisez-vous Essential Grid ? Laissez-nous voir certaines de vos créations dans les commentaires!

Article présenté en image par Bloomicon / shutterstock.com