Как в макет элементора вставить текст статьи

Как работать с конструктором страниц Elementor в WordPress

Научитесь собирать страницы из блоков в визуальном редакторе Elementor в WordPress.Рассмотрим, что умеет этот инструмент и как им пользоваться. А также разберём отличия бесплатной и платной версий.

Что такое Elementor

WordPress — CMS, в которой есть тысячи тем и плагинов для создания страниц. В ней новичок может разработать дизайн любого сайта без знания вёрстки и программирования.

Собрать простой блог, лендинг или небольшой интернет-магазин в WordPress можно достаточно быстро. Однако если задача — сделать нечто большее, чем базовый ресурс, на разработку придётся потратить больше времени и углубиться в детали. Но есть инструмент, который позволит сэкономить ресурсы: плагин Elementor.

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

Также Elementor даёт возможность сделать сайт более стильным, чем при использовании базового редактора страниц в WordPress. Например, добавить двухколоночную вёрстку как в журналах, анимацию при прокрутке, нестандартные элементы (анимированный заголовок, кнопку FaceBook, таймер и другие).

Плагин Elementor пользуется популярностью. Сейчас он установлен на 5+ миллионах сайтов.

Возможности плагина Elementor

Визуальный редактор

При работе со страницами в Elementor вы сразу видите изменения, которые вносите. Поэтому наряду с конструктором сайтов его называют визуальным редактором. Но есть оговорка: добавленные изображения будут отображаться только в режиме «Просмотра страницы».

Адаптивность

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

Виджеты

Блоки, из которых конструируется сайт, называются виджетами. Чтобы добавить их на страницу достаточно просто перетащить виджет с панели управления на страницу. Затем нужно кастомизировать элемент под ваши задачи. Как пользоваться ими, мы рассмотрим ниже.

Всего в Elementor есть около 90 виджетов. Базовые доступны в бесплатной версии. А для более продвинутых (каталога товаров, чтобы сделать интернет-магазин, или таймера, чтобы добавить предложение, ограниченное по времени) нужно покупать платную подписку.

Перечислим некоторые доступные виджеты. С полным списком вы можете познакомиться на официальном сайте Elementor.

• Заголовок → чтобы структурировать информацию и добавлять крупные надписи.
• Изображение → чтобы добавлять иллюстрации к услугам, фото сотрудников и т. д.
• Видео → чтобы добавлять ссылки на видео с YouTube, Vimeo и других источников.
• Кнопка → чтобы заключить ссылку в красивую кнопку, которую видно на странице.
• Отзывы → чтобы размещать отзывы клиентов (social proof).
• Иконки соцсетей → чтобы связать сайт с группами вашей компании в соцсетях.

Виджеты платной версии:

• Галерея изображений (+ карусель) → чтобы добавить несколько изображений в сетке или тех, которые будут идти одна за одной.
• Форма → чтобы настроить поля (например, заявки), которые будет заполнять пользователь.
• Цитаты → чтобы выделить текст на странице, сделать его визуальным якорем.
• Логин → чтобы у пользователей появилась возможность авторизоваться на сайте.
• Прайс-лист → готовый блок, чтобы ввести описания и стоимость тарифов ваших услуг.
• Шаблоны → чтобы использовать готовые шаблоны страниц и изменять контент.
• Каталог товаров → чтобы добавить готовую сетку товаров, которую можно заполнить своими вариантами.

Как установить Elementor на WordPress

1. Откройте админку WordPress.
2. Наведите курсор на раздел «Плагины» и выберите Добавить новый из списка:

3. Введите название Elementor в строке поиска справа и нажмите Enter.

4. Нажмите Установить → Активировать:

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

Как сделать сайт на Элементоре

Чтобы добавить новую страницу и редактировать её в Elementor:

1. Перейдите в раздел главного меню «Страницы» и нажмите Добавить новую:

2. В верхней панели кликните Редактировать в Elementor:

