Что такое elementor wordpress
Перейти к содержимому

Что такое elementor wordpress

  • автор:

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

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

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

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

Кратко, почему стоит выбрать Elementor ?

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

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

Особенности Elementor

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

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

1. Базовые виджеты

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

2. Виджеты Pro

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

3. Элементы темы

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

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

4. Виджеты WooCommerce

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

Установка и настройка Elementor Page Builder

Установка бесплатной версии 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 WordPress: как пользоваться плагином с максимальной эффективностью для бизнеса

Elementor WordPress: как пользоваться плагином с максимальной эффективностью для бизнеса

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

Что же такое Elementor? Плагин, имеющий полное название Elementor Website Builder, — один из наиболее популярных инструментов WordPress (более пяти миллионов пользователей на конец 2020), который позволяет серьезно проапгрейдить дефолтный редактор. По сути это конструктор для веб-дизайна, построенный на таком способе оперирования элементами интерфейса в интерфейсах пользователя, как drag-and-drop: добавление нужного элемента на страницу производится посредством его захвата курсором мыши и перемещения в поле для редактирования. Страница по сути собирается словно из кусочков пазла из специальных элементов-виджетов. Благодаря этому любые изменения на странице отображаются в реальном времени в рабочей среде конструктора, что дает основание называть Elementor визуальным редактором.

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

