Главная / Плагины / Кастомизация / Elementor — новый, бесплатный композер страниц
Elementor - новый, бесплатный композер страниц

Elementor — новый, бесплатный композер страниц

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

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

Что такое Elementor?

Elementor – это «drag and drop» конструктор страниц, который позволяет создавать отзывчивые макеты страниц, используя «живой» интерфейс редактирования, благодаря которому вы сможете сразу же видеть внесенные изменения. Включены такие продвинутые функции, как parallax-прокрутка, фоновые изображения для широкого макета, продвинутые кнопки, кастомные заголовки и т.д.

Самое большое преимущество Elementor заключается в быстроте и простоте его использования.

Основные функции

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

Elementor -05

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

Новая чистая страница с включенным Elementor выглядит так.

Elementor -01

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

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

Настройка шаблона

Elementor дает вам стартовую секцию для построения собственного дизайна – одну колонку во всю ширину экрана, которую вы можете удалить, кликнув на секцию, а потом на кнопку ‘X’. Если вам нужно добавить новую колонку, просто кликните на кнопку ADD NEW SECTION и выберете желаемое количество колонок из 12 заранее заготовленных структур, которые находятся в диапазоне от 1 до 10 колонок.

Elementor -02

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

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

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

Виджеты Elementor

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

Elementor -03

Виджеты Elementor включают такие стандартные виджеты, как заголовки, картинки, текст, видео, кнопки и другие, а также более специфичные: счетчики, виджет Google Maps и HTML-виджет, шкалы отсчета и многое другое. К сожалению, нет виджета с ценниками, но разработчики планируют создание виджета социальных сетей, аудио-виджета и виджета цитат.

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

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

2016-08-19_14-14-17

Привью адаптивного дизайна

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

Elementor -04

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

Другое

Elementor работает практически с любой темой. Построить кастомный макет невероятно просто, интуитивно и быстро. Виджеты добавляются очень быстро – перетащил, настроил и все сразу появилось визуально! Стоит упомянуть, что есть поддержка RTL-тем. Elementor уже переведен на некоторые языки, да и другие на очереди (правда, перевода на русский пока нет).

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

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

В итоге

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

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

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

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

Официальный сайт

Страница в репозитории WP

Тоже интересно!

Роли пользователей WordPress - лучшие плагины

Роли пользователей WordPress — лучшие плагины

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

