Создаем сайт и подключаем Elementor
В продолжение цикла статей о CMS WordPress не могу обойти вниманием замечательный плагин “Elementor”. Для начала немного предыстории. Во времена, когда WP и ему подобные движки только зарождались, начинающие разработчики сайтов часто использовали WYSIWYG (What You See Is What You Get - “что видишь, то и получишь”) редакторы. Эти программы позволяли создавать довольно сложную верстку за счет свободного позиционирования блоков. Далеко не всегда эта верстка была ровной, но, как правило, что-то получалось. Конечно же, это были не CMS. На выходе получался "голый" HTML и CSS. Обновлялось это через исходники в самой программе, и каждый раз приходилось перезаливать новые файлы на хостинг. Естественно речи о PHP и взаимодействии с базами данных не шло в принципе, да и html знать было не обязательно.
Потом об этих редакторах резко забыли, т.к. пришло время динамических сайтов, более сложного функционала и т.д. Частично визуальное редактирование перекочевало в online-платформы типа нынешнего “Wix”, где для привлечения максимального количества клиентов нужно было делать все максимально просто. Но с переходом на HTML5 и СSS3, галопирующим развитием JS (и в особенности JQuery и Ajax), элементы “WYSIWYG“ стали проникать во многие приложения. Все это в целом соответствовало парадигме повышения “юзабильности” интерфейсов и делало их оригинальными и интуитивно понятными для пользователей. И, действительно, это же очень удобно – взял и перетащил!
Но мы совсем отвлеклись от WordPress и темы этой статьи. Итак, что же такое “Elementor”? А это самый популярный плагин-конструктор для создания лендинг-сайтов и страниц со сложной версткой на платформе WordPress. Все это просто устанавливается и имеет удобный интерфейс, работающий по принципу “WYSIWYG“. Сначала создается произвольная сетка, а потом методом перетаскивания в нее интегрируются все необходимые элементы оформления, которых “из коробки” уже довольно много. Собственно все, но есть и нюансы, которые следует учитывать:
- “Elementor” перехватывает и по сути отключает стандартный редактор WP для выбранной страницы, поэтому Вам сразу стоит определиться в чем будете работать. Если выбор пал на “Elementor”, обратите внимание на опцию выбора шаблона страницы, как правило, там будет несколько вариантов отображения макета по ширине, обязательно попробуйте полноэкранный шаблон (на всю ширину).
- Не все темы WordPress поддерживают использование “Elementor”, поэтому, советую заранее посмотреть описание шаблона. На момент создания статьи наиболее популярными темами под этот конструктор являются: “Astra”, “GeneratePress”, “OceanWp”. Безусловно, это далеко не полный список, который можно расширить практически любой премиум темой. На пример, тема “Divi” даже имеет свой собственный конструктор “Divi Builder”. Также есть и аналогичные конкурирующие продукты: “Beaver Builder ”, “Page Builder (от Site Origin)”. Но на данный момент лидерство остается за “Elementor”. В нем, кстати, есть и собственные шаблоны, которые в отдельных случаях помогают сэкономить время. В остальных ситуациях можно дублировать уже настроенные повторяющиеся блоки. Существует ряд плагинов, расширяющих и без того не малые возможности “Elementor”. Как правило, это дополнение визуальных фишек оформления и синхронизация с другими популярными плагинами, например с Contact Form 7 (мощный конструктор форм для сайта на WP). Все это стоит попробовать на практике.
- Плагин содержит практически полные настройки всего, что можно вставить на страницу с его помощью. Там почти нет лишних опций. Каждая кнопочка и галочка помогает кастомизировать создаваемую страницу по Вашему желанию. И если какая-то настройка вдруг не нашлось, поищите внимательнее – она там скорее всего есть. Но помните, что “Elementor” отвечает только за свою область редактирования. Остальные визуальные и функциональные настройки следует искать в консоли WordPress и кастомайзере (меню редактирования) самой темы. В этом как раз и кроется основная проблема визуальных конструкторов. По сути, Вы работаете с отдельной страницей, как в аквариуме… Все остальное живет своей собственной жизнью за пределами конструктора. И да, если нужно создать сложный сайт-каталог или любую другую раскладку для большого количества динамически выводимого контента (я уже молчу про специфический функционал) – “Elementor” не лучшее решение. Думаю, меня поймут те, кто N-лет назад создавал такие сайты на “голом” HTML. Тогда для каждой карточки товара приходилось создавать отдельный файл, который конечно был похож на 50 предыдущих, но нужно было сделать еще 950… Безусловно, создатели визуальных конструкторов все это понимают и движутся в сторону повышения взаимодействия и динамики в работе их продуктов. К примеру, платная версия“Elementor Pro” уже интегрируется с популярным плагином “Advanced Custom Fields”, который позволяет создавать произвольные пользовательские поля. Многое и без всего этого можно сделать руками в коде, но тогда мы уже уходим от концепции “WYSIWYG”. Здесь нужно понимать, что вещи, которые будут чуть сложнее, чем перетаскивание блоков с места на место, потребуют дополнительных знаний и навыков. Так что, если перспектива вникать в программирование Вас не радует, то старайтесь не выходить за рамки возможностей визуальных конструкторов и объективно сопоставлять их с Вашими задачами.
- Не забывайте расставлять заголовки H1, H2, H3… В отдельных случаях “Elementor” может убрать основной заголовок, настроенный в теме, и это будет уже Вашей задачей. Теги заголовка выбираются из списка при настройке этого элемента. Помните, что заголовок H1 должен быть всего один на страницу и идти первым. Остальные заголовки следует выставлять как H2, H3… по степени важности.
Об “Elementor” можно писать очень много, но это, в принципе, не имеет смысла. Плагин переведен на русский язык и интуитивно понятен. Устанавливайте и пробуйте! Уверен, что Вам понравится. Пока это совершенно бесплатно. Существует множество видео-обзоров, так что даже если будет не понятно – можно посмотреть. Моей же задачей было рассказать Вам о существовании этой замечательной штуки и нюансах ее использования. Надеюсь, что данный материал окажется Вас полезным. Если понадобится разработка сайта в Харькове или любом другом городе Украины - обращайтесь!