WordPress Elementor шаблони і теми: навіщо потрібні і як встановити?
- Elementor шаблони і теми: навіщо потрібні і в чому відмінність?
- Установка офіційних шаблонів для Elementor WordPress
- Як встановити сторонні Elementor теми?
- Установка Elementor template, завантаженого з Інтернет
- Де скачати шаблони 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 . Але якщо вже зовсім не під силу, тримайте:
- Athemes - мабуть, єдиний ресурс з репутацією з даного списку 🙂 З даного сайту я раніше неодноразово скачував шаблони досить пристойної якості. Правда, вибір їх невеликий. У даній збірці кращих тим Elementor WordPress 2018 всього 7 тим і шаблонів.
- ElementorTemplatePack - тут ви можете скачати Katka Elementor Template Pack - цілу колекцію з 18 Elementor шаблонів і 220 блоків.
- CodeInWP - добірка з більш, ніж 30 платних і безкоштовних Elementor тим і шаблонів.
- PowerPackElements - пропонують скромну подборочку з 10 Елементор шаблонів для Лендінгем . Зате все їх можна подивитися перед тим, як завантажувати.
- ElementorExamples - також невелика колекція з 10 шаблонів, кожен з яких можна скачати окремо.
- ElementorResources - добірка з близько 200 безкоштовних,, платних і Pro Elementor шаблонів, зібраних з інших сайтів. Тому не дивуйтеся, якщо ви побачите серед них зустрінуті раніше. Також на даному сайті ви можете знайти колекцію сайтів, розроблених із застосуванням WP Elementor.
І ще парочка ресурсів, де ви можете купити Elementor templates на випадок, якщо вам мало буде функціоналу, наданого безкоштовними товарами (що швидше за все і станеться, тому що рідко хтось виставляє безкоштовно щось гідне уваги):
- EasyThemePacks - надають соковиті і барвисті Elementor теми, доступ до яких можна отримати за 45 $ (в разі покупки 1 будь-якого шаблону), 89 $ (доступ до всіх тем на 1 рік) або 199 $ (для неограченного за часом доступу до всіх поточних і майбутніх темам).
- Elementorizm - дана колекція містить досить вражаючу добірку Elementor шаблонів і тим. Абсолютно всі шаблони можна завантажити за 49 $, 69 $ буде коштувати річний доступ до всіх тем і шаблонів. За 89 $ ви в добавок отримаєте ще й плагіни. А всі продукти на необмежений час можна придбати за 249 $.
- 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] .
І з друзями не забудьте Поділитися 😉
Elementor шаблони і теми: навіщо потрібні і в чому відмінність?Почати я вирішив, як завжди, з мотивації та відповіді на питання «На шо воно мені треба?
У чому ж відмінність?
Як встановити сторонні Elementor теми?