Чтобы изменить с помощью Elementor текущие страницы сайта, выберите в первом шаге нужную страницу, наведите на неё курсор и нажмите Редактировать в Elementor.

Вы перейдёте в редактор Elementor.

Создание сайта на WordPress Elementor

1. Перетащите нужный виджет с панели управления в пустую область справа:

2. Когда виджет будет добавлен на страницу, в левой части появится меню для настройки этого элемента:

Здесь вы сможете очень гибко настроить элемент. Все функции рассортированы по трём вкладкам:

• Содержимое. Здесь задаётся контентная часть: например, текст, который будет отображаться. Также здесь представлены основные настройки;
• Стиль. В этой вкладке собраны более гибкие инструменты для управления дизайном элемента;
• Расширенные. Здесь собраны дополнительные функции. Например, анимация объектов, загрузка пользовательских CSS-стилей и другие.

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

3. Настроим виджет «Заголовок».

Когда всё будет готово, вернитесь к другим виджетам, кликнув на иконку, отмеченную на скриншоте:

Повторите шаги 1–3 для остальных блоков вашей страницы. Добавим несколько элементов:

4. Чтобы сохранить черновик или опубликовать страницу, нажмите соответствующую кнопку в панели управления справа:

Шаблон Elementor WordPress

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

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

Чтобы посмотреть каталог шаблонов, нажмите среднюю кнопку в правой области редактора:

Найдите понравившийся бесплатный (на платных сверху размещён ярлычок Pro) и нажмите Вставить:

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

Elementor настройка для WordPress

В Elementor можно задать общие настройки для всех страниц. Этого нужно для того, чтобы сэкономить время и сделать все элементы сайта однообразными. Например, вы можете выбрать основной и дополнительный цвета, которые будут повторяться на всех элементах (кнопках, разделителях, иконках), а затем просто выбирать их при редактировании, а не выставлять каждый раз заново.

Чтобы перейти настройкам в Elementor, в редакторе кликните по иконке с тремя полосами в панели управления и откройте раздел «Настройки сайта»:

В этом разделе вы сможете задать:

• цвета и шрифты. Для всех виджетов, содержащих текст;
• типографику. Чтобы везде были одинаковые отступы, теги заголовков (H1–H6);
• кнопки. Благодаря этому можно запрограммировать внешний вид кнопки один раз, а затем просто менять при желании текст и url;
• параметры изображений;
• айдентику сайта. Чтобы настроить описание сайта, его фавикон и другие дополнительные элементы;
• макет. Чтобы везде была одинаковая ширина страниц и расстояния между виджетами;
• пользовательские CSS (в платной версии). Чтобы загружать дополнительные стили;
• Расширенные настройки.

Elementor Pro

Для того чтобы облегчить работу (за счёт готовых шаблонов) или добавить гибкие инструменты (прайс-листы, таймеры и т. д.), потребуется платная версия плагина Elementor Pro. Осветим её главные отличия от базовой версии:

• В зависимости от тарифа подписка на год стоит 49–199 $.
• Будут доступны продвинутые виджеты, о которых мы рассказывали выше. Всего будет доступно более 90 элементов из категорий: Базовый, Общие, Pro и Woocommerce.
• Есть конструктор поп-апов (всплывающих форм) на сайте. С помощью них можно привлекать аудиторию к покупкам, сообщать о новинках и т. п.
• В сравнении с обычной версией, в которой есть несколько бесплатных шаблонов, вам откроется галерея из 300+ готовых тем, которые можно использовать.
• Вы сможете настраивать шапку (хэдэр) и подвал (футер) вашего сайта.
• Создавать интернет-магазин на Elementor WordPress с помощью 15 шаблонов WooCommerce.
• Добавлять дополнительные динамические эффекты.

Популярные статьи

• Как указать (изменить) DNS-серверы для домена
• Я зарегистрировал домен, что дальше
• Как добавить запись типа A, AAAA, CNAME, MX, TXT, SRV для своего домена
• Что такое редирект: виды и возможности настройки
• Как создать почту со своим доменом

