Плагин Elementor Руководство по конструктору сайтов 2022

Внимание!

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

class=»wp-block-separator is-cnvs-separator-id-1616494214914″>

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

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

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

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

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

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

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

class=»wp-block-separator is-cnvs-separator-id-1616494214921″>

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

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

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

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

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

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

class=»wp-block-separator is-cnvs-separator-id-1616494214928″>

Настройки Elementor

Плагин имеет несколько базовых настроек уровня, которые находятся в разделе Elementor → Settings. Здесь вы можете выбрать, с какими сообщениями будет работать плагин, установить размер контейнера, который будет использоваться по умолчанию, и т д. Вот почему они являются базовыми настройками, так как они влияют на весь сайт сразу!

Базовая конфигурация плагина

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

class=»wp-block-separator is-cnvs-separator-id-1616494214936″>

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

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

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

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

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

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

class=»wp-block-separator is-cnvs-separator-id-1616494214947″>

Как в вордпресс на elementor сделать блоки с горизонтальным свайпом?

• 1 подписчик

• 17 часов назад

• 15 посещений

0 ответов

• PHP

• +1 еще

Легкий

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

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

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

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

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

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

3. Настройте виджет заголовка».

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

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

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

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

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

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

Купить Элементор ПРО

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

	БЕСПЛАТНО	PRO
Цена	Это бесплатно	От $49 в год
Количество виджетов	~25	~50
Конструктор страниц	Икс	✓
Конструктор тем	Икс	✓
Служба поддержки	Икс	✓
Динамический контент	Икс	✓
Шаблоны и элементы PRO	Икс	✓
Интеграция	Икс	✓

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

Купить Elementor Pro на официальном сайте

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

class=»wp-block-separator is-cnvs-separator-id-1616494214998″>

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

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

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

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

Боргхольм

Быстрый, современный и достаточно универсальный шаблон Borgholm со 100% совместимостью с Elementor. Цена — 69 долларов

класс = «wplb_small»>

Вебон

WebOn — это чистая целевая страница, которая содержит красиво оформленную коллекцию из 11 различных типов целевых страниц! Цена – 75 долларов

класс = «wplb_small»>

Лавочник

Shopkeeper — полностью адаптивная тема WordPress на основе WooCommerce. Конечно же со 100% совместимостью с Elemententr! Цена – 59 долларов

Внимание!

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

class=»wp-block-separator is-style-wide is-cnvs-separator-id-1616494215010″>

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

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

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

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

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

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

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

Добавьте заголовок к первой строке:

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

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

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

функция wplb_disable_page_title ($ return) {return false; } add_filter(‘hello_elementor_page_title’, ‘wplb_disable_page_title’);

Мы продолжим…

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

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

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

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

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

Общий стиль

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

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

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

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

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

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

class=»wp-block-separator is-cnvs-separator-id-1616494215057″>

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

Щелчок по значку папки

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

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

Здесь все просто: выбираете нужный шаблон и вставляете его в тело контента. Большинство самых вкусных шаблонов доступны только в версии PRO.

class=»wp-block-separator is-cnvs-separator-id-1616494215064″>

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

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

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

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

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

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

Elementor PRO

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

Купить Elementor Pro на официальном сайте

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

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

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

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

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

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

Создайте шапку сайта (Header) с помощью Elementor PRO

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

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

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

Будет предложено добавить условия отображения. Мы нажимаем «Добавить условие», и, поскольку по умолчанию выбран вариант «Весь сайт», то есть он отображается на всех страницах сайта, мы нажимаем «Сохранить и закрыть». Как вы уже поняли, вы можете создавать и комбинировать различные условия отображения динамических элементов, но это не будет рассматриваться в рамках данного руководства.

Прежде чем продолжить, убедитесь, что вы загрузили свой логотип; если нет, перейдите на вкладку «Внешний вид» → «Настроить» на панели инструментов, выберите вкладку «Свойства сайта» и загрузите свой логотип.
В нашем случае логотип

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

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

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

