1. Elementor шаблони і теми: навіщо потрібні і в чому відмінність?
2. Установка офіційних шаблонів для Elementor WordPress
3. Як встановити сторонні Elementor теми?
4. Установка Elementor template, завантаженого з Інтернет
5. Де скачати шаблони Elementor і теми?

Хаюшки всім читачам мого блогу 🙂

Як я і обіцяв вам у своїй попередній статті, присвяченій огляду можливостей WordPress Elementor , Сьогодні мова піде про шаблони і темах для створення сайтів з застосуванням даного плагіна.

Уже сам факт їх існування робить з WP Elementor справжню самостійну CMS, що вже дуже круто.

Ну, а навіщо потрібні WordPress Elementor шаблони і теми за фактом, як їх встановлювати і де скачувати - про все це ми сьогодні поговоримо більш детально.

Так що влаштовуйтеся зручніше у ваших, сподіваюся, Retina-моніторів, запасайтеся попкорном або пивом з чіпсами, кому що зручно (хоча особисто я, як непитущий, за перший варіант), і вперед 🙂

Сподіваюся, час ви проведете захоплююче 😉

Поїхали! 🙂

Elementor шаблони і теми: навіщо потрібні і в чому відмінність?

Почати я вирішив, як завжди, з мотивації та відповіді на питання «На шо воно мені треба?» 🙂

Перш за все скажу, що WordPress Elementor шаблони або теми (Elementor templates або themes, відповідно, англійською) мають те ж призначення, що і аналогічні продукти для WordPress та інших CMS, і надають користувачам якийсь базис з готових сторінок, кнопочок і інших елементів управління .

Потрібно все це для комфортного, а, головне, швидкого процесу розробки сайтів, щоб не писати все це з нуля, а скомпонувати готові елементи з наданої шаблоном палітри. Тут, думаю, все зрозуміло.

А ось з різницею між шаблонами і темами, думаю, що у багатьох початківців виникнуть питання. Багато, включаючи мене до недавнього часу, думають, що це одне і те ж.

Однак деякі продавці шаблонів для CMS, наприклад, TemplateMonster, поділяють ці поняття.

Зокрема, в своєму нещодавно відкритому Elementor Marketplace , Товари з якого виступлять нашим сьогоднішнім наочним посібником, доступні і ті, і інші. І ціни на них різняться на порядок.

У чому ж відмінність? З цим я і звернувся до дівчини з клієнтської підтримки TemplateMonster, яка оперативно і інформативно відповідала на всі мої каверзні питання і пояснила, що WP Elementor теми вже йдуть в комплекті з WP Elementor (деякі навіть з Pro версією), в той час як шаблони для Elementor WordPress вимагають його окремої установки а, отже, і покупки .

Теми нічим не відрізняються від стандартних WordPress themes за винятком того, що сторінки перших можна редагувати через Elementor шляхом візуального переміщення блоків і зміни їх властивостей.

Тобто вони містять різні варіанти дизайну сторінок (скіни), з яких кінцевий користувач може вибирати необхідний йому. І, природно, сторінок в темі багато. Тому на базі одного шаблону можна розробляти навіть різні типи сайтів .

Також теми містять безліч плагінів, багато з яких є платними, відповідно, ціни на теми вище, ніж на шаблони, але в підсумку, ви все одно заплатите менше, ніж при придбанні кожного плагіна окремо.

Шаблони ж є спрощеними версіями тим, і їх можна використовувати для зміни певних сторінок і навіть їх блоків, задіюючи необхідні з шаблону.

Ну, і на додаток до платних продуктів, Elementor має власну бібліотеку з більш, ніж 100 шаблонів, які можна використовувати абсолютно безкоштовно. А також в ній ви знайдете більше 300 готових блоків, з яких зможете створювати свої шаблони самостійно.

Ось про те, як встановлювати готові шаблони різних типів, а також створювати їх самостійно, ми і поговоримо. А почати я вирішив з опису процесу установки шаблонів для Elementor WordPress, який відрізняється для різних їх видів.

Установка офіційних шаблонів для Elementor WordPress

Перед установкою Elementor templates у вас повинні бути, природно, сайт, розроблений на WordPress , І встановлений WP Elementor page builder (опціонально, тому що у Elementor тим він і так йде в комплекті).

У мене є і те, і інше. Мій тестовий ресурс, розроблений в рамках попередньої статті з оглядом можливостей Elementor, доступний за наступною адресою - http://elementor.cccp-blog.com.

