Каждую неделю Elegant Theme предлагает новые пакеты макетов Divi бесплатно, что вы можете использовать для вашего следующего проекта. Для одного из пакетов презентаций они также используют прецедент, который поможет вам Веб-сайт на верхнем уровне. На этой неделе в рамках дизайнерской инициативы Divi На занятии мы покажем вам, как творчески использовать параметры наведения Divi чтобы выделить призывы к действию на ваших страницах. Мы используем пакет услуг прачечной Divi и рассмотрим три различных примера, как подчеркнуть ваш призыв к действию.
обследование
Прежде чем углубиться в урок, давайте быстро рассмотрим, что мы собираемся создать, чтобы получить представление.
Добавьте новую страницу, используя макет прачечной или прачечной.
Начните с добавления новой страницы в свой Веб-сайт и загрузите домашнюю страницу службы прачечной. Три примера, которые мы создадим, будут основаны на этом макете. Если у вас есть подход, вы можете применить эти примеры к любому макету, над которым вы работаете.
Клонировать текстовый модуль
Начнем с первого примера! Мы преобразуем существующий текстовый мод в средство наведения курсора. Этот подход появится только на рабочем столе. Вот почему мы клонируем исходный модуль, чтобы он мог отображаться на экранах меньшего размера без эффектов наведения.
видимость
Текстовый модуль # 1
Продолжаем, скрывая первый модуль на планшете и телефоне.
Текстовый модуль # 2
И спрятать второй модуль на рабочем столе.
Добавьте эффект ролловера в текстовый модуль рабочего стола
Добавить заголовок контента 3
Редактируем только первый текстовый модуль, который будет тот, который появится на рабочем столе. Откройте модуль и добавьте содержание от курса 3 до зоны содержание.
Наведите курсор на текстовые настройки
Затем перейдите к настройкам текста и «скройте» текст абзаца вашего модуля, добавив 0 пикселей к размеру текста при наведении.
- Размер текста: 0px
Наведите курсор на текстовые настройки 2
Сделайте то же самое с настройками текста для заголовка 2 при наведении курсора.
- Заголовок 2 Размер текста: 0px
3 текстовое название по умолчанию
Затем откройте текстовые параметры раздела 3 и внесите изменения.
- Заголовок шрифта 3: Josefin Sans
- Название Шрифты 3: Полужирный
- Заголовок 3 Размер текста: 0px
Наведите указатель мыши на заголовок 3 "Настройки текста"
Измените размер текста при наведении курсора.
- Заголовок 3 Размер текста: 40px
Настройки интервала по умолчанию
Затем перейдите к настройкам интервалов и убедитесь, что применяются следующие значения пользовательского отступа:
- Верхняя обивка: 80px
- Нижняя обивка: 50px
- Левый отступ: 40px
- Обивка справа: 40px
Настройки интервала ролловера
Также добавьте настраиваемое поле ролловера.
- Верхнее поле: 50px
- Левое поле: -53.5vw
Настройки границы по умолчанию
Мы также добавляем нижнюю границу без рамки.
- Ширина нижней границы: 0px
- Цвет нижней границы: # ff947f
- Стиль нижней границы: пунктир
Настройки границы эстакады
Измените ширину границы наведения.
- Ширина нижней границы: 5px
Параметры тени блока по умолчанию
Затем добавьте коробку тени.
- Вертикальная позиция Box Shadow: 50px
- Box Shadow Blur Force: 54px
- Сила распространения тени коробки: -32 пикселей
- Цвет тени: rgba (255,255,255,0)
Настройки тени для ролловера
И измените цвет тени парящего прямоугольника.
- Цвет тени: rgba (0,0,0,0,2)
переходы
Чтобы создать плавный переход, увеличьте время перехода в настройках перехода.
- Продолжительность перехода: 750ms
Резюме
Наконец, в этом уроке речь шла о создании анимации, которая выделяет раздел на нашей странице Divi. Возможности Divi практически безграничны, используя различные опции (комбинации нескольких различных опций), вы сможете создавать интерфейсы с динамичной и привлекательной анимацией. Не заканчивая, мы рассмотрим вторую часть этого урока позже. А до тех пор, если у вас есть какие-либо вопросы, не стесняйтесь задавать их в разделе комментариев.
