Elementor — бесплатный и мощный конструктор wordpress: руководство для новичков

Untitled 2 Плагины
Настали лучшие времена для тех, кто хочет разрабатывать собственные сайты, но при этом не хочет заниматься кодингом или верстать страницы с полного нуля. Теперь для создания своего уникального и неповторимого дизайна потребуется лишь конструктор сайтов. Используйте его и забудьте про головную боль и многочасовые обучения. В жизни каждого вебмастера уже давно появился Elementor и в этой статье я расскажу про то, как им пользоваться и рассмотрю его основные функции, которые помогут вам создать свою первую страницу. К концу этой статьи большинство ваших вопросов будет закрыто, а если они останутся — вы всегда можете задать их в комментариях или отписаться мне в группу.

Что такое elementor: начало работы с плагином

Elementor — плагин, который вы можете использовать для создания собственных страниц, записей, лендингов и даже конструирования тем. Для старта вам будет более чем достаточно бесплатной версии. Про pro версию я также расскажу в этой статье. Также с его помощью вы можете создавать шаблоны страниц и любые страницы в принципе для того, чтобы делать сетки лендингов под свои продукты или моментально разворачивать их на сайте клиента.
Использование начинается с его установки на вашем сайте.
Сам elementor ставится на wordpress, подробнее о том, как разворачивать сайт на своём хостинге, вы можете прочитать в этой статье.
Для установки нам необходимо перейти в репозиторий wordpress и выбрать в поиске его название.
После чего:
  1. Нажмите установить.
  2. Активировать.

Как установить elementor

Активация конструктора wordpress

Поздравляю, элементор установлен на ваш сайт.

Elementor: установка, настройка и возможности плагина

Мы перейдём к созданию своих уникальных страниц позже. Сейчас для нас стоит простая задача — понять то, как мы можем использовать бесплатную версию и разобраться в ней по шагам. На самом деле конструктор так прост, что даже в бесплатных версиях позволяет творить если не чудеса, но уж точно продающие страницы, которые будут приносить вам приличное количество денег. После того, как вы его активировали конструктор wordpress — вам надо зайти в консоль wordpress и выбрать «Страницы — добавить новую».
Добавить новую страницу elementor
Перед вами откроется стандартный редактор wordpress и теперь вы можете:
  • задать записи заголовок;
  • сохранить;
  • редактировать в elementor.

Открываем страницу в elementor

И перед вами открывается перечень элементов, которые позволяют создавать свой собственный и неповторимый дизайн страницы.

Секция и настройки

В конструкторе wordpress всё начинается именно с секции. В ней может содержаться от 1 до 6 колонок. Для того, чтобы добавить колонки в секцию нам просто нужно нажать на плюсик:
Как добавить виджет на страницу elementor
И теперь мы можем выбрать структуру нашей секции.

Как добавить секцию

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

Добавление элемента в секцию

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

Как настроить макет страницы

Всего у нас есть несколько режимов настройки:
  1. Обычная страница — то есть вы по сути редактируете блоговую страницу wordpress.
  2. Есть холст .
  3. И есть полная ширина.
Настройки страницы находятся вот тут:

Настройки макета страницы elementor

В 99% я использую именно холст elementor.
После того, как мы его выбрали — мы видим, что все остальные элементы стандартной страницы wordpress исчезли и теперь мы можем делать полноценный лендос.

Бесплатные элементы 30 штук

Любая разработка не может быть бесплатной. Если вам говорят про то, что есть сервис бесплатный — то  зарабатывают именно на вас.
В бесплатном конструкторе для использования доступно 30 виджетов и все они находятся слева от вас.
Какие бывают секции у элементора
Бесплатные секции
Секции elementor
Поверьте мне, этого хватит более чем для стандартного текстового или анимированного лендинга. Так же вы должны знать, что у конструктора wordpress есть огромное количество плагинов для него самого.
То есть это как защитное стекло для защитного стекла для телефона(чтобы было понятно на котиках). Дело в том, что многие хотят навешивать на свой сайт огромное количество фентифшлюшек и делать их пёстрыми, как хвост петуха. Я такой подход не приемлю, но каждому своё и плюс вам надо помнить про то, что чем больше у вас будет таких вот вещей на вашем сайте, тем дольше он будет грузиться. Скорость загрузки чертовски важна для мобильных устройств, а именно они дают сейчас 80% всего трафика в сети. Предлагаю вам сравнительную таблицу, где вы можете увидеть все за и против бесплатной и платной версии.
Беслпатный Elementor Pro
Цена Отсутствует От $49 за год пользования
Конструктор страниц Нет Да
Количество виджетов Около 25 Около 50
Поддержка Отсутствует Да
Конструктор темы Нет Да
PRO элементы и шаблоны Нет Да
Динамичный контент Нет Да
Интеграция Нет Да
Вы можете приобрести pro версию конструктора wordpress на официальном сайте производителя.
Многие ищут nulled версию, но я не рекомендую её вам — будет много проблем и огромная трата времени. Сильно проще заручиться поддержкой разработчиков.

Лучшие темы для elementor

Прежде чем мы с вами пойдём в настройки, нам надо выбрать тему для него. Как устанавливать темы для сайта я уже писал в своей статье, теперь можно просто остановиться на названии.
Здесь мог бы быть и список, но я рекомендую лишь одну — astra.
Я съел уже приличное количество собак на нервах с этим плагином и суть в том, что astra позволяет компенсировать просадки по скорости и говнокод, который генерирует элементор. Поэтому просто — ставьте Astra и будет вам счастье.
Но также вы можете использовать с любыми темами на wordpress.

