Искате ли да използвате ефекти на сянка и задържане на мишката в 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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...