Elementor: обзор особенностей плагина

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

  • Визуальное редактирование. Когда вы начинаете конструировать страницы в Elementor, то можете просматривать вносимые изменения в реальном времени (правда для этого требуется переход в режим “Просмотр страницы” из админки WordPress.
  • Адаптивная верстка. Независимо от того, с какого устройства вы будете заходить на страницы сайтов, созданных в Elementor, они всегда будут корректно отображаться, подстраиваясь под разрешение конкретного гаджета.
  • Библиотека виджетов. Виджетами принято называть блоки, из которых, как их кирпичиков, собирается здание нового сайта. С помощью мыши они легко переносятся из библиотеки в поле конструирования страницы. Далее каждый виджет можно настроить под задачи и дизайн вашего проекта.

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

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

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

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

Создание сайта на WordPress Elementor начинается с установки этого плагина, создания новой (или выбора уже существующей) страницы и редактирования ее дизайна. Рассмотрим подробнее каждый этап.

Установка Elementor на WordPress

Процесс установки Elementor мало чем отличается от аналогичной процедуры для других WP-плагинов. По сути все, что вам нужно — зайти в административную панель WordPress, в поле “Плагины” нажать кнопку “Добавить новый из списка”, вбить в поисковую строку название “Elementor” и кликнуть на кнопку “Установить”, а затем — “Активировать”. Когда активация будет завершена, вас перекинет на страницу с приветствием от разработчиков и видеопрезентацией возможностей плагина на английском языке. Просмотрев или пропустив ее вы можете приступать к созданию страниц сайта с помощью Elementor.

Создание новых страниц в Elementor

Добавление новых веб-страниц и их редактура в Elementor осуществляется следующим образом. В главном меню плагина вы переходите в раздел “Страницы” и добавляете там новую. Затем в панели вверху находите и нажимаете кнопку “Редактировать в Elementor”. Если вы хотите изменить с помощью Elementor дизайн уже существующей страницы, то нужно выбрать ее в “Станицах” и также кликнуть по “Редактировать…”. После этого откроется редактор Elementor в котором и будут производиться основные работы.

Редактирование дизайна страниц в Elementor

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

  • Содержимое. В этой вкладке настраивается содержательная часть: например, какая именно надпись будет размещена на кнопке действия;
  • Стиль. Отсюда можно настраивать цвет, размер и другие более тонкие аспекты дизайна виджета;
  • Расширенные. Предназначена для более редких опций, например — анимирования тех или иных элементов дизайна или загрузки сторонних таблиц стилей CSS.

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

Когда первый виджет будет размещен в нужном месте страницы и настроен, можно переходить к следующим. В правой части панели управления WordPress есть кнопка “Сохранить”, благодаря которой вы не потеряете результаты своей работы. Нажав же “Опубликовать” вы сделаете доступным измененные страницы всем пользователям интернета.

Шаблоны Elementor

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

Для просмотра библиотеки шаблонов вам нужно кликнуть по центральной кнопке в правой части редактора. Там вы найдете список шаблонов (платные будут маркированы как “Pro”). После выбора заинтересовавшего вас шаблона, кликните по “Вставить”. Далее нужно будет связать сайт с Elementor, заведя аккаунт в его системе, если это не было сделано ранее. После этого вы получите возможность для косметического редактирования выбранного шаблона.

Чтобы лучше понять, что из себя представляют готовые темы Elementor, рассмотрим одну из самых популярных из них. Так, большинство пользователей, приобретающих коробочную версию продукта, используют шаблон “Hello”. Именно эта тема используется при тестировании новых версий Elementor, что гарантирует высокую скорость работы сайта на ней и отсутствие багов. Hello может похвастаться прекрасной совместимостью с большинством WordPress-плагинов благодаря лаконичности дизайна и незаскриптованности, что делает ее привлекательной в качестве начальной темы для многих сайтов. Даже достаточно требовательные проекты, занимающиеся интернет-торговлей, часто выбирают Hello для сайтов, сделанных в Elementor WooCommerce Builder — не в последнюю очередь потому, что код Hello идеально оптимизирован под SEO-продвижение.

Elementor Pro

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

  • Распространяется в виде годовой подписки; в среднем обходится от 50 до 200 долларов;
  • Становятся доступны виджеты, размещенные в категориях “Pro” и “Woocommerce” — последние незаменимы при создании интернет-магазинов. Общее число доступных виджетов приближается к 100;
  • Можно создавать pop-up-окна для разных акций и других способов привлечения клиентов;
  • Библиотека готовых шаблонов страниц насчитывает более 300 тем — это в десятки раз больше, чем в бесплатном варианте плагина. 15 из них созданы на WooCommerce и предназначены для электронной коммерции;
  • Кроме основного поля страниц сайта вы сможете создавать дизайн и для шапки (header) и подвала (footer).

Облачный веб-сайт Elementor

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

За что вы платите, выбирая Elementor Cloud? В коробочной версии вам будет доступно создание одного сайта на базе последней версии WordPress на хостинге объемом 20 Гб, SSL-сертификат, подключение вашего домена, весь обвес Elementor PRO, десятки установленных плагинов, дефолтная тема Hello, упомянутая выше, а также ежедневное резервное копирование данных.

Хостинги под Elementor

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

Поэтому мы рекомендуем доверять в этом вопросе специалистам и тщательно выбирать хостинг-провайдера. Обратившись в Максиплейс, вы можете получить готовое решение: хостинг под WordPress с Elementor нужного объема дискового пространства и установленной темой Hello Elementor. Возможность переносить все работы по созданию сайтов на базе WP в наше облако существенно упростит жизнь любой коммерческой организации. Так наша команда возьмет на себя вопросы по настройке сервера: облачный хостинг всегда будет идеально оптимизирован под работу в конструкторе Elementor. Мы настроим все необходимые php-расширения, поможем с оптимизацией скорости работы сайта (привет CEO-показатели!), а, главное, будем на связи 24/7 для оказания тех.поддержки.

За что вы будете платить, выбирая решение от Максиплейс? В коробочной версии вам будет доступно не только создание сайтов на базе последней версии WordPress на хостинге любого объема, но и SSL-сертификат безопасности, подключение вашего домена, весь обвес Elementor PRO, десятки установленных плагинов, дефолтная тема Hello Elementor, упомянутая выше, а также ежедневное резервное копирование данных.

Резюме

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

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

Статья добавлена 1 год назад. Автор — Blog Admin

Рассказываем про самый популярный плагин WordPress. Там AI переводит и пишет тексты

Elementor — платформа, которая позволяет создавать и редактировать профессиональные привлекательные веб-страницы на платформе WordPress. У сервиса есть бесплатная и платная версия, а также 30-дневная гарантия возврата средств.

Рассказываем, что это за сервис и как им пользоваться.

Текст: Отдел новостей Фото: Image by Fabrizio Van Marciano from Pixabay Теги: adviser, af, elementor

Нашли ошибку в тексте-выделите ее и нажмите Ctrl+Enter. Нашли ошибку в тексте-выделите ее и нажмите кнопку «Сообщить об ошибке».»

Обзор Elementor — конструктор сайтов на WordPress. Подробный гайд-обзор плагина для новичков

Курс по WordPress

Обзор Элементор

Разработка сайта

Автор Илья Чигарев На чтение 12 мин Просмотров 25.5к. Обновлено 24.02.2023

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

Эту статью я сверстаю также в Elementor и периодически буду вставлять красивые блоки, чтобы сразу наглядно показывать преимущества конструктора. Поехали? 🙂

Обзор мощного конструктора для WordPress — Elementor Page Builder

Что такое Elementor и для чего он нужен

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

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

Установка

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

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

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

Вдохновение там, где Elementor!

Возможности бесплатной версии

Редактирование в live режиме

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

Секция

Секция это область куда вы добавляете элементы. Каждая секция состоит из колонок, можно выбрать от 1 до 6-ти колонок. Секции нужны для того, чтобы задавать положение элементов. Например разместить контент в две колонки, в левой будет картинка, а в правой заголовок, текст и кнопка.

30+ элементов

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

Хотите научиться делать сайты?

Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс «Идеальный сайт на WordPress» и «Лендинг в Elementor» , где рассказал пошаговый план как создавать крутые сайты.

Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты.

Элементы бесплатной версии

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

Хотите создать свою онлайн школу? Здесь я написал подробный гайд (+ показал свой пример академии).

Настройки макета страницы

Есть три варианта макета:

  • По умолчанию — в таком виде редактирование будет происходить той колонке, где сейчас располагается контент (учитывая сайдбар, шапку и подвал)
  • Холст Elementor — в таком виде перед вами будет пустая страница, без шапки, сайдбара и подвала
  • Elementor полная ширина — в таком виде останется шапка и подвал, а контент растянется на ширину сайта, отключится сайдбар.
Настройки элементов, секций, колонок (Содержимое, Стиль, Расширенные)

У каждого элемента, секции или колонки есть дополнительные настройки, которые разбиты на три вкладки:

  1. Содержимое — здесь добавляете контент, текста, картинки, ссылки на кнопки и пр.
  2. Стиль — здесь задаете настройки типографики, цветов, тени и пр.
  3. Расширенные — здесь задаете отступы, эффекты движения и пр.

review-elementor-7

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

Настройка адаптивности на разных устройствах (Компьютер, Планшет, Телефон)

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

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

Сохранить как шаблон

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

Плагин переведен на русский язык

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

История изменений

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

История изменений

Разделитель секций

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

Анимация при появлении

У Elementor’a очень обширный функционал для анимации, движения, parallax-эффекта, но в бесплатной версии доступен выбор анимации только при появлении.

Произвольное позиционирование

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

Видео в котором показано как это работает:

Есть олды, которые верстали сайты еще в Adobe muse? Там было очень удобно простым перетаскиванием ставить элементы в любом месте. Здесь такой же функционал.

Тонкие настройки типографики

Для любого элемента с текстом вы можете задать все возможные настройки, а именно: выбрать семейство, размер, насыщенность, преобразование, стиль, оформление, интерлиньяж, межсимвольный интервал.

Настройки шрифта

Конструктор точно понравится людям, которые понимают в типографике и делают красивую верстку за счет шрифта.

Пошаговый план создания первой страницы

Шаг 1. Установите плагин Elementor из репозитория WordPress или скачайте с официального сайта. Если вы сразу купили Elementor Pro версии, то также установите и его;

инструкция по установке

Шаг 2. Переходите Страницы > Добавить новую > и увидите кнопку Редактировать в Elementor;

Кнопка елементор

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

review-elementor-3

Шаг 4. Добавьте первую секцию, нажав на белый плюс в красном кружке и добавьте любой элемент из столбца слева;

Шаг 5. Сохраните или опубликуйте страницу;

Настройки

Готово. Это если вкратце.

Теперь посмотрим на Elementor Pro

Возможности Pro версии

Еще 30+ дополнительных элементов

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

элементы в про версии

Модальные окна (Popup builder)

Еще одно из крутых преимуществ — это попапы (модальные окна). В Элементор много настроек по созданию попапов, интеграции с другими сервисами и условиями показа.

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

Попап вордпресс

Гибкие настройки вывода попапа, среди которых:

  • Показ на определенной странице
  • По клику
  • Через определенную длину скролла страницы
  • Во время ухода с сайта
  • После просмотра определенного количества страниц
  • По происшествию n-го количества секунд
  • и пр.

Посмотрите короткое видео про возможности попапа:

Контактная форма

Имея Elementor Pro можно отказаться от доп. плагинов, например таких как Contact Form 7, и делать формы с помощью конструктора.

Плюс еще в том, что у формы полностью настраивается дизайн, чего очень не хватает другим плагинам, как правило либо такой функции нет и нужно добавлять стили через код (привет все тому же CF7), либо есть редактор формы, но все работает криво. Формы от Элементор работают исправно.

Пример формы, можете заполнить ради интереса 🙂

Создание шапки и подвала

Вы можете создать уникальные шапку и/или подвал и использовать их на всем сайте или на определенных страницах.

Создание своей темы

Вы можете создать дизайн всех необходимых элементов и страниц, которые включает в себя тема на WordPress, это: Главная страница, Страница с выводом постов, Формат статьи, Архив, 404 страница, Шапка и Подвал.

Создание магазина с помощью Woocommerce элементов

Elementor также включает в себя 15+ виджетов для создания магазина. Также как и другие элементы вы можете полностью настраивать и связывать между собой.

Эффекты движения, параллакс, mouse effect

Для любого элемента вы можете задать настройки движения:

  • Scrolling effect (движение при пролистывании) — движение будет происходить во время прокрутки сайта. Можно задать эффект появления, движения, размытия, поворота, увеличения.
  • Mouse effect (движение работает от мыши) — элементы двигаются тогда когда посетитель страницы шевелит мышью.
  • Анимация при появлении — простой эффект появления элементов. Об этом эффекте мы говорили выше, он также есть в бесплатной версии.

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

300+ шаблонов страниц

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

Галерея шаблонов

Интеграции с сервисами

Элементор дружит со многими сервисами и настроить между ними связь не составит труда.

Возможность добавлять свои шрифты

Добавляйте любые шрифты, которых нет в библиотеки Элементора.

Глобальные настройки

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

Например, на своем сайте я так сохранил кнопку «Скачать бриф», которую использую на всех страницах с описанием кейсов, и потом отредактировал одну кнопку, добавил ссылку на скачивание и эта ссылка появилась сразу на всех кнопках. Круто же?)

Пользовательские CSS

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

Регулярные обновления

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

Поддержка 24/7

Если будут вопросы по плагину, пишите в поддержку, как написано, работают круглосуточно.

Сколько стоит Elementor Pro

Есть три пакета:

49$ (3600 р.)
лицензия на 1 сайт

199$ (14500 р.)
лицензия на 25 сайтов

999$ (73600 р.)
лицензия на 1000 сайтов

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

Выгодно ли покупать Pro версию? Давайте посчитаем

За 49$ (3600 р.) мы получаем:

  • Конструктор (ближайший конкурент для WordPress это WPBakery, от стоит 45$)
  • Попап конструктор (который отдельно стоит 25$)
  • Создание форм (который отдельно стоит 30$)
  • Эффекты движения (который отдельно стоит 25$)

И это я посчитал только самые очевидные функции, если брать во внимание все преимущества и удобство пользования билдером, то выгода становится очевидна.

В общем, мой ответ «Да», выгодно покупать Pro версию.

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

Elementor в цифрах

активных установок
из 5 — рейтинг
цена Pro версии
элементов на выбор

Отзывы на конструктор Элементор

Самый главный показатель качества, это конечно же отзывы реальных пользователей. На сегодня Элементор установлен более чем на 2 млн. сайтов (это активные установки!). И рейтинг в официальном репозитории WordPress 4.8 из 5. Это очень круто!

