Трябва да създадете шестоъгълна карта с ефект на задържане на курсора, използвайки мощния Elementor Page Builder? Ако е така, разберете в тази статия как да стигнете до там.
Ако искате да имате общ преглед на това, за което ще говорим в този урок, ви каним да гледате следното видео:
За да завършите този урок, ще ви трябва 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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...