Что такое elementor wordpress

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

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

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

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

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

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

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

Установка

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

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

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

Источник

Плагин Elementor – Полное руководство 2021. Самый мощный и бесплатный конструктор сайтов

Содержимое руководства

Хорошие новости … С недавних пор сделать это стало гораздо проще! Нет необходимости вручную верстать каждую страницу с нуля или нанимать студию веб дизайна.

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

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

Внимание!

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

Начало работы с Elementor

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

Elementor – это самый популярный конструктор страниц, который полностью раскрывает свой потенциал только при использование максимально легких WordPress тем. Отличным примером считается тема «Hello», а скачать её можно в официальном репозитории.

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

Итак, в переходим в раздел Плагины → Добавить новый, в строке поиска вводим «Elementor». Самый первый из найденных плагинов нам и потребуется. Нажимаем «Установить», а когда процесс завершиться – «Активировать».

Установка и активация плагина Elementor

🥳 Поздравляем, вы сделали первый шаг на правильном пути!

Изучение возможностей плагина

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

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

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

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

Большинство параметров настройки, которые вы найдете, основаны на виджетах (элементах) и даже в бесплатной версии их много.

Настройки Elementor

У плагина есть несколько настроек базового уровня, которые расположены в разделе Elementor → Настройки. Тут можно выбрать с каким типом записей плагин будет работать, установить размеры контейнера которые будет использоваться по-умолчанию и так далее. На то они и базовые настройки, так как влияют сразу на весь сайт!

Базовые настройки плагина

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

Какие виджеты (элементы) доступны в бесплатной версии?

В целом, плагин построен на методе Drag-and-drop, и содержит много различных элементов структурированных по разделам.

Структура элементов в плагине

В общей сложности вы получаете около 30 базовых элементов (все вкладки, кроме PRO), которые дают вам все необходимое для создания страниц.

Если базовых элементов недостаточно, можно получить дополнительные виджеты путем обновления до Elementor Pro.

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

Сравнение версий. А нужно ли покупать Elementor PRO?

Если вам нужен удобный, мощный бесплатный конструктор, то бесплатная версия – отличный выбор!

Но весь потенциал плагина раскрывается только с переходам на PRO версию.

Купить Elementor PRO

Давайте посмотрим на сравнительную таблицу и продолжим:

50Конструктор страницX✓Конструктор темыX✓ПоддержкаX✓Динамичный контентX✓PRO шаблоны и элементыX✓ИнтеграцияX✓

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

Чуть позже мы вернемся к PRO, а сейчас продолжим знакомство с бесплатной версией плагина Elementor

Использование бесплатной версии конструктора

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

Шаг 0. Выбор правильной темы (шаблона) для сайта на базе Elementor

Тут важно понимать, что существуют сотни и даже тысячи полноценных шаблонов для WordPress созданных на базе Элементора, вот самые популярные из них:

Shopkeeper

Внимание!

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

Шаг 1. Создание новой страницы или записи

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

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

Шаг 2. Начало работы в редакторе

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

Создание строк и столбцов

В качестве примера мы создали две строки, первая строка содержит один, полно-размерный столбец, а вторая – 2 столбца.

В первую строку добавим заголовок:

Заголовок – первый добавленный элемент

Вы неверное уже заметили, что не смотря на то, что страницы была создана с названием «Моя страница в Elementor» – заголовок не отображается. Добиться этого можно используя родительскую тему «Hello» и её дочернюю тему.

В functions.php дочерней темы следует добавить следующий фильтр:

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

Используем вкладку стиль для редактирования цвета заголовка

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

Шаг 3. Глобальные настройки

Для создания общей стилевой направленности сайта необходимо задать некоторые глобальные настройки:

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

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

Шаг 4. Строки, колонки, элементы и их настройки

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

Сейчас нет смысла описывать все доступные строкам и элементам настройки. Но в качестве примера давайте визуально отделим шапку сайта от заголовка.

Отделяем шапку сайта от тела контента с использованием Elementor для WordPress

Не дурно, да? Но давайте двигаться дальше и разбираться с шаблонами которые доступны в бесплатной версии плагина Elementor.

Шаг 5. Шаблоны страниц в Elementor

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

Библиотека шаблонов Elementor

Тут все просто – выберем понравившийся шаблон и вставляем его в тело контента. Большинство самых “вкусных” шаблонов доступно только в PRO версии.

Elementor PRO

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

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

Но всё же начать стоит возможности создания шапки и подвала сайта.

Редактор тем в PRO версии

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

Конструктор тем меняет правила игры для всех, кто знаком с созданием собственных тем, поскольку он позволяет создавать собственные верхние и нижние колонтитулы (Header и Footer), а также другой динамический контент для вашего веб-сайта. Он позволяет вам переопределять важнейшие аспекты используемой WordPress темы!

Перейдите во вкладку Шаблоны → Theme Builder на панели инструментов, затем выберите «Header» и нажмите кнопку «Добавить новый Header».

Создание шапки сайта (Header) используя Elementor PRO

Дальше потребуется ввести название шаблона, пусть он так и называется «Header». А после нажатия большой зеленой кнопки «Создать шаблон» начинается самое интересное.

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

Добавляем условия отображения для шапки сайта

Будет предположено добавить условия отображения. Нажимаем «Add Condition», а так как там по умолчанию выбрана опция «Entire Site», что означает – показывать на всех страницах сайта, то нажимаем «Save & Close». Как вы уже поняли можно создавать и совмещать различные условия отображения динамических элементов, но в рамках этого руководства это рассматриваться не будет.

Возвращаемся к редактированию страницы, которую мы создали ранее. И что мы видим? Правильно, нашу созданную шапку. Давайте дополнительно стилизуем её, а для этого нужно нажать «Редактировать Header»

Пример редактирования шапки сайта в Elementor PRO

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

Часто задаваемые вопросы

Что такое Elementor?

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

Elementor работает со всеми темами?

Плагин работает со всеми темами, которые соответствуют стандартам WordPress.

Совместим ли он с другими плагинами WordPress?

Плагин совместим практически со всеми плагинами.

Что такое Elementor PRO

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

Могу ли я редактировать страницы своего блога с помощью Elementor?

Да, но Вам понадобится “конструктор тем”, который входит в Elementor PRO

Могу ли я редактировать страницы WooCommerce?

Вы можете редактировать страницу товара и страницы архивов с помощью конструктора WooCommerce Elementor. Скоро появится возможность редактировать страницу оформления заказа и страницу корзины с этой функцией.

Подведем итог

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

Надеемся, это мини-руководство дало вам отличную отправную точку для успешного использования плагина Elementor и его PRO версии.

Если у вас есть какие-либо вопросы или комментарии, пожалуйста, поделитесь ими с нами ниже!

Источник

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

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

Что такое Elementor

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

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

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

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

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

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

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

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

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

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

Виджеты

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

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

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

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

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

Откройте админку WordPress.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаблон Elementor WordPress

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

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

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

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

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

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

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

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

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

Elementor Pro

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

Источник