Отзывы элементор

Для сравнения мы можем посмотреть отзывы на плагин Gutenberg, который WordPress начал использовать вместо стандартного редактора. Рейтинг 2 из 5, т.е. пользователи оставляют негативный отклик, если им что-то не нравится.

Взаимодействие с шаблонами. Какую тему выбрать для Elementor?

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

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

Среди платных шаблонов уже есть варианты, которые авторами адаптируются по Элементор, в каких-то темах даже добавляют еще функционала. Если вы выбираете из премиум шаблонов, то посмотрите мою подборку из 80-ти вариантов, адаптированных под конструктор.

80 шаблонов Elementor wordpress

Как изучать Элементор

  1. Хочу отметить канал Александра на ютубе, который называется WPlowers, там он много и понятно рассказывает про настройки билдера, многие ответы найдете в его видео.
  2. На официальном сайте есть база знаний со всеми инструкциями, да на английском, но с переводчиком понять не составит большого труда. И канал на ютубе, где есть пошаговые инструкции.

Дополнительные материалы

  1. Официальный сайт конструктора
  2. Ссылка на Pro версию
  3. База знаний
  4. Официальны канал на Ютубе
  5. Бесплатный шаблон Hello от Elementor
  6. Подборка из 80-ти премиум тем на Элементоре

