Искате ли да научите как да създадете картичка с ефекта на портфолио? В този нов урок ще ви покажем как да го направите с Elementor.
Ако нямате представа за какво искаме да говорим днес, ви каним да гледате следното видео:
След това да се върнем към защо сме тук.
За да завършите този урок, ще ви трябва Pro версията на Elementor, защото ще използваме персонализиран CSS код, който се поддържа само от тази версия наElementor.
Прочетете още: Как да покажете текст над изображение с Elementor
Нека създадем нов раздел със структура от 3 колони, след което в панела нека дефинираме Височина от Мин. височина, след това Минимална височина нека щракнем върху VH и задайте плъзгача на 100.
Нека изберем средната колона и пуснем в тази колона Вътрешен раздел Widget. Джаджата Вътрешна секция е конфигурирана с 2 колони по подразбиране. Под 2-те колони нека пуснем джаджата Заглавие със заглавието Бирария Дриймър, изберете H4 за HTML маркера и Център за подравняване.
В раздела напреднал на джаджа за заглавие, Да влезем 30 за Горен марж
Нека отново да изберем нашата вътрешна секция. В панела нека го променим Височина от Мин. височина и Минимална височина нека зададем курсора на 380. След това нека изтрием дясната или лявата колона на вътрешната секция
Нека го пуснем Уиджет за изображения във вътрешната секция и вмъкнете изображение от нашата библиотека. нека изберем Цяла за Размер на изображението et Център за Подравняване.
NB: Ако искате да имате пълни страници като нашата, ние ви каним да заснемете страниците с помощта на разширението GoFullPage за Chrome, но можете да използвате и друго.
Открийте също: Как да създадете галерия с изображения с Elementor
След това в раздела Стил, кликнете върху PX de Широчина, нека зададем плъзгача на 260 et ле гранични лъчи от 10
След това нека променим Box Shadow, като променим Blur на 40 и Diffuse на -10.
В раздела Разширени, в секцията позициониране, изберете абсолютен за Позиция, Хоризонтална ориентация от Нетактичен, The décalage от 0, L 'Вертикална ориентация от Bas.
Нека дублираме два пъти нашата джаджа за изображение. Неизбежно всички те ще бъдат насложени. Нека изведем навигатора, за да имаме достъп до другите джаджи, скрити от първата.
Нека заменим изображението на втория Widget и в неговия Tab напреднал, нека ги модифицираме долни полета et Нетактичен чрез влизане 30 за всеки. Сега ще видите леко изоставане,
Направете същото за третата графична джаджа, но приложете полета от 60 за долното и лявото поле. Вече трябва да имате общ преглед на всички 3 джаджи за изображения.
Нека да изберем нашата джаджа Вътрешна секция, да отидем в нейния раздел напреднал и в раздела Персонализирана CSS, копирайте и поставете следния кодов фрагмент:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(Ако нямате този раздел, значи нямате Pro версията, ако искате да продължите, трябва да надстроите версията си)
Сега, ако задържите курсора на мишката над нашата карта, ще имате анимация за увеличение
Нека изберем нашата първа джаджа за изображения (най-ниската) и в нейния раздел напреднал, да вземем предна снимка за CSS класове.
За втората джаджа за изображения, нека напишем средата имг за CSS класове.
За третото Image Widget, нека напишем последно изображение за CSS класове.
Вижте също: Как да създадете галерия от изображения с раздели с Elementor
Задържайки курсора на мишката върху нашата колона сега, ще видим великолепна анимация на съдържание от нашата вътрешна секция.
Нека покажем нашата страница в режим на таблет. Ще видим, че изображенията няма да се показват правилно.
Изберете първата джаджа за изображение, в нейния раздел Стил, нека променим ширината, като щракнете върху компютър и след това въведете 150 като ширина. Нека направим същото с другите 2 джаджи за изображения.
Нека изберем нашия Вътрешен раздел, в неговия раздел Съдържание, нека променим Минимална височина от 225.
Нека също да покажем нашата страница в режим на смартфон, априори това не представлява никакъв проблем. Но ако има такива, нека изберем нашата вътрешна секция в нейната секция Съдържание, нека променим минималната височина.
Сега нека дублираме средната колона два пъти, след което изтрийте другите две празни колони.
Нека променим заглавията на тези колони, след което променим изображенията
Ще трябва да имате великолепен раздел, от който ето резултатите:
Ето го, току-що се справихте с тази задача лесно.
Вземете Elementor Pro сега!
Заключение
Ето го ! Това е всичко за тази статия, която ви показва как да създадете карта с ефект на портфолио. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...