Techbear
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.
Elementor — это визуальный конструктор страниц, который появился в 2016 году и быстро получил популярность.
В начале 2024 года Элементор — самый популярный плагин в репозитории Вордпресс.
С его помощью вы можете создавать страницы, шаблоны страниц, в том числе WooCommerce, и редактировать стили без необходимости работать с кодом.
Elementor превращает создание красивого и сложного сайта из того, что раньше делали программисты в то, что может делать каждый.
В этом обзоре вы узнаете как пользоваться Элементором, что его отличает от других пейдж-билдеров и почему он стал таким популярным.
Содержание:
Что сделало Элементор популярным
В сообществе Вордпресс существует множество конструкторов страниц, которые предлагают визуальный драг-энд-дроп интерфейс, но Элементор предлагает больше, чем его главные конкуренты — DIVI, Beaver Builder и ThriveArchitect.
По сравнению с другими конструкторами страниц, интерфейс Элементора один из самых удачных.
Сразу после установки понятно, как им пользоваться, как редактировать страницу, как создать новую. Более глубокие настройки находятся там, где ожидаешь их увидеть.
Интерфейс Элементора прост и эффективен. Элементы интерфейса такие, как должны быть, — достаточного размера, быстро появляются при нажатии или наведении, не отвлекают внимание, но всегда под рукой. Лаконичность интерфейса — большой плюс Элементора.
Иногда редактор Элементора довольно долго загружает страницу, — 10-15 секунд. Обычно проблема в скорости соединения или в нагруженности самой страницы.
После того, как страница загрузилась, все работает сразу. Вы перетаскиваете виджеты, делаете настройки и не ждете, пока что-то загрузится.
Виджеты Элементора сгруппированы по смыслу и самые часто используемые виджеты находятся вверху списка. Настройки виджетов находятся в сайдбаре, для их редактирования не нужно открывать дополнительные окна:
В этом пейдж-билдере приходится постоянно открывать дополнительные окна, и виджеты расположены случайным образом:
Интерфейс Элементора работает достаточно быстро и не имеет всплывающих окон, поэтому работа с ним тоже проходит быстро.
Кроме удобного интерфейса, у Элементора есть несколько инструментов, которые помогают работать быстрее:
В Элементоре работает правая кнопка мыши. Вы можете дублировать элементы, копировать и вставлять элементы или стили, открывать Навигатор, и другие функции:
Навигатор — очень удобная функция. Например, если один элемент находится под другим, то вы можете выбрать этот элемент в Навигаторе и открыть его настройки в сайдбаре.
Навигатор вызывается в меню правой кнопкой или в нижнем баре:
Elementor хранит историю последних действий, которой можно пользоваться двумя способами.
Нажмите кнопку История и выберите действие, на которое хотите вернуться.
Или нажмите кнопку Редакции и выберите одну из сохраненных ранее версий страницы.
Для отмены последнего действия используйте комбинацию кнопок Ctrl+z.
Для поиска виджетов вы можете использовать окно поиска:
Для поиска ваших страниц, блоков или шаблонов используйте Finder:
Вы можете редактировать текст прямо в текстовых виджетах:
Иногда текст удобно редактировать в Настройках, иногда прямо на странице, вы можете использовать любой из этих способов.
Адаптивный дизайн страниц — обязательное условие для любой темы и пейдж-билдера. Все блоки, страницы или шаблоны, которые вы делаете в Элементоре, по умолчанию адаптивные.
Если вы хотите посмотреть, как будет выглядеть ваша страница или шаблон на планшете или смартфоне, переключитесь в мобильный режим в настройках виджета или на нижнем баре.
Вы можете настроить разные стили элементов для разных устройств, например, разный размер шрифта или разные отступы для десктопов и смартфонов.
Кроме этого, вы можете отключить показ любого элемента на любом устройстве.
Например, у вас большой слайдер на Главной странице, который вы не хотите показывать на мобильной версии. Вместо него вы можете показывать картинку с текстом.
Отключите показ слайдера на мобильных устройствах, создайте еще одну секцию с нужным контентом для смартфонов и отключите показ этой секции для десктопов.
Хотя у Элементора довольно много инструментов для создания страниц с нуля, вам не нужно это делать каждый раз. Даже в бесплатной версии Элементора в библиотеке есть готовые Блоки и Страницы.
В библиотеке шаблонов находится довольно много готовых шаблонов, которые вы можете загрузить с помощью нескольких кликов:
Кроме встроенных шаблонов Элементора вы можете загрузить шаблоны других разработчиков.
Ну и конечно вы можете сохранить в библиотеке свои шаблоны и использовать их позже.
Последний большой плюс Элементора в том, что для него написано множество расширений, которые увеличивают возможности бесплатной (и платной) версии.
Разработчики Элементора оставили возможность другим разработчикам писать дополнения для Элементора.
Некоторые из них, например, Crocoblock имеют даже больший функционал, чем Elementor Pro.
Для отображения своих виджетов Элементор не использует шорткоды. Если однажды вы решите удалить Элементор, он не оставит после себя шорткоды, как например DIVI или WPBakery. Ваш контент останется на странице, но стили пропадут.
В конце мая 2020 года у Элементора более 5 млн. установок, и он входит в Топ-10 самых популярных плагинов Вордпресс.
Я думаю, что Элементор стал таким популярным благодаря этому:
Реклама
Простой способ выгодно купить полис
Если вы хотите создать несколько страниц на сайте или делать несложные лендинги, то бесплатной версии Элементора должно быть достаточно.
В платной версии, которая стоит 49$ / год за 1 сайт, вы получите еще больше:
Крутая функция в Elementor Pro — конструктор темы. С его помощью вы можете создать собственную тему.
Перейдите Elementor — Шаблоны — Конструктор темы. Выберите, какую часть темы вы хотите создать:
Создайте новый шаблон с помощью виджетов Элементора, выберите, на каких страницах вы хотите использовать этот шаблон и нажмите Сохранить.
В версии 2.9.4 вы можете создать 9 шаблонов:
Вы можете создать любое количество шаблонов и назначить их на любое количество страниц. То есть, вы можете, например, для каждого Товара WooCommerce создать отдельный шаблон карточки товара.
Если вы хотите создать все шаблоны самостоятельно, используйте минималистичную тему Элементора Hello, в которой практически ничего нет.
Или вы можете использовать другую собственную премиум-тему Элементора Layers, которую вы получите бесплатно вместе с покупкой любой Pro лицензии.
Вторая крутая функция в Elementor Pro — использование динамических тегов.
С их помощью вы можете выводить любые переменные сайта или кастомные поля всех популярных плагинов.
Пример вывода информации о посетителе.
Еще один способ применения динамических тегов — вывод информации из кастомных полей плагинов Advanced Custom Fields, JetEngine, PODS.
И при создании различных шаблонов для вывода контента.
В версии Pro добавляется более 30 дополнительных виджетов, которые могут заменить множество плагинов.
Часто используемые виджеты:
И динамические виджеты для создания шаблонов.
Иногда вам нужно использовать один виджет на нескольких страницах, например, форму подписки.
С помощью глобального виджета вы можете:
Вы можете создать шаблон со своим контентом и сохранить как Поп-ап. Elementor — Шаблоны — Попапы. В настройках укажите условия отображения:
Если вы купите Elementor Pro, вы получите все блоки и шаблоны в библиотеке. Шаблоны Pro обычно сложнее и более детально проработаны.
В версии 2.9.4 в библиотеке доступно около 200 шаблонов.
У Элементора по умолчанию есть интеграция со множеством сервисов.
Если вы пользуетесь каким-либо из этих сервисов, вы можете использовать стандартные виджеты Элементора для подключения или использования этих сервисов.
Подключение к сервисам находится в разделе Настройки — Интеграции.
Вы можете запретить любой роли редактировать шаблоны, или разрешить доступ только к редактированию контента:
В Elementor Pro вы можете загрузить свои собственные шрифты и иконки:
Лайфхак: В бесплатной версии Элементора вы можете добавить кастомные шрифты с помощью плагина Custom Fonts.
Если у вас тема Astra, этот плагин добавит шрифты в тему и в Элементор. Если у вас другая тема, этот плагин добавит шрифты только в Элементор.
В версии Pro все шаблоны, которые вы создаете, имеют шорткод. Вы можете вставить этот шорткод в любое место сайта для отображения содержимого шаблона:
Это очень удобная функция, которой нет в бесплатной версии.
Хотя это очень полезная функция, я вынес ее в конец списка, потому что в бесплатной версии вы можете использовать плагины Piotnet Addons for Elementor, Elementor – Header, Footer & Blocks или AnyWhere Elementor, которые добавляют шорткоды шаблонам. Лайфхак.
В Elementor Pro у каждого виджета в разделе Расширенные становится доступен Custom CSS. С его помощью вы можете добавлять собственный css.
Это тоже очень полезная функция, но она находится в конце списка, потому что для нее тоже есть лайфхак: в бесплатной версии вы можете пользоваться виджетом HTML-код:
Если вы хотите использовать собственный класс, вы можете назначить его в настройках виджета Расширенные — CSS ID:
И так же использовать виджет HTML-код для добавления своих стилей.
Элементор — это конструктор для создания практически любого сайта.
Лицензия на 1 сайт стоит 49$ / год, примерно столько же стоит лицензия на хорошую тему.
Если вам не нравится Гутенберг, и идея фронт-энд конструктора вам подходит, то Элементор — хороший выбор. Версия Pro может заменить тему и работать хорошо.
Если вам понравился Элементор, вы можете его купить на официальном сайте разработчика.
Читайте также:
Надеюсь, статья была полезна. Оставляйте комментарии.
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.