Когато създавате целева страница за конкретни продукти, независимо дали става дума за ново пускане на пазара или продажба, за която се подготвяте, шансовете са големи да използвате модула Shop в даден момент. Модулът Divi Shop ви позволява динамично да извличате продукти от плъгина WooCommerce и ги стилизирайте с помощта на вградените опции на Divi. 

Сега по подразбиране модулът shop се предлага с няколко структури на колони, които всички се превеждат в две колони на по-малки размери на екрана. Това означава, че колкото повече продукти изберете да покажете, толкова повече вертикално превъртане е необходимо, за да стигнете до следващата част на вашата целева страница.

В съвременния уеб дизайн, техника, често използвана за ограничаване на вертикалното скролиране и показване на елементи въз основа на предпочитанията на посетителите, е използването на карти с плъзгане. В този урок ще ви покажем как да превърнете модула за магазин на Divi в динамични продуктови карти на по-малки размери на екрана, без да използвате плъгин. 

Ще започнем с подготовката на различните елементи на нашата продуктова секция и ще използваме малко CSS код, за да активираме ефекта на плъзване. Това е чудесен начин да покажете широка гама от продукти на целевата си страница, без да претоварвате посетителите си. 

Възможен резултат

Преди да се потопим в урока, нека да разгледаме резултата. Активираме магнитните карти на продукта само на таблети и мобилни телефони. На работния плот запазваме структурата на колоните, която определяме в модула Магазин.

1. Конфигурирайте WooCommerce и страници с продукти

Преди да влезете в частта Divi на този урок, важно е плъгинът WooCommerce е инсталиран и активиран на вашия уебсайт. Ако все още не сте го направили, добавете няколко продукта в зависимост от броя на продуктите, които искате да показвате във вашия модул Магазин.

2. Създайте нова страница и изтеглете оформлението на канцеларските страници

Създайте нова страница

След като продуктите са на място, добавете нова страница във вашия бекенд на WordPress. Дайте на страницата си заглавие, публикувайте страницата и активирайте Divi Visual Builder.

Изтеглете оформлението на целевата страница

След като влезете в новата си страница, отидете до вашите предварително зададени оформления и изтеглете оформлението на целевата страница на канцеларски материали. Въпреки че използваме това специфично оформление, можете да използвате всяко друго оформление, което искате, стига да добавите или намерите модул за съхранение в това оформление.

3. Променете секцията на магазина

Намерете секцията с магазинния модул

Ако превъртим надолу до новата ни страница, която създадохме с оформлението на началната страница на канцеларските материали, ще попаднем на раздел с модул за магазин. Ще използваме този раздел през следващите стъпки в този урок.

Настройки на линията

Отзивчиво оразмеряване

Започнете, като отворите настройките на реда на реда, съдържащ модула Магазин. Както споменахме по-горе, запазваме същия дизайн на работния плот, ще активираме магнитните карти на продукта само на по-малки размери на екрана. 

За да създадем безпроблемно изживяване, ще позволим на реда да докосва лявата и дясната страна на нашия екран, като променяме ширината в настройките за оразмеряване.

• Използвайте персонализирана ширина на улука: 1
• Ширина: 80% (десктоп), 100% (таблет и телефон)

видимост

Ние също така ще гарантираме, че нищо не надхвърля контейнера на реда, като зададем параметрите на видимост на скрити.

• Хоризонтално преливане: скрито
• Вертикално преливане: скрито

Настройки на модулния магазин

Изберете броя продукти и структурата на офис колоните по ваш избор

След това ще отворим настройките на модула Shop. Промените, които правим в нашия CSS код (които ще добавим по-късно) зависят от това колко продукти показваме. 

Ще започнем, като ви покажем как да превърнете магазинния модул с 8 продукта в продуктови карти. Можете да изберете всяко оформление на колоната, което искате за работния плот.

• Брой продукти: 8
• Колонна подредба: 4 колони

Отзивчиво оразмеряване

За да увеличим размера на нашия магазин модул, ние ще променяме параметрите за оразмеряване в раздела за проектиране. Имайте предвид, че правим това само за таблета и телефона.

• Ширина: 100% (десктоп), 250% (таблет и телефон)
• Максимална ширина: 100% (бюро), 250% (таблет и телефон)

CSS клас

Също така ще добавим CSS клас към нашия модул за съхранение. По-късно, когато добавим CSS кода, можем да трансформираме модула Shop, който носи само този CSS клас. С други думи, ако искате друг модул Shop да се появи в нормално състояние, като изключите този CSS клас, ще ви позволи да го направите.

• CSS клас: прекарване на пръст на карти

Реактивни преливания

Ще завършим параметрите на линията, като променим параметрите на видимост на различни размери на екрана. Както можете да видите в настройките, искаме ефектът на превъртане да се появи само на по-малки размери на екрана.

• Хоризонтално преливане: скрито (бюро), превъртане (таблет и телефон)
• Вертикално преливане: скрито

Добавете кодов модул под магазин

След като промените модула Shop, можете да добавите кодов модул малко по-долу.

Добавете CSS код към модула

Следният CSS код автоматично ще трансформира нашия магазин от 8 продукта в реактивни магнитни карти:

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

Съпоставете различни акаунти на продукти

Сега, ако искате да добавите по-малко (или повече) продукти към модула на вашия магазин, кодът се променя леко на две места. И двете места трябва да бъдат променени ръчно, за да съответстват на желания резултат. Нека променим например броя на продуктите в нашия магазин модул на „4“.

• Брой продукти: 4

Когато се върнем към нашия код, трябва да направим две промени. Първо, ще трябва да модифицираме колоните на шаблона на мрежата. Вместо 8, ние използваме 4 (същото число като нашия брой продукти). Също така увеличаваме процентния размер, който тези продукти заемат в нашите продуктови листове (колкото повече продукти, толкова по-малко място).

решетка-шаблон-колони: повторете (4, 14%)! важно;

След това ще променим и ширината на контейнера, в който са поставени продуктите. За 4 продукта това се равнява на 150%. Тези стойности не са фиксирани, те се получават чрез игра и намиране на хармония между колоните на решетъчния модел и ширината на контейнера. 

За да намерите правилния баланс, превключете към мобилния изглед във Visual Builder и внимателно коригирайте стойностите, докато преглеждате резултата от тези промени.

width: 150%!important;

Добавете щракване към превъртането

Ако искате да подобрите потребителското изживяване с дизайна на магнитната си карта, можете да добавите и прихващане с превъртане. Функцията за заснемане на превъртане позволява на посетителите ви да превъртат, като се фокусират върху началото на нов продукт.

 Това означава, че сканирането им не е необходимо да бъде точно, превъртащият шлем ще поеме в някакъв момент и дисплея, регулиращ позицията си в страничния механизъм за превъртане. 

За да активирате скролирането на картите за плъзгане на вашия продукт, добавете ред CSS код към всеки продукт поотделно в CSS кода (вижте екрана за печат по-долу).

scroll-snap-align: начало

Ние също ще активираме заснемането на превъртане на нашия модул от магазина, като добавим следния ред от CSS код:

тип превъртане: x задължително

Използвайте повторно модула на семинара, за да покажете други категории

Клонирайте цяла линия веднъж

След като завършите първия набор от магнитни карти, можете да клонирате цялата линия веднъж.

Премахване на кодов модул в дублиран ред

Докато модулът ви за съхранение съдържа същия CSS клас като предишния, кодов модул ще свърши работа. Продължете и премахнете модула с код в дублиращия се ред.

Клонирайте дублиращата линия колкото искате

И клонирайте дублиращата линия сега толкова пъти, колкото е необходимо, в зависимост от броя на наборите карти, които искате да покажете на целевата си страница!

4. Запазете промените на страницата и прегледайте резултатите на мобилно устройство

Уверете се, че след като приключите с добавянето на картите за плъзгане на продукта, запазвате страницата си, преди да излезете от Visual Builder и сте готови!

изследване

След като преминахме през всички стъпки, нека да разгледаме окончателно как изглежда на различни размери на екрана.

Заключителни мисли

В тази статия ви показахме как да превърнете интегрирания модул Divi Shop в продуктови магнитни карти на по-малки размери на екрана. На работния плот сме запазили оригиналната структура на колона, присвоена на модула Shop. 

Използването на карти за плъзгане на продукти ви позволява да добавяте безкрайни продукти към хоризонтален механизъм за плъзгане, без да смазвате вашите вертикални превъртащи се посетители.

Това е тенденция, която често се използва в съвременния дизайн на уебсайтове, тъй като се фокусира върху поведението на потребителите и улеснява достъпа до широк спектър от елементи на по-малки екрани.

 Можете да използвате тези продуктови листове на всяка страница, но това е особено удобно за всички целеви страници на продукти, които създавате. Можете също така да изтеглите JSON файла за оформлението безплатно! 

Ако имате някакви въпроси или предложения, не се колебайте да оставите коментар в раздела за коментари по-долу.