Как добавить изображение к тексту в Elementor

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

Тем не менее, наличие некоторых навыков CSS было бы отличным бонусом при использованииElementor. Вы сможете применить уникальные стили к своей веб-странице, используя функцию Пользовательские CSS D ‘Elementor. В этой статье мы покажем вам, как добавить изображение в текст в Elementor, используя специальную функцию CSS Elementor.

В некоторых инструменты таких проектов, как GIMP и Photoshop, вам обычно нужно добавить маркер слоя, чтобы добавить изображение в текст. В Elementor вы можете сделать то же самое, добавив код CSS, в котором виджет Elementor Title и текстовый виджет не имеют возможности настройки для добавления изображения в качестве фона.

Добавить изображение к тексту Elementor

Прежде чем начать, убедитесь, что вы обновили свою версию Elementor до версии Pro, если вы этого не сделали, поскольку настраиваемые функции CSS доступны только в Elementor Pro. Когда вы будете готовы, создайте новую страницу или шаблон и отредактируйте его с помощью Elementor. Конечно, вы также можете редактировать существующую страницу или шаблон.

Добавьте виджет Заголовок в поле редактирования.

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

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

Затем перейдите на вкладку Передовой и откройте блок На заказ CSS и вставьте следующий код CSS. Замените URL-адрес изображения на свой собственный URL-адрес изображения.

selector .elementor-heading-title < background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70% ; -webkit-background-clip:text; -webkit-text-fill-color:transparent; >

Получите Elementor Pro прямо сейчас!

Заключение

Вот! Вот и все, что касается этой статьи, в которой показано, как добавить изображение к тексту в Elementor. . Если у вас есть вопросы о том, как туда добраться f дайте нам знать в Комментарии.

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

Elementor: назначение, возможности, сравнение версий

WordPress — инструмент для создания сайтов с тысячами готовых дизайнов и возможностью кастомизировать страницы. Он достаточно гибкий. Но если вам нужно что-то особенное (журнальная вёрстка или необычные формы), стандартные шаблоны не подойдут. В этом случае на выручку придет плагин Elementor. В статье расскажем о том, что он умеет и как пользоваться им, а также об отличиях платной и бесплатной версий.

Что такое Elementor

Elementor (полное название: Elementor Website Builder) — плагин WordPress, который расширяет возможности стандартного редактора. Это своеобразный конструктор сайтов, с помощью которого можно быстро и просто разработать любой дизайн страницы или отдельного блока. Elementor — очень популярное решение. К концу 2020 года его установили более 5 млн пользователей. Есть официальный сайт, посвященный Elementor, со своим блогом и сообществом разработчиков. Прежде чем перейти к возможностям плагина, посмотрите, какие сайты можно создать с его помощью:

Сделать динамичную прокрутку и анимацию, как на сайте агентства Kima

Или стильный двухколоночный лендинг, как у шеф-повара Джейд Бергер

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

Что умеет плагин Elementor

У плагина есть бесплатная (Elementor) и платная (Elementor Pro) версии. Они отличаются количеством доступных функций. Мы сравним их ниже, а сначала расскажем о принципе работы этого конструктора страниц.

Главная его особенность заключается в том, что в конструкторе сразу отображаются изменения, которые вы вносите. Поэтому Elementor называют визуальным редактором.

Elementor устроен по принципу Drag-and-drop. Чтобы добавить любой элемент на страницу, его нужно захватить мышкой и перетащить в зону редактирования. Страница буквально собирается из элементов. Они называются виджетами. Процесс создания страницы состоит из нескольких шагов.

Переносим виджеты из меню в пустую тему и создаем структуру (можно выбрать готовый шаблон из «Галереи», но для этого нужно создать аккаунт на сайте Elementor и синхронизировать с WordPress).

