Искате ли да откриете как да създадете картичка с ефект на портфолио? В този нов урок ще ви покажем как да го направите с 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.
Нека покажем страницата си и в режим на смартфон; не би трябвало да има проблеми. Но ако е така, изберете нашата вътрешна секция (Internal Section), в секцията ѝ „Съдържание“ (Content) променете минималната височина (Minimal Height).
Сега нека дублираме средната колона два пъти, след което изтрийте другите две празни колони.
Нека променим заглавията на тези колони, след което променим изображенията
Ще трябва да имате великолепен раздел, от който ето резултатите:
Ето го, току-що се справихте с тази задача лесно.
Вземете Elementor Pro сега!
Заключение
Това е всичко! Това е всичко за тази статия, която ви показва как да създадете картичка с ефект на портфолио. Ако имате някакви затруднения с това, уведомете ни в коментарите. Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...