Essential Grid: Eine detaillierte Übersicht und Überprüfung

ThemePunch stellt einige der beliebtesten Plugins für WordPress her. Essential Grid ist neben Slider Revolution einer der Top-Verdiener in seiner Bibliothek . Im Laufe der Zeit hat sich Essential Grid zu einem der gefragtesten und erfolgreichsten Plugins auf CodeCanyon entwickelt. Deshalb wollten wir dem Plugin ein Highlight geben und Sie entscheiden lassen, ob es etwas ist, das Ihre Sites verbessern könnte.

Wesentliches Gitter

Grid-Plugins sind keine Seltenheit. Tatsächlich verfügt unser eigener Divi-Builder über ein Portfolio-Modul, das diesem Zweck dient. Aber Essential Grid geht weit über das hinaus, was die meisten anderen Grid-Plugins getan haben, weshalb auch nach vielen Themen, die ihre eigenen benutzerdefinierten Grid-Vorlagen enthalten, die Leute immer noch jeden Tag EG-Lizenzen kaufen.

Wenn Sie einfach den Original-Verkaufstext verwenden, erfahren Sie, was Sie mit EG tun können:

Essential Grid Gallery ist ein Premium-Plugin für WordPress, mit dem Sie verschiedene Inhaltsformate in einem hochgradig anpassbaren Galerieraster anzeigen können. Mögliche Anwendungen reichen von Portfolios, Blogs, Galerien, WooCommerce-Shops, Preistabellen, Services, Produkt-Slider, Instagram, YouTube, Testimonials und alles andere, was Sie sich vorstellen können.

Aber was ihr Klappentext nicht sagt, ist nur, woraus all diese Anpassungen bestehen. Das ist unsere Aufgabe, und das wollen wir tun. Also lass uns reinschauen und sehen, worum es bei der ganzen Aufregung geht.

Einstieg

Denken Sie zunächst daran, dass dies ein Premium-Plugin ist. Sie müssen zu CodeCanyon gehen und sich den Download für 27 USD sichern. Führen Sie dann den manuellen Installationsprozess durch ( Plugins – Neu hinzufügen – Hochladen ). Zu diesem Zeitpunkt haben Sie 3 neue Elemente in Ihrem WordPress-Admin-Dashboard: Ess. Grid , Punch Fonts und Ess. Raster-Beispielposts . Schauen wir uns zunächst das einfache Ess an. Gitter .

Im ersten Menüpunkt geben Sie Ihren Aktivierungscode ein, suchen nach Updates, Änderungsprotokollen und dergleichen. Sie geben einige einfache Anweisungen zur Verwendung des Plugins, die auf Folgendes hinauslaufen: Verwenden Sie einen Shortcode oder ziehen Sie das Widget in eine Seitenleiste.

Auf dieser Seite können Sie auch neue Raster erstellen, die Sie verwenden möchten. Gewöhnen Sie sich also daran, auf diese Schaltfläche zu klicken.

Item-Skin-Editor

Unter Item Skin Editor haben Sie alle grundlegenden Vorlagen, mit denen Essential Grid geliefert wird. Sie können diese Skin für Skin bearbeiten und ändern, was Sie möchten. Oder es so verwenden, wie es ist. Sie können sogar Ihre eigenen von Grund auf neu erstellen.

Hier bietet Ihnen EG die Möglichkeit, über die Registerkarte nach verschiedenen Arten von Rasterelementen zu sortieren. (Gleichmäßige Abstände, Masonry-Design, Posts oder WooCommerce-Produktraster.) Wenn Sie mit der Maus darüber fahren, werden Titel, Auszüge, Farbüberlagerungen usw. animiert und angezeigt, die Sie anpassen können, indem Sie auf das grüne Zahnradsymbol klicken .

In diesem Optionsfeld kann jedes einzelne Element bearbeitet werden. Vom Abstand zwischen den Elementen, den angezeigten Symbolen, Animationsstil und -dauer, Links, Schatten, Medientypen und Passform, alles.

Ich möchte Sie darauf aufmerksam machen, dass Essential Grid die CSS-Klassen im Klartext hat, damit Sie sie nach Belieben manipulieren können. Wenn Sie aus irgendeinem Grund in den Optionen hier nicht die perfekte Designoption finden, können Sie sie selbst über benutzerdefiniertes CSS hinzufügen.

Unten auf der Seite sehen Sie jede Ebene, auf die Sie Zugriff haben, aus der Vogelperspektive und wie sie derzeit gestaltet ist.

Metadaten und Sucheinstellungen

Der Skin-Editor ist wahrscheinlich der robusteste einzelne Teil von Essential Grid, aber EG scheut diese Optionen an anderer Stelle nicht. Sie können unter Metadatenbehandlung benutzerdefinierte Metaboxen erstellen, die Ihnen die Möglichkeit geben, Boxen für benutzerdefinierte Funktionen zu platzieren, die Sie möglicherweise aus dem Plugin heraus benötigen.

