Добро пожаловать на пятый урок. Сегодня поговорим про основные настройки Elementor Pro. У плагина есть несколько настроек базового уровня, которые расположены в разделе Elementor, «Настройки».

Итак, начнём. Вкладка «Общие». Здесь типы записей. Они определяют, с какими типами записей будет работать редактор: записи, страницы, целевые страницы. Например, если установить плагин WooCommerce, то появится дополнительная настройка товара. Можно поставить здесь везде галочки. «Отключить цвета по умолчанию». «Отметка этого флажка отключит глобальные цвета Elementor и позволит ему наследовать цвета из вашей темы». Отключать глобальные цвета нам не нужно, так что оставляем как есть.

«Отключить шрифты по умолчанию». То же самое: отключать шрифты нам не надо, так что оставляем. «Отправка данных об использовании» — это нужно для разработчиков Elementor. Вот это на ваше усмотрение: можете оставить галочку, можете убрать — как хотите.

После того как мы внесли изменения, нужно их сохранить. Нажимаем «Сохранить изменения».

Следующая вкладка — «Интеграции». На этапе создания сайта интеграции не нужны, так что пропускаем эту вкладку. Следующая вкладка — «Расширенные». Можете почитать, для чего нужен каждый пункт, его краткое описание.

Но мы по-быстренькому пробежимся по всем пунктам. «Метод генерации CSS». Оставляем как есть. «Переключить метод загрузчика редактора». Также оставляем. «Включить загрузку любых файлов». А вот здесь включаем. Это нужно для того, чтобы включить иконки в svg-формате.

Далее шрифты Google. Также оставляем. «Загрузка шрифтов Google». Посмотрим в открывающемся списке. Можно выбрать один из вариантов. «По умолчанию» использует настройки браузера для определения способа загрузки. Т. е. браузер сам определяет, в какой последовательности загружать шрифты.

Блокировка скрывает текст до полной загрузки шрифтов Google. У каждого из них своя ширина, интервалы и т. п. И когда в дизайне сайта используется узкий шрифт, а широкий портит весь вид сайта, то лучше подгрузить шрифт, а затем показать текст. Для этого и нужна блокировка.

Swap. Текст отображается резервным шрифтом до тех пор, пока не будет загружен шрифт Google.

Резервный шрифт необходим для корректного отображения текста на сайте, пока шрифты Google ещё не загружены. Когда они загрузятся, то автоматически заменяется резервный шрифт, улучшая тем самым пользовательский опыт и делая сайт более профессиональным и аккуратным даже при медленном интернет-соединении или проблемах с загрузкой шрифтов.

«Фоллбэк». Изначально используется запасной шрифт, а затем заменяется пользовательским шрифтом, когда он становится доступным. «Опционально» — аналогично «По умолчанию», но браузер может выбрать запасной шрифт вместо ожидания загрузки шрифтов Google. Я сам ничего не меняю и оставляю Swap по умолчанию.

«Добавить поддержку Font Awesome». Это такие иконки, растровые, и они уже встроены в плагин-элементах. Так как сейчас используются обновленные иконки Font Awesome 5, тут можно поставить «Да», «Нет» — без разницы. Ответ «Да» нужен, если вы ранее использовали иконки Font Awesome 4. Но так как мы делаем все с нуля, то можно оставить как есть. Метку генератора оставляем.

После того как мы всё сделали, нужно сохранить изменения.

Переходим во вкладку «Функционал». Тут тоже можно прочитать краткое описание. Но ничего менять здесь не будем, оставляем как есть.

Давайте теперь перейдём на страницу. Нажимаем на «Все страницы» и на «Страницы» вот здесь. Как видите, тут уже есть страница, которая по умолчанию WordPress. Создадим новую. Нажимаем «Добавить страницу» тут или здесь. Создаём.

Как вы видите, она открывается в редакторе WordPress, но нам нужно будет редактировать в Elementor. Чтобы страница добавилась, нужно как-то её назвать. Давайте назовем её, например, «Главная».

А теперь можно перейти в редактор Elementor. Кликаем на эту кнопку и попадаем в наш конструктор.

