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

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

Любой сайт начинается с шапки. В ней расположены логотип, меню и другие элементы. В данном примере — телефон и кнопка корзины.

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

Теперь создадим меню из этих страниц. Переходим: «Внешний вид» — «Меню». Теперь нужно как-то назвать наше меню. Например: «Меню в шапке». Областью отображения сделаем «Шапку». Теперь «Создать меню».

Слева у нас есть страницы, которые мы создавали. Выбираем нужные: «Доставка и Оплата», «Наши фермы» и т. д. И «Добавить в меню».

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

Перейдём в «Произвольные ссылки». И чтобы ссылка у нас была пустая, никуда не вела (например, нажимаем на «Экопродукты» — у нас список открывается), в этом поле ставим решётку (#). В этом поле пропишем «Экопродукты». Добавим в меню и расположим в нужном нам месте.

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

Теперь, чтобы они стали списком, перетаскиваем под «Экопродукты», чуть сместив вправо. Видите? Он становится дочерним элементом. Также «Овощи», «Грибы» и «Консервация».

После того как добавили все элементы в меню, можно его сохранить. Сохраняем меню.

Посмотрим на макете подвал.

В подвале меню несколько отличается от меню в шапке. В частности, категория продуктов вынесена отдельным списком. И нет выпадающего списка «Экопродукты». Так что создадим новое меню и назовём его, например, «Меню в подвале». Область отображения — «Подвал». «Создать меню».

Также добавляем все наши созданные страницы. Произвольными ссылками создаём «Продукты». Также пустую решётку пока ставим. Вот я добавил.

Теперь можно также отсортировать: «Наши фермы», «Доставка и оплата», «Отзывы», «Контакты». Также сохраняем.

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

Теперь перейдём в «Шаблоны», «Конструктор темы» и выбираем «Хедер». Можно выбрать шаблон из библиотеки, но мы будем делать с нуля.

Слева появились новые виджеты. Но по порядку. Создадим структуру: Flexbox, горизонтальную. Давайте посмотрим. Зададим цвет, отступы внутренние по 25 пикселей. Цвет у нас серый. Внутренний отступ сверху, снизу по 25.

Теперь можно добавить логотип сайта. Загружаем логотип. Вот он. В настройки сайта переходим (вернее, перекидывает). Выберем изображение. Можно загрузить, например, из «Загрузки» лого сайта или просто перетягиванием.

Добавляем атрибут Alt обязательно. Пишем Logo, например. Или «Гармония природы». И нажимаем «Выбрать».

Теперь у нас он добавляется в свойства сайта. Сохраним и выйдем отсюда. Вот он у нас отобразился. Давайте его стилизуем. Ширину поставим 100%, и так же с максимальной шириной — 100% поставим.

Ссылка у него уже идёт на URL сайта. Также, когда нажимаем на логотип, у вас будет автоматически переходить на главную страницу.

Теперь можно добавить WordPress Menu. Выбираем «Меню в шапке», давайте немножко стилизуем его сразу. Типографику поменяем на, например, «Текст». 16, толщину нормальную поставим. В «Содержимом» оставляем «Горизонтальное». Выравнивание сделаем также. Указатель — линия. «Нет». Индикатор под меню сделаем, как в макете — галочкой такой. Выберем из библиотеки. Вот такую, маленькую. Брейкпоинт поставим «Планшет — книжная ориентация». И сделаем во всю ширину.

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

Как вы видите, в меню при наведении активные элементы подсвечиваются рыжим. Давайте так же сделаем. «Наведение» и «Активный».

Можно стилизовать выпадающий список. У нас он так выглядит. Посередине цвет белый, а цвет фона — тоже графит. Давайте цвет текста сделаем белым, а цвет фона — графит. Текст сделаем такой же, как здесь, — 400. При наведении цвет фона и «Активный» сделаем, например, также графит.

Давайте теперь добавим контейнер. Сделаем его во всю ширину. Уменьшим примерно до 25. Потом, если что, подровняем. Сделаем его горизонтальным и добавим в него текстовый редактор и кнопку. Текст поменяем: возьмём этот телефон.

Немножко его стилизуем. Возьмём графит. Типографику — 18, жирный. Кнопку посмотрим. Возьмём «Корзина». И немножко поменяем стиль. Типографику возьмём, наверное, «Текст». Хотя я советую, как обычно, сделать в настройках сайта для всех кнопок. Ну, пока сделаем так.

«Нормальный». Трансформация — «Верхний регистр», и Letter Spacing — 2 пикселя. Также цвет поменяем на графит. Цвет фона сделаем белый, толщина границы — сплошная, 1 пиксель. Скругление углов — 10 пикселей.

Отступы внутри давайте ещё сделаем. Тут «Верх» — 8, «Низ» — 8, а здесь по 12, справа и слева.

Также добавим ещё цвет границы. И у кнопки есть ещё иконка корзины. Давайте её добавим. Можно загрузить SVG или добавить из библиотеки иконок. Давайте подберём какую-нибудь подходящую. Вот эта похожа. Давайте её вставим. Сделаем её справа. Отступы сделаем 10 пикселей.

Но, к сожалению, здесь стилизовать отдельно иконку нельзя. С этим нам снова поможет CSS-код. Давайте сделаем предпросмотр. Зайдём в код. Найдём нашу корзину. Вот она. Выберем и поменяем ширину. Например, 30 пикселей. Уберём высоту: сделаем её auto.

Давайте скопируем этот код вместе с классом. Перейдём в «Расширенные», «Пользовательские CSS». И также набираем selector и вставляем код. Как видите, он применился.

Теперь надо её, иконку, сделать рыжей. Для этого прописываем заливку: fill. И подберём цвет. Вот этот, рыжий.

Вот видите. Только появился какой-то отступ. Тогда отступ снизу уберём. Ну вот, всё аккуратненько.

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

Вот, 10 пикселей.

Посмотрим. Всё выглядит аккуратно. Давайте ещё здесь тоже посередине сделаем. И «Расстояние между».

Теперь, когда мы сделали десктопные версии, нам надо обязательно адаптировать под планшет и под телефон. У дизайнера тут небольшая ошибка. У него должно быть бургер-меню, такое же, как на телефоне. Он его здесь не прописал, но мы сделаем его.

Давайте перейдём в режим адаптивности, в планшетную версию. Для начала зададим контейнеру отступы слева и справа. Так, посмотрим… Примерно у нас здесь по 56 пикселей. Так и зададим. Сверху и снизу у нас опять обнулились. Так, добавим… 56, 56.

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

Теперь можно стилизовать наше бургер-меню. Давайте посмотрим содержимое. Сделаем по центру, наверное. Нашу иконку оставляем такую — «По умолчанию». При наведении — отсутствует. «Активный» — крестиком будет. Вот оно. «Выровнять переключатель» — давайте справа сделаем на всякий случай.

Стилизуем. «Переключатель» — «Цвет», давайте графит. А цвет фона у нас отсутствовать должен. Так вот. Можно немного его увеличить. Совсем немного. Так…

Стилизуем немножко выпадающее меню. Расстояние — давайте немножко вот так: 30 пикселей добавим, чтобы оно не прилипало у нас. Всё аккуратненько, красиво.

Теперь можно сделать и телефонную версию. Контейнеру, наверное, мы сделаем Shrink. У нас нет телефона и слово «Корзина» убрано, и фон. Осталась только одна иконка. Щас мы так и сделаем.

Для этого контейнера тоже сейчас зададим, наверное, опять 25, по 20. Телефон: в «Адаптивность» переходим, скрываем его на мобильных телефонах.

Так, у нас всё в колонку. Сделаем перенос «Без переноса». Скрывается у нас всё. Иконка подтягивается.

Давайте теперь стилизуем корзину. Уберём текст и фон. В «Расширенные», «Пользовательские CSS». Делаем медиазапрос: media(max-width: 767px). Фигурную скобку.

Ищем в коде класс для… Давайте его сделаем вот так. Для корзины. Elementor-button-text. Давайте отсюда скопируем. Ctrl+C. Selector — и скрываем его: display: none.

Найдём фон кнопки. Elementor-button — вот он.

Добавляем его сюда, внутрь медиазапроса. Selector… Фигурную скобку. Внутри прописываем: background. Также прописываем: none.

Так, ошибка. Опечатка, вернее. Background. Тут не показывает. Так… В «Стилях» уберём ещё тип границы на мобильной версии обязательно. Поставим 0. Так… Сохраним черновик и посмотрим теперь на рабочем сайте. Как видите, просто корзинка осталась — кнопка, и здесь можно добавить какие-нибудь отступы небольшие.

Проверим на других разрешениях. Как видите, практически всё готово.

Так.

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

Только мне кажется, немножко великовато. Давайте немного уменьшим, процентов так на 90. И всё. Но это уже мелочи. Подгонять — надо будет по макету смотреть.

После того как мы всё сделали, стилизовали, теперь можно опубликовать. Добавляем условие. И добавим на «Весь сайт». «Сохранить и закрыть».

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

Теперь можно создать подвал. Для этого можно зайти отсюда в «Конструктор тем». Выбираем «Футер», в подвал добавляем. «Добавить». Можно выбрать из библиотеки, но мы этого делать не будем, опять же.

Подробно рассказывать, как делать подвал, я не буду. Он примерно так же, как и Хедер, создаётся.

Покажу единственное: как можно сделать вот такое меню на две колонки. Тут также логотип ставится. Давайте WordPress Menu поставим. «Меню в подвале». Так, немножко стилизую… Чуть-чуть. Чтобы не такой большой был.

А теперь, чтобы сделать на две колонки, переходим в пользовательские CSS. Вводим: selector. Пишем: nav ul. Фигурные скобки. И прописываем: columns: 2.

Сделаем его ещё не горизонтальным, а вертикальным. Линии уберём. И брейкпоинт — «Нет». Так как у нас всегда оно показывается.

Вот, у нас на две колонки разделилось, когда мы прописали пользовательский class — columns 2.

Также его опубликуем на весь… Добавим условие: «На весь сайт». Посмотрим действующий сайт. Вот, как видите. Но тут вы уже сами стилизуйте, как надо.

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

Давайте посмотрим на макет.

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

Создадим структуру. Давайте в две колонки. Стилизовать не буду, просто накидаю какой-нибудь контент. Давайте заголовок сюда какой-нибудь, текстовые редакторы (несколько штук). Давайте продублирую даже. Иконки соцсетей можно. В эту колонку добавим. Давайте тоже сюда добавим форму. Тоже ничего не буду стилизовать. Добавлю только цвет, наверное. И отступ внутри. По 80 пикселей. Так, заголовок скрылся.

Нажимаем «Опубликовать». Сохраняется. И теперь выходим в админку WordPress. Заходим в «Сохранённые шаблоны». У нас появился «Свяжитесь с нами», и справа находится шорткод. В этих квадратных скобках. Копируем этот шорткод и заходим на страницу, например нашу главную. «Редактировать в Elementor». Давайте добавим в самый конец. Создадим структуру, и находим виджет, который называется «Шорткод». Можно набрать здесь, например, в поисковике. «Шорткод» — вот он. И добавляем.

Теперь в это поле мы добавляем наш шорткод. Давайте его сделаем во всю ширину. И теперь наш скопированный шорткод можно добавлять на другие страницы. «Отмена», обновим. «Выход». Например, давайте на какую-нибудь другую страницу. «Контакты». Зайдём на эту страницу, нажимаем «Редактировать в Elementor». И к нашей странице «Контакты» добавляем шорткод. Ищем тут или набираем здесь: «Шорткод». Добавляем сюда и вставляем.

Так просто можно при помощи одного виджета вставлять повторяющиеся секции и другие элементы.

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

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