Искате ли да знаете как да персонализирате елементите на мрежата на модула Filterable Portfolio на Divi ? Следвайте ни в този урок...
Имайте зона на себе си уеб сайт да покажете работата си е важно. Ако сте стилист, можете да създадете няколко проекта на вашия уеб сайт WordPress, за да покажете вашите концепции. Ако сте строител на марка, можете да използвате портфолио, за да покажете работата си. Освен това можем дори да отидем по-далеч и да добавим различни категории за нашите проекти. Тук е какво прави модулът за филтрирано портфолио на Divi? .
С този модул можем да покажем нашата упорита работа по лесен и организиран начин.
В днешния урок ще персонализираме отделните елементи на мрежата на модула Filterable Portfolio. Ще използваме оформления от безплатни пакети за оформление Конференция Divi et Онлайн инструктор по йога Divi предоставя се при всяка покупка на Divi .
Както при всичко за Divi, ние имаме възможност да персонализираме този модул, за да отговаря на нашите нужди и желания. Въпреки това, преди да навлезем в стила, нека научим малко повече за модула.
Какво представлява модулът за филтрирано портфолио на Divi?
Проектите са част от персонализиран тип публикации, които работят по същия начин като публикациите. Можете да ги намерите в таблото за управление на WordPress.
Това е мястото, където ще създадете вашите индивидуални проекти, които ще попълнят вашия модул Filterable Portfolio. Модулът ни дава два начина да покажем нашите проекти: в мрежов формат ou във формат на пълна ширина. За нас ние ще използваме и персонализираме формата на мрежата.
С модула Filterable Portfolio ще можем да представим най-новите си проекти. Потребителите на нашия сайт ще видят филтърна лента в горната част на мрежата на нашето портфолио. Оттам те могат да разглеждат различните категории портфолио, които разрешаваме да показват в модула.
Ето примерна мрежова конфигурация на модула с някои примерни проекти:
Области, които трябва да имате предвид при създаването на филтрируемото портфолио на Divi
Като всички модове Divi, модулът Filterable Portfolio идва с редица функции, които можем да персонализираме според нашите нужди и желания. По този начин повечето от функциите, които идват с модула, могат да бъдат модифицирани в раздела Дизайн от модалните настройки на модула. Можем да редактираме следните области и още:
- Заглавие на проекта
- Категория на проекта
- Винетка
- Филтриране на текст
- Миниатюра при задържане
- Номериране на страници
Това не е пълен списък и дори не сме започнали да говорим за това как CSS добави по-дълбоки персонализации към този модул!
Как ще персонализираме модула за филтрирано портфолио на Divi
Както споменахме по-рано, за този урок ще използваме две оформления: Конференция Divi et Онлайн инструктор по йога Divi. По-долу можете да получите преглед на работата, която ще свършим по време на този урок.
Подреждане на елементите на оформлението на "Divi Conference".
Подреждане на елементите от оформлението на "Divi Online Yoga Instructor".
Можете лесно да изтеглите и двете оформления от Divi Строител.
А сега да започваме!
Вижте също: Divi: Изберете между решетката и оформлението с пълна ширина на модула Filterable Portfolio
Персонализиране на модула за филтрирано портфолио на Divi: „Divi Conference Edition“
Първо, ще трябва да инсталираме шаблона на страницата на събитието от Divi Conference Layout Pack. След като създадете новата си страница в WordPress и активирате Divi Builder, ще влезем в Divi Library.
Влезте в библиотеката за оформление на Divi
Кликнете върху иконата « Зареждане от библиотеката за да влезете в Divi Layout Library
Намерете оформлението в Divi Layout Library
Използвайки функцията за търсене в библиотеката с оформления на Divi, търси разположението " Страница със събития на конференцията".
Инсталирайте оформление
След като сте избрали оформлението, щракнете върху " Използвайте това оформление за да инсталирате оформлението във вашата страница.
Премахнете и сменете модула за изображение
Ще премахнем модула Image, показан по-долу, за да освободим място за модула Filterable Portfolio, който ще персонализираме. Кликнете върху " Изтрий след като задържите курсора на мишката над изображението, за да изтриете снимката.
Поставете модула за филтрирано портфолио на Divi
С премахнатия модул Image вече можем да направим място за нашия модул Filterable Portfolio. Ще щракнем върху иконата „ Добавяне на модул (сивия знак плюс), след което изберете модула в модалното поле на модула, което се появява.
Задаване на броя на публикациите и оформлението на портфолиото
По подразбиране този модул ще представи вашата работа в една колона. Ние обаче ще използваме оформлението на мрежата, което се предлага по подразбиране с 4 колони.
Поради това препоръчваме да изберете кратно на 4 (4, 8, 12, 16 и т.н.) като брой публикации за вашето портфолио.
За този урок ще използваме 12 проекта в нашата мрежа.
Започнете да персонализирате филтрируемото портфолио на Divi: Заглавие и мета текст
Сега, когато нашите проекти са показани в мрежа, нека свържем някои от елементите на дизайна на нашия избран шаблон. В този случай ще използваме стила, предоставен с Divi Conference Layout Pack в нашия нов модул.
Стил на текст
- Подравняване на текст: центрирано
- Цвят на текста: тъмен
Стил на текста на заглавието
- Ниво на заглавие: H2
- Шрифт на заглавието: Krona One
- Цвят на текста: #000000
Мета стил на текст
- Мета шрифт: по подразбиране (Open Sans)
- Цвят на мета текста: #ff6651
Сега, след като имаме нашия стил за заглавията в решетката на портфолиото, нека направим някои промени в действителната форма на самите миниатюри на проекта.
Променете рамката на миниатюрата на проекта и заоблените ъгли
В нашия пакет Divi Conference Layout ние използваме уникална комбинация от заоблени ъгли, за да придадем уникална форма на някои от ключовите кадри в пакета. Нека приложим този стил към миниатюрите на нашия модул.
Изображение
- снимка:
- Заоблени ъгли: 50px 50px 50px 0px
- Стилове на граници: всички
- Ширина на рамката: 3px
- Цвят: #000000
- Стил на рамката: плътна
Това ще даде на нашите миниатюри форма, която съответства на останалите изображения в пакета за оформление.
Персонализиране на наслагването при задържане
Нека да отидем още една крачка напред с нашия стил и да направим лека промяна в наслагването по подразбиране, което идва с този модул. Ще променим цвета, както и иконата, която се използва веднага от кутията.
Наслагване
- Цвят на иконата за мащабиране: #bcf5fd
- Цвят на наслагване при задържане на мишката: #ff6651
- Инструмент за избор на икона при задържане на мишката: Увеличаване
Както можете да видите сега, ние добавихме цветовете на марката за това оформление към наслагването, както и променихме иконата, която Divi предоставя по подразбиране за функцията за наслагване при задържане на курсора на мишката в този модул.
Персонализиране на странирането
Сега ще започнем да използваме малки фрагменти от CSS, за да добавим допълнителна персонализация към нашия модул за филтрирано портфолио. Първо, ще персонализираме пагинацията на този модул. След това ще премахнем рамката, която се появява над него с един ред CSS
Текст за пагинация
- Пагинация:
- Шрифт: Krona One
- Подравняване на текста: центрирано
- Цвят на текста: #ff6651, #000000 (Hover)
За нашия CSS ще преминем към раздела Подробно на нашия модул. Второ, ще щракнем върху раздела Персонализиран CSS. След това ще въведем следния кодов фрагмент, за да премахнем границата над нашата пагинация, придавайки й по-изчистен вид.
Пагинация на портфолиото
border-top: 0px;
Използване на настройките на Divi и CSS за персонализиране на филтърния текст
Що се отнася до текста на филтъра, ще го издигнем малко по-нагоре. Ще използваме CSS, за да променим фона, както и ефектите при задържане.
Искаме да имаме перфектна приемственост между новодобавения модул и стила на пакета за оформление. Първо, нека въведем нашите Divi настройки за шрифта.
Текст на критериите за филтриране
- Критерии за филтриране:
- Шрифт: Krona One
- Цвят на шрифта: #ffffff, #000000 (Hover)
В сегашния си вид нашият филтър изглежда го няма. Наистина, в състоянието си по подразбиране, това е бял текст на бял фон. Ние обаче ще променим това с персонализиран CSS на две места.
Първо, ще добавим CSS фрагмент в настройките на страницата, който ще добави фон към филтърния текст. Второ, ще персонализираме активния филтър за портфолио с помощта на раздела Подробно du модул.
Влизам настройки на страницата, щракнете върху трите точки в средата на екрана. след това изберете икона на зъбно колело което ще отвори настройките на страницата. Тогава ти отидете до раздела Custom CSS и въведете следното, за да добавите фон към филтърния текст.
Персонализиран CSS
В този CSS фрагмент ние се насочваме към фоновия цвят на филтъра. Ние също така насочваме и стилизираме състоянието му при задържане. След това в дневния ред нека добавим още малко CSS към модула и да маркираме нашия раздел Активен филтър.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}
Стил на активния раздел на филтъра за портфолио
Активният раздел на fфилтър за портфолио привлича вниманието на потребителите към текущата категория на портфолиото, което посещават. В момента този филтър има бял текст и светъл фон.
Ще отидем в раздела Подробно на модула Filterable Portfolio и добавете текст към състоянията по подразбиране и при задържане на тази функция. Ето CSS свойствата, които ще добавим в състояние по подразбиране:
background: #ff6651;
color: #ffffff !important;
Състояние при задържане
При задържане на мишката ще променим фона на черен.
color: #000000!important;
Окончателен вид на дизайна на филтрируемото портфолио на Divi с „Divi Conference“
Ето го окончателният вид!
А сега, ето как изглежда, когато задържите!
Персонализиране на модула за филтрирано портфолио на Divi: „Онлайн йога инструктор на Divi“
Както при Divi Conference Edition, намерете своето оформление в пакета за оформление на онлайн йога инструктор в Divi Builder.
Ще използваме оформлението на целевата страница за този урок. Превъртете надолу до секцията Класове на секции със заглавие Раздел Всички предстоящи класове.
Вмъкване на модула Filterable Portfolio
Оттук нататък ще премахнем редовете с класовете. Кликнете върху лилавата икона с три точки върху нея . Тогава, изберете изглед на телена рамка. Накрая ще изтриете двата реда, съдържащи три колони.
След това ще ги заменим с една колона в реда вътре. След това ще добавим нашия модул за филтрирано портфолио.
Както в предишния пример, ще използваме оформлението на мрежата за този модул с кратно на 4 за броя на публикациите.
Сега нека направим нещо малко по-различно с информацията, която представяме на картата.
В раздела съдържание, навигирайте до елементи и премахнете избора Показване на категории . Това означава, че модулът Портфолио ще показва само името на проекта без името на категорията, в която се намира.
Персонализиране на текста на критериите за филтриране, заглавието на проекта и текста на страниците
Нека дефинираме стиловата база за текстовите части на нашия модул. Основният текст на това оформление е Отворени Sans и шрифтът, използван за основните заглавия, е Cinzel. Следователно ще използваме комбинация от тези два шрифта през целия процес на стилизиране.
Texte
- Подравняване на текст: центрирано
- Цвят на текста: Светъл
Текст на заглавието
- Шрифт на заглавието: Cinzel
- Цвят на текста на заглавието: #ffffff
Текст на критериите за филтриране
- Критерии за филтриране Дебелина на шрифта: удебелен
- Цвят на текста на критериите за филтър: #ffffff
Текст за пагинация
- Тегло на шрифта на страниците: Получер
Ето как изглежда нашият филтрируем портфолио модул в момента. Не е много, но бавно стигаме!
Създайте полупрозрачно наслагване при задържане
Нека почерпим вдъхновение от различните модули и красивите градиенти в това оформление. За целта ще създадем полупрозрачно наслагване при задържане и ще персонализираме иконата, която също се появява при задържане.
- Цвят на иконата за мащабиране: #323741
- Цвят на наслагване при насочване: rgba (255 201 165, 0,85)
- Инструмент за избор на икона при задържане: потърсете лист и вижте иконата по-горе
Добавяне на граница към елементи от мрежата на портфолио с персонализиран CSS
Подобно на нашия първи пример, сега ще използваме CSS, за да добавим повече интерес към нашия модул Filterable Portfolio.
Сега ще добавим рамка около всеки отделен елемент в мрежата на портфолиото. Използвайте CSS фрагмента по-долу в персонализираната CSS част от настройките на страницата, за да добавите нашата граница.
Ние също ще използваме „border“ като CSS клас за този модул.
- CSS клас: рамка
Персонализиран CSS
/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}
Тук вече имаме нашия модул за филтрирано портфолио с хубава рамка – и подложка – около всеки елемент от мрежата.
Добавен е CSS към стила на границата на страниците
За разлика от предишния ни пример, нека добавим цвят към границата на нашата пагинация с CSS. Това също ще отиде в района Настройки > Персонализирана CSS страница .
/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}Стил на текста на критериите за филтриране
Подобно на стила на нашия модул Divi Conference Portfolio, ние искаме да добавим джаз към нашите филтри за категории. Отново искаме да черпим от стила, който вече присъства в предоставения ни шаблон.
Ето CSS, който ще добавим в нашата персонализирана CSS секция, за да насочим фона и курсора на лентата с филтър.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}С тези две нови допълнения към нашия персонализиран CSS, ето как изглежда нашият модул за филтрирано портфолио.
Забележете обаче как активният филтър за портфолио се губи. Винаги има светъл фон с бял текст върху него. Нека да отидем в настройките на модула и да добавим малко CSS, за да променим това.
Персонализиран CSS
Активен филтър за портфолио:
background: #ffffff;
color: #323741 !important;
Премахнете анимацията на модула
За да осигурим по-чисто изживяване, ние ще премахнем анимацията по подразбиране, която идва с модула Filterable Portfolio. За целта първо ще трябва да се върнем в настройките на нашата страница и да добавим някакъв CSS, който ще е насочен към елементите на решетката на портфолиото и ще премахне плъзгащ се преход това се случва извън кутията.
Персонализиран CSS
/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}Прочетете още: Divi: Как да промените броя на колоните в блог
Променете мрежата на портфолиото от четири колони на три
Най-новото ни допълнение към CSS ще бъде да трансформираме нашия модул за филтрирано портфолио от четири колони в три. Това ще ни даде повече място да видим нашите проекти.
Освен това ще добавим допълнителен ред към нашия модул. Ще намерите и най-новия CSS фрагмент, който можете да използвате, за да конвертирате вашите колони.
Персонализиран CSS
За този последен фрагмент ще добавим CSS ID #мрежа с три колони към нашия модул. Все пак ще запазим нашия CSS клас от преди непокътнат.
/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}
Изтеглете DIVI сега!!!
Заключение
Както при повечето модули на Divi, настройките, които идват с Divi, могат да бъдат доразвити с CSS. Представянето на вашата работа е важна част от управлението на онлайн бизнес, блог или марка.
Като такъв, наличието на организиран начин за показване на работата ви е от съществено значение. Спечелете съвети, които бяха споделени днес, за да участвате във вашето собствено дизайнерско пътешествие на модула Filterable Portfolio на Divi.
Надяваме се, че тази техника ще добави още едно полезно дизайнерско умение за бъдещи проекти.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...