Вот это будет наша рабочая область, где мы будем создавать наш сайт. Слева находится панель инструментов: она содержит все инструменты для редактирования страниц, такие как виджеты, настройки, стили и т. д. Но давайте по порядку. Начнём с настроек. Кликаем «Настройки» — мы попадаем в настройки страницы, «Основные настройки».

Заголовок можно поменять. Например, букву Г заглавную поставить. Видите? Поменялась. «Статус». Это то, в каком статусе сейчас находится наша страница, — «Черновик». Давайте пока оставим его.

Здесь краткое описание, сопутствующее изображение — это нам не надо пока. «Разрешить комментарии» — тоже нам не надо. «Скрыть заголовок». А вот здесь можно нажать кнопку «Да». Как видите, тут заголовок скрылся. Вот он есть — вот его нет. Это для того, чтобы он не отображался на вашем сайте.

«Макет страницы». Я вам советую оставить «По умолчанию». Так, «Стандартный шаблон страницы, как определено…» — ну, тут краткое описание. Elementor Canvas — давайте посмотрим. «Нет шапки, нет подвала, только Elementor». Это нам совсем не подходит. Как видите, тут исчезла шапка сайта.

Elementor Full Width. «Этот шаблон включает шапку, содержимое во всю ширину и нижний колонтитул». Но он тоже нам не подходит, так как обычно у макета есть ограничение и не надо, чтобы растягивалось на всю ширину сайта.

«Тема». Это стандартный шаблон страницы: подтягиваются все стили из темы. Так что оставляем «По умолчанию».

Далее находится здесь вкладка «Стиль». Здесь можно настраивать отступы снаружи и внутри. Они добавляются, уменьшаются. Также здесь добавляются, уменьшаются. Про отступы мы поговорим на отдельном уроке. Но обычно они задаются не здесь, а каждому элементу отдельно.

Также здесь можно редактировать тип фона именно этой страницы. Можно поставить цвет. Выбирается цвет какой-нибудь, потом меняется. «Очистить». Добавляется какое-нибудь изображение. У меня пока нет никаких изображений, это будет изображение на весь сайт, на всю страницу экрана. Также можно поставить градиент, изменить цвет. Градиент мы очистим, пока не нужен нам.

Тип фона для страницы обычно здесь задаётся, когда дизайнер, например, задал для всего сайта один цвет, а для отдельной страницы — какой-нибудь другой. Давайте покажу на примере. Вот у меня есть макет на всём сайте такого цвета, а на такой странице — вот такого. Цвет отличен от других страниц.

Вернёмся обратно. Далее вкладка «Расширенные». Здесь можно задавать стили CSS: мы поговорим об этом потом, отдельно. Далее у нас идёт кнопка «Навигатор». Вот она. Навигатор можно включить, выключить; также он свободно плавает. Можно его закрепить. Просто оттягиваем вправо — отпускаем. Он закрепился. Также его можно открепить.

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

Далее кнопка «История». Она сохраняет все выполненные ранее действия. Нажав на неё, вы можете посмотреть, какие мы делали действия до этого. Давайте посмотрим эту страницу — «Тип фона». Видите? Она поменялась в предыдущей версии. А это последняя версия. Это удобно: когда вы что-то неправильно сделали, например, можно всегда вернуться на несколько шагов назад или к началу редактирования.

Вернёмся к последней записи. Вкладка «Редакции». Прочитайте, для чего она нужна. Как видите, в Elementor везде есть свои подсказки, которые всегда помогут вам.

Далее идёт «Режим адаптивности». Он нужен для разных устройств, таких как десктоп, планшет и смартфон. Нажимаем здесь, и появляется верхняя панель. В ней можно переключаться на разные панели: десктоп, планшет, планшетная версия, мобильная версия. Также можно растягивать.

Здесь можно редактировать. Для себя уменьшить или увеличить рабочую область. Кнопка «Сброс до 100%». Здесь показывается ширина нашей рабочей области, высота. А это кнопка «Управлять брейкпоинтами». Здесь я не советую вам что-то менять.

Вернёмся обратно. Это кнопка «Посмотреть изменения». Нажимая на неё, вы открываете страницу в новой вкладке, где можно посмотреть на ваш сайт, а именно на то, как он будет выглядеть. Мы пока ничего не делали, так что тут пустая страница.

Давайте вернёмся в наш редактор. Далее идёт кнопка «Опубликовать». Нажимаем на неё, и страница теперь будет отображаться. Как видите, статус у неё поменялся на «Опубликовано».

Далее идёт кнопка «Сохранить настройки». «Сохранить черновик». Когда страница не закончена, чтобы не потерять сделанное, сохраняют как черновик. Он нигде не публикуется. «Сохранить как шаблон». О шаблонах мы поговорим более подробно на следующих уроках.

Теперь посмотрим на библиотеку виджетов. Нажимаем на эту кнопку. Виджеты — это строительные блоки Elementor. Они позволяют вам создавать различные элементы на вашей странице, такие как заголовок, текстовые блоки, изображения, кнопки и многое другое. Виджеты разделены на разделы: макет, базовый, Pro и т. д.

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

Важная особенность плагина Elementor — его глобальные настройки. Поменять цвет заголовка можно, используя вкладку «Стиль». Давайте выберем заголовок. Вкладка «Стиль». Попробуем поменять цвет. Как видите, цвет меняется. Можно выбрать красный, зелёный, чёрный. Но это крайне нерациональное использование редактора, так как эти действия нужно будет выполнять для каждого заголовка на каждой странице.

Давайте посмотрим ещё на один заголовок. Как вы видите, у этого заголовка мы поменяли цвет, а у этого — остался по умолчанию. Для создания общей стилевой направленности сайта необходимо задать некоторые глобальные настройки. Будем их настраивать. Для этого нажимаем на вот этот «бургер» и попадаем в настройки сайта. Начнём с пользовательских предпочтений.

Здесь настраивается для вашего удобства, например, тему интерфейса можно выбрать, светлую или тёмную, задать ширину панели. Можно так, а можно — ползунком.

По умолчанию — 300. Кнопки управления. Сейчас покажу, для чего они нужны. Они добавляют дополнительные кнопки вот сюда. Например, чтобы продублировать заголовок, удалить его. Но можно это делать и правой кнопкой мыши: «Дублировать», «Удалить». Или, например, «Копировать» и «Вставить стиль». Видите? Поменялось. Это иногда бывает удобно. Если убрать кнопки, то их не будет. Но я обычно оставляю для своего удобства.

Лайтбокс — это эффект для изображений, который позволяет им открываться во всплывающем окне по клику мыши. «Просмотр адаптивности» и «Выход в консоль». Это уже каждый сам для себя решает, что ему лучше. А мы перейдём непосредственно к настройкам сайта.

Измените глобальные стили вашего сайта, включая шрифты, цвета и другие элементы дизайна. «Глобальные цвета». Тут задаются цвета, которые глобально действуют для всего сайта. Например, дизайнер, создавая макет, задаёт определённые цвета, и их надо настраивать здесь. Давайте посмотрим на примере. Перейдём в наш макет, и вот — дизайнер добавил наши цвета. Например, графит. Копируем этот цвет. Задаём его здесь. Он поменялся. Теперь для удобства можно переименовать. Например, «Графит». Я это делаю, чтобы мне было удобнее работать с макетом.

Давайте еще возьмём пару цветов. Например, белый. Копируем. Меняем цвет. Называем «Белый». Рыжий. Также копируем: Ctrl+C, Ctrl+V.

Также можно добавить ещё цвета. Посмотрим ещё какой-нибудь серый. Добавим. Если не нужно, можно удалить. Также можно цвета поменять местами, двигая за этот крестик.

После того как мы добавили и отредактировали все цвета, нужно обновить. Продолжим дальше настраивать. Теперь глобальные шрифты. Глобальный шрифт также дизайнер задаёт в макете, и их надо настраивать здесь. Давайте посмотрим на примере. Допустим, дизайнер задал шрифты: Roboto, Pomidorko, Rubik, Mulish, Noto Serif.

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

