Master Elementor: плавное изменение цвета фона при прокрутке | Фоновый эффект прокрутки
Автор: DesignWithAI
Загружено: 2023-10-05
Просмотров: 2262
Узнайте, как создать привлекательную анимацию цвета фона прокрутки в Elementor, с помощью этого пошагового руководства. Совершенствуйте свои навыки веб-дизайна и придайте своему сайту динамичность!
✅Получите фрагменты кода:
Фрагмент кода: https://drive.google.com/file/d/1t3Rc...
Я ввел новую страницу и отредактировал ее с помощью элементара. Сначала добавьте один столбец, затем измените ширину контента (полную ширину) и выберите минимальную высоту. Выберите VH и измените значение на 98.
Теперь перейдите в раздел «Дополнительно», затем добавьте имя класса [панель], потому что я добавляю собственный CSS. Вот почему я добавил это имя столбца. Возьмите виджет текстового заголовка, измените текст на черный и измените семейство шрифтов. Мне нужно больше секций, чтобы варьировать цвета и упростить дизайн.
Сначала я открытый навигатор, потом меняю название раздела, чтобы легко найти наш раздел. Я просто дублирую этот раздел и меняю текст, и да, конечно, в каждой структуре, но класс там должен быть. Скопируйте их все с первым классом.
Измените все названия структур, а также измените текст заголовка. Итак, после внесения изменений мы перейдем к последнему разделу и создадим HTML-виджет. Создайте один столбец, перейдите к виджету и затем найдите HTML, чтобы перетащить этот элемент.
Откройте текстовый файл JavaScript и скопируйте его, а затем вставьте сюда. Вы увидите детали корпуса и панели, определяющие наш раздел; вот почему мы создаем классы. Вы можете измениться вместе с нашим классом.
1. Теперь мы добавим собственный CSS.
2. Нажмите левое (3-точечное) меню.
3. Откройте настройки сайта, а затем откройте пользовательский CSS.
Я применю Цвет фона: Темный; и
Переход: цвет фона 1с легкость;
Как видите, я буду использовать атрибут цвета, чтобы изменить свою отдельную часть. Я добавляю цветной шестнадцатеричный код. Вы можете просто добавить свой цвет и изменить название цвета и его шестнадцатеричный код. Вот и все.
Теперь обновите и вернитесь к конструктору страниц. Выберите первый раздел и нажмите «Дополнительно», затем откройте атрибуты и вызовите свойство цвета.
Теперь напишите цвет данных: черный. Таким образом, вы можете изменить другие атрибуты цвета раздела один за другим. Когда мы выполним нашу задачу, нажмите «Обновить» и посетите наш действующий веб-сайт.
Удивительно, но это самый простой способ изменить цвет фона отдельного раздела без Elementor Pro.
Спасибо.
#ElementorTutorial #ScrollingBackground #WebDesign #WebDevelopment #ColorChangeEffect #ElementorTips #DynamicWebsite #AnimationTutorial
Музыка от #Uppbeat (бесплатно для авторов!):
https://uppbeat.io/t/bosnow/sea-cruise
Код лицензии: WGQSDKZ05MIXTE3E.
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке: