Искали ли сте някога да представите създаване на продуктова карта с Elementor ?
Това ще ви покажем в този урок. За да получите доста точна представа за това, за което ще говорим днес, ви каним да гледате следното видео:
Този урок е за представяне на продукти, които са обувки, като се подчертават техните размери, цветове и бутонът за покупка на всеки. Когато задържите курсора на мишката върху всяка от картите, тази информация ще се появи. Ето кратко обобщение на това, което ще направим.
За да следвате този урок, ви каним да намерите снимки на обувки и да имате професионална версия на Elementor. Ако все още го нямате, щракнете върху тази връзка, за да го получите.
Но нека се върнем към това, за което сме тук.
Нека създадем страница и да я модифицираме с Elementor.
В този нека изберем структура с 3 колони. Да го уредим надменност от мин. височина , минималната височина на VH и задайте курсора на 100.
В раздела Стил изберете цвета на фона #130640
В средната колона вмъкнете a Уиджет за изображения като изберете изображение на обувката от вашата библиотека.
Отидете в раздела Стил и в свойството на изображението задайте ширината на 80
След това плъзнете a Притурка за заглавие и въведете заглавието обувки Nike - Това е пример, може да е съвсем друга марка -
Прочетете още: Как да оптимизираме оформлението на уебсайта си с Elementor
Задайте HTML маркера на H3 и центрирайте подравняването
Отидете в раздела Стил и променете цвета на текста на бял цвят
Променете и типографията
След това плъзнете a Джаджа Вътрешен раздел под Притурка за заглавие които сте поставили по-горе.
По подразбиране тази джаджа ще ви предложи 2 колони, изтрийте една от тях. В това Джаджа Вътрешен раздел, Вмъкнете a Джаджа за заглавие.
Дайте го като заглавие Разрез : и задайте HTML маркера на педя.
В раздела Стил променете цвета на заглавието, размера на 15 и мазнините на 300
В раздела Разширени задайте само дясното поле на 5 и в свойството позициониране изберете вградено (автоматично).
Добавете в същия вътрешен раздел джаджа за бутони за текст 8 и разстояние между иконите на 0.
Прочетете още: Как да превъртите дълго изображение на портфолио с Elementor
В раздела Стил променете цвета на текста и цвета на фона на бутона съответно на Черно и Бяло и във вътрешното поле въведете 6-10-6-10 съответно за вътрешните горни полета отгоре-дясно-долу -ляво.
В раздела Разширени задайте само лявото поле на 5 и в свойството Позициониране изберете Inline (Auto).
Дублирайте този бутон 3 пъти и променете текста на последните 3 бутона на 9,10,11 - можете да направите това и с буквите S, M, L, XL, XXL-
Щракнете върху раздела за редактиране и задайте Хоризонтално подравняване на Център
След това дублирайте тази вътрешна секция -Вътрешна секция- и променете Размер по цвят, премахнете 3 бутона и на този, който ще остане, изтрийте текста на бутона.
В раздела Съдържание на бутона, изберете иконата на кръг от библиотеката с икони, щракнете върху Вмъкване, за да я добавите към бутона.
В раздела Стил дайте размер 24 на типографията и свържете вътрешните полета и въведете 0. В цвета на фона задайте прозрачността на min и след това можете да промените цвета на текста на син например.
След това дублирайте този бутон 3 пъти и променете цветовете на другите два на жълто и червено. След това щракнете върху вътрешната секция, за да я редактирате и в раздела Разширени задайте горното и долното поле на -5 и 10.
Сега ще добавим джаджа за бутони под втората джаджа за вътрешна секция, въведете като текст Купи сега и Подравняване към центъра. В раздела Стил задайте бутона на бяло и текста на бутона на черен, след което задайте всички радиуси на границата на 20.
Изберете основната колона, върху която работихме, и задайте подравняването вертикален от Обществена среда, в раздела Стил изберете Тип фон като Деградира и като Тип изберете радиален след това на основния цвят задайте прозрачността и местоположението на 94. За втория цвят задайте местоположението на 77 и радиусът на ръбовете над 10.
В раздела Разширени задайте полетата на 0-35-0-35 и вътрешните полета на 50-20-50-20.
След това можете да скриете панела, за да видите как изглежда работата ви. Ще видите, че вашата карта е много красива, но ние ще я оживим, като анимираме определени секции. И за това ще анимираме размера, цвета и бутона за покупка.
Вижте също: Как да промените заглавката при превъртане на страница в Elementor
Нека първо разделим първия Вътрешен раздел, който показва размера на продукта и в раздела Разширени, дефинирайте Избледняват като Movement Effect - Анимация при влизане и забавяне на анимацията са включени 300.
Нека направим същото с вътрешната секция, която показва цветовете, но със закъснение на анимацията от 800. За бутона за покупка, забавянето му ще бъде 1000
Сега ще присвоим класа скрий се първо Вътрешна секция и бутон за покупка. Изберете първата вътрешна секция, в раздела Разширени и в свойството Разширени въведете hide-first в полето CSS Classes. Направете същото за другата вътрешна секция и за бутона за покупка.
Затова ще добавим CSS код, който ще анимира цялата колона. Копирайте следния код:
селектор {
Височина: 400px;
дисплей: Flex;
}
/ * CSS за Покажи / Скрий * /
селектор .hide-first {
дисплей: няма;
}
селектор: задръжте курсора на мишката .hide-first {
дисплей: блок;
}
/ * Трансформация на изображение * /
селектор img {
преход: лекота .5s;
}
селектор: задръжте курсора на мишката img {
трансформиране: превеждане (-20px, -40px) завъртане (-25deg) мащаб (1.4);
}
/ * Преглед на мобилни устройства * /
@media (макс. ширина: 767 пиксела) {
селектор: задръжте курсора на мишката img {
трансформиране: превеждане (-20px, 0px) завъртане (-10deg) мащаб (1);
}
селектор {
поле: 50px 10px;
}
}
Изберете колоната, за да я промените, и отидете в раздела Разширени и в полето Custom CSS поставете този код.
NB: Трябва да знаете, че тази опция е достъпна само ако имате Pro версията наElementor.
Ако това е направено, вашата карта ще се анимира при задържане на курсора на мишката, като по подразбиране ще скрие размерите, цветовете и бутона за покупка.
По отношение на обяснението на кода, частта за коментари дава общ преглед. Но като промените стойностите, ще разберете за какво е всяка инструкция.
Вижте също: Как да добавите два бутона един до друг в една и съща колона с Elementor
Ако всичко работи нормално, дублирайте тази колона два пъти и изтрийте останалите празни колони.
Всичко, което трябва да направите, е да замените изображенията и заглавията на другите блокове и накрая да прегледате работата си.
Току-що създадохте красива продуктова карта.
Вземете Elementor Pro сега!
Заключение
Така ! Това е всичко за този урок, който ви показва как да направите продуктова карта с Elementor. Ако имате някакви притеснения как да стигнете до там, уведомете ни в Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...