Делаем WP Elementor template самостоятельно

Дата публикации: 08.10.2018

sozdanie-elementor-shablonaВсем привет! 🙂

Я решил продолжить продолжить цикл статей, посвящённых WordPress Elementor, последней из которых на текущий момент публикация об Elementor шаблонах.

В ней я рассказал вам о том, что такое WordPress Elementor темы и шаблоны, зачем они нужны, а также какая между ними разница. Поэтому если у вас до сих пор ещё остались какие-то вопросы по данному поводу — милости прошу ознакомиться со статьёй по ссылке выше 🙂

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

В качестве примера я сделаю ещё один Elementor шаблон на базе существующего, а также покажу, как создать его с нуля, и какие полезные фишки есть в Элементор для этого случая.

Думаю, диспозиция понятна.

Поэтому, поехали 🙂

Создание Elementor шаблона на базе существующего

Первым делом я решил продемонстрировать простой способ создания Элементор шаблонов и сделать таковой на базе уже существующего.

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

Напоминаю, что скачать его вы можете отсюда.

После этого вам нужно будет загрузить его на свой WordPress сайт с установленным плагином Elementor.

В моём случае таковым является созданный мною специально для данной серии статей ресурс, который я создал на поддомене данного сайта, и получить доступ к которому вы можете по данному url — http://elementor.cccp-blog.com.

Итак, сайт есть. Теперь нам нужно загрузить на него пользовательский шаблон, на базе которого мы будем создавать собственный.

Для этого идём в админку WordPress, открываем менеджер Elementor шаблонов, который я вам демонстрировал в предыдущем разделе, и который можно найти по пути Elementor > Мои шаблоны, и нажимаем на кнопку Импортировать шаблоны:

import-elementor-shablona-v-wordpress

http://cccp-blog.com/wp-includes/images/banners/templatemonster/banner_content_new.png

После этого перед нами откроется форма загрузки файла шаблона, который может быть либо JSON файлом, либо zip-архивом, содержащим таковой:

zagruzka-wordpress-elementor-shablona

Нажимаем на кнопку Импортировать, после чего загружаемый нами Элементор шаблон появится в списке на данной странице.

Шаблон есть. Теперь можем приступать к созданию на его базе своего собственного. Для этого на текущей странице в менеджере Elementor шаблонов наводим курсор мыши на необходимый нам шаблон и нажимаем на кнопку Редактировать в Elementor:

sozdanie-novogo-elementor-shablona-na-baze-drugogo

На открывшемся экране редактирования удаляем несколько секций, чтобы шаблон немного отличался от оригинала. Я решил убрать первые две, чтобы результат был заметен 🙂

После этого нажимаем на зелёную кнопочку со стрелкой в самом низу формы возле Обновить и в открывшемся меню нажимаем на кнопку Сохранить как шаблон:

sozdanie-wordpress-elementor-shablona-s-nulya

В открывшемся окне вводим название для нового шаблона и нажимаем кнопку Сохранить здесь же:

kak-sdelat-elementor-shablon-samostoyatelno

Как видите, я решил сильно не изощряться в плане придумывания названия нового Elementor шаблона и назвал его elementor-photo-landing-modified, поскольку он и является модификацией одноимённого оригинала.

После успешного добавления нового Elementor template перед нами автоматически откроется каталог пользовательских шаблонов, который пополнится только что созданным:

novyj-wp-elementor-shablon-v-biblioteke

Вот, собственно говоря, и всё 🙂 Теперь в нашем распоряжении есть два шаблона, на базе которых мы можем создавать новые страницы нашего сайта.

Для наглядности я решил сделать на базе elementor-photo-landing-modified новую страничку своего тестового сайта elementor.cccp-blog.com, которая будет доступна по url http://elementor.cccp-blog.com/sozdanie-shablona-is-sushchestvuyushchego, где вы можете полюбоваться на новый Elementor шаблон 🙂

Библиотека курсов

А мы тем делом переходим к созданию Elementor шаблона с нуля.

Делаем Elementor template с нуля

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

Далее просто сохраняете ваше творение способом, описанным выше, и можете его использовать так, как вам захочется: можете создавать на его базе новые страницы и даже сайты (особенно, если это шаблон лендинг пейдж), делиться им с друзьями через Интернет, и даже продавать, зарабатывая на этом деньги.

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

Если вы действительно захотите заниматься созданием Elementor шаблонов профессионально, у меня для вас есть отличная новость, позволяющая сэкономить при этом массу времени.

Разработка шаблонов с помощью готовых Elementor блоков

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

Самый простой и удобный способ — это, конечно, использование официальной библиотеки Elementor, в которой на данный момент доступно более 300 готовых блоков с самым различным функционалом.

Среди них, как и среди Элементор шаблонов, есть универсальные, которые можно использовать на любых Elementor сайтах, и те, которые можно применять только при условии установленного Elementor Pro, который необходимо приобретать отдельно.

Давайте посмотрим, как ими пользоваться на практике. В качестве примера я решил создать новый Elementor template, который будет доступен на моём тестовом сайте elementor.cccp-blog.com по url http://elementor.cccp-blog.com/sozdanie-shablona-s-nulya.

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

После этого открылась библиотека официальных Elementor шаблонов, в которой нас будет интересовать вкладка Блоки, на которой можно найти коллекцию готовых Elementor секций:

wordpress-elementor-bloki-biblioteka

На скриншоте выше я обвёл все основные элементы управления, доступные на данной странице. Среди них:

  • фильтр категорий блоков, благодаря которому можно быстро искать требуемые типы Elementor блоков;
  • кнопка Вставить для добавления Elementor блока на страницу;
  • кнопка добавления элемента в Избранные для дальнейшего быстрого поиска (рекомендую помечать все используемые в разработке блоки).

Также при клике на сам блок открывается его превью в этом же окне в следующем виде:

predprsmotr-gotovykh-elementor-blokov

После вставки блока на страницу он добавляется в виде секции, состоящей из обычных Elementor элементов, которые можно самостоятельно настраивать, задавая им необходимые значения:

wp-elementor-gotovye-sekcii

В итоге я набросал простенький лэндинг из готовых Elementor блоков, посмотреть на который вы сможете на странице, url которой я привёл в начале данного раздела.

А также при желании вы можете скачать Elementor шаблон, полученный в результате, по данной ссылке.

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

Отсюда налицо преимущество использования готовых блоков — это реально быстро 🙂

Минус заключается в том, что продукты из Elementor библиотеки немного однотипны и практически все содержатся в чёрно-белой гамме. Поэтому для создания яркого и качественного лэндинга с помощью готовых блоков придётся искать их в Интернете или не париться и сразу использовать полноценные шаблоны страниц.

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

Это может быть полезно для дальнейшего использования при разработке других шаблонов, а также при распространении их через Интернет как на платной, так и на бесплатной основе.

В качестве примера я решил сохранить блок расценок моего шаблона elementor-photo-landing-modified, который выглядит следующим образом:

sokhranenie-elementor-bloka

Для того, чтобы экспортировать отдельный блок (секцию) Elementor шаблона, вам необходимо на экране его редактирования нажать правой кнопкой мыши на понравившемся блоке и выбрать в открывшемся контекстном меню пункт Сохранить как шаблон:

sokhranenie-elementor-sekcii-kak-shablona

После этого перед вами появится следующий экран:

sozdanie-gotovogo-elementor-bloka

Как видите, я решил озаглавить свой блок elementor-custom-pricing-block. Под этим же названием он доступен в библиотеке Elementor шаблонов на вкладке Мои шаблоны, которая открывается сразу после его сохранения:

wordpress-elementor-sekciya-v-biblioteke

Обратите внимание, что в данном каталоге у только что нами созданного стоит пометка Секция, которая говорит, что создать полноценную страницу на его базе не получится.

Можете использовать данный признак для модерации скачиваемых через Интернет шаблонов, чтобы видеть, насколько с вами был правдив их продавец.

По поводу экспортирования шаблонов блоков Elementor в файл, дальнейшего встраивания на сайт и редактирования — все эти процессы ничем не отличаются от аналогичных операций, характерных с Elementor шаблонами страниц.

Вот и всё, что я хотел вам рассказать о создании Elementor template своими силами. Как вы могли заметить, процесс этот ничего сложного из себя не представляет, и под силу даже неопытным пользователям.

Логично было бы в данной статье написать также и о создании Elementor тем, но, поскольку их, как и все темы WordPress, нужно верстать с нуля и напичкивать необходимыми плагинами, при этом для кастомизации необходимо отличное знание API WordPress, то это разговор для отдельной публикации.

Да и без навыков программирования тут уже не обойтись. Собственно, поэтому Elementor themes и стоят дороже шаблонов.

Где можно скачать готовые Elementor секции?

И в завершение я хотел бы поделиться с вами информацией, где можно скачать готовые Elementor блоки, чтобы не обходиться при разработке Elementor templates доступными исключительно в официальной библиотеке.

Ресурсов таких не много, но всё же они есть 🙂

  1. ElementorTemplatePack — предлагают бесплатно скачать коллекцию блоков, а также уже готовых шаблонов.
  2. LaunchParty — также предоставляют коллекцию из более, чем 200 готовых Elementor секций, у каждой из которых есть тёмный и светлый вариант.

На этом сегодняшняя статья подошла к концу. Жду ваших отзывов в комментариях, оценок с помощью звёздочек под статьёй, а также буду признателен, если поделитесь данной записью со своими друзьями в социальных сетях.

В следующей статье я планирую поставить финальную точку в теме WordPress Elementor и рассказать об Elementor плагинах: зачем они нужны, как их установить и где можно скачать.

Поэтому подписывайтесь на уведомления сайта, чтобы быть в курсе новых статей.

На этом всё. Надеюсь, время вы сегодня провели с пользой 🙂

Всем удачи и до новых встреч 🙂

P.S.: если вам нужен сайт, но нет времени самостоятельно его разрабатывать, могу порекомендовать вам своего проверенного партнёра - вебстудию Дениса Нихаева. Было не просто, но я всё-таки выбил для вас скидку 20%, что составит до 20 тысяч рублей в зависимости от выбираемого тарифа 🙂 Вот промо код - CCCP. При заказе сообщите его и скидка вам гарантирована! Друзьям тоже можете рассказать 😉

Понравилась статья? Поделись с друзьями:
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
3 голоса, в среднем: 5 из 5

Похожие темы

Комментариев пока нет... Будьте первым! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *