1. Начало
  2. WordPress
  3. Създаване на WordPress сайт с тема Getwid Base (+блокове)

Създаване на WordPress сайт с тема Getwid Base (+блокове)

Gutenberg е блок-редакторът на WordPress

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

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

Важно е да се отбележи, че различните 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.

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

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

Сваляне на темата от официалната страница

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

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

Инсталиране на плъгина Getwid и плъгина One Click Demo Import

Маркирайте двата плъгина и ги инсталирайте.

Инсталиране на плъгина Getwid и плъгина One Click Demo Import

След това ги маркирайте и ги активирайте.

Активиране на плъгина Getwid и плъгина One Click Demo Import

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

Импорт на демо данни

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

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

Импорт на демо данни
Импорт на демо данни

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

Импорт на демо данни

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

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

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

Конвертиране на svg файл в 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 блокове

Ще Ви покажем наличните Getwid блокове към момента на публикуване с кратко описание на всеки един блок, следвайки подреждането в Gutenberg.

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

Getwid Template Library

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

За да откриете по-лесно подходящ шаблон, може да ползвате падащото меню All Categories или да ползвате полето за търсене.

Getwid Template Library категории

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

Getwid Template Library Insert Template

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

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

Блок Media & Text Slider

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

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

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

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

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

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

Блок Accordion

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

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

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

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

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

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

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

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

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

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

Блок Testimonial

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

Блок Person

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

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

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

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

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

Блок Price Box

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

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

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

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

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

Блок Price List

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

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

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

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

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

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

Обновена: 11.11.2021

Беше ли Ви полезна тази статия?

Вижте още