Podstawowa siatka: szczegółowy przegląd i przegląd

ThemePunch tworzy jedne z najpopularniejszych wtyczek do WordPressa. Essential Grid jest jednym z najlepiej zarabiających w swojej bibliotece, tuż obok Slider Revolution . Z biegiem czasu Essential Grid stał się jedną z najbardziej poszukiwanych i odnoszących największe sukcesy wtyczek w CodeCanyon. Chcieliśmy więc wyróżnić wtyczkę i pozwolić wam zdecydować, czy jest to coś, co może ulepszyć wasze witryny.

Podstawowa siatka

Wtyczki Grid nie są rzadkością. W rzeczywistości nasz własny kreator Divi ma moduł Portfolio, który służy do tego celu. Ale Essential Grid wykracza daleko poza to, co zrobiła większość innych wtyczek do sieci, dlatego nawet po tym, jak wiele motywów zawiera własne niestandardowe szablony siatki, ludzie wciąż kupują licencje EG każdego dnia.

Wystarczy użyć oryginalnej notki sprzedażowej, aby dowiedzieć się, co możesz zrobić z EG:

Essential Grid Gallery to wtyczka premium do WordPressa, która umożliwia wyświetlanie różnych formatów treści w wysoce konfigurowalnej siatce galerii. Możliwe zastosowania obejmują portfolio, blogi, galerie, sklepy WooCommerce, cenniki, usługi, suwaki produktów, Instagram, YouTube, referencje i wszystko, co możesz sobie wyobrazić.

Ale to, czego nie mówi ich notka, to tylko to, z czego składa się ta personalizacja. To nasza praca i zamierzamy ją wykonać. Więc zagłębmy się i zobaczmy, o co to całe zamieszanie.

Pierwsze kroki

Przede wszystkim pamiętaj, że jest to wtyczka premium. Musisz udać się do CodeCanyon i pobrać plik za 27 USD. Następnie przejdź przez proces ręcznej instalacji ( Wtyczki – Dodaj nowy – Prześlij ). W tym momencie będziesz mieć 3 nowe elementy w swoim panelu administracyjnym WordPress: Ess. Grid , Punch Fonts i Ess. Przykładowe posty siatki . Na początek spójrzmy na prosty Ess. Siatka .

Pierwsza pozycja menu to miejsce, w którym umieszczasz kod aktywacyjny, sprawdzasz aktualizacje, dzienniki zmian, tego typu rzeczy. Podają proste instrukcje dotyczące korzystania z wtyczki, które sprowadzają się do: użycia skrótu lub przeciągnięcia widżetu na pasek boczny.

Ta strona będzie również miejscem, w którym będziesz tworzyć nowe siatki, których chcesz użyć, więc przyzwyczaj się do klikania tego przycisku.

Edytor skórek przedmiotów

W Edytorze skórek pozycji znajdują się wszystkie podstawowe szablony, z którymi zawiera Essential Grid. Możesz je edytować dla każdej skóry, zmieniając wszystko, co chcesz. Lub używając go tak, jak jest. Możesz nawet stworzyć własny od podstaw.

Tutaj EG daje możliwość sortowania za pomocą zakładki dla różnych typów elementów siatki. (Nawet odstępy, projekt murarski, posty lub siatki produktów WooCommerce.) Gdy najedziesz kursorem na każdą z nich, będzie ona animować i wyświetlać tytuły, fragmenty, nakładki kolorów itp., które możesz dostosować, klikając zieloną ikonę koła zębatego .

Wewnątrz tego panelu opcji można edytować każdy element. Od odstępów między elementami, wyświetlanych ikon, stylu i czasu trwania animacji, linków, cieni, typów mediów i dopasowania, wszystkiego.

Chciałbym zwrócić twoją uwagę na fakt, że Essential Grid posiada klasy CSS w prostym widoku, abyś mógł manipulować jak chcesz. Jeśli z jakiegoś powodu nie możesz znaleźć idealnej opcji projektowania w opcjach tutaj, możesz dodać ją samodzielnie za pomocą niestandardowego CSS.

Na dole strony znajdziesz widok z lotu ptaka na każdą warstwę, do której masz dostęp, oraz na aktualny styl.

Metadane i ustawienia wyszukiwania

Edytor skórek jest prawdopodobnie najsolidniejszą pojedynczą częścią Essential Grid, ale EG nie unika tych opcji gdzie indziej. Możesz tworzyć niestandardowe pola meta w obszarze Obsługa meta danych, co daje możliwość umieszczania pól dla niestandardowych funkcji, których możesz potrzebować poza wtyczką.