class=»wp-block-separator is-cnvs-separator-id-1616494215082″>

Как дать комплексному полю id?

• 1 подписчик

• 2 часа назад

• 29 просмотров

0 ответов

• Вордпресс

Средства, среда

Шаблон Elementor WordPress

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

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

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

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

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

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

Что такое Elementor?

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

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

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

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

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

Что такое Elementor PRO

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

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

Да, но вам понадобится «Конструктор тем», который поставляется с Elementor PRO

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

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

class=»wp-block-separator is-cnvs-separator-id-1616494215091″>

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

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

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

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

Спасибо.

0Поделиться0Твитнуть

Как отобразить цену вариативного товара, чтобы она менялась?

• 1 подписчик

• вчера

• 11 посещений

0 ответов

Показать большеЗагрузка…

Вакансии на Хабре Карьера HTML-верстальщик WowVendor $400-$650 PHP-разработчик Fullstack Ivelum $2500-$5000 Менеджер проектов Local Express $2000-$4000 март 2022 17:42 10 000 руб/проект Яндекс Парсер 18 янв марта 2022 в 17:26 3000 руб/проект Делаем простой, но красивый сайт на WordPress 18 марта 2022 в 17:25 5000 руб/за проект Еще заказы

Минуточку внимания

присоединяйтесь к сообществу, чтобы учиться и делиться знаниями Зарегистрироваться Популярное через 24 часа

• Как присвоить координаты объекту?

  • 3 подписчика

  • 0 ответов

• Нужен ли Babel при использовании машинописного текста?

  • 1 подписчик

  • 3 ответа

• Как создать банковскую карту с криптой?

  • 2 подписчика

  • 3 ответа

• Как заставить Swagger OpenAPI работать в Gitlab?

  • 2 подписчика

  • 1 ответ

• Как настроить физический интерфейс несуществующего роутера?

  • 2 подписчика

  • 1 ответ

• Как ускорить шифрование файлов в node-cryptico?

  • 2 подписчика

  • 0 ответов

• Как запустить интернет через клиента (канал VPN в другую сторону)?

  • 2 подписчика

  • 1 ответ

• Как написать html-код в базу данных и правильно его отобразить?

  • 2 подписчика

  • 1 ответ

• Как написать краткий список?

  • 1 подписчик

  • 1 ответ

• Зачем использовать position:fixed; слева: -999999px вместо слева: -100%;?

  • 2 подписчика

  • 0 ответов

• © Хабр

• Об услуге

• Обратная связь

• Блог

Почему не работают кнопки в ACF и при создании нового поля содается поле (no label)?

• 1 подписчик

• 3 часа назад

• 10 посещений

0 ответов

• PHP

• +2 еще

Жесткий

Как загрузить свой плагин на WordPress.org – Настройка TortoiseSVN

Читать

Как сделать select2 в чекауте вместо обычного в списке городов?

• 1 подписчик

• вчера

• 19 посещений

0 ответов

• Вордпресс

Средства, среда

Как создать плагин для WordPress – инструкция и мировая практика

Читать

Как заставить редактор Elementor не резать код?

• 1 подписчик

• вчера

• 10 посещений

0 ответов

• Вордпресс

• +1 еще

Легкий

Как показывать разное количество записей?

• 1 подписчик

• 23 часа назад

• 50 просмотров

ответ 1

• Вордпресс

• +1 еще

Легкий

Сравнение 10-и лучших плагинов для бэкап WordPress или Резервное копирование (backup) для начинающих

Читать

Как создавать последующие сайты для заказчиков?

• 1 подписчик

• 4 часа назад

• 72 просмотра

3 ответа

• Вордпресс

Средства, среда

Как сделать пагинацию на странице поиска (wordpress)?

• 1 подписчик

• 17 часов назад

• 28 просмотров

0 ответов

• Вордпресс

Средства, среда

Как установить и настроить Yoast SEO плагин WordPress – пошаговое руководство 2022

Читать