Sie können unter Sucheinstellungen ziemlich dasselbe tun, aber für (Sie haben es erraten) Suchen. EG funktioniert auch als Suchergebnisseite. Wenn Sie also mit dem Aussehen Ihrer normalen Archive und dergleichen nicht zufrieden sind, ist dies eine großartige Möglichkeit, sie schnell zu reparieren.

Globale Einstellungen

So wie es sich anhört, decken die Globalen Einstellungen alle Ihre Grundlagen ab. Sie können Berechtigungen dafür festlegen, wer Raster ändern und bearbeiten kann, wie die Schriftarten und JavaScript geladen werden, was Sie für das Caching tun, woher Sie Symbole erhalten, ein Standardbild für Rasterelemente festlegen und so weiter. Wenn es für das gesamte Plugin und nicht für ein einzelnes Element wie nur Skins gilt, finden Sie es hier. Der beeindruckende Teil ist die Kontrolle, die Sie erhalten – viele Plugins geben Ihnen keine Möglichkeit, die Art der Abfrage auszuwählen, die Sie verwenden, aber EG lässt Sie wählen, ob get_posts() oder WP_Query() für Ihre Site am besten funktioniert (und wenn Ich weiß nicht, was das bedeutet, lassen Sie es einfach Standard. Es ist gut, wie es ist.

Import Export

Wenn Sie das Plugin zum ersten Mal einrichten, sollten Sie unbedingt die Import/Export- Seite besuchen . Wenn Sie auf Vollständige Demodaten importieren und Demoraster für soziale Medien importieren klicken, erhalten Sie eine große Auswahl an anfänglichen Vorlagen, mit denen Sie beginnen können. Sie sind auch gut, also klicken Sie einfach auf die Schaltfläche und der Import/Download erfolgt fast sofort.

Die importierten Raster werden am Ende der Liste angezeigt, wenn Sie zurück zu Ess navigieren . Gitter . Ihre neue Rasterbibliothek wird Sie dort treffen.

Ess. Raster-Beispielposts

Die zweite der neuen Admin-Menüoptionen ist die Ess. Raster-Beispielposts . Es ist eine seltsame Wahl für einen Menütitel, da hier Ihre Rasterelemente mit Vorlagen wahrscheinlich leben werden. Sie sehen, alle diese Beiträge, die auf dieser Seite aufgelistet sind, sind tatsächlich der Inhalt der Kästchen, die in den Rastern unter dem Ess enthalten sind. Gitterübersicht .

Wenn Sie die Shortcodes, die Sie von der Übersichtsseite erhalten, in jedem Beitrag oder auf jeder Seite verwenden, auf der Sie das Raster anzeigen möchten, sind dies die einzelnen Elemente, die angezeigt werden.

Auch das Erstellen eines Beitrags für ein neues Raster ist einfach. Es funktioniert genauso wie das Hinzufügen eines neuen Beitrags eines anderen Typs. Klicken Sie einfach auf die Schaltfläche Neu hinzufügen unter dieser Überschrift und stellen Sie Ihre Parameter ein.

Verwenden eines gespeicherten Essential Grid

Unabhängig davon, ob Sie die Vorlagen verwenden oder Ihre eigenen erstellen, müssen Sie wissen, wie man sie verwendet. Bei Essential Grid dreht sich alles um Shortcodes. Wenn Sie ein bestimmtes Raster haben, das Sie immer wieder verwenden möchten, müssen Sie unter Ess auf Neues Ess-Raster erstellen klicken . Übersichtsseite von Grid in Ihrem Admin-Panel. Im Inneren wählen Sie alles aus, wie Sie die Elemente im Raster sortieren können, welche Ladeanimation es hat, woher seine Elemente tatsächlich kommen, und Sie können es benennen.

Wenn Sie es benennen, können Sie auch seinen Shortcode-Alias ​​auswählen. Dieser Alias ​​wird nur verwendet, um dieses bestimmte Raster mit dem Essential Grid-Shortcode aufzurufen. Ich habe mich auch dafür entschieden, dieselbe ID für die CSS-ID zu verwenden, nur für den Fall, dass ich in Zukunft externe Optimierungen vornehmen möchte.

Geben Sie als nächstes einfach den Shortcode in den Texteditor eines Beitrags oder einer Seite ein.

Und voila!

Verwenden eines einzigartigen Essential Grid

Wenn Sie wissen, dass Sie nur etwas auf einer Seite oder in einem Beitrag anzeigen müssen, gibt es möglicherweise keinen Grund, sich die Mühe zu machen, ein ganz neues Raster einzurichten, neue Beiträge für seinen Inhalt als Vorlagen zu erstellen und Aliasse zu erstellen und so weiter das. Sie können stattdessen einfach einen dynamischen Shortcode aus dem Post-Editor selbst generieren. Klicken Sie einfach auf die Schaltfläche Essential Grid Shortcode Creator in der Symbolleiste.

Dann müssen Sie die Schritte ausführen, um diesem Shortcode mitzuteilen, welchen Inhalt er rendern soll. Sie können einen der vordefinierten Shortcodes aus dem Übersichtsmenü auswählen (ohne den Shortcode manuell kopieren / einfügen zu müssen), oder Sie können Ihren eigenen basierend auf den angezeigten Optionen erstellen.

Sie werden die Seiten durchgehen, um dieselben Optionen wie an anderer Stelle auszuwählen (Animationen, Layout usw.), und wenn Sie bereit sind, klicken Sie auf die Schaltfläche Shortcode generieren .

Wie Sie sehen, ist der dynamisch generierte Shortcode weitaus komplexer, da er alle Informationen über das Raster selbst enthält.

Aber wenn es gerendert ist, gibt es keinen Unterschied. Vor allem, wenn Sie sich dafür entschieden haben, während der Erstellung eine Haut aufzutragen.

Essential Grid-Widget

Schließlich haben Sie die Möglichkeit, jedes von Ihnen erstellte Essential Grid in ein Widget einzufügen. Dieser ist einfacher einzurichten als alle anderen, da er buchstäblich per Drag-and-Drop funktioniert. Gehen Sie zu Darstellung – Widgets , wählen Sie das Essential Grid-Widget aus und ziehen Sie es an die Stelle, an der es gerendert werden soll. Wenn Sie es nur auf der Startseite haben möchten, können Sie dies einstellen oder eines Ihrer vorgefertigten Raster auswählen. Sie können auf diese Weise jedoch kein dynamisches Raster wie oben erstellen. Diese müssen vorgeneriert werden.

Beachten Sie jedoch, dass nicht alle Layouts in einer Seitenleiste gut aussehen. Es kann sein, dass einige Ihrer Inhalte sehr seltsam gerendert werden, aber flippen Sie nicht aus. Wenn das passiert, ändern Sie einfach die Einstellungen, so dass sie anders angezeigt werden – vielleicht eingerahmt anstelle von Vollbild oder vielleicht sogar anstelle von Freimaurer. Experimentieren Sie, bis es so aussieht, wie Sie es möchten. Es ist wahrscheinlich eine gute Idee, dafür ein Sidebar-spezifisches Raster zu erstellen. (Sie können einfach den gewünschten dort duplizieren und anstelle des Originals optimieren.)

Punch-Schriften

Und schließlich gibt es die letzten Anpassungen, die Sie mit Essential Grid erhalten. Punch Fonts ist eine einfache Schnittstelle zur Verwendung von Google Fonts in EG. Das ist es.

Sie können auswählen, welche Schriftarten installiert werden sollen, indem Sie auf die gut betitelte Schaltfläche Neue Schriftart hinzufügen klicken. Wenn Sie dem Link im Modal zu Google Fonts folgen, finden Sie die benötigten Parameter und das Plugin zieht die Schriftart in Ihre Site.

Und wenn der tp- Moniker nur für den internen Gebrauch bestimmt ist, bedeutet das nur, dass er im Grunde derselbe ist wie der Alias ​​zuvor. Sie werden das sehen, wenn Sie die Schriftarten auf Dinge anwenden. Benennen Sie sie daher entsprechend.

Abschließende Gedanken

Insgesamt ist Essential Grid eines der robustesten und leistungsstärksten Grid-Plugins auf dem Markt. Wenn Sie Slider Revolution schon einmal verwendet haben, funktionieren die Layouts und Ebenen sehr ähnlich und Sie sollten sich wie zu Hause fühlen. Wenn nicht, kann es eine kleine Lernkurve geben, wenn Sie herausfinden, welche Teile zusammenpassen. Aber sobald Sie dies getan haben, werden Sie in der Lage sein, einige wirklich schöne Seiten zu erstellen.

Wenn Sie dieses Maß an Anpassung nicht benötigen, möchten Sie möglicherweise nicht den Premium-Preis bezahlen. Es gibt viele andere Grid-Plugins, die Ihren Anforderungen entsprechen könnten. Darüber hinaus kann die Geschwindigkeit der Website, je nachdem, wie schwer Sie die Raster machen, zu einem Problem werden. Ich meine, Sie können Ihre Ladeanimation aus einem bestimmten Grund anpassen.

Wenn es jedoch sowohl notwendig als auch richtig gemacht wird, glänzt das Plugin wirklich. Es gibt einen Grund, warum Essential Grid die Nummer 1 in seiner Kategorie ist. Und wenn Sie Bewertungen und die Support-Threads überprüfen, antwortet ThemePunch schnell und hilft.

Für 27 US-Dollar ist es wahrscheinlich den Eintrittspreis wert. Außerdem können Sie als Theme-Designer deren erweiterte Lizenz erwerben und als Paket für Ihre eigenen Themes verwenden. Was ziemlich cool ist.

Verwenden Sie Essential Grid? Lass uns einige deiner Kreationen in den Kommentaren sehen!

Beitragsbild des Artikels von Bloomicon / shutterstock.com