Как создать сайт на Wordpress с помощью Elementor

Привет! Я занимаюсь разработкой и продвижением сайтов и для ускорения верстки я использую плагины с визуальным редактором. Вот тут можете посмотреть примеры моего дизайна зазуля.рф и generalmarketing.ru А это мой телеграмм канал, подписывайтесь.

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

Я работаю с Elementor Pro так как там больше функционала.

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

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

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

Elementor разделил свои возможности на 4 категории.

Базовые виджеты поставляются в бесплатной версии, и их вполне достаточно для создания сайта. Кроме того, в бесплатной версии вы не можете создать меню заголовка/навигации, и вам, возможно, придется найти какую-нибудь классную тему WordPress с навигационным меню, которое вам нравится.

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

Элементы темы также поставляются с Elementor Pro, и они важны для создания всех шаблонных страниц и, конечно, шаблона одного поста. Есть страницы, которые динамически заполняются контентом, например, категория, тег, автор и т.д. Для таких страниц необходимо создать шаблон с помощью элементов темы.

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

И последнее, но не менее важное — виджеты WooCommerce. Эти виджеты позволяют с помощью элементов WooCommerce создавать шаблоны страниц и шаблоны одного товара.

Установка бесплатной версии Elementor не отличается от установки любого другого плагина из репозитория плагинов WordPress. Перейдите в панель инструментов WordPress → Плагины → Добавить новый, найдите Elementor, установите и активируйте плагин.

Для Pro-версии вам необходимо приобрести тарифный план, который автоматически создаст учетную запись в Elementor. Когда вы войдете в него, вы увидите кнопку загрузки, чтобы загрузить последнюю версию Pro.

Пока вы все еще зарегистрированы в панели Elementor, войдите в WordPress Dashboard → Plugins → Add New и выберите Upload, просмотрите загруженный файл Elementor Pro с вашего компьютера, установите и активируйте его.

Когда все будет готово, в левой боковой панели на панели инструментов WordPress перейдите в раздел Elementor → нажмите на License → нажмите кнопку Connect & Activate.

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

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

Пришло время начать использовать Elementor и создать свой сайт. Я предлагаю использовать тему Hello Theme от Elementor, специально созданную для Elementor.

Для этого давайте начнем с создания страницы «Домашняя страница» и ее редактирования в Elementor. Перейдите в раздел Страницы → Добавить новую страницу, назовите ее "Homepage" и опубликуйте ее, затем нажмите кнопку "Редактировать с помощью Elementor".

На странице редактирования вы увидите элементы, которые вы не можете редактировать, потому что макет установлен по умолчанию. Чтобы использовать Elementor на пустом холсте, выберите "Elementor Full Width" или "Elementor Canvas", нажав на значок шестеренки в левом нижнем углу.

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

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

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

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

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

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

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

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

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

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

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

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

Результат на мобильных устройствах.

А конечный результат на рабочем столе имеет только один раздел, но другой.

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