Elementor — новый, бесплатный композер страниц
Приветствую. Конструкторы страниц очень популярны сегодня. Да, вы и сами знаете. Ведь они позволяют людям, которые не умеют работать с кодом легко создать собственный уникальный сайт, не вкладывая в это больших денег и много времени.
Elementor – совершенно новый и очень интересный плагин — композер о котором мы сегодня и поговорим.
Что такое Elementor?
Elementor – это «drag and drop» конструктор страниц, который позволяет создавать отзывчивые макеты страниц, используя «живой» интерфейс редактирования, благодаря которому вы сможете сразу же видеть внесенные изменения. Включены такие продвинутые функции, как parallax-прокрутка, фоновые изображения для широкого макета, продвинутые кнопки, кастомные заголовки и т.д.
Самое большое преимущество Elementor заключается в быстроте и простоте его использования.
Основные функции
После установки и активации плагина, мы видим, что панель настроек очень проста и предлагает вам возможность установить типы записей, которые вы хотите использовать, а также пересмотреть пользовательские роли и шрифты, которые используются по умолчанию.
Настроив все это, вы увидите кнопку Elementor на любой странице или записи, которая подходит под указанные ранее типы записей. Кликните на эту кнопку, и откроется интерфейс Elementor, с которым вы и будете в дальнейшем работать.
Новая чистая страница с включенным Elementor выглядит так.
Как видите, вы можете работать с макетом страницы и видеть изменения, которые вносите: все происходит в режиме реального времени. Нет необходимости переключаться туда-сюда между фронтендом и бэкендом.
После того, как Elementor загрузился на странице, которую вы редактируете, вы можете настроить такие вещи, как шрифты или цвета. Здесь также есть несколько настроек, появление которых только ожидается.
Настройка шаблона
Elementor дает вам стартовую секцию для построения собственного дизайна – одну колонку во всю ширину экрана, которую вы можете удалить, кликнув на секцию, а потом на кнопку ‘X’. Если вам нужно добавить новую колонку, просто кликните на кнопку ADD NEW SECTION и выберете желаемое количество колонок из 12 заранее заготовленных структур, которые находятся в диапазоне от 1 до 10 колонок.
Вы можете добавить столько секций, сколько захотите. Каждая секция состоит из колонок, в которые вы можете помещать контент вашего макета.
Вы можете с легкостью изменять размер колонок. Ширину определенной колонки можно изменять, перетаскивая стрелку между двумя колонками. Кликнув на какую-либо колонку, вы можете создать ее дубликат, добавить новую колонку или удалить ее. Рисайзинг проходит очень плавно.
Кликнув на настройки определенной секции, вы можете изменить макет с коробочного на широкий, добавить вертикальные отступы между колонками, задать цвет фона и многое другое.
Виджеты Elementor
Если вы закончили работу со структурой макета, вы можете приступить к добавлению виджетов. Виджеты – это строительные кирпичики вашего дизайна. Их можно легко добавлять, перетаскивая из левосторонней панели в желаемую секцию и колонку. Сейчас Elementor предлагает 24 виджета, плюс вы можете добавить любой дефолтный WordPress-виджет. И если вы используете плагины, которые идут с собственными виджетами, например, WooCommerce, то можете также работать и с этими виджетами. Elementor прекрасно дружит и с другими плагинами.
Виджеты Elementor включают такие стандартные виджеты, как заголовки, картинки, текст, видео, кнопки и другие, а также более специфичные: счетчики, виджет Google Maps и HTML-виджет, шкалы отсчета и многое другое. К сожалению, нет виджета с ценниками, но разработчики планируют создание виджета социальных сетей, аудио-виджета и виджета цитат.
Elementor дает нам кучу опции для редактирования каждого виджета. После добавления виджета, вы можете изменить его информацию, стиль, отступ и выравнивание.
Elementor также позволяет вам контролировать отзывчивость определенных виджетов и входные кастомные настройки мобильного дизайна. Даже более того, вы можете выбирать, какие виджеты показать, а какие скрыть, основываясь на системе пользователя, и установив опции для настольных компьютеров, мобильных и планшетов.
Привью адаптивного дизайна
Вы можете сразу же увидеть, как смотрится то, что вы создали, на экранах различных девайсов.
Elementor включает пресеты для настольного компьютера, ноутбука, планшета и телефонов. Если вы кликните на эти опции, вы сможете отредактировать ваш сайт в режиме реального времена с расчетом на определенный девайс.
Другое
Elementor работает практически с любой темой. Построить кастомный макет невероятно просто, интуитивно и быстро. Виджеты добавляются очень быстро – перетащил, настроил и все сразу появилось визуально! Стоит упомянуть, что есть поддержка RTL-тем. Elementor уже переведен на некоторые языки, да и другие на очереди (правда, перевода на русский пока нет).
В отличие от других подобных плагинов, Elementor — совершенно бесплатное расширение, и его можно скачать из официального хранилища, при том функциональность плагина никак не ограничена. Для плагина не существует платных аддонов, и все функции вы можете использовать абсолютно бесплатно.
Elementor – продукт с открытым исходным кодом. Разработчики планируют выпускать дополнительные виджеты и функции каждую неделю. Плагин также предлагает документацию, но стоит учитывать, что она довольно скудная на данный момент.
В итоге
Можно сказать, что Elementor – это один из самых интересных бесплатных плагинов конструкторов/композеров страниц. Виджеты, включенные в Elementor, дают довольно базовые функции, но они покрывают основные нужды большинства людей.
Особенно примечательно в этом плагине то, как он работает с отзывчивым дизайном. Вы можете контролировать секции и виджеты, а также сразу же видеть плоды своих трудов, и это действительно делает работу с отзывчивым дизайном очень простой.
Среди больших плюсов плагина стоит упомянуть, что если вы отключите плагин, он не оставит вашу страницу замусоренной шорткодами, а повторное включение плагина не испортит макет, который вы уже построили. Если говорить о минусах плагина, то ассортимент доступных виджетов пока не очень богатый, но это не удивительно в случае нового плагина.
Еще один минус заключается в том, что если ваша активная тема не поддерживает широкий макет, то Elementor не может переписать ее макет по умолчанию. Тут вам придется немного углубиться в код или использовать дочернюю тему. Если вы не хотите использовать дочернюю тему, то в документации есть информация о том, как изменить файлы вашей темы, если та не поддерживает широкий макет изначально.
Тестил Elementor, очень-очень хорош. Как и Beaver Builder не засирает страницу шорткодами и работает с любой темой. Лично мне виджетов вполне хватает — достаточно сбалансированный набор — то, что реально надо в работе. Если добавят некоторый функционал, связанный с настройкой адаптивности и прочего, можно переходить на него, как на основной конструктор. Ну а до тех пор я с бобра не слезу.
Вениамин, поясните, пожалуйста, что это за «Бобёр» такой?!
Beaver Builder
Здравствуйте, создан сайт с помощью WP Bakery могу ли я как-то перейти без потерь на ELEMENTOR?? Т.е. часть страниц будет создано с помощью WP Bakery, а часть на ELEMENTOR. И нужно так чтобы при установке ELEMENTOR ничего не потерялось))) ПОМОГИТЕ ПОЖАЛУЙСТА)
Вставлю и я свои пять копеек. Некоторое время тестировал этот конструктор, чтобы понять чем он лучше или хуже того же «пэйдж билдера». В итоге, заметил следующее. Плюсы — 1. Как и сказано выше, это полностью бесплатный конструктор. 2. Быстрота легкость конструирования — все наглядно и понятно. 3. Действительно может встраиваться в любую тему, но только в пределах участка контента, а не всего макеты темы. Но это и понятно, так как все же ELEMENTOR это прежде всего конструктор контента, а не кастомизатор тем.
Что каксается минусов? Они тоже есть… Из того, что я заметил:
1. Если вы решите использовать ЭЛЕМЕНТОР на странице с многоязычным контентом, то для этого подойдут только плагины «WPML» или «Polylang» об этом пишут сами разработчики. При этом плагин «WPML» является платным. Я пробовал использовать мой любимый «Qtranslate X», к сожалению, он не подошел. Справедливости ради он также не подходит и для «Пэйдж билдера».
А рекомендуемый бесплатный «Polylang» хоть и похож на «Qtranslate X», но все же намного заковырестее и неудобнее в смысле юзабельности.
2. Не знаю, с чем это связано, но если открывать тестируемый сайт в браузере САФАРИ, то весь шаблон выстроенный в ЭЛЕМЕНТОРЕ почему то ломается — выстраивая все блоки в один ряд по вертикали, пробовал на разных темах и на разных устройствах — картина одна эта же — САФАРИ не дружит с ЭЛЕМЕНТОРОМ. Если у кого то все нормально — отпишитесь…
3. Еще один минус, который я успел выловить. Если вы решите использовать виджет «ТАБЫ», то можете столкнуться вот с такой проблемой. Например, я использовал табы в качестве отображения гугл таблиц. Вставляемый iframe код мог через какое то время не отображать таблицу, что было крайне печально, то есть, представьте себе, что у вас около десятка таблиц и приходится постоянно мониторить настройки табов, чтобы убедиться — отображается ли таблица или нет. Это крайне выматывает и отбирает кучу времени. Наверное, если бы в табах был обычный текст — такой проблемы бы не было. К тому же, в «пэйдж билдере» с этим проблем нет — все отображается нормально.
В итоге, ЭЛЕМЕНТОР не плох, даже очень не плох, и вышеописанные минусы, надеюсь будут пофиксены разработчиками в следующих обновлениях.
Тёска привет.
Развёрнуто и очень конструктивно. Честно говоря пока и полиланг не могу настроить. Если сделаешь какой то обзор, то будешь первым кто выложил видео в этом направлении (мултиязычность с полиланг на элементоре)
Спустя эти два года (после моего последнего комментария) Elementor значительно прокачался, особенно в связке с версией PRO. Все описанные мною минусы давно уже пофиксены и теперь работать с Elementor одно удовольствие. Практически все задачи можно решить, даже тему они свою рекомендуют и можно вообще все кастомизировать, включая хедер и футер, а на подходе будет еще и встроенный редактор woocommerce. А по поводу плагина Polylang, то спустя время я изменил свое мнение о нем и теперь считаю его лучшим среди подобных (имею ввиду бесплатную версию) И проблем с Polylang в связке с Elementor нет вообще никаких — работает как часы. А по поводу обзора , увы это не мое… Может, кто другой?
Огромное тебе спасибо. А то я уже начал сдаваться ) Внёс позитивную ноту!!! Если вдруг увидишь что нибудь в сети, скинь сюда пожалуйста. а то уже вторые сутки с настройками борюсь. Если быть конкретнее, то не дублирует страницу. Если дублирует, то не находит её.
Так или иначе, огромное спасибо
Спасибо за замечания. Уверен, многим пригодятся.
Добрый день!
Хочу так же внести свою лепту в отзывы по Елементору. Я работал практически на всех билдерах. Но этот самый быстрый. Даже чуть лучше чем платный Visual page Builder. Плагинов и аддонов пока для него маловато, но он подтягивает плагины сторонние. Не все они нормально работают, но 80% которые я втыкал в него, он затащил.
Для красивой визуализации не хватает немного тем тех же табов, нет flipBox’ов и других интересностей. Так же не совсем расширена анимация, но даже ее в принципе хватает.
В целом, он однозначно шире и лучше PageBuilder от Origin, В чем то чуток лучше Бобра, и уж точно не хуже Vusial Page Builder’a. Пока уступает лишь в виджетах (аддонах) всеми любимому Visual. В остальном: Скорость, простота, кастомизация вывод готового продукта — он лучше. Разработчику бы подправить дела с представлениями для мобильного контента, но думаю если поиграться со сторонними плагинами и настройками, может что то и получиться.
Надеюсь разработчики воспримут немного критики в адрес своего продукта и поправят их. А так же будем надеяться что он не станет платным, ибо это на текущий момент реально лучший бесплатный билдер для страниц.
Александр, что это за «Бобёр» такой?)
И кстати, перевод на русский «в процессе» на https://translate.wordpress.org/projects/wp-plugins/elementor
Я честно говоря тоже бы помог. Попробую связаться с разработчиком.
К стати сегодня пообщался с KingComposer, Live Composer и другими мелкими издателями подобного ПО. Могу с полной ответственностью сказать, что Elementor и Visual Composer действительно — ЛУЧШИЕ. Очень надеюсь что Elementor будет всегда бесплатным.
VC хорош,но не самый лучший.Я юзаю не менее достойный лицензионный Themify Builder и комплектом(22штуки на сегодня) премиум-аддонов к нему.А ведь наверняка есть и ещё конструкторы,может даже лучше VC — это как в анекдоте про суслика,которого не видят, а он есть:))
Полностью согласен, а про суслика не в бровь а в глаз прямо. Многие, наверное даже и не догадываются о существовании Themify Builder (очень хороший билдер, кстати). VC, как и многое, что попадает на envato, просто хорошо пиарится, что вовсе не означает что продукт высокого качества и на передовой технологий и все такое. VC был актуален, скажем, несколько лет назад. Но он, концептуально не меняется, а мир, технологии и предпочтения пользователей меняются. Сейчас это позавчерашний день.
Привычка дело сильная, сам с VC в свое время слезал весьма неохотно, но потом был бесконечно счастлив, что сделал это. Сам вначале тестил бесплатную версию бобра — не понравился он мне — а потом, как поюзал платную, то просто прозрел, насколько она отличается от бесплатной. Сейчас, на мой взгляд, билдер основанный на шорткодах и у которого нет удобного front and режима с возможностью редактировать в том числе планшетную и мобильную версию вообще преступление запускать на рынок и брать с людей еще и деньги. Но таковых сейчас большинство, что сильно огорчает.
После нескольких тестов, все таки решился сверстать ленд в Elementor для одного из клиентов (плюсы немного перевесили минусы :)). Верстка не блочная (как большинство темплейтов на темфоресте), нестандартная. В общем, сделал два экрана, после чего обнаружил, что первый экран полностью поломан — все разъехалось как попало. Бред какой-то. Зашел почитать вопросы, которые задают в поддержку на сайте вордпресс, так вот насколько я понял буржуйский, в своей проблеме я совсем не одинок. Печаль. В общем, я снес это все дело к ядренее фене и сверстал ленд на бобре. Вот такой у меня опыт с единственным конструктором, который — не смотря на свои минусы — довольно близко подошел, пускай не к идеалу, но стандарту (на момент 2016г. :))
Коллеги, подскажите пожалуйста, есть ли Elementor плагин флипБокса или что нибудь из серии flip. Пытался прикрутить сторонний от CodeSight но не пошло чуток.
А не подскажите как выводить его в рубриках?
Подскажите, а Гугл видит контент, размещенный с помощью Elementor? У меня в гугл-вэбмастере ругается на такие страницы((( Что делать?
Подскажите пожалуйста какую тему мне использовать, чтобы этот плагин работал корректно. Хочу, чтобы в правой стороне отображалось окно предпросмотра. Перепробовал несколько тем, ни одна не подошла.
Автор утверждает о совместимости с большинством тем. Лучше уточнять у него (ссылка есть выше).
Лучше всего тема Astra, OceanWP и GeneralPress. Astra самая быстрая!
Вопрос. Как там дела с кодом будут после такого плагина? Жуть? Как такой сайт в дальнейшем индексироваться будет, можно ли его продвигать по SEO? Какие в коде после такого «движка» метки остануться — wordpress? Или любой сеошник посмотрит и скажет у вас сайт на каком то неизвестном констурктор-плагине типа и я его двигать не буду и ниче не гаранитррую и бла бла. Понятно что круто, снял хостинг, поставил на него вордпрес, скачал и установил в него плагин елементор, или любой другой драг энд дроп редактор к примеру visual composer, motopress и сидишь дизайном занимаешься чисто рисуешь…
Все будет в полном порядке при одном условии — если ваш сайт интересен читателю. Независимо от инструментов с помощью которых он создан. Но если вы делаете сайт для поисковых машин и сеошников, тогда конечно, стоит прислушиваться к их мнению.
Коллеги, подскажите пожалуйста. Купил платную версию этого плагина и собрал без каких-либо проблем отдельную страницу лендинг на своем сайте. Но через месяц, когда понадобилось чуть отредактировать, не смог удалить ненужные блоки. Просто отсутствуют некоторые элементы управления и редактирования блоков. В чем может быть проблема?
добрый день!
подскажите, как сделать, чтобы текст был под фото?
использую 2 колонки. 1- для текста. 2- для фото. в этом случает текста под фото нет.
если использовать 1 колонку для текста.
и в колонке для текста вставить фото, то текст под фото есть.
но в текстовом редакторе нет функций для фото (анимация, рамки, слайдер, и т.д. ).
как использовать 2 колонки (1- текстовой редактор и 2- редактор для фото) чтобы текст был под фото?
https://prnt.sc/joe1jd
добрый день!
в текстовом редакторе элементор пропали функции вставить анимацию на картинку, шорткод, кнопку. Редактировать фото (обвести рамкой и т.п.)
я помню, что раньше можно было сделать анимацию, вставить шорткод и кнопки и другие функции в текстовом редакторе еlеmеtntor.
Я давно не пользовалась, но по моему, такие функции в редакторе елементора были. а теперь их нет.
я что-то сделала с плагином или сайтом или так действительно нельзя?
в редакторе вордпресса все эти функции есть.
в виджете список с иконками не работают шрифты. у меня на старнице ариал, а в виджете тока new roman с засечками. как изменить шрифт в виджете чтобы сопадал со шрифтом на странице?
Можно изменить стили css для данного виджета и указать там свойство font-family
это там где версия ПРО ? у меня не ПРО . и невозможно внести стиль. есть другой вариант?