Możesz zrobić prawie to samo w Ustawieniach wyszukiwania , ale dla (zgadłeś) wyszukiwań. EG działa również jako strona wyników wyszukiwania, więc jeśli nie jesteś zadowolony ze sposobu, w jaki twoje zwykłe archiwa i taki wygląd, to świetny sposób na szybkie ich naprawienie.

Ustawienia ogólne

Tak jak brzmią, ustawienia globalne obejmują wszystkie twoje bazy. Możesz ustawić uprawnienia dotyczące tego, kto może zmieniać i edytować siatki, w jaki sposób ładują się czcionki i JavaScript, co robisz dla buforowania, skąd pobierasz ikony, ustawiając domyślny obraz dla elementów siatki i tak dalej. Jeśli dotyczy całej wtyczki, a nie pojedynczego elementu, takiego jak tylko skórki, będziesz mógł go znaleźć tutaj. Imponującą częścią jest kontrola, którą otrzymujesz — wiele wtyczek nie daje opcji wyboru rodzaju używanego zapytania, ale EG pozwala wybrać, czy get_posts() lub WP_Query() działają najlepiej dla Twojej witryny (i jeśli nie Nie wiem, co to znaczy, po prostu zostaw to domyślne. Dobrze, jak jest.

Import Eksport

Kiedy po raz pierwszy konfigurujesz wtyczkę, zdecydowanie powinieneś sprawdzić stronę Import/Eksport . Jeśli klikniesz Importuj pełne dane demonstracyjne i Importuj sieci demonstracyjne mediów społecznościowych , będziesz mieć ogromną gamę początkowych szablonów, od których możesz zacząć. Są też dobre, więc wystarczy kliknąć przycisk, a import/pobranie jest prawie natychmiastowe.

Zaimportowane siatki pojawią się na dole listy po powrocie do Ess. Siatka . Twoja nowa biblioteka siatek Cię tam spotka.

Es. Przykładowe posty w siatce

Drugą z nowych opcji menu administratora jest Ess. Przykładowe posty siatki . To dziwny wybór, jeśli chodzi o tytuł menu, ponieważ w tym miejscu prawdopodobnie będą znajdować się elementy siatki szablonu. Widzisz, wszystkie te posty, które są wymienione na tej stronie, są w rzeczywistości zawartością pudełek zawartych w siatkach pod Ess. Przegląd siatki .

Kiedy używasz skrótów, które otrzymujesz ze strony przeglądu w dowolnym poście lub stronie, na której chcesz wyświetlić siatkę, są to poszczególne elementy, które się pojawiają.

Tworzenie posta dla nowej siatki również jest łatwe. Działa to tak samo, jak dodawanie nowego posta dowolnego innego typu. Po prostu naciśnij przycisk Dodaj nowy pod tym nagłówkiem i ustaw parametry.

Korzystanie z zapisanej tabeli podstawowych

Niezależnie od tego, czy korzystasz z szablonów, czy tworzysz własne, musisz wiedzieć, jak z nich korzystać. Wszystko kręci się wokół skrótów z Essential Grid. Jeśli masz konkretną siatkę, której chcesz używać w kółko, musisz kliknąć Utwórz nową siatkę Ess pod Ess. Strona przeglądu Grid w panelu administracyjnym. Wewnątrz wybierasz wszystko, od tego, jak możesz sortować elementy w siatce, jaką ma animację ładowania, skąd faktycznie pochodzą jej elementy, i możesz je nazwać.

Kiedy go nazwiesz, możesz również wybrać jego skrótowy alias. Ten alias jest używany tylko do wywoływania tej konkretnej siatki za pomocą krótkiego kodu Essential Grid. Zdecydowałem się również użyć tego samego identyfikatora dla identyfikatora CSS na wypadek, gdyby w przyszłości chciałem wprowadzić zewnętrzne poprawki.

Po prostu umieść krótki kod w edytorze tekstu posta lub strony.

I voila!

Korzystanie z jedynej w swoim rodzaju podstawowej siatki

Jeśli wiesz, że potrzebujesz tylko wyświetlić coś na jednej stronie lub w jednym poście, może nie być powodu, aby zajmować się konfiguracją zupełnie nowej siatki, tworzeniem nowych postów dla jej treści jako szablonów, tworzeniem aliasów i tak dalej że. Zamiast tego możesz po prostu wygenerować dynamiczny shortcode z samego edytora postów. Wystarczy nacisnąć przycisk Essential Grid Shortcode Creator na pasku narzędzi.

Następnie musisz przejść przez kroki, aby powiedzieć temu shortcode, jaką zawartość chcesz renderować. Możesz wybrać jeden z predefiniowanych z menu przeglądu (bez konieczności ręcznego kopiowania/wklejania jego skrótu) lub możesz stworzyć własny na podstawie przedstawionych opcji.

Będziesz przechodzić przez strony, aby wybrać te same opcje, które masz gdzie indziej (animacje, układ itp.), A kiedy będziesz gotowy, naciśnij przycisk Wygeneruj krótki kod .

Jak widać, skrócony kod generowany dynamicznie jest znacznie bardziej złożony, ponieważ zawiera wszystkie informacje o samej siatce.

Ale kiedy jest renderowany, nie ma różnicy. Zwłaszcza jeśli zdecydujesz się na nałożenie skórki podczas tworzenia.

Niezbędny widżet siatki

Na koniec masz możliwość umieszczenia dowolnej utworzonej siatki Essential Grid w widżecie. Ten jest łatwiejszy do skonfigurowania niż inne, ponieważ jest dosłownie przeciągany i upuszczany. Przejdź do Appearance – Widgets , wybierz widżet Essential Grid i przeciągnij go w miejsce, w którym chcesz go renderować. Jeśli chcesz to na samej stronie głównej, możesz to ustawić lub wybrać dowolną z gotowych siatek. Nie możesz jednak stworzyć dynamicznej siatki w ten sposób, jak powyżej. Muszą być one wstępnie wygenerowane.

Należy jednak pamiętać, że nie wszystkie układy wyglądają dobrze na pasku bocznym. Niektóre treści mogą być renderowane bardzo dziwnie, ale nie panikuj. Jeśli tak się stanie, po prostu zmień ustawienia, aby wyświetlało się inaczej - być może w pudełku zamiast na pełnym ekranie lub nawet zamiast muru. Eksperymentuj, aż będzie wyglądać tak, jak chcesz. Prawdopodobnie dobrym pomysłem jest stworzenie w tym celu siatki specyficznej dla paska bocznego. (Możesz po prostu zduplikować ten, który tam chcesz i dostosować go zamiast oryginału.)

Czcionki dziurkacza

I wreszcie ostatni element dostosowania, który otrzymujesz dzięki Essential Grid. Punch Fonts to prosty interfejs do korzystania z czcionek Google w EG. Otóż ​​to.

Możesz wybrać czcionki, które chcesz zainstalować, naciskając dobrze zatytułowany przycisk Dodaj nową czcionkę . Jeśli podążysz za linkiem modalnym do Google Fonts, znajdziesz potrzebne parametry, a wtyczka wciągnie czcionkę do Twojej witryny.

A kiedy mówi, że tp- moniker jest tylko do użytku wewnętrznego, oznacza to po prostu, że jest zasadniczo taki sam, jak wcześniejszy alias. Zobaczysz to, gdy zastosujesz czcionki do rzeczy. Więc nazwij je odpowiednio.

Końcowe przemyślenia

Ogólnie rzecz biorąc, Essential Grid jest jedną z najsolidniejszych i najpotężniejszych wtyczek gridowych. Jeśli kiedykolwiek korzystałeś z Slider Revolution, układy i warstwy działają bardzo podobnie i powinieneś czuć się jak w domu. Jeśli nie, może być trochę krzywej uczenia się, gdy dowiesz się, które elementy pasują do siebie. Ale kiedy to zrobisz, będziesz mógł stworzyć naprawdę piękne strony.

Jeśli nie potrzebujesz tego poziomu dostosowania, możesz nie chcieć płacić ceny premium. Istnieje wiele innych wtyczek do sieci, które mogą odpowiadać Twoim potrzebom. Dodatkowo, w zależności od tego, jak ciężkie są siatki, szybkość witryny może stać się problemem. Nie bez powodu możesz dostosować animację ładowania.

Jeśli jednak jest to konieczne i wykonane poprawnie, wtyczka naprawdę świeci. Nie bez powodu Essential Grid jest sprzedawcą numer 1 w swojej kategorii. A jeśli sprawdzisz oceny i wątki wsparcia, ThemePunch szybko odpowie i pomoże.

Tak więc za 27 USD prawdopodobnie jest warte ceny wstępu. Dodatkowo, jeśli jesteś projektantem motywów, możesz kupić ich rozszerzoną licencję i dołączyć ją jako dodatek do własnych motywów. Co jest całkiem fajne.

Czy korzystasz z Essential Grid? Zobaczmy niektóre z Twoich kreacji w komentarzach!

Artykuł wyróżniony obrazem autorstwa Bloomicon / shutterstock.com