Как добавить виджет на страницу elementor

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

Настройки виджета elementor

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

Содержимое виджета Elementor: руководство

Как и писал выше — настройки каждого отдельного виджета в элементоре зависят от того ,что именно вы выбрали для своего лендинга.
Настройки элемента заголовок
У заголовка вы можете редактировать следующие параметры:
  1. Само содержимое заголовка(также можно просто кликнуть по нему в секции).
  2. Ссылка — на тот случай, если текст должен вести на какую-либо страницу.
  3. Размер.
  4. Заголовок — может быть как заголовком первого уровня, так и остальных. Вот ту надо быть внимательным и лучше всего записаться в сео-клуб, чтобы не наделать лишнего.
  5. Выравнивание.
То есть мы имеем по сути встроенный текстовый редактор в этом виджете.

Стиль виджета Elementor для новичков

Здесь мы можем редактировать:
  1. Цвет текста.
  2. Типографика, а точнее: шрифт, насыщенность, преобразование, стиль, оформление, интерлиньяж(межстрочное расстояние), межсимвольный интервал.
  3. Тень текста.
  4. Режим наложения.
Со всеми этими параметрами вы можете поиграться самостоятельно — он интуитивен, чем злой и страшный фотошоп. Теперь вы знаете где искать element style.

Расширенные настройки виджета Elementor

Здесь мы уже можем редактировать параметры:
  1. Отсутпы.
  2. Эффекты движения.
  3. Фон.
  4. Границы.
  5. Позиционирование.
  6. Адаптивность.
  7. Атрибуты.
  8. Пользовательские CSS(пока туда можно не лезть).

Что делать, если вы накосячили

В процессе работы вам может показаться, что вы наломали дров и хотите сделать «шаг назад» — отменить последние изменения.
Для этого вам достаточно нажать сочетание клавиш Ctrl+Z. Таким образом вы отказываетесь на шаг назад и возвращаете предыдущее состояние лендинга.
Аналогично вы можете редактировать страницы и их стиль, глобальные настройки и настройки секций.

Как настроить глобальные стили в elementor

Для того, чтобы перейти в глобальные настройки сайта — сделайте так, как показано на gif ниже.

Глобальные настройки виджета

В настройках стиля страницы вы можете редактировать:
  1. Глобальные цвета — меня, например, постоянно бесит синий заголовок по умолчанию.
  2. Глобальные шрифты — если у вас сетка лендингов на сайте или вы делаете шаблон для страниц — нужно будет придерживаться какого-то определённого сочетания, чем превращать блог в чемпионат по калиграфии.
  3. Кнопки — по умолчанию настраивается граница, типографика, тени, скругление углов и так далее.
  4. Фон — в его настройках можно задать цвет самой страницы сайта. Особенно актуально, если вы делаете текстовые лендинги, как я.
Вот пример.
Как настроить глобальные цвета сайта
Может показаться, что всё становится однородным, но не надо забывать, что цвет фона конкретной секции тоже можно изменить, а также можно изменить цвет внутренней секции.
Давайте покажу на примере
Выделить секцию цветом
Вот таким образом мы получаем выделенную секцию.
Если вы хотите получить больше блоков или виджетов в своё распоряжение — вам стоит приобрести pro версию.

Модули Elementor pro

19
20
Без некоторых из этих модулей будет сложно сделать лендинг, который включает в себя несколько вариантов пакетирования продукта. Но в тоже время стоит помнить о том, что можно воспользоваться костылём и поставить дополнительные плагины.
Помимо дополнительных виджетов про версии, вы можете пользоваться и импортом шаблонов страниц, а также готовыми стилями определённых виджетов.
Для того, чтобы импортировать шаблон страницы — сделайте так, как показано ниже:
Как загрузить предустановленный шаблон
Конечно это надо делать с предустановленной настройкой страницы Холст.
И последнее, чему вам стоит научиться — сохранять свои страницы как шаблоны.

Как сохранить страницу elementor как шаблон

Я люблю прикладывать минимум усилий и получать максимум результата. Поэтому я не заморачиваюсь с визуальной частью — все мои лендинги по большей части текстовые.
Но у каждого лендинга есть своя структура. Тупо делать одни и те же повторяющиеся манипуляции в век технологий.
Для того, чтобы сохранить страницу как шаблон — сделайте следующее:
Сохранить страницу как шаблон
Как сохранить секцию или виджет как шаблон elementor
Помимо сохранения самой таблицы, вы можете сохранять и любые другие блоки:
  1. Виджеты.
  2. Секции.

Сохранить виджет как шаблон

При такой подготовке вы сможете затрачивать сильно меньше времени на создание своих будущих страниц.
Подведём итоги:
  1. Elementor — бесплатный theme builder, который ставится на любую тему wordpress.
  2. Бесплатного элементора хватит для того, чтобы делать простые страницы и текстовые лендинги.
  3. С его помощью вы можете редактировать страницы, шаблоны и даже темы(с версией pro).
  4. На его базе вы можете построить свой интернет магазин.
Надеюсь, что статья была полезна для вас и не забывайте подписываться на рассылку.
Рейтинг
Добавить комментарий