Искате ли да използвате модула Filterable Portfolio на Divi и не знаете кое оформление да изберете?
Модулът « Портфолио с възможност за филтриране "на Divi ви дава две опции за оформление, от които да избирате. И двата варианта имат предимства и работят много добре за определени цели.
В тази статия ще сравним оформлението на цялата ширина и мрежата на този модул, за да ви помогнем да решите от какво се нуждаете за вашия уеб сайт.
Също така ще персонализираме и двата оформления, за да видим как работят в едно оформление Divi.
Нека да започнем!
изследване
Първо, нека видим какво ще създадем в този урок.
Настолна версия на оформлението на мрежата
Изтеглете DIVI сега!!!
Телефонна версия на мрежовото оформление
Настолна версия на оформлението с пълна ширина
Прочетете още: Divi: Как да използвате ефекти на сянка и задържане на мишката, за да създадете интерактивно съдържание
Телефонна версия на оформлението с пълна ширина
Как да промените оформлението на филтрирания модул за портфолио
По подразбиране модулът „Портфолио с възможност за филтриране“ показва оформлението в пълна ширина. Можете да промените оформлението, за да показвате елементи в мрежа. Първо отворете параметри на модула.
След това изберете раздела Design. Първият вариант е оформление. Има падащ списък с няколко възможности за избор. Изберете го, за да избирате между Пълна ширина et решетка.
Ако изберете опцията, която в момента не е избрана, модулът ще презареди и ще покаже елементите на портфолиото в това оформление. Примерът по-долу показва оформлението на мрежата.
Сравнение на оформлението на филтрируем портфолио модул
Двете оформления са много различни, но имат някои прилики. И двата показват филтъра в горната част на модула, заглавието и мета под изображенията на елемента и пагинацията в долната част на модула.
Ето как те са различни.
Оформление с пълна ширина
Пълна ширина показва голямо изображение с елемент на портфолио, заемащ цялата ширина на областта на портфолиото. Изображенията се показват в оригиналната си форма и се разширяват, за да паснат на наличната ширина.
Не добавя много място между елементите на портфейла. Препоръчваме да ограничите броя на публикациите до няколко. Примерът по-долу показва оформлението на пълна ширина с 2 публикации.
Оформление на мрежата
Мрежовото оформление показва до 4 елемента в ред. Добавя повече пространство между елементите. Изображенията се изрязват, за да се създадат миниатюри с еднакъв размер, независимо от размера и формата на изображението.
За този ограничихме модула до показване на четири публикации, за да покажем пагинацията.
Кога да използвате всяко оформление на модула Filterable Portfolio
И двете подредби имат своите предимства. Ето някои съвети кога да използвате всяко оформление.
Оформление с пълна ширина
Използвайте оформлението на пълна ширина, когато имате само няколко елемента за показване или искате да се фокусирате върху няколко елемента.
Използвайте също това оформление, когато искате да подчертаете или да привлечете вниманието към представени изображения.
Оформление на мрежата
Използвайте оформлението на мрежата, когато искате да покажете много елементи или когато искате оформление да показва повече елементи в по-малко пространство.
Как да персонализирате филтрирани оформления на модули за портфолио
Сега, след като видяхме как да избираме оформления, как работят и кога да ги използваме, нека видим как да персонализираме тези две оформления.
Ще използваме страницата Портфолио на Безплатен пакет за оформление на Painter налични в Divi. Ето оригиналната страница.
Ще заменим портфолиото с модула Filterable Portfolio и ще използваме същите изображения и заглавия.
Ще създадем две версии: една с оформление на пълна ширина и една с оформление на мрежа.
Как да персонализирате оформлението на решетката на филтрирания портфолио модул
Ще започнем с оформлението на мрежата. Ще използвам цветовете и шрифтовете от оригиналното оформление.
Съдържание
Отворете ги параметри на модула и въведете 4 за Брой публикации. Избери всички категории които искате да покажете в модула.
- Брой публикации: 4
- Включени категории: Изберете категории
разпореждане
След това изберете раздела Дизайн и изберете решетка в опциите за оформление.
- Оформление: Решетка
Изображение
Превъртете до Изображение и изберете опцията BoxShadow. Променете го цвят на сянка в rgba(0,0,0,0.05).
- Сянка на кутията: 4ème опция
- Цвят на сянката: rgba(0,0,0,0.05)
Texte
След това превъртете надолу до Texte и модифицирайте подравняване В центъра. Това центрира филтъра, заглавието, мета и пагинацията.
- Подравняване на текста: центрирано
Текст на заглавието
След това превъртете надолу до Заглавен текст и променете следните настройки.
- Шрифт на заглавието: Merriweather
- Цвят на текста на заглавието: #000000
Променете размера на полиция при 26px за настолни компютри, 20px за таблети и 18px за телефони.
- Размер на текста на заглавието: работен плот 26px, таблет 20px, телефон 18px
Текст на критерия за филтриране
След това превъртете надолу до Текст на критериите за филтриране и променете следните настройки:
- Критерии за филтриране:
- Шрифт: Монсерат
- Тегло на шрифта: получер
- Стил: TT
- Цвят на текста: #fd6927
- Размер на текста: 12px
Мета текст
След това превъртете надолу до Мета текст. Променете го полиция в Монсерат и цвят в #fd6927.
- Размер на мета текста: Монсерат
- Цвят на мета текста: #fd6927
Нагласи Искан на 12 пиксела, набуквен интервал на 2 пиксела и надменност на линия на 1,2 ем.
- Размер на текста: 12px
- Разстояние между металните букви: 2px
- Височина на мета линията: 1,2 em
Текст за пагинация
Накрая превъртете надолу до Текст за пагинация и го смени полиция в Монсерат и задайте цвят шрифт на черно. Затворете модула и запазете вашите настройки.
- Шрифт за пагинация: Монсерат
- Цвят на текста на пагинацията: #000000
Как да персонализирате филтрирания модул за портфолио в оформление с пълна ширина
Сега нека конфигурираме модула в оформление с пълна ширина.
Ще използваме същите дизайнерски насоки като оформлението на мрежата, но ще направим няколко промени, които работят добре за това оформление. Ще използваме прост CSS, за да направим някои малки промени.
Съдържание
Отворете ги параметри на модула и променете броя на публикации до 2. Това запазва страницата по-малка и по-управляема с големи изображения. Избери всички категории които искате да покажете в модула.
- Брой публикации: 2
- Включени категории: Изберете категории
елементи
Превъртете до Елементи и деактивирайте Показване на категории. Оставете другите активирани. Категориите все още ще бъдат активирани за филтъра, но няма да се показват със заглавието.
- Показване на категории: НЕ
разпореждане
Изберете раздела Design. при оформление, оставете Layout зададено на Пълна ширина, което е настройката му по подразбиране.
- Оформление: Пълна ширина
Изображение
След това превъртете надолу до Изображение . Изберете опцията Box Shadow и го смени цвят сянка в rgba (0,0,0,0.05).
- Сянка на кутията: 4ème опция
- Цвят на сянката: rgba(0,0,0,0.05)
Texte
След това превъртете надолу до Текст. Променете подравняване В центъра. Филтърът, заглавието и пагинацията ще бъдат центрирани с изображенията.
- Подравняване на текста: центрирано
Текст на заглавието
След това превъртете надолу до Текст на заглавието . Променете го полиция до Мериуедър и смени цвят в черно.
- Шрифт на заглавието: Merriweather
- Цвят на текста на заглавието: #000000
Променете размера на полиция при 40px за настолни компютри, 20px за таблети и 18px за телефони.
- Размер на текста на заглавието: работен плот 40px, таблет 20px, телефон 18px
Текст на критерия за филтриране
След това превъртете надолу до Текст на критериите за филтриране и променете следните настройки:
- Критерии за филтриране:
- Шрифт: Монсерат
- Тегло на шрифта: получер
- Стил: TT
- Цвят на текста: #fd6927
Текст за пагинация
След това превъртете надолу до Текст за пагинация. Променете го полиция в Монсерат, променете тегло полу-удебелен и задайте цвят на шрифта на #fd6927. Затворете модула и запазете вашите настройки.
- Шрифт за пагинация: Монсерат
- Цвят: #fd6927
- Тегло на шрифта: Полудебел
CSS заглавен текст
Отворете раздела Подробно и превъртете до Заглавие на портфолиото. Изберете иконата на работния плот. Копирайте кода по-долу за различни размери на екрана. Затворете модула и запазете вашите настройки.
Заглавие на портфолиото:
- работен плот
padding-bottom:40px- Таблети
padding-bottom:30px- Телефон
padding-bottom:20px
Résultats
Настолна версия на оформлението на мрежата
Телефонна версия на мрежовото оформление
Изтеглете DIVI сега!!!
Настолна версия на оформлението с пълна ширина
Вижте също: Divi: Как да промените градиента на фон при задържане
Телефонна версия на оформлението в пълна ширина
Изтеглете DIVI сега!!!
Заключение
Това е нашето виждане за използването на оформление с пълна ширина спрямо решетка в модула Портфолио за филтриране на Диви. Изборът между двете опции за оформление е лесен.
Всяка опция има предимства и трябва да бъде проектирана по различен начин, за да работи с вашия уеб сайт. Просто направете няколко настройки, за да сте сигурни, че вашият модул работи добре с всяко оформление на Divi.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...