Искате ли да научите как да увеличавате мащаба на профилна карта с плъгина за изграждане на страници Elementor?
В този нов урок за Elementor ще ви покажем как да приложите ефект на Zoom към профилна карта, като същевременно разкриете името на профила и неговите икони за социални медии.
Ако нямате представа за какво искаме да говорим днес, ви каним да гледате следното видео:
След това да се върнем към защо сме тук.
За да завършите този урок, ще ви трябва Pro версията на Elementor, защото ще използваме персонализиран CSS код, който се поддържа само от тази версия на Elementor.
Нека създадем нов раздел със структура от 3 колони, след което в панела нека дефинираме Височина от Мин. височина, след това Минимална височина нека щракнем върху VH и задайте плъзгача на 100.
Нека добавим джаджа Вътрешна секция в средната колона. Приспособлението Internal Section по подразбиране е конфигурирано с 2 колони, нека изтрием една от тях. Нека конфигурираме останалото в панела, като го модифицираме Височина от Мин. височина и Минимална височина нека зададем курсора на 400.
В раздела Стил, нека променим Фоново наслагване, Кликнете върху класически на типа фон и изберете изображение от библиотеката и в настройките на изображението изберете Центрирано Центрирано на позиция Покрийте на Размер. непрозрачност на 1 и
В секцията граници кликнете върху % и влезте 4 за всички бордюри.
В брой полета задайте плъзгача на 0 от ХоризонталенВ 70 от вертикаленВ 63 от замъгленоВ -60 от дифузьор. Трябва да видите красив ефект на сянка под вашето изображение.
в вътрешна секция плъзнете Притурка за заглавие. Като заглавие въведете Стив Джобс, в раздела Стил изберете белия цвят # FFFFFF. В типографията изберете Размер 20.
След това изберете колоната на приспособлението за вътрешна секция и в раздела Стил изберете типа граница, като щракнете върху Твърда, всички ширини на 1 и цветовете на #FFFFFF.
В раздела напреднал, променете полетата на 15 и вътрешни маржове на 20.
Сега поставете иконите на социалните медии, като плъзнете приспособлението за икони на социалните медии във вътрешния раздел.
Редактирайте връзките към социалните медии в раздела „Съдържание“, като щракнете върху „Всяка социална мрежа“. Ако искате да добавите още социални мрежи, щракнете върху бутона „Добавяне“.е елемент
В полето за икони щракнете върху Библиотека с икони и в лентата за търсене въведете първите букви на вашата социална мрежа, веднага щом я намерите, изберете я и щракнете върху бутона Вмъкване.
След това отидете на раздела Стил, в секцията икона, променете цвета на Personnalisé.
Прочетете също нашето ръководство за; Как да добавите пагинация с Elementor
Sur Основен цвят, задайте прозрачността на минимум.
Sur Вторичен цвят, изберете цвета # FFFFFF. На Размер въведете 20, Вътрешен марж е включен 0.4.
Сега кликнете върху раздела напреднал, и в раздела позициониранекликнете върху Personnalisé, за персонализирана ширина, въведете 0.
Открийте и вие Как да използвате Color Picker с Elementor
Sur Позиция, изберете абсолютен, на Shift 15На Вертикална ориентация choisir BasИ Изместване от 20.
Изберете отново Вътрешна секция и в раздела напреднал, в секцията Персонализирана CSS (Ако нямате този раздел, бързо надстройте до професионалната версия на Elementor, за да продължите)
Копирайте и поставете следния код в този раздел:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}Априори не трябва да виждате много, но ако задържите курсора на мишката върху изображението, трябва да видите увеличение, приложено към изображението.
Сега копирайте и поставете следния код след предишния код, за да покажете или скриете определени елементи от колоната:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}Сега веднага щом задържите курсора на мишката върху изображението, увеличението се прилага към изображението и се появяват имената и иконите на социалните мрежи.
Нека дублираме тази колона 2 пъти и да изтрием останалите 2 колони.
Променете фоновото изображение на вътрешните раздели, както и името и връзките на социалните мрежи.
Ето го, току-що се справихте с тази задача лесно. Просто прегледайте работата на вашия таблет и смартфон, опитвайки се да промените полетата, за да съответстват на всяко устройство.
Вземете Elementor Pro сега!
Заключение
Така ! Това е всичко за тази статия, която ви показва как да приложите ефект Zoom върху карта с профил. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...