10 комментариев

  1. Вениамин

    Тестил Elementor, очень-очень хорош. Как и Beaver Builder не засирает страницу шорткодами и работает с любой темой. Лично мне виджетов вполне хватает — достаточно сбалансированный набор — то, что реально надо в работе. Если добавят некоторый функционал, связанный с настройкой адаптивности и прочего, можно переходить на него, как на основной конструктор. Ну а до тех пор я с бобра не слезу.

  2. Алексей

    Вставлю и я свои пять копеек. Некоторое время тестировал этот конструктор, чтобы понять чем он лучше или хуже того же «пэйдж билдера». В итоге, заметил следующее. Плюсы — 1. Как и сказано выше, это полностью бесплатный конструктор. 2. Быстрота легкость конструирования — все наглядно и понятно. 3. Действительно может встраиваться в любую тему, но только в пределах участка контента, а не всего макеты темы. Но это и понятно, так как все же ELEMENTOR это прежде всего конструктор контента, а не кастомизатор тем.
    Что каксается минусов? Они тоже есть… Из того, что я заметил:
    1. Если вы решите использовать ЭЛЕМЕНТОР на странице с многоязычным контентом, то для этого подойдут только плагины «WPML» или «Polylang» об этом пишут сами разработчики. При этом плагин «WPML» является платным. Я пробовал использовать мой любимый «Qtranslate X», к сожалению, он не подошел. Справедливости ради он также не подходит и для «Пэйдж билдера».
    А рекомендуемый бесплатный «Polylang» хоть и похож на «Qtranslate X», но все же намного заковырестее и неудобнее в смысле юзабельности.
    2. Не знаю, с чем это связано, но если открывать тестируемый сайт в браузере САФАРИ, то весь шаблон выстроенный в ЭЛЕМЕНТОРЕ почему то ломается — выстраивая все блоки в один ряд по вертикали, пробовал на разных темах и на разных устройствах — картина одна эта же — САФАРИ не дружит с ЭЛЕМЕНТОРОМ. Если у кого то все нормально — отпишитесь…
    3. Еще один минус, который я успел выловить. Если вы решите использовать виджет «ТАБЫ», то можете столкнуться вот с такой проблемой. Например, я использовал табы в качестве отображения гугл таблиц. Вставляемый iframe код мог через какое то время не отображать таблицу, что было крайне печально, то есть, представьте себе, что у вас около десятка таблиц и приходится постоянно мониторить настройки табов, чтобы убедиться — отображается ли таблица или нет. Это крайне выматывает и отбирает кучу времени. Наверное, если бы в табах был обычный текст — такой проблемы бы не было. К тому же, в «пэйдж билдере» с этим проблем нет — все отображается нормально.

    В итоге, ЭЛЕМЕНТОР не плох, даже очень не плох, и вышеописанные минусы, надеюсь будут пофиксены разработчиками в следующих обновлениях.

  3. Dmitry

    Спасибо за замечания. Уверен, многим пригодятся.

  4. Александр

    Добрый день!
    Хочу так же внести свою лепту в отзывы по Елементору. Я работал практически на всех билдерах. Но этот самый быстрый. Даже чуть лучше чем платный Visual page Builder. Плагинов и аддонов пока для него маловато, но он подтягивает плагины сторонние. Не все они нормально работают, но 80% которые я втыкал в него, он затащил.
    Для красивой визуализации не хватает немного тем тех же табов, нет flipBox’ов и других интересностей. Так же не совсем расширена анимация, но даже ее в принципе хватает.
    В целом, он однозначно шире и лучше PageBuilder от Origin, В чем то чуток лучше Бобра, и уж точно не хуже Vusial Page Builder’a. Пока уступает лишь в виджетах (аддонах) всеми любимому Visual. В остальном: Скорость, простота, кастомизация вывод готового продукта — он лучше. Разработчику бы подправить дела с представлениями для мобильного контента, но думаю если поиграться со сторонними плагинами и настройками, может что то и получиться.

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

  5. Dmitry

    И кстати, перевод на русский «в процессе» на https://translate.wordpress.org/projects/wp-plugins/elementor

  6. Александр

    Я честно говоря тоже бы помог. Попробую связаться с разработчиком.
    К стати сегодня пообщался с KingComposer, Live Composer и другими мелкими издателями подобного ПО. Могу с полной ответственностью сказать, что Elementor и Visual Composer действительно — ЛУЧШИЕ. Очень надеюсь что Elementor будет всегда бесплатным.

    • Сергей

      VC хорош,но не самый лучший.Я юзаю не менее достойный лицензионный Themify Builder и комплектом(22штуки на сегодня) премиум-аддонов к нему.А ведь наверняка есть и ещё конструкторы,может даже лучше VC — это как в анекдоте про суслика,которого не видят, а он есть:))

      • Вениамин

        Полностью согласен, а про суслика не в бровь а в глаз прямо. Многие, наверное даже и не догадываются о существовании Themify Builder (очень хороший билдер, кстати). VC, как и многое, что попадает на envato, просто хорошо пиарится, что вовсе не означает что продукт высокого качества и на передовой технологий и все такое. VC был актуален, скажем, несколько лет назад. Но он, концептуально не меняется, а мир, технологии и предпочтения пользователей меняются. Сейчас это позавчерашний день.

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

        После нескольких тестов, все таки решился сверстать ленд в Elementor для одного из клиентов (плюсы немного перевесили минусы :)). Верстка не блочная (как большинство темплейтов на темфоресте), нестандартная. В общем, сделал два экрана, после чего обнаружил, что первый экран полностью поломан — все разъехалось как попало. Бред какой-то. Зашел почитать вопросы, которые задают в поддержку на сайте вордпресс, так вот насколько я понял буржуйский, в своей проблеме я совсем не одинок. Печаль. В общем, я снес это все дело к ядренее фене и сверстал ленд на бобре. Вот такой у меня опыт с единственным конструктором, который — не смотря на свои минусы — довольно близко подошел, пускай не к идеалу, но стандарту (на момент 2016г. :))

  7. Александр

    Коллеги, подскажите пожалуйста, есть ли Elementor плагин флипБокса или что нибудь из серии flip. Пытался прикрутить сторонний от CodeSight но не пошло чуток.

  8. А не подскажите как выводить его в рубриках?

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

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