«Голая» структура страницы в редакторе

Редактируем каждый блок, заполняя его контентом (текст, изображения, отзывы, кнопки и т. д.).

Редактирование блока (в примере виджет «Кнопка»)

Всего инструмент содержит более 90 виджетов. Они разделены по типам: базовые, платные, общие, сайт и WooCommerce (интернет магазин на Elementor WordPress).

Рассмотрим наиболее универсальные бесплатные функции:

• Заголовок. Вставьте нужный текст, настройте цвет, шрифт, размер, интервалы, насыщенность и т.д.
• Изображение. Загрузите картинку из админки WordPress или с компьютера, отредактируйте её размер, прозрачность, тени, расположение на странице.
• Текстовый редактор. Идентичен стандартному редактору WordPress.
• Видео. Добавьте ролики с YouTube, Vimeo и других источников.
• Кнопка. Настройте текст, внешний вид и ссылку ваших кнопок.
• Отзывы. Разместите отзывы клиентов с текстом, фотографией, подписью.
• Иконки соцсетей. Добавьте ссылки на социальные сети вашей компании.

Виджеты платной версии содержат более продвинутый функционал:

• Галерея/карусель изображений. Несколько изображений будут отображаться в одной сетке или сменять друг друга.
• Форма. Настройте форму, которую сможет заполнить пользователь.
• Цитаты. Оформите текст как цитату.
• Логин. Позволяет добавить блок для авторизации в аккаунте на вашем сайте.
• Прайс-лист. Разместите тарифы ваших услуг.
• Таймер. Пригодится, если на сайте действует акция, ограниченная по времени.
• Шаблоны. Позволяет взять готовую страницу из библиотеки и отредактировать содержимое/изображение.
• Каталог товаров. С помощью этого виджета вы сможете превратить страницу в интернет-магазин.

Благодаря этим инструментам и простому интерфейсу можно собрать страницу любого типа: от простого описания услуги или статьи с фотографиями в блог до каталога интернет-магазина или сайта компании.

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

Закажите услугу Рег.сайт

Попробуйте комплексное решение для создания сайта прямо сейчас!

Как установить Elementor на WordPress

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

В меню выберите раздел «Плагины» и нажмите Добавить новый:

Введите в строку поиска справа название «Elementor» и нажмите Enter.

Нажмите Установить, а затем Активировать в блоке «Elementor Website Builder»:

Готово, сразу после активации откроется приветственная страница плагина с видеоинструкцией о том, как пользоваться Elementor. Она на английском языке. Если не владеете им, прочитайте гайд Рег.ру.

Создание сайта на WordPress Elementor

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

Чтобы открыть Elementor:

Перейдите в раздел «Страницы» и нажмите Добавить новую:

На открывшейся странице нажмите Редактировать в Elementor:

Готово, после этого загрузится расширенный конструктор страниц Elementor:

Если вы хотите отредактировать уже существующую страницу, последовательность действий будет та же. Только вместо добавления новой страницы выберите в 1-м шаге нужную (в примере выше «Blog» или «Classes»), нажмите Изменить, а затем Редактировать в Elementor.

Дальше перейдем к тому, как создать сайт на WordPress Elementor.

Перетащите необходимый элемент (виджет) из левого меню в область справа: В примере виджет «Заголовок» Вы можете сразу отредактировать блок или вернуться к другим виджетам, чтобы подготовить структуру сайта, а потом настраивать ее. В инструкции покажем первый способ.

После добавления виджета в левой части появится меню для работы с отдельным блоком. В нем есть 3 вкладки:

• Содержимое. Предназначена для работы с контентом (здесь вы вставляете свой текст, картинки, т. п. и назначаете основные настройки);
• Стиль. Здесь настраивается внешний вид добавленного контента;
• Расширенные. Это настройки для чуть более продвинутых пользователей. Здесь можно анимировать объект, скрыть его в мобильной версии сайта, загрузить ваши CSS-стили и др. Это меню стандартно для всех виджетов, но настройки внутри вкладок отличаются в зависимости от типа элемента.