На стартовому екрані ви можете бачити Elementor сторінку, яка вийшла в результаті моїх експериментів з даними плагіном. Тому для демонстрації процесу установки Elementor шаблонів я створю нову, яка буде доступна за адресою http://elementor.cccp-blog.com/shablon.

Виглядає вона на даному етапі так:

Даний вид Elementor сторінка прийняла за рахунок налаштувань макета сторінки, параметри якого ви можете побачити на зображенні вище.

Як я вже і говорив на початку статті, не здивуюся, якщо одного разу WordPress Elementor стане окремою CMS, тому що у нього вже на даному етапі розвитку є і власні шаблони, і плагіни, з якими ми познайомимося в наступних статтях, і власний репозиторій шаблонів, аналогічний каталогу плагінів WordPress, вбудованому в CMS.

За допомогою останнього можна встановлювати Elementor шаблони і їх окремі елементи в один клік.

Для цього на нашій сторінці в зоні для розміщення віджетів потрібно натиснути на сіру круглу кнопку з зображенням татка, при наведенні на яку з'являється підказка з текстом Додати шаблон.

Після чого на екрані з'явиться спливаюче вікно з бібліотекою офіційних Elementor templates, в якій на даний момент їх більше 100:

Офіційних, тому що всі представлені в даній колекції Елементор теми - розробки команди WP Elementor, більш детально з можливостями яких ви зможете познайомитися з цим посиланням .

Я навіть рекомендую це зробити, щоб не поспішаючи вибрати відповідний WordPress Elementor шаблон перед установкою його на бойовий сайт, а потім зайнятися лише його налаштуванням.

Повертаючись до відкрився перед нами попап з Elementor темами при редагуванні сторінки, помітно, що шаблони можна сортувати по даті розміщення, трендам і популярності.

А також на картці деяких з них ви зможете знайти бейджик Pro, що означає, що даний продукт можна використовувати тільки за умови наявності встановленого WP Elementor Pro.

Коли ви визначитеся з шаблоном з даної бібліотеки - просто натисніть на кнопку Вставити, що з'являється при наведенні на його картку:

Також ви зможете знайти цю кнопку у верхній частині екрану, що відкривається при кліці на будь-який Elementor шаблон в даній бібліотеці.

Після чого елементи обраного template додалися на створену для цього сторінку, де можна інспектувати їх властивості та налаштовувати під себе:

Ось і все 🙂 Зберігаємо зміни в документі - і сайт готовий.

Якщо з якихось причин ви не знайдете відповідний варіант в офіційному репозиторії Elementor шаблонів, ви завжди зможете пошукати його в Інтернеті, завантажити і встановити самостійно.

Великий вибір Elementor шаблонів надає TemplateMonster в своєму Elementor Marketplace.

Як я вже говорив раніше, на цьому майданчику є чіткий поділ на шаблони для WordPress Elementor і Elementor теми, у яких крім функціональних відмінностей відрізняється і процес установки.

Щоб ви могли зрозуміти що до чого, далі я продемонструю вам процес установки як Elementor тим, так і шаблонів, придбаних на інших ресурсах.

Як встановити сторонні Elementor теми?

Як приклад теми для Elementor WordPress я вирішив не розмінюватися на дрібниці і взяти перевірений часом бестселер - Monstroid від Zemez.

Купити його і інші Elementor themes, нагадую, ви можете в TemplateMonster Elementor Marketplace по цим посиланням , Ще й з купою традиційних для даного ресурсу знижок.

Після завантаження та розпакування архіву всередині я крім файлів самої Elementor теми знайшов ще й інструкції по установці, які були оформлені у вигляді барвистого файлу з купою картинок.

При скачуванні шаблонів або плагінів з TemplateMonster обов'язково зберігайте де-небудь номер вашого замовлення (order id), тому що в подальшому він вам може знадобитися для активації продукту при його установці на CMS.

Якщо ви коли-то займалися установкою преміум шаблонів, то повинні знати, що для полегшення даного процесу багато виробників надають автоінсталлятори або Візард (від англ. Wizard - чаклун), тому що для багатьох користувачів то, що вони роблять і як працюють, здається магією 🙂

Не став винятком у цьому правилі і Monstroid.

Процес установки плагіна візарду, який був всередині архіву теми, завантаженого з TemplateMonster, нічим не відрізняється від установки інших WordPress плагінів . Після його активації запустився майстер установки.

Тут варто зазначити, що Elementor тема, яку я вибрав для демонстрації процесу установки, Monstroid, є не звичайною темою, а збіркою різних шаблонів на різну тематику.

