Трябва да създадете шестнадесетична карта с ефект на задържане чрез мощния Page Builder Elementor ? Ако е така, разберете в тази статия как да стигнете до там.
Ако искате да имате общ преглед на това, за което ще говорим в този урок, ви каним да гледате следното видео:
За да завършите този урок, ще ви трябва Pro версията на Elementor, защото ще използваме персонализиран CSS код, който се поддържа само от тази версия наElementor.
Прочетете и нашето ръководство на: Как да добавите галета към уебсайт с Elementor
Нека създадем нов раздел със структура за 3 колони, след това в панела нека дефинираме Височина от Мин. височина, след това Минимална височина нека щракнем върху VH и задайте плъзгача на 100.
Нека добавим а Притурка за вътрешна секция – Вътрешен раздел – в средната колона. Тази джаджа по подразбиране е конфигурирана с 2 колони, нека изтрием една от тях. Нека го конфигурираме Височина от Мин. височина и Минимална височина нека го дефинираме плъзгач до 400.
В раздела Стил, нека зададем фоновото изображение, като изберете изображение от вашата библиотека, след което зададете позицията му на Superior Centered, Повторете на Неповторно и Размерът е включен Покрийте.
Sur Фоново наслагванекликнете върху Деградира за Тип фон, изберете и включете основния цвят #2299EF и местоположение на 20, след това вторичният цвят #1917 г.пр.н.е и местоположение на 50, ъгълът е включен 140 и непрозрачността е включена 0.85
След това добавете a Заглавие Widget вВътрешна секция и като Заглавие, Нека да дадем име, след което в раздела Стил на джаджата за заглавие променете цвета на # FFFFFF. След това добавете a Притурка за текстов редактор, и в раздела Стил Центрирайте текста и променете цвета на # FFFFFF.
Вижте също: Как да добавите изображение към джаджа за таблица с цени с Elementor
Изберете отново Вътрешна секция, отидете на раздела Разширено, в секцията Вътрешен марж, въведете 25-2-2-2
Изберете отново вътрешната секция и отидете на раздела Разширени и в секцията Custom CSS копирайте и поставете следния код:
/*Traçage Hexagone*/
selector{
clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
}
След това нека добавим втория кодов фрагмент по-долу към предишния:
/*CSS pour Afficher/Masquer la Superposition du dégradé*/
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
opacity: 0.85 !important;
}
/*CSS pour Afficher/Masquer l'élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
}
selector:hover .elementor-column{
opacity: 1;
}
След това нека поставим и фрагмента по-долу.
/*CSS d'effet de transition avec ombre*/
selector:hover{
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
.hexa-mom::before{
content: '';
position: absolute;
bottom: -70px !important;
width: 100%;
color: #fff;
height: 60px;
border-radius: 50%;
background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
display: block;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
z-index: 999;
}
.hexa-mom:hover::before{
opacity: 1 !important;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
След това нека изберем средната колона и в раздела напреднал, въведете хекса-мама в полето CSS класове.
Нека дублираме тази колона 2 пъти и да изтрием останалите 2 колони.
Нека променим фоновото изображение на други джаджи Вътрешна секция, заглавието и съдържание на текстовия редактор, а също и цветовете на градиентите за наслагване на фона. Трябва да имате резултат, който изглежда така:
Тук току-що сте изпълнили тази задача лесно. Просто прегледайте работата на вашия таблет и смартфон, опитвайки се да промените полетата, за да съответстват на всяко устройство.
Вземете Elementor Pro сега!
Заключение
Така ! Това е всичко за тази статия, която ви показва как да създадете шестнадесетична карта с ефект. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...