Задайте необходимые настройки, они сразу отобразятся справа. Покажем на примере заголовка. Создадим заголовок «Инструкция по Elementor»:

Когда блок будет готов, перейдите к следующему виджету. Для этого кликните на отмеченную стрелкой иконку: После этого откроется меню виджетов. Дальше повторите с 1-го по 4-й шаги. Добавим еще несколько виджетов, чтобы показать возможности Elementor: Как сделать сайт на Элементоре Добавленные изображения отображаются в редакторе только тогда, когда вы редактируете этот блок. Если хотите увидеть страницу целиком до сохранения, нажмите на иконку с тремя полосами слева – Просмотр страницы:

Когда страница будет готова, нажмите в нижней части левого меню кнопку «Опубликовать» или треугольник справа от неё. Там можно выбрать «Сохранить черновик» или «Сохранить шаблон», если созданная страница будет повторяться на сайте несколько раз (например, вы сделали карточку товара). Это позволит в следующий раз не создавать шаблон страницы с нуля:

Elementor настройка для WordPress

Настройка в Elementor позволяет назначать общие правила для всего сайта. Например, задать цветовую гамму, выбрать шрифты, фоны один раз, а не для каждого отдельного элемента и виджета. Благодаря этим настройкам ваши страницы будут единообразными. Чтобы перейти к настройке сайта в Elementor, войдите в редактор по инструкции выше. Затем нажмите на иконку с тремя полосами в левой части меню и перейдите в раздел «Настройки сайта»:

В нем есть следующие разделы:

• Глобальные цвета → для задания основных и дополнительных цветов надписей, кнопок, разделителей и других элементов сайта.
• Глобальные шрифты → для выбора нескольких шрифтов, которые будут сохраняться для всех текстовых виджетов.
• Типографика → для задания отступов и SEO-разметки заголовков (тегов H1-H6).
• Кнопки → чтобы один раз создать кнопку и затем редактировать по минимуму.
• Изображения → для настроек отображения картинок.
• Поля формы → настройки внешнего вида формы для заполнения пользователями.
• Айдентика сайта → позволяет задать название и описание сайта, выбрать логотип и фавикон.
• Фон → цвет фона для всех элементов сайта.
• Макет → для настройки ширины страницы, отступов виджетов.
• Лайтбокс → позволяет открывать изображения во всплывающем окне.
• Пользовательские CSS (Pro версия) → для загрузки пользовательских стилей.
• Расширенные настройки (откроются в новом окне) → для разработчиков и настройки селекторов, оптимизации и т. п.

Elementor vs Elementor Pro

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

Elementor	Elementor Pro
Цена	Бесплатно	От 49 до 199 $ в год (цены действительны на 06.12.2020)
Доступные виджеты	40 (категории «Базовый», «Общие»)	90+ виджетов (бесплатные + категории «Pro», «Woocommerce»)
Шаблоны	5 бесплатных шаблонов в библиотеке	300+ шаблонов. Каждый шаблон Elementor WordPress из коллекции можно использовать, не нарушая авторские права
Конструктор всплывающих форм	—	Есть функционал для разработки поп-апов на сайте
Конструктор тем	—	+
Настройка хедера и футера	—	+
Создание интернет-магазина	—	+
Анимация	Базовые инструменты	Параллакс-скроллинг, 3D-наклон, тени и др.

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

Помогла ли вам статья?

Спасибо за оценку. Рады помочь ��

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

Хаюшки всем читателям моего блога ��

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

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

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

P.S.: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.

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

Опыт разработки проектов различного уровня: лендинги, корпоративные сайты, Интернет-магазины, CRM, порталы. В том числе поддержка и разработка HighLoad проектов. Присылайте ваши заявки на email cccpblogcom@gmail.com.

И с друзьями не забудьте поделиться ��