Це стає помітно на першому етапі його установки, де необхідно вибрати відповідну тему з його складу:

Оскільки у нас зараз ера криптовалюта, і багато бізнесменів прагнуть до створення кріптовалютних бірж і обмінників, то я теж вирішив бути в тренді, і вибрав тему Cryplix, що входить до складу Monstroid.

Для переходу на наступний крок необхідно ввести ключ ліцензії, який за сумісництвом є номером замовлення, який я радив вам зберегти.

Далі йде етап вибору варіанту використання основної теми або дочірньої. Відмінності між ними полягають в тому, що дочірня тема є копією основної. Отже, якщо ви оберете редагування батьківської, то все створені далі дочірні міститимуть внесені зміни.

Тому творці Monstroid і рекомендують варіант створення дочірніх тем.

На наступному кроці установки даної Elementor теми у деяких templates пропонується варіант вибору скіна (варіація теми з встановленими плагінами, в тому числі і WP Elementor, і демо-даними):

Далі відбувається установка плагінів, необхідних для роботи обраної вами Elementor template:

Для кожної вони свої, тому якщо захочете після установки теми її змінити, то видаліть плагіни старої, тому що вони можуть займати досить велику кількість дискового простору сервера.

Ну, і на завершальному етапі установки Elementor theme відбувається імпорт демо-контенту після чого сайт готовий до використання:

Ось, в принципі, і все. Після установки Елементор теми ви зможете правити її сторінки за допомогою WordPress Elementor плагіна, який, як уже говорилося, обов'язково йде з ними в комплекті.

У багатьох темах можливості стандартного функціоналу WP Elementor розширені за рахунок різних додаткових плагінів, як, наприклад, в обраній мною темі Cryplix з комплекту Monstroid:

Якщо після прочитання даного мануала у вас все одно виникнуть якісь питання з приводу установки, то ви завжди можете задати їх мені в коментарях, службі техпідтримки TemplateMonster (якщо ви купите його у них, природно) або замовити послугу установки даного Elementor шаблону у самого TemplateMonster.

Наступним же пунктом я хотів би продемонструвати вам процес установки викачаних через Інтернет, тобто сторонніх, Elementor шаблонів, щоб ви могли зрозуміти, як їх додати на свій WordPress сайт, що з ними робити, і чим вони відрізняються від Elementor тим фактично.

Установка Elementor template, завантаженого з Інтернет

Під скачаним з Інтернет Elementor шаблоном мається на увазі продукт, розроблений сторонніми розробниками (НЕ Elementor командою) і розповсюджується в мережі на платній або безоплатній основі.

Початкові дані для даної демонстрашкі трохи відрізняються від тих, які були при установці Elementor теми. Якщо наявність встановленого WordPress Elementor плагіна в попередньому прикладі було опціонально, то установка Elementor шаблону без наявності самого плагіна буде неможливим.

Тому у вас на даному етапі повинен бути в наявності WordPress сайт з встановленим Elementor плагіном. Якщо ви збираєтеся встановлювати Elementor шаблон, для якого потрібна Pro версія плагіна, то вам його потрібно буде додатково придбати .

Зверніть увагу, що при використанні шаблону ви можете втратити деякі дані на вашій сторінці, тому не зайвим буде створити її резервну копію перед імпортом Elementor template.

Як приклад я вирішив взяти розроблений мною особисто в рамках попередньої статті з оглядом можливостей WordPress Elementor шаблон, скачати який ви зможете по цим посиланням .

Спочатку я планував зробити на його базі сторінку на сайті, розробленому для демонстрації установки Elementor теми в попередньому розділі статті, але, спробувавши це зробити, зрозумів, що ідея погана 🙂

Як я не старався, натягнути шаблон на сайт, де вже була встановлена ​​Elementor тема, у мене нормально так і не вийшло. Все через те, що при створенні нової сторінки застосовується оформлення теми, як не крути 🙂

Навіть не дивлячись на купу налаштувань самої теми, що дозволяють відключати різні елементи структури сайту , Зробити сторінку абсолютно чистою для установки на неї Elementor шаблону у мене так і не вийшло.

Вибір типу макета Полотно Elementor, що рятувало при використанні чистого Elementor сайту, ситуацію в моєму випадку не виправив.

Можливо, домогтися цього якось і можна, але невідомо скільки б я промучался. Тому нехай мій приклад буде вам наукою 🙂

Якщо ви використовуєте Elementor тему, намагайтеся не використовувати Elementor шаблони для створення нових сторінок, тому що ви не отримаєте такого ж результату, як при використанні їх на чистому WordPress, а якщо і досягнете, то з великими труднощами.

