Potřebujete vytvořit hex mapu s efektem vznášení přes mocné Page Builder Elementor ? Pokud ano, v tomto článku se dozvíte, jak se tam dostat.
Pokud chcete mít přehled o tom, o čem budeme mluvit v tomto tutoriálu, zveme vás ke shlédnutí následujícího videa:
K dokončení tohoto tutoriálu budete potřebovat Pro verzi Elementor, protože budeme používat vlastní kód CSS, který je podporován pouze touto verzíElementor.
Přečtěte si také našeho průvodce: Jak přidat strouhanku na web s Elementor
Vytvořme novou sekci se strukturou do 3 sloupce, pak v panelu definujme výška z Min. výška, a pak Minimální výška klikneme na VH a nastavte posuvník na 100.
Přidejme a Widget Vnitřní sekce – Vnitřní sekce – ve středním sloupci. Tento widget je standardně nakonfigurován se 2 sloupci, pojďme jeden z nich odstranit. Pojďme to nakonfigurovat výška z Min. výška a Minimální výška pojďme to definovat posuvník na 400.
Na kartě Styl, nastavíme obrázek na pozadí výběrem obrázku z knihovny a poté nastavíme jeho polohu na Superior Centered, Opakujte dále Neopakované a zapnutá velikost Pokrýt.
na Překrytí pozadíKliknutím na Degradován pro Typ pozadí, vyberte a změňte hlavní barvu na #2299EF a umístění na 20, pak se zapne sekundární barva #1917 před naším letopočtem a umístění na 50, úhel zapnutý 140 a neprůhlednost zapnutá 0.85
Poté přidejte a Název Widget vVnitřní sekce a jako Titul, Zadejte název a poté na kartě Styl widgetu Název změňte barvu na #FFFFFF. Poté přidejte a Widget textového editorua v záložce Styl Vycentrujte text a změňte barvu na #FFFFFF.
Viz také: Jak přidat obrázek do widgetu Tabulka cen pomocí Elementor
Vyberte znovu Vnitřní sekce, přejděte na kartu Pokročilý, v oddíle Vnitřní marže, vstoupit 25-2-2-2
Znovu vyberte Vnitřní část a přejděte na kartu Upřesnit a v části Vlastní CSS zkopírujte a vložte následující kód:
/*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;
}
Dále přidáme druhý fragment kódu níže k předchozímu:
/*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;
}
Poté také vložíme úryvek níže.
/*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);
}
Poté vybereme prostřední sloupec a v záložce pokročilý, vstoupit hexa-máma v poli CSS třídy.
Zduplikujme tento sloupec 2x a zbylé 2 sloupce vymažte.
Pojďme změnit obrázek na pozadí ostatních widgetů Vnitřní sekce, Název a obsah textového editoru a také barvy přechodů překrytí pozadí. Měli byste mít výsledek, který vypadá takto:
Zde jste právě tento úkol snadno dokončili. Stačí si prohlédnout práci svého tabletu a smartphonu a pokusit se změnit okraje tak, aby odpovídaly každému zařízení.
Získejte nyní prvek Elementor Pro!
Proč investovat do čističky vzduchu?
Tak ! To je vše pro tento článek, který vám ukáže, jak vytvořit hexadecimální mapu s efektem. Pokud máte nějaké obavy, jak se tam dostat, dejte nám vědět commentaires.
Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
