Искате ли да знаете как да персонализирате елементите на мрежата на модула Filterable Portfolio на Divi Последвайте ни в този урок...
Важно е да имате специална зона на уебсайта си, където да представяте работата си. Ако сте стилист, можете да създадете множество проекти на уебсайта си в WordPress, за да покажете своите дизайни. Ако сте създател на марка, можете да използвате портфолио, за да представите работата си. Освен това можем да направим още една крачка напред и да добавим различни категории за нашите проекти. Ето къде... Ето къде идва модулът Filterable Portfolio на Divi .
С този модул можем да покажем упоритата си работа по прост и организиран начин.
В днешния урок ще персонализираме отделните елементи на мрежата на модула Filterable Portfolio. Ще използваме оформления от безплатните пакети за оформления. Конференция Divi et Онлайн инструктор по йога Divi предоставя се при всяка покупка на Divi .
Както при всичко, свързано с Divi, имаме възможност да персонализираме този модул, за да отговаря на нашите нужди и желания. Преди да се задълбочим в стила обаче, нека научим малко повече за самия модул.
Какво представлява модулът Filterable Portfolio в Divi?
Проектите са вид персонализирани публикации, които работят подобно на обикновените публикации. Можете да ги намерите в таблото си за управление на WordPress.
Тук ще създавате свои индивидуални проекти, които ще попълват модула ви „Филтрираемо портфолио“. Модулът ни дава два начина да представим нашите проекти: в мрежов формат ou във формат на пълна ширина. За нас ние ще използваме и персонализираме формата на мрежата.
С модула Filterable Portfolio ще можем да представим най-новите си проекти. Потребителите на нашия сайт ще видят филтърна лента в горната част на мрежата на нашето портфолио. Оттам те могат да разглеждат различните категории портфолио, които разрешаваме да показват в модула.
Ето примерна мрежова конфигурация на модула с някои примерни проекти:
Области, които трябва да имате предвид при създаването на филтрируемото портфолио на Divi
Както всички Divi модули, модулът Filterable Portfolio се предлага с редица функции, които можем да персонализираме, за да отговарят на нашите нужди и желания. Повечето от функциите на модула могат да бъдат променени в раздела. Дизайн от модалните настройки на модула. Можем да редактираме следните области и още:
- Заглавие на проекта
- Категория на проекта
- Винетка
- Филтриране на текст
- Миниатюра при задържане
- Номериране на страници
Това не е пълен списък и дори не сме започнали да говорим за това как CSS е добавил по-задълбочени персонализации към този модул!
Как ще персонализираме модула за филтрирано портфолио на Divi
Както споменахме по-рано, за този урок ще използваме две оформления: Конференция Divi et Онлайн инструктор по йога Divi. По-долу можете да получите преглед на работата, която ще свършим по време на този урок.
Разположение на елементите в презентацията „Конференция на Divi“
Разположение на елементите на страницата „Divi Online Yoga Instructor“
Можете лесно да изтеглите и двата оформления от Divi Builder.
А сега да започваме!
Вижте също: Divi: Изберете между решетката и оформлението с пълна ширина на модула Filterable Portfolio
Персонализиране на модула Divi Filterable Portfolio: „Divi Conference Edition“
Първо, ще трябва да инсталираме шаблона за страница за събитие от Divi Conference Layout Pack. След като създадем новата страница в WordPress и активираме Divi Builder, ще влезем в Divi Library.
Влезте в библиотеката за оформление на Divi
Кликнете върху иконата "Зареждане от библиотекатаза достъп до библиотеката с оформления на Divi
Намерете оформлението в Divi Layout Library
Използвайки функцията за търсене в библиотеката за оформление на Divi, търси разпоредбатаСтраница със събития на конференцията".
Инсталирайте оформление
След като изберете оформлението, щракнете върху бутона „Използвайте това оформление„за да инсталирате оформлението на вашата страница.“
Премахнете и сменете модула за изображение
Ще премахнем модула „Изображение“, показан по-долу, за да освободим място за модула „Филтрираемо портфолио“, който ще персонализираме. Кликнете върху иконата „Изтрий„след като задържите курсора на мишката върху изображението, за да го изтриете.“
Поставете модула за филтрирано портфолио на Divi
След като премахнахме модула „Изображение“, вече можем да освободим място за нашия модул „Филтрираемо портфолио“. Ще кликнем върху иконата „Добавяне на модул"(сивият знак плюс), след което изберете модула в модалния прозорец на модула, който се появява.
Задаване на броя на публикациите и оформлението на портфолиото
По подразбиране този модул ще представи вашата работа в една колона. Ние обаче ще използваме оформлението на мрежата, което се предлага по подразбиране с 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 фрагменти, за да добавим допълнителна персонализация към нашия модул Filterable Portfolio. Първо ще персонализираме номерирането на страниците на този модул. След това ще премахнем рамката, която се показва в горната част, с един ред CSS.
Текст за пагинация
- Пагинация:
- Шрифт: Krona One
- Подравняване на текста: центрирано
- Цвят на текста: #ff6651, #000000 (Hover)
За нашия CSS ще преминем към раздела Подробно на нашия модул. Второ, ще кликнем върху раздела Персонализиран CSS. След това ще въведем следния фрагмент от код, за да премахнем рамката над нашата пагинация, придавайки ѝ по-изчистен вид.
Пагинация на портфолиото
border-top: 0px;
Използване на настройките на Divi и CSS за персонализиране на филтърния текст
За текста на филтъра ще го направим по-сложно. Ще използваме CSS, за да променим фона, както и ефектите при задържане на курсора на мишката.
Искаме да запазим перфектна приемственост между новодобавения модул и стила на пакета за оформление. Първо, нека да преминем към настройките на шрифта в Divi.
Текст на критериите за филтриране
- Критерии за филтриране:
- Шрифт: Krona One
- Цвят на шрифта: #ffffff, #000000 (Hover)
В сегашния си вид, нашият филтър изглежда е изчезнал. Всъщност, в състоянието си по подразбиране, той е просто бял текст на бял фон. Ще променим това обаче с персонализиран CSS на две места.
Първо, ще добавим CSS фрагмент към настройките на страницата, който ще добави фон към текста на филтъра. Второ, ще персонализираме филтъра за активно портфолио, използвайки раздела Подробно du модул.
Влизам За да получите достъп до настройките на страницата, щракнете върху трите точки в средата на екрана. след това изберете иконата на зъбно колело което ще отвори настройките на страницата. Тогава ти Отидете в раздела „Персонализиран 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 Filterable Portfolio: „Divi Online Yoga Instructor“
Както и при изданието Divi Conference, намерете своето оформление в онлайн пакета за оформления за инструктори по йога в 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;
}
Ето сега нашия модул Filterable Portfolio с хубава рамка - и подплънки - около всеки елемент от мрежата.
Добавен е 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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...