WordPress plugins - Getwid блокове за Gutenberg

Gutenberg - плъгини, добавки и разширения

Gutenberg е актуалният редактор на съдържание в WordPress и възможностите за добавяне на допълнителни разширения и плъгини го превръщат в много сериозен конкурент на популярните програми за създаване на сайтове.

В различни публикации може да срещнете термините plugins, add-ons and extensions (плъгини, добавки и разширения), но те всички означават едно и също нещо - интегриране на допълнителни функционалности в интерфейса на Gutenberg и може да се използват на заменяем принцип.

Важно е да се отбележи, че различните Gutenberg плъгини предлагат в голяма степен идентични блокове (напр. Заглавия, Изображения...) и реалната разлика е в опциите, които съответния плъгин поддържа. Затова може да се каже, че най-полезни са плъгините, които предлагат най-голям брой блокове за създаване на персонализирано съдържание в WordPress.

В статията ще ви представим един от най-популярните плъгини за Gutenberg - Getwid. Getwid е създаден от разработчиците на Motopress (https://motopress.com/), компания с доказано присъствие в елита на WordPress общността. Плъгинът предоставя достъп до впечатляваща колекция от блокове (40+), които предлагат интуитивен контрол при създаване и форматиране на съдържание, лесни и адаптивни настройки.

Потребителите могат да избират между богат набор от съдържателни блокове като плъзгачи (carousel, slider) за медии, текст и изображения, икони, бутони, секции, банери, галерии, панели за ценови списъци, свидетелства на клиенти, блокове за Instagram, MailChimp, Google Maps, броячи, идентификатори за процеси, ценови таблици, времеви линии, персонализирани типове съдържание и много други, които ще опишем накратко в статията.

Getwid Base - безплатна многофункционална WordPress Gutenberg тема

За да бъде пълно удовлетворението на WordPress феновете, разработчиците от Motopress предоставят и безплатната многофункционална WordPress Gutenberg тема Getwid Base за лични и бизнес уебсайтове от всякакъв мащаб.

Това е официалната стартова тема за плъгина Getwid, в която с кликане на няколко бутона можете да инсталирате професионално създадените Gutenberg блокове.

Благодарение на комбинацията от Gutenberg блокове и библиотека от шаблони (Template Library), която се активира през плъгинa Getwid, може да се създават и персонализират страници, богати на съдържание, без необходимост от умения за работа с код.

Ако нямате специални изисквания към дизайна, структурата и функциите на сайта, само със замяна на графиката, цветовата гама и текста може да бъде публикуван на наш собствен сайт (персонален, бизнес, start-up, landing page, портфолио, блог...) на базата на Getwid в рамките не на седмици и дни, а на часове.

Инсталиране на тема Getwid Base

Инсталирането на темата Getwid Base се извършва чрез въвеждане на getwid в полето за търсене в Dashboard > Appearance > Themes > Add New, след което е нужно да се последват бутоните *Install* и същия бутон, вече с етикет Activate:

или изтеглете архив на темата безплатно от https://wordpress.org/themes/getwid-base/ и инсталирайте темата през бутона Upload Theme:

Импортиране на Getwid и примерно съдържание

След успешната инсталация ще откриете съобщение за препоръчително инсталиране на два плъгина - Getwid и One Click Demo Import, затова кликнете на линка Begin installing plugins:

Натиснете на линка Begin activating plugins или Activate в полето на всеки плъгин, за да се активират инсталираните плъгини:

По време на импортирането съществуващо съдържание - публикации, страници, категории, изображения, персонализирани типове публикации или други данни няма да бъде изтрито или модифицирано. Ще бъдат импортирани допълнително само публикации, страници, изображения, джаджи, менюта и други настройки на темата.

След импортиране на съдържанието трябва да се конфигурира ръчно формуляра за контакти и API ключовете за свързване с приложения като Google Maps, Instagram, MailChimp, YouTube...

За стартиране на импортирането отидете на Appearance > Import Demo Data:

и в следващия екран кликаме на бутона Import Demo Data:

Необходимо е изчакване на завършване на процесът без да се затварят екрана и без да се клика на линкове в менюто. След получаване на потвърждение, че процесът на импортиране е завършен с грешка:

Всъщност това не е типична грешка, а от съображения за сигурност WordPress не позволява импортиране на оригиналното лого в SVG формат:

Ако желаете да имаме оригиналното лого в нашата инсталация на Getwid Base може да запазите файла на компютъра си от URL https://getwid.getmotopress.com/wp-content/uploads/2019/04/logo1.svg: :

и да ползвате безплатен онлайн конвертор https://svgtopng.com/, за да го конвертирате в PNG формат, след което го качвате в Media Library:

През Customizer > Site Identity > Logo избирате файла и кликате бутона Publish. Вече имате пълната инсталация на темата Getwid Base заедно с всички Getwid Gutenberg блокове, които може да разгледате през линковете Blocks 01, Blocks 02 и Blocks 03 в хоризонталното меню:

Getwid – безплатни блокове за Gutenberg

Разширението за Gutenberg блокове Getwid може да бъде разглеждано като приложение две в едно: пакет от многофункционални WordPress блокове за Gutenberg и библиотека за шаблони (Template Library).

Плъгинът дава достъп до много опции за персонализиране за всеки блок: контролиране на оформлението, типографията, цветовете, иконографията, медиите, анимацията и други, за да се създадат лесно персонализирани уеб сайтове от всякакъв мащаб.

Поддържайки най-добрите практики за кодиране, Getwid постига оптимизирана структура и бързина на зареждане дори на сайтове с множество персонализирани блокове.

Кратко описание на Getwid блокове за Gutenberg

За да достъпите Getwid Blocks отворете страница или публикация в WordPress и натиснете иконата със символ знак плюс + и в панела изберете Getwid Blocks:

В тази част от статията ще ви покажем наличните Getwid блокове към момента на публикуване (34 без Template Library) с кратко описание на всеки един блок, следвайки подреждането в Gutenberg.

Първият блок е библиотеката за шаблони Template Library, която може да достъпите директно и през линк със същото име в хоризонталната лента с инструменти:

В новия панел натиснете бутона Insert Template, за да се отвори библиотеката с шаблоните:

За да откриете по-лесно подходящ шаблон (общия брой шаблони е 100+) може да ползвате падащото меню All Categories или да ползвате полето за търсене:

При посочване на шаблон се активира бутон Insert Template, който при кликане импортира шаблона в съответната страница или публикация:

Section (секция, основен структурен елемент в страница или публикация) - изграждане на персонализирани оформления от всякакъв тип (задаване на колони и подравнения; видео презентации и фон, плъзгащи блокове с текст и изображения; промяна на фон, прилагане на анимация, управление на карти с текстове, цветове и изображения...).

Media & Text Slider (плъзгащи текстове и медийни файлове) - привличане вниманието на посетителите с плъзгащи се текстове, задаване на персонализирана ширина и подравняване на съдържание, прилагане на текстови и цветни слоеве (overlays), прилагане на слайд ефекти и анимация на текст.

Image Slider (плъзгащи се изображения) - блок за създаване на плъзгащи се изображения с пълен контрол върху навигационните стилове, размерите на изображенията и анимационните ефекти.

Icon (икони) - създаване на ефектни и ясни потребителски интерфейси с колекция от персонализирани икони.

Icon Box (области с икони) - създаване на адаптивни полета за услуги с икони, заглавия и текст, с използване на предварително изработени стилове, промяна на цветове, размери и ефекти при посочване с мишката (hover effects).

Banner (банери) - рекламни блокове с напълно адаптивни банери, за които дефинираме шрифтове, размери, подравнявания, цветове, анимационни ефекти и бутони за по-добро представяне на нашите продукти, услуги и проекти.

Tabs (раздели) - хоризонтални раздели с множество предварително зададени стилове и персонализирани заглавия.

Accordion (акордеон) - секция за показване на скрито съдържание при кликане на заглавие, функционален акордеон с персонализирани икони и типове заглавия, перфектния блок за създаване на секции с често задавани въпроси.

Toggle (превключване) - наподобява много работата на блок Акордеон, но позволява на потребителите да разширяват и скриват съдържанието на отделен панел независимо от другите панели в блока, докато при Акордеон отварянето на нов панел затваря предишния отворен панел.

Image Stack Gallery (застъпване на изображения в галерия) - разчупено и адаптивно подреждане на изображения в галерии със седем различни стила, дава възможност за бягство от традиционната решетъчна структура на галериите и създаване на ефектен дизайн.

Google Maps (google карти) - блок за вграждане на опростени карти Google Maps с неограничени персонализирани маркери [1].

Recent Posts (последни публикации) - може да представите най-новите си публикации с персонализирани мета данни, оформени като списък или решетка.

Advanced Heading (разширени настройки на заглавие) - богат контролен панел за типография за създаване на заглавия - пълен достъп до Google Fonts и настройките за шрифтове, стилове и размер на текста, преобразуване на текстови букви с едно кликане, дефиниране на разстояния и цветове.

Image Box (настройки на изображение) - предоставя достъп до настройки за по-атрактивно представяне на изображения - може да добавите анимационни ефекти, да приложите динамично оразмеряване и промяна на разстоянията около изображенията.

Advanced Spacer (настройване на разстояние) - позволява да добавите интервал между блоковете с динамично регулируеми настройки - по желание може да бъде скрит или да следва адаптивни настройки на мобилни устройства, таблети или десктоп компютри.

Social Links (социални връзки) - улеснява добавянето на различни социални икони, може да се персонализира подравняването за различни устройства, като се следва предварително създадени оформления, възможна промяна на техния размер и разстоянията около тях.

Button Group (група бутони) - дава възможност за добавяне на няколко стилизирани бутона с подкана за действие (call-to-action), като може да се настроят ширината, подравняването и посоката за целия набор от бутони едновременно.

Testimonial (свидетелства на клиенти) - блок за свидетелства на клиенти с аватар (анимирано или реално изображение) на автора, име, длъжност и текст.

Person (профил на личност) - за създаване на впечатляващо представяне на всяка личност от колектива в отделен панел с изображение, връзки към акаунти в социални мрежи, име, позиция и кратко представяне.

Instagram - свързване на WordPress със собствен акаунт в Instagram и създаване на персонализирана галерия [1].

Progress Bar (хоризонтална лента за развитие на процес) - анимирана хоризонтална лента за развитие на процес с настройки за стойност и цветове.

Circular Progress Bar (кръгла лента за развитие на процес) - анимирана кръгла лента за развитие на процес с настройки за ширина, стойност и цветове.

*Counter* (брояч) - показва цифрови данни за нашия бизнес като брои от нула до определената стойност за определено от нас време в секунди.

Price Box (таблици за цени) - подходящ блок за визуализиране на данни; може да се създават различни таблици за параметри и цени (например сравнение на хостинг планове).

Contact Form (формуляр за контакт) - формуляр за контакт с традиционен набор от полета за въвеждане на данни, персонализирани етикети и поддръжка на reCAPTCHA.

Post Carousel (последователно показване на публикации) - имате достъп до опции за персонализиране, за да покажете публикации, страници или персонализирани типове съдържание чрез кликане върху индикатори или през определен интервал от време.

Post Slider (плъзгане на публикации) - помага да визуализираме съществуващите публикации, продукти или други персонализирани типове публикации в настройващ се slider с няколко предварително подготвени оформления.

Custom Post Type (персонализиран тип съдържание) - блокът предоставя множество настройки за избор между оформление в стил решетка, списък или персонализиран изглед на всички custom post type публикации.

Price List (списък с цени) - перфектен блок за представяне на цени от меню на ресторант или съдържание с регулируеми заглавия, пунктирани линии, цветове и изображения.

Mailchimp - лесна интеграция с API на MailChimp за добавяне на формуляри за абонамент [1].

Video Popup (изскачащ прозорец за видео) - показване на нашите Youtube, Vimeo или самостоятелно хоствани видео клипове в изскачащи прозорци; бутона за видео възпроизвеждане, персонализираните заместващи изображения, цветовете и размерите на контейнерите са напълно регулируеми [1].

Image Hotspot (горещи точки в изображение) - чрез поставяне на неограничени анимирани маркери с напълно адаптивни подсказки (tooltips) върху изображение придава на публикацията интерактивен и впечатляващ стил.

Countdown (блок за обратно броене) - динамичен таймер за обратно отброяване с настройващи се цифрови стойности и времеви етикети, за които можете да зададете шрифт, размери, цветове, интервал.

Content Timeline (времева линия на съдържанието) - блокът показва в хронологичен ред всички събития в стилна графика на времевата линия с регулируеми контейнери като заглавия, подзаглавия, изображения.

[1] За да свържете с акаунти на трети страни трябва да активирате достъпа в секцията Getwid Settings, която достъпвате като изберете в главното меню Settings > Writing и въведете в съответните полета API ключове за следните услуги: Instagram Access Token, Google Maps API Key, Recaptcha Site Key, Recaptcha Secret Key, Mailchimp API Key.

В отделни статии ще ви покажем как се настройват някои от най-полезните и впечатляващи блокове на плъгина Getwid за Gutenberg.