Искате ли да използвате ефекти на сянка и задържане на курсора в Divi, за да създадете интерактивно съдържание и да направите уебсайта си забележителен?
Да накарате уебсайта си да се открои от подобни уебсайтове може да бъде трудно. Но след като успеете, почти винаги си струва усилията и мисълта, вложени в това.
Ще ви покажем как да създавате интерактивно съдържание, когато изграждате уебсайтове с Divi.
Да вървим!
изследване
Преди да се потопим в този урок, нека хвърлим бърз поглед на резултата, който можете да очаквате.
Настолен компютър
подвижен
Да започнем реализацията с Divi!
Вижте също: Divi: Как да създадете меню с въртящо се колело при задържанеl
Добавете нов раздел
Цвят на фона
Създайте нова страница или отворете съществуваща и добавете обикновен раздел. Отворете настройките на раздела и променете цвета на фона.
- Фон: #03006d
разстояние
След това, отворете настройките за разстояние между секциите и ги променете, както следва:
- Подложка (отгоре и отдолу): 50px
Добавете нов ред
Структура на колоната
Продължете, като добавите нов ред към секцията, като използвате следната структура на колоните.
оразмеряване
След това отворете настройките за оразмеряване и оставете линията да заема цялата ширина на екрана.
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 100%
разстояние
Нека също променим следните параметри на разстоянието:
- Подплата (вдясно): 9vw (десктоп), 5vw (таблет и телефон)
- Подложка (вдясно): 5vw (таблет и телефон)
Добавете текстов модул към колона 1
Добавете съдържание
След като приключите с редактирането на настройките на реда, добавете първия текстов модул към колона 1.
Добавете първия знак като текст на абзаца. След това добавете съдържанието, което искате да се показва като текст на списък.
Настройки на текста (десктоп)
След това отидете на раздела Дизайни променете настройките за текст на абзаца по подразбиране. Уверете се, че използвате един и същ цвят за текста и фона на секцията.
- Тегло на шрифта: Ultra Bold
- Цвят на текста: #03006d
- Размер на текста: 27vw (десктоп), 0vw (таблет и телефон)
- Височина на реда: 1,1 em
- Text Shadow: Вижте заснемането
- Сила на размазване на сенки: 0,01 em
- Цвят на сянката: #ffffff
- Подравняване на текст: ляво
Настройки за текст при задържане на мишката
За да създадем хубавия ефект на курсора, ще трябва да променим тези настройки на текста на курсора на мишката.
- Цвят на текста (задръжте курсора): #ffffff
- Цвят на сянката (задръжте) : rgba (255,255,255,0)
Настройки на списъка (десктоп)
Продължете, като отидете на настройките на списъка.
- Дебелина на шрифта: Светъл
- Цвят на текста на списъка: #ffffff
- Размер на текста на списъка: 0px (десктоп), 18px (таблет и телефон)
- Позиция на стил: кръг
- Позиция на стила на неподреден списък: отвън
- Отстъп на неподреден елемент от списък: 0px
Избройте настройките на текста при задържане на курсора на мишката (Hover)
Искаме текстът на списъка да се показва при задържане на курсора на мишката. Ето защо ще променим размера на текста при задържане на курсора на мишката.
- Размер на текста в неподреден списък (задържане на курсора): 18px
разстояние
Продължете, като влезете в настройките за разстояние между модулите и направите някои промени и там.
- Поле (отдолу): 50px (таблет и телефон)
- Поле (вдясно): -4vw (десктоп), 0vw (таблет и телефон)
Клонирайте текстовия модул 4 пъти и поставете дубликати в останалите колони
След като приключихме с модифицирането на първия модул в колона 1, клонирайте модула четири пъти. След това поставете всеки от дубликатите в останалите колони. Ще модифицираме всеки от дубликатите, за да отговаря на нашите изисквания.
Променете модула Text в колона 2
Редактиране на съдържанието
Отворете дубликата в колона 2 и редактирайте съдържанието.
Промяна на разстоянието
След това отворете настройките за разстояние и променете персонализираните стойности на полетата.
- Поле (отдолу): 50px (таблет и телефон)
- Поле (ляво и дясно): -2vw (десктоп), 0vw (таблет и телефон)
- Дясно поле: -2vw (десктоп), 0vw (таблет и телефон)
Променете модула Text в колона 3
Редактиране на съдържанието
Също така променете съдържанието на дубликата в колона 3.
Промяна на разстоянието
С настройките за разстояние в раздела за проектиране.
- Марж (ляв): 2,5 vw
- Марж (вдясно): 1,5 vw
Променете текстовия модул в колона 4
Редактиране на съдържанието
Продължете, като отворите настройките на модул Текст в колона 4 и редактирайте съдържанието и там.
Промяна на разстоянието
След това отидете в раздела Дизайн и променете персонализираните стойности на полетата в настройките за разстояние.
- Поле (ляво): -6vw
- Марж (вдясно): 2vw
Променете текстовия модул в колона 5
Съдържание
Направете път за последния дубликат. Редактирайте съдържанието в областта за съдържание.
Промяна на разстоянието
С персонализирани настройки за разстояние.
- Поле (ляво): -7vw
- Марж (вдясно): 3vw
изследване
След като преминахме през всички стъпки, нека да разгледаме за последен път резултата на различни размери на екрана.
Прочетете също: Divi: Как да персонализирате иконите за количка и търсене на модула „Меню с пълна ширина“
бюро
подвижен
Изтеглете DIVI сега!!!
Заключение
Знаем колко е важно вашият уебсайт да се откроява от тълпата. С вградените опции на Divi можете да бъдете толкова креативни, колкото желаете.
Тази статия е пример за това как можете да създадете интерактивно съдържание при задържане.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...