[Ad_1]
Да вървим.
изследване
Преди да се потопим в урока, нека да разгледаме бързо резултата при различни размери на екрана.
бюро
подвижен
Изтеглете оформлението БЕЗПЛАТНО
За да се докопате до безплатното оформление, първо трябва да го изтеглите чрез бутона по-долу. За достъп до изтеглянето ще трябва да се абонирате за нашия ежедневен пощенски списък Divi, като използвате форма по-долу. Като нов абонат ще получавате още повече Divi добрини и безплатен пакет Divi Layout всеки понеделник! Ако вече сте в списъка, просто въведете вашия имейл адрес по-долу и щракнете върху изтегляне. Няма да бъдете „повторно абонирани“ или да получавате допълнителни имейли.
1. Създайте структура на елемент
Добавете нов раздел
Цвят на фона
Ще започнем този урок, като изградим структурата на елементите в Divi страница. Добавете нов раздел и използвайте бял цвят на фона за него.
- Цвят на фона: #ffffff
разстояние
Отидете в раздела Раздел Дизайн и променете настройките на разстоянието, както следва:
- Горна подложка: 80px
- Подложка отдолу: 0px
Добавете нов ред
Структура на колоната
Продължете да добавяте нов ред, като използвате следната структура на колоните:
оразмеряване
Без още да добавяте модули, отворете настройките на реда и променете максималната ширина в настройките за оразмеряване.
разстояние
След това премахнете всички подложки по подразбиране отгоре и отдолу.
- Горна подложка: 0px
- Подложка отдолу: 0px
Добавете модул с изображения към колона 1
Изтеглете изображение
Нека модули, започвайки с модул за изображение в колона 1. Качете изображение по ваш избор.
Добави линк
След това добавете връзка към модула за изображения.
Скала за прелитане
След това отидете в раздела Дизайн и променете настройките на мащаба на курсора на модула.
CSS клас
Попълнете параметрите на модула, като приложите следния CSS клас в разширения раздел:
Добавете текстов модул # 1 в колона 1
Добавете H3 съдържание
Нека преминем към следващия модул, който е текстов модул, съдържащ H3 съдържание по ваш избор.
Настройки за текст на H3
Преминете към раздела за проектиране на модула и променете съответно настройките на текста H3:
- Заглавие 3 Полиция: Актьор
- Цвят на текста на заглавие 3: # 000000
- Заглавие 3 Размер на текста:
- Работен плот: 35 пиксела
- Таблет: 28px
- Телефон: 22px
- Заглавие 3 Височина на линията: 1,4em
разстояние
След това добавете долно поле.
Добавете текстов модул # 2 в колона 1
Добавете съдържание
След това добавете друг текстов модул точно под предишния с някакво описателно съдържание по ваш избор.
Текстови настройки
Променете текстовите настройки на модула, както следва:
- Шрифт на текста: актьор
- Цвят на текста: # 75baff
- Размер на текста:
- Работен плот: 22 пиксела
- Таблет: 18px
- Телефон: 15px
- Разстояние между буквите на текста: 0.5 пиксела
- Височина на буквената линия: 2-ра
Добавете модул с бутони към колоната 1
Добавете копие
Следващият и последен модул, от който се нуждаем в тази колона, е модул с бутони. Добавете копие по ваш избор.
Настройки на бутона
Преминете към раздела за проектиране на модула и променете съответно настройките на бутоните:
- Използвайте персонализирани стилове за бутона: Да
- Цвят на текста на бутона: # 000000
- Ширина на границата на бутона: 0px
- Радиус на границата на бутона: 1px
- Шрифт на бутона: актьор
- Икона на бутона за показване: Да
- Местоположение на иконата на бутон: вляво
- Показвайте само иконата на курсора на мишката за бутона: Не
разстояние
Също така добавете персонализирани стойности на разстоянието.
- Долен марж: 80px
- Подложка отдолу: 20px
- Дясно подплънки: 30px
Кутия за сянка
И завършете настройките на модула, като приложите следните настройки за сянка на полето:
- Хоризонтално положение на сянката на кутията: 0px
- Позиция на сянката на вертикалната кутия: 2px
- Цвят на сенките: # 000000
Изтрийте колона 2
След като завършите първата колона и всички модули в нея, премахнете втората празна колона от реда.
Клониране на колона 1
И използвайте повторно първата колона, като я клонирате веднъж.
Клонирайте целия ред
Продължете, като клонирате целия ред веднъж.
Редактирайте цялото дублирано съдържание, изображения и връзки
След това се уверете, че сте редактирали цялото съдържание, изображения и връзки във всяка от дублиращите се колони.
2. Добавете курсор
Добавете нов ред към раздела
Структура на колоната
След като вече имаме структурата на елемента, е време да създадем дизайна на плъзгача. За да направим това, ще добавим нов ред към нашия раздел, като използваме следната структура на колоните:
разстояние
Отворете настройките на реда и премахнете всички подложки по горната и долната част по подразбиране.
- Горна подложка: 0px
- Подложка отдолу: 0px
Добавете текстов модул на курсора към нова колона на реда
Добавете съдържание
След това добавете текстов модул към новия ред. Този текстов модул ще бъде посветен на създаването на дизайна на плъзгащия бутон. Добавете копие по ваш избор към областта със съдържание.
Цвят на фона
След това добавете цвят на фона.
- Цвят на фона: # 47669b
Текстови настройки
Преминете към раздела Дизайн и оформете текста съответно:
- Шрифт на текста: актьор
- Дебелина на шрифта на текста: Удебелен
- Стилът на шрифта на текста: главни
- Цвят на текста: #ffffff
- Разстояние между буквите на текста: 2px
- Подравняване на текста: център
оразмеряване
След това добавете стойност за ширина и височина към параметрите за оразмеряване.
- Ширина: 150px
- Височина: 150px
граница
Ние превръщаме този модул в кръг, като променяме настройките на границата.
Кутия за сянка
Също така ще добавим фина сянка на кутията.
- Сила на замъгляване в сянка на кутията: 0px
- Сила на разпространение в сянка на кутията: 20px
- Цвят на сенките: rgba (7,213,255,0.14)
CSS клас
След това ще дадем на нашия модул CSS клас.
Основен елемент на CSS
Също така добавяме редове CSS код към основния елемент на модула.
transition: all .1s linear; pointer-events: none; display: flex; justify-content: center; align-items: center;
Позиция
И ние ще допълним параметрите на модула, като променим позицията в разширения раздел:
- Положение: фиксирано
- Местоположение: горе вляво
- Z индекс: 2
Добавете кодов модул под текстовия модул
Сега, след като проектирахме нашия слайдер, е време да накараме функционалността да работи. За да направим това, ще добавим нов кодов модул точно под текстовия модул на плъзгача.
Добавете стилове и скриптове
Добавете стилове и скриптове към вашия кодов модул.
Добавете CSS код
Вмъкнете следните редове CSS код между стиловите тагове:
.hide-cursor {
cursor: none;
}
.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
visibility: hidden;
opacity: 0;
}
.show-cursor {
visibility: visible !important;
opacity: 1;
}
Добавете JQuery код
И използвайте следните редове на JQuery код между маркерите на скрипта:
jQuery(document).ready(function($){
var cursor = $('.cursor');
$('.image-cursor').mousemove(function(e){
cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');
});
$('.image-cursor').mouseleave(function() {
cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');
});
});
изследване
След като преминахме през всички стъпки, нека да разгледаме окончателно как изглежда на различни размери на екрана.
бюро
подвижен
Заключителни мисли
В този урок ви показахме как да добавите повече взаимодействие към елементите на вашата страница, върху които можете да кликвате. По-конкретно, ние ви показахме как да задействате бутон за плъзгач, когато някой задържи курсора на мишката върху елемент по ваш избор. Това добавя допълнително взаимодействие към дизайна на вашата страница и може да ви помогне да увеличите честотата на кликване! Можете също така да изтеглите JSON файла безплатно. Ако имате въпроси или предложения, не се колебайте да оставите коментар в секцията за коментари по-долу.
Ако искате да научите повече за Divi и да получите повече Divi подаръци, уверете се Абонирайте се за нашия бюлетин et Youtube канал Така че винаги ще бъдете един от първите хора, които ще знаят и ще се насладят на това безплатно съдържание.
[Ad_2]
