Искате да знаете как да поставите модул Blurb от Divi подчертани, докато замъглявате други?
Независимо от вида на уеб сайт изграждате, шансовете са в един момент да искате да видите списък с различни услуги, етапи и други.
Един от най-лесните начини да подходите към създаването на такъв списък по атрактивен начин е да използвате модула Blurb от Divi. Модулите Blurb ви позволяват красиво да структурирате съдържание от списъка, като същевременно ви дава безкрайни възможности за дизайн.
В този урок ще направим крачка напред и ще ви покажем как да маркирате Blurb модул при задържане и да замъглите другите, които сте показали. Това е чудесен начин да подчертаете един по един модул Blurb, без да позволявате на други модули Blurb да разсейват читателя.
Да вървим.
изследване
Преди да се потопим в този урок, нека хвърлим бърз поглед на резултата при различни размери на екрана.
Настолен компютър
Мобилна версия
Нека започнем да проектираме с Divi
Добавете нов раздел
Цвят на фона
Започнете с добавяне на обикновен раздел към нова страница или към тази, върху която работите.
Можете също така да се консултирате с: Divi: Как да създадете раздел за членове на екипа като въртележка
Отворете настройките на секцията и променете цвета на фона.
- Фон: #eaeaea
Отстояние
Добавете и стойности на разстояние.
- Поле (отгоре, отдолу, отляво и отдясно): 2vw
- Подложка (отгоре и отдолу): 0px
Граница
Попълнете параметрите на сечението, като добавите радиус на границата.
- Заоблени ъгли: 20px
Добавете нов ред
Структура на колоната
Продължете, като добавите нов ред към раздела, като използвате следната структура на колоните:
Оразмеряване
Без да добавяте още модули, отворете настройките на линията и променете настройките за оразмеряване.
- Изравняване на височините на колоните: ДА
- Ширина: 90%
- Максимална ширина: 1px
- Минимална височина: 500px (десктоп), автоматично (таблет и телефон)
Персонализиран CSS (основен елемент)
Подравнете съдържание на колоната чрез добавяне на един ред CSS код към основния елемент на реда.
align-items: center;
Добавете модула Blurb към колоната 1
Добавете съдържание
Единственият модул, който използваме в този урок, е модул Blurb.
Можете обаче да замените този модул с произволен модул по ваш избор, стига да добавите CSS класа, който ще споделим в следващите стъпки.
Добавете първия модул Blurb към колона 1 и вмъкнете съдържание по ваш избор.
Изберете иконата
След това изберете икона.
- Използване на икона: ДА
- Икона: Вижте екранна снимка
Градиент на фона (задържане на курсора на мишката)
След това използвайте фонов градиент само при задържане.
- Градиентни стопове
- 20%: #ffffff
- 80%: #0f1bff
- Тип градиент: Линеен
Настройки на иконите (работен плот)
Превключете към раздела Дизайн на модула и променете настройките на иконата, както следва:
- Цвят на иконата: #ffffff
- Изображение/икона със заоблени ъгли: 50px
- Ширина на рамката на изображение/икона: 5px
- Цвят на рамката: #ffffff
- Разположение на изображение/икона: Горе
- Подравняване на изображение/икона: ляво
Настройки на иконата за задържане на мишката
Променете различните цветове на иконата при задържане.
- Цвят на иконата (задръжте курсора): #0f1bff
- Цвят на фона на изображение/икона (задръжте курсора): #f7f7f7
Настройки за текст на заглавието
Продължете, като промените настройките на текста на заглавието.
- Шрифт на заглавието: Source Sans Pro
- Тегло на шрифта: получер
- Стил на шрифта на заглавието: TT (главни букви)
Настройки на текста на заглавието при задържане на мишката
Променете цвета на текста на заглавието при задържане.
- Цвят на текста на заглавието: #ffffff
Настройки на текста на описанието (Desktop)
Следват настройките на основния текст.
- Основен шрифт: Open Sans
- Височина на тялото: 2 ем
Настройки на описанието на курсора на мишката
Използвайте цвят на текста при задържане.
- Цвят на основния текст (задръжте курсора): #ffffff
Отстояние
След това отидете на настройките за интервали и добавете персонализирани стойности за подложки.
- Подложка (отгоре, отдолу, отляво и отдясно): 50px
Box Shadow (Desktop)
Използваме и кутия сянка.
- Сила на замъгляване на сянка в кутия: 80px
- Сила на разпространение на сянка в кутия: -20px
- Цвят на сянката: rgba(255,255,255,0.18)
Box Shadow (Hover)
Променете цвета на сянката на курсора.
- Цвят на сянката: rgba(0,0,0,0.18)
CSS клас
И за да се получи ефектът на размазване, ще трябва да присвоим CSS клас на нашия модул Blurb. По-нататък в статията ще използваме този CSS клас в JQuery кода.
- CSS клас: blurb-item
Клонирайте модула Blurb два пъти и поставете дубликатите в останалите колони
След като завършите модула Blurb в колона 1, можете да го клонирате два пъти и да поставите дубликатите в останалите колони на реда.
Клонирайте целия ред
Можете да клонирате реда толкова пъти, колкото искате, в зависимост от това колко модула Blurb искате да покажете на страницата си.
Персонализирайте модулите Blurb поотделно
Разбира се, ще трябва да промените отделното съдържание на всеки модул Blurb.
Добавете нов ред
Структура на колоната
Добавете друг ред към раздела, като използвате следната структура на колоните:
Отстояние
Отворете настройките на линията и премахнете всички горни и долни подложки по подразбиране. Това ще помогне за намаляване на пространството, заемано от този ред.
- Подложка (отгоре и отдолу): 0px
Добавете модул Код към колоната
Вмъкнете JQuery и CSS код
Добавете кодов модул към колоната на реда и вмъкнете малко JQuery и CSS код, за да постигнете ефекта.
Не забравяйте да поставите JQuery кода между скриптовите тагове и CSS кода между стиловите тагове, както можете да видите на екрана за печат по-долу.
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});Прочетете още: Divi: Как да създадете раздел Препоръки под формата на мрежа
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
изследване
След като преминахме през всички стъпки, нека да разгледаме окончателно как изглежда на различни размери на екрана.
Настолен компютър
Мобилна версия
Изтеглете DIVI сега!!!
Заключение
В тази статия ви показахме как да бъдете креативни с модулите Blurb, които споделяте на вашия уеб сайт.
По-конкретно, ние ви показахме как да маркирате модул Blurb при задържане на мишката, като замъглите другите, които сте показали.
Надяваме се, че този урок ще ви вдъхнови за следващите ви проекти. Divi. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...