Новый модуль содержания в Divi 5: создаем страницу товаров WooCommerce с прокруткой — без кода!

Создайте потрясающую страницу товара в Divi 5 с помощью нового модуля «Оглавление»! Хотите создать более интерактивную страницу товара WooCommerce в Divi 5? В этом руководстве мы покажем вам, как создать потрясающую прокручиваемую страницу товара, используя новый модуль «Оглавление» (TOC) Divi 5 — и вам не понадобятся ссылки или пользовательский код! Мы объединим модуль Woo Product с модулем Heading в Divi, чтобы создать различные категории товаров на странице. Затем мы используем новый модуль «Оглавление», чтобы создать фиксированное навигационное меню, которое позволит посетителям мгновенно прокручивать страницу до нужной им категории товаров. В этом руководстве вы узнаете, как: ✔ Создать пользовательскую страницу товара WooCommerce с помощью Divi 5 ✔ Отобразить разные категории товаров на одной странице ✔ Использовать новый модуль «Оглавление» Divi 5 ✔ Создать навигационное меню с фиксированным положением ✔ Добавить плавную прокрутку между категориями товаров ✔ Создать прямые ссылки на разные разделы без использования тегов привязки ✔ Создать весь эффект без пользовательского CSS или JavaScript ✔ Настроить навигацию оглавления в соответствии с вашим сайтом Это отличный способ упростить навигацию по большим страницам товаров WooCommerce, придав вашему сайту более современный и интерактивный вид. Вместо того чтобы заставлять посетителей прокручивать длинную страницу товара в поисках определенной категории, вы можете предоставить им удобное навигационное меню, которое позволит им сразу перейти к интересующим их товарам. Самое приятное, что новый модуль «Оглавление» Divi 5 обрабатывает функциональность прокрутки за вас, что делает создание этого эффекта удивительно простым. Если вы используете Divi 5 и WooCommerce, этот метод вам обязательно пригодится в вашем арсенале веб-дизайнера! Не забудьте поставить лайк, подписаться и нажать на колокольчик уведомлений, чтобы получать больше уроков по Divi 5, советов по WordPress, уроков по WooCommerce, бесплатных шаблонов Divi и методов веб-дизайна от System22. #Divi #Divi5 #WooCommerce #DiviWooCommerce #DiviTutorial #TableOfContents #TOC #WordPress #ElegantThemes #WebDesign #NoCode #System22 ТЕМЫ И ПЛАГИНЫ, ИСПОЛЬЗУЕМЫЕ В ЭТИХ ВИДЕО Попробуйте тему Divi: https://bit.ly/TryDiviNow Скидка 10% на плагин Divi Supreme Modules Pro: https://divisupreme.com/system22/?ref=6 Плагин Divi Supreme Modules Light: https://bit.ly/SupremeFreeVersion Изображения, созданные с помощью AI от Nightcafe: https://creator.nightcafe.studio?fpr=... Используйте промокод SYSTEM22NC для скидки 15% РАЗДЕЛЫ 00:00 - Введение и обзор функций 01:04 - Создание новой страницы с нуля 01:31 - Настройка заголовков разделов (заголовки H1) 02:22 - Добавление модуля товаров WooCommerce 03:52 - Создание нескольких категорий товаров 04:26 - Требования к настройке WooCommerce и товаров 05:21 - Добавление нового модуля оглавления 06:24 - Фильтрация оглавления для отображения только заголовков H1 07:05 - Стилизация модуля оглавления 08:05 - Фиксированное положение строки оглавления 09:21 - Смещение фиксированного оглавления для настольных компьютеров 10:00 - Настройка Z-индекса для повышения видимости 11:01 - Оптимизация оглавления для мобильных устройств и планшетов 12:15 - Настройка смещения прокрутки для лучшей навигации 13:17 - Финальное тестирование на стороне клиента и предварительный просмотр на мобильных устройствах 14:58 - Заключение и информация о поддержке МОЙ YOUTUBE ПЛЕЙЛИСТЫ: Divi 5:    • Divi 5   Полное руководство по Divi для начинающих:    • Divi Ultimate Guide For Getting Started   Divi 5 для начинающих:    • Divi 5 For Beginners   Divi 4 для начинающих:    • Divi For Beginners   Модули Divi Supreme:    / watch   v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw Полный плейлист по созданию интернет-магазина:    / watch   v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9 Посмотрите другие видео на нашей странице плейлистов:    / system22net   Не забудьте задать любые вопросы ниже, я постараюсь ответить или сделать для вас видеодемонстрацию! Подписка:    / @system22   Получить слайдеры: https://www.elegantthemes.com/blog/di... МОЙ БЛОГ https://web-design-and-tech-tips.com Отказ от ответственности: Некоторые из этих ссылок являются партнерскими, и я получу небольшую комиссию, если вы совершите покупку, без дополнительных затрат для вас.