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

У виджетов Elementor много разных настроек. Вы можете отображать или скрывать определённые элементы в зависимости от действий пользователя. Например, настроить виджеты так, чтобы они показывали или скрывали информацию в зависимости от значения пользовательских полей, типов постов, URL страницы и многого другого.  

Ещё одна полезная функция виджетов — динамический контент. Например, создание карточек товаров, баннеров, каких-то окон для пользователей. Он позволяет автоматически заполнять виджеты данными из базы данных WordPress. Это помогает создавать динамические страницы, например для продуктов или постов. Благодаря этим расширенным возможностям виджеты становятся гибкими и мощными инструментами. Это полезно для создания персонализированных интерфейсов. 

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

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

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

Полноэкранный режим. Можно нажать сюда, и вернётся. «Доставка и оплата». Нажимаем сюда. «Полноэкранный режим». И вот: появляется эта панель. 

Я создал страницы: «Акции», «Доставка и оплата», «Контакты», «Наши фермы», «Отзывы». Давайте перейдём на «Главную». «Редактировать в Elementor». 

Посмотрим в макете. У нас есть блок «О нас». Здесь же есть кнопка «Подробнее», которая ведёт на страницу «Наши фермы». 

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

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

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

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

Теперь вернёмся в WordPress на страницу «Наши фермы». Отредактируем её в Elementor. В настройках скроем заголовок. 

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

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

Давайте его уберём — сделаем по умолчанию. Вернёмся на нашу главную страницу. Эту обновляем — «Выход». 

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

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

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

Возьмём, например, этот текст. Добавим ссылку внутрь него. Для этого нажмём «Текст». Допустим, это слово «термическую». Добавляем тег <а href=”#”> (обязательно решёточку ставим). И закроем: </a>. Как видите, ссылка приобрела вид по умолчанию. 

Чтобы изменить, как нам нужно, нажимаем на «Расширенные». Здесь, в самом низу, «Пользовательские CSS». Нажимаем на этот элемент и прописываем префикс selector. Это нужно для того, чтобы стили применялись именно к этому блоку, а не ко всему сайту. 

Selector. Прописываем тег <a>. Открываем фигурную скобку, нажимаем Enter. Курсор и закрывающаяся скобка встают на место. Это очень удобно. 

Теперь придадим нашему тексту цвет, как на кнопках. Для этого пишем color:, выбираем цвет отсюда, копируем, ставим решёточку и нажимаем Ctrl+V (вставляем). В конце ставим точку с запятой. Как видите, ссылка приобрела нужный нам цвет. 

Также можно сделать, чтобы при наведении на ссылку она подчёркивалась. Для этого пишем selector, a:hover, ставим открывающуюся скобку и нажимаем на Enter. Теперь прописываем, например, text-decoration; underline. Закрываем: ставим точку с запятой. Как видите, теперь при наведении подчёркивается.

Давайте ещё посмотрим на примере блока с изображением. Он у нас есть. Выберем и добавим, например, эту картинку. Я хочу, чтобы она в блоке была внизу, под заголовком и текстом. Как вы видите, встроенными стилями Elementor этого нельзя достичь. Будем менять с помощью CSS. 

Для начала обновим страницу и посмотрим изменения. Ищем наш блок и нажимаем правой кнопкой мыши. Выбираем «Исследовать элемент». Или нажимаем кнопку F12. Справа открывается панель разработчика. Чтобы найти наш блок, нажимаем на эту стрелочку и ищем наш блок. Нажимаем. Вот с правой стороны — elementor-image-box-wrapper. Здесь, снизу, прописываются все стили для этого блока. display: flex, «flex-direction: row (строка)». Но нам надо, чтобы картинка снизу была. Для этого давайте поменяем здесь на column-reverse. Как видите, картинка переместилась вниз. 

Но учтите: стили, которые вы прописываете здесь, не сохраняются. Это только для разработчика. Например, если мы сейчас обновим страницу, то всё встанет на свои места. 

Теперь давайте поменяем наш стиль. Для этого выбираем этот класс. Копируем без кавычек (Ctrl+C) и заходим в наш редактор. Заходим в «Пользовательские CSS». Прописываем префикс selector и вставляем наш класс. Но перед этим нужно обязательно поставить точку. Не забываем об этом. Открываем фигурную скобочку, нажимаем Enter и пишем наш стиль: flex-direction: column-reverse. Закрываем точкой с запятой. Как видите, что нам нужно, то и поставилось. Можно обновить страницу и посмотреть в изменениях. Всё сделалось. 

Практически все виджеты можно исправлять своими стилями, если нет возможности сделать это с помощью уже встроенных в конструктор. 

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

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