У підсумку я вирішив зробити установку Elementor шаблону на знайомий уже сайт http://elementor.cccp-blog.com/, на якому є і чистий WordPress, і встановлений WP Elementor.

Почав я зі створення нової сторінки, яка доступна по url http://elementor.cccp-blog.com/ustanovka-shablona, для якої вибрав макет сторінки Полотно Elementor, щоб очистити її від наявних у батьківській темі елементів.

Далі порядок дій такий же, як при установці офіційних Elementor шаблонів - натискаємо на сіру кнопку із зображенням папки в одному з чистих блоків в зоні редагування документа, при наведенні на яку з'являється напис Додати шаблон.

Після цього на екрані з'явиться вже знайоме нам вікно з бібліотекою офіційних Elementor templates. На цей раз нам знадобиться в ньому кнопка імпорту нового шаблону, яка виглядає так:

В відкрилося нове вікно завантажуємо скачаний нами файл шаблону, який може бути JSON-файлом або zip-архівом, що містить такий файл. У моєму випадку, нагадую, я використовував розроблений мною Elementor шаблон, який можна абсолютно безкоштовно завантажити тут .

Після завантаження файл з'явиться на вкладці Мої шаблони вікна з каталогом Elementor templates, яке виглядає так:

Тут, як бачите, крім перегляду завантажених ззовні Елементор шаблонів як в списку, так і в якості превью, їх можна видаляти, експортувати (завантажувати собі на локальний комп'ютер у вигляді JSON-файлу) і, безпосередньо, використовувати на своїх WordPress сайтах.

Для останньої дії потрібно натиснути на кнопку Вставити, після чого на екрані з'явиться так зване останнім Китайське попередження від Elementor:

Маються на увазі параметри самої сторінки, на яку встановлюється шаблон. Краще, звичайно, погодитися з заміною, щоб не вийшла якась відсебеньки в результаті замість того виду шаблону, який ви спостерігали на його превью перед скачуванням.

Але якщо ви на 200% впевнені, що ваша сторінка налаштована і підходить для обраного ваші Elementor templtate, то можете відмовитися від імпорту параметрів в даному вікні.

Після натискання на будь-яку з кнопок в попередньому вікні на нашу порожню сторінку, що редагується через Elementor, буде додано завантажений нами шаблон.

Натискаємо на зелену кнопку Опублікувати в бічній панелі Elementor - сторінка готова!

Як ви могли переконатися, використання шаблону заощадило нам час на її створення раз в 10 в порівнянні з версткою з нуля. В цьому і полягає принадність їх використання.

Нагадую, що відмінний вибір шаблонів надає TemplateMonster Elementor marketplace, в якому Elementor шаблони можна придбати тут .

Після публікації сторінки на моєму тестовому сайті виявилося дві однакові сторінки: головна і та, що доступна за url http://elementor.cccp-blog.com/ustanovka-shablona.

Щоб цього не було, я видалив поточну головну сторінку і зробив такий ту, що ми тільки що створили, і яка зараз доступна по наведеним url.

Так що не дивуйтеся, що зараз при переході на url http://elementor.cccp-blog.com/ustanovka-shablona відбувається редирект на головну сторінку. WordPress все робить правильно 🙂

Також на завершення опису процесу установки Elementor шаблонів на WordPress сайт хотів би сказати, що всі завантажені ззовні templates ви можете також знайти в меню Elementor> Мої шаблони, розташованому в сайдбарі WordPress адмінки:

Красу даного менеджера в тому, що всі маніпуляції з шаблонами і їх фрагментами ви зможете проводити не «на ходу» під час редагування сторінки через Elementor, як ми робили це раніше, а в будь-який зручний для вас час, не боячись щось пошкодити в процесі.

Тут, як бачите на скріншоті вище, доступні ті ж дії, що і в каталозі Elementor templates, що відкривається всередині самого Elementor, а також тут є посилання на сторінку редагування самого шаблону.

Крім цього на даній сторінці є фільтр імпортованих файлів по блокам Вміст і Секція. Мій шаблон виявився в першій з них, тому що він є повноцінною сторінкою.

У другому ж блоці будуть знаходитися імпортовані частини шаблонів, тобто окремі їх секції, про які я більш детально розповім в наступній статті. Тому рекомендую підписатися на повідомлення сайту , Щоб не пропустити її 🙂

Де скачати шаблони Elementor і теми?

Ну, і на десерт я підготував для вас добірку ресурсів, де ви зможете скачати шаблони Elementor WordPress абсолютно безкоштовно. Правда, скажу відразу, що безкоштовний сир буває тільки в мишоловці, тому від вас можуть зажадати реєстрацій, підписок на повідомлення та інші приколи.

Причому, не завжди буде зрозуміло, що ж ви отримаєте в результаті, тому що на багатьох сайтах вам будуть надаватися цілі колекції шаблонів, скачати які можна буде одним архівом.

Тому я особисто не раджу занадто на них сподіватися і рекомендую користуватися послугами перевірених постачальників Elementor тим і шаблонів, яким є TemplateMonster . Але якщо вже зовсім не під силу, тримайте:

1. Athemes - мабуть, єдиний ресурс з репутацією з даного списку 🙂 З даного сайту я раніше неодноразово скачував шаблони досить пристойної якості. Правда, вибір їх невеликий. У даній збірці кращих тим Elementor WordPress 2018 всього 7 тим і шаблонів.
2. ElementorTemplatePack - тут ви можете скачати Katka Elementor Template Pack - цілу колекцію з 18 Elementor шаблонів і 220 блоків.
3. CodeInWP - добірка з більш, ніж 30 платних і безкоштовних Elementor тим і шаблонів.
4. PowerPackElements - пропонують скромну подборочку з 10 Елементор шаблонів для Лендінгем . Зате все їх можна подивитися перед тим, як завантажувати.
5. ElementorExamples - також невелика колекція з 10 шаблонів, кожен з яких можна скачати окремо.
6. ElementorResources - добірка з близько 200 безкоштовних,, платних і Pro Elementor шаблонів, зібраних з інших сайтів. Тому не дивуйтеся, якщо ви побачите серед них зустрінуті раніше. Також на даному сайті ви можете знайти колекцію сайтів, розроблених із застосуванням WP Elementor.

І ще парочка ресурсів, де ви можете купити Elementor templates на випадок, якщо вам мало буде функціоналу, наданого безкоштовними товарами (що швидше за все і станеться, тому що рідко хтось виставляє безкоштовно щось гідне уваги):

1. EasyThemePacks - надають соковиті і барвисті Elementor теми, доступ до яких можна отримати за 45 $ (в разі покупки 1 будь-якого шаблону), 89 $ (доступ до всіх тем на 1 рік) або 199 $ (для неограченного за часом доступу до всіх поточних і майбутніх темам).
2. Elementorizm - дана колекція містить досить вражаючу добірку Elementor шаблонів і тим. Абсолютно всі шаблони можна завантажити за 49 $, 69 $ буде коштувати річний доступ до всіх тем і шаблонів. За 89 $ ви в добавок отримаєте ще й плагіни. А всі продукти на необмежений час можна придбати за 249 $.
3. TheLandingFactory - за 168 $ можна скачати всі наявні на сайті шаблони і теми.

У всіх шаблонів, розміщених на ресурсах, посилання на які я навів вище, є одна спільна риса - серед них немає жодного російською мовою. В принципі, це і зрозуміло, тому що WP Elementor - продукт досить молодий, і вітчизняні розробники ще, мабуть, не розгледіли потенціал.

Але ви можете і не чекати цієї події і зробити Elementor шаблон самостійно, наповнивши його російськомовним контентом спочатку. Причому для цього не потрібно бути програмістом - при розробці ми не напишемо жодного рядка коду.

Єдине, що від вас буде потрібно - це підписка на повідомлення сайту, щоб отримати лист про вихід відповідній статті 🙂

На цьому у мене сьогодні все. Сподіваюся, дана стаття зробила вас ще на один крок ближче до створення власного сайту своїми силами. На цей раз за допомогою тем і шаблонів для Elementor page builder.

Ставте свої оцінки зірочками під статтею, пишіть свої відгуки в коментарях і вступайте в соціальні спільноти проекту, щоб спілкуватися з однодумцями і отримувати відповіді на всі хвилюючі вас питання.

До новой зустрічі! 🙂

PS: если вам потрібен сайт або необходимо внести правки на існуючій, но для цього немає часу и бажання, можу Запропонувати свои послуги.

Більше 5 років досвіду професійної розробки сайтів. Робота з PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular и іншімі технологіямі web-розробки.

Досвід розробки проектів різного уровня: Лендінзі, корпоративні сайти, Інтернет-магазини, CRM, портал. У тому чіслі підтримка и розробка HighLoad проектів. Твір Ваші заявки на email [email protected] .

І з друзями не забудьте Поділитися 😉