Про шрифты я подробно не буду рассказывать. Просто покажу, как добавить нестандартный. Нажимаем «Добавить». Вводим название. И добавим варианты шрифта. Теперь нужно нам добавить шрифт в нужном нам формате. Для этого нажимаем «Загрузить». Выбираем шрифт на вашем компьютере. Добавляем его в этом разрешении — в формате woff. Добавляем все остальные также. Ttf, eot.

Также тут можно поставить толщину, так как он нестандартный, оставляем обычную, стиль написания — обычный. Также можно поменять, добавить варианты шрифта. То же самое — загружаем, выбираем из библиотеки, ставим толщину. Например, 900. И так далее. Также нужно загрузить все форматы обязательно. Но в этом шрифте они не используются, так что мы удалим этот.

Теперь, после того как мы добавили шрифты нестандартные, надо их опубликовать. Шрифт сохранен. Теперь нам можно вернуться обратно, на страницу. «Главная», «Редактировать в Elementor». Как видите, поменялся заголовок на нестандартный шрифт. Сделаем обратно.

Теперь он используется в пользовательском шрифте Pomidorko. После этого нужно поставить размер. Также заходим, выбираем нужный шрифт. У него размер 56 пикселей. Ставим здесь 56 px. Также можно в других форматах: em, rem. Но так как дизайнер создал в пикселях, оставляем в пикселях. Толщину ставим 400 — нормальную.

«Оформление» — «По умолчанию». Все эти настройки даёт дизайнер. Так, посмотрим. Тут нет ничего. Можно посмотреть. Везде стоит авто. Тогда оставляем как есть, по умолчанию. Также назовём его, например, H2.

Посмотрим ещё какой-нибудь шрифт. Давайте посмотрим для текста. Для него дизайнер использовал этот шрифт. Копируем название, ищем его здесь. Тут уже настроек побольше. Толщина 300, высота 16. Line-height 150%. Толщина 300, высота 16 px. Высота линии в процентах здесь не задаётся, надо в пикселях. Поэтому проценты надо будет перевести в пиксели или посмотреть, как дизайнер сделал. Выберем текст. Line-height — 24 пикселя.

Также можно настроить сразу под планшет и под телефон. Переходим к планшетному. Смотрим, что там сделал дизайнер. Для планшета не добавил. Для телефона тоже. Зато добавил для заголовков. 48. Выбираем заголовок и добавляем 48. Также смотрим для телефона. 40. Так что для телефона вводим 40.

После того как сделали все настройки, нужно обязательно сохранить страницу. Обновляем. Вернёмся к настройкам.

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

«Стили темы». Здесь я не буду останавливаться подробно: о стилях мы поговорим позже. Просто скажу, что здесь настраиваются все стили для кнопок, изображений и т. д., все они будут применены ко всему сайту.

«Свойства сайта». Здесь такие же настройки, как и в теме, когда мы выбирали. «Фон»: тут применяется фон для всего сайта. Давайте попробуем поменять. Выберем серенький. Видите, поменялся фон, и он будет задаваться для всего сайта. Пока очистим.

Также «Макет», «Ширина макета». Это ширина вот этого. Ее обычно задает дизайнер. Давайте посмотрим, как она выглядит на странице. Вот оно, поменялось. Давайте по умолчанию поставим пока. Обновляем.

Здесь внутренний отступ контейнера. Я советую вам его обнулять всегда. Позже объясню, для чего это.

Далее идут «Лайтбокс», «Переходы страниц», «Пользовательские CSS», «Расширенные настройки». Если мы нажмём сюда, то перейдем в настройки, которые задавали в самом начале урока. Обновим страницу и вернёмся в редактор. После глобальных настроек давайте ещё один заголовок закинем. Как видите, он приобрёл цвет. Глобальные цвет и типографика будут применены на всех сайтах. Тут можно поменять также глобальный цвет. Удалим лишнее.

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

На этом на сегодня всё. Увидимся на следующем уроке. Пока!