Итог

Что мы получаем:

Pixel perfect дизайн

Точная настройка адаптивности

Настройка цветов и шрифтов

На русском языке

Объемная получилась статья. Если вам было полезно или есть какие-то вопросы, дополнения, замечания, пишите их в комментариях. Я однозначно советую конструктор Elementor и лучшее подтверждение моих слов, я сменил шаблон и конструктор на блоге именно на Элементор.

Поделитесь статьей в соцсетях, чтобы ее не потерять и немного помочь моему блогу 🙂 И увидимся в следующих статях!

Заказать сайт

Поделитесь в соцсетях? Благодарю ✌
Илья Чигарев

Привет. Меня зовут Илья и я автор сайта. Делаю на заказ: сайты, блоги, лендинги на WordPress и Tilda. Веду блог, где рассказываю все секреты и фишки, которые мне принесли результат в онлайн-маркетинге.

Оцените автора
( 25 оценок, среднее 4.84 из 5 )
Добавить комментарий Отменить ответ
Спасибо большое за статью. Хочу тоже разобраться и внедрить на свой сайт.
Хороший лонгрид! Побольше такого в блоге:)
Илья Чигарев автор

Очень хорошая статья.
Написана доступным языком, но при этом подробно, дает широкое представление о возможностях конструктора. Полезно знать как новичку, так и опытному разработчику. Однако тезис «чистый код» (из красивой сетки в конце статьи) не соответствует действительности абсолютно 🙂 Конкретно этот элемент состоит из 9 (. ) вложенных друг в друга html-элементов, хотя делая «руками» можно было обойтись всего одним.
Огромная избыточность css-свойств которые перезаписывают или дублируют друг друга.
К странице прикреплен чудовищно большой css-файл (650кб), и это несмотря на минификацию! Верстальщик бы уместил такой объем работы в 70Кб, а с минификацией в 30-40. Чистота кода и его размер значительно хуже чем сделанные вручную. Но, это плата за возможность «делать дизайн без программиста».
Без избыточности в коде невозможно создать универсальный конструктор. Это общая черта таких инструментов. Я определенно начну использовать Elementor в некоторых проектах, но большинство буду по прежнему делать «руками».
По многим причинам, не только чистоты кода и скорости загрузки.
Не всегда пользователю можно давать возможность «делать дизайн», например когда проект требует точного следования единому брендингу. Резюмируя:
+1 инструмент в копилку разработчика (для ограниченных случаев)
+ ваш блог в избранное, буду регулярно читать 🙂

Илья Чигарев автор
Спасибо Эдуард за такой развернутый комментарий! 🙂

Каким образом ограничивается число сайтов, на которые куплена Pro версия? Если я купил на один сайт, то на другие я не смогу ее поставить? Даже из файла?

Илья Чигарев автор

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

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

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