WordPress Elementor templates и темы: как установить и где скачать?

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

wordpress-elementor-shablony-temyХаюшки всем читателям моего блога 🙂

Как я и обещал вам в своей предыдущей статье, посвящённой обзору возможностей 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 путём визуального перемещения блоков и изменения их свойств.

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

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

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

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

Ну, и в дополнение к платным продуктам, 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-templates-kholst-elementor

Данный вид Elementor страница приняла за счёт настроек макета страницы, параметры которого вы можете увидеть на картинке выше.

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

С помощью последнего можно устанавливать Elementor шаблоны и их отдельные элементы в один клик.

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

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

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

elementor-shablony-standartnaya-biblioteka

Официальных, потому что все представленные в данной коллекции Элементор темы — разработки команды WP Elementor, более детально с возможностями которых вы сможете познакомиться по данной ссылке.

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

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

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

Когда вы определитесь с шаблоном из данной библиотеки — просто нажмите на кнопку Вставить, появляющуюся при наведении на его карточку:

elementor-templates-free-ustanovka

Также вы сможете найти эту кнопку вверху экрана, открывающегося при клике на любой Elementor шаблон в данной библиотеке.

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

shablony-dlya-elementor-wordpress-nastrojka

Вот и всё 🙂 Сохраняем изменения в документе — и сайт готов.

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

Большой выбор Elementor шаблонов предоставляет TemplateMonster в своём Elementor Marketplace.

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

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

Как установить сторонние Elementor темы?

Для демонстрации процесса установки Элементор темы на WordPress сайт я решил немного заморочиться и сделать отдельный сайт на поддомене текущего ресурса — http://monstroid.cccp-blog.com.

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

В качестве примера темы для Elementor WordPress я решил не мелочиться и взять проверенный временем бестселлер — Monstroid от Zemez.

Купить его и другие Elementor themes, напоминаю, вы можете в TemplateMonster Elementor Marketplace по данной ссылке, ещё и с кучей традиционных для данного ресурса скидок.

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

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

Если вы когда-то занимались установкой премиум шаблонов, то должны знать, что для облегчения данного процесса многие производители предоставляют автоинсталляторы или визарды (от англ. wizard — колдун), потому что для многих пользователей то, что они делают и как работают, кажется магией 🙂

Не стал исключением в этом правиле и Monstroid.

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

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

Это становится заметно на первом шаге его установки, где необходимо выбрать подходящую тему из его состава:

elementor-temy-monstroid

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

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

Далее следует этап выбора варианта использования основной темы или дочерней. Отличия между ними заключаются в том, что дочерняя тема является копией основной. Следовательно, если вы выберите редактирование родительской, то все созданные далее дочерние будут содержать внесённые изменения.

Поэтому создатели Monstroid и рекомендуют вариант создания дочерних тем.

На следующем шаге установки данной Elementor темы у некоторых templates предлагается вариант выбора скина (вариация темы с установленными плагинами, в том числе и WP Elementor, и демо-данными):

temy-dlya-elementor-wordpress-vybor-skina

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

elementor-themes-ustanovka-plaginov

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

Ну, и на завершающем этапе установки Elementor theme происходит импорт демо-контента после чего сайт готов к использованию:

elementor-temy-rezultat-ustanovki

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

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

elementor-temy-nastrojka

Если после прочтения данного мануала у вас всё равно возникнут какие-то вопросы по поводу установки, то вы всегда можете задать их мне в комментариях, службе техподдержки TemplateMonster (если вы купите его у них, естественно) или заказать услугу установки данного Elementor шаблона у самого TemplateMonster.

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

Установка Elementor template, скачанного из Интернет

Под скачанным из Интернет Elementor шаблоном имеется ввиду продукт, разработанный сторонними разработчиками (не Elementor командой) и распространяемый в сети на платной или бесплатной основе.

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

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

Обратите внимание, что при использовании шаблона вы можете потерять некоторые данные на вашей странице, поэтому не лишним будет создать её резервную копию перед импортом Elementor template.

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

Изначально я планировал сделать на его базе страницу на сайте, разработанном для демонстрации установки Elementor темы в предыдущем разделе статьи — http://monstroid.cccp-blog.com, но, попытавшись это сделать, понял, что идея плохая 🙂

Как я ни старался, натянуть шаблон на сайт, где уже была установлена 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. На этот раз нам понадобится в нём кнопка импорта нового шаблона, которая выглядит так:

elementor-shablony-biblioteka

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

После загрузки файл появится на вкладке Мои шаблоны окна с каталогом Elementor templates, которое выглядит так:

elementor-shablony-vstroennyj-menedzher

Здесь, как видите, помимо просмотра загруженных извне Элементор шаблонов как в списке, так и в качестве превью, их можно удалять, экспортировать (скачивать себе на локальный компьютер в виде JSON-файла) и, непосредственно, использовать на своих WordPress сайтах.

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

elementor-templates-nastrojki-importa

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

Но если вы на 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-shablony-menedzher

Прелесть данного менеджера в том, что все манипуляции с шаблонами и их фрагментами вы сможете производить не «на ходу» во время редактирования страницы через 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.

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

До новых встреч! 🙂

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

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

Похожие темы

2 комментария к статье "WordPress Elementor templates и темы: как установить и где скачать?"

  1. Алия

    Добрый день!

    Я начинающий пользователь WordPress.
    Возникла проблема, я создала на базе Elementora страницу с использованием всех возможностей (+видео, счетчики и т.д.), сохранила как шаблон.

    Сам шаблон отлично работает и просматривается, но мне никак не удается подцепить этот шаблон к сайту.
    С WordPress удалила все темы, на страничке Мои шаблоны выбираю нужный, нажимаю применить — а на самом сайте — пустота.

    Надеюсь, смогла объяснить проблему.
    Буду благодарна за помощь.

    1. Pashaster Автор

      Здравствуйте. После того, как Вы сохранили Ваш шаблон, Вам нужно было на сайте перейти на url страницы, для которой Вы создавали шаблон.

      Если Вы создавали шаблон отдельно — Вам нужно было на его базе создать страницу сайта через меню админки Страницы > Добавить новую. И отредактировать страницу через WordPress Elementor, где загрузить созданный ранее Элементор шаблон.

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

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