Elementor: Ako vytvoriť hexadecimálnu mapu s efektom

Potrebujete vytvoriť hex mapu s efektom vznášania cez mocné Page Builder Elementor ? Ak áno, v tomto článku sa dozviete, ako sa tam dostať.

Ak chcete mať prehľad o tom, o čom budeme hovoriť v tomto návode, pozývame vás pozrieť si nasledujúce video:

Na dokončenie tohto návodu budete potrebovať verzia Elementor Pro, pretože budeme používať vlastný kód CSS, ktorý podporuje iba táto verziaElementor.

Prečítajte si tiež nášho sprievodcu: Ako pridať strúhanku na webovú stránku s Elementor

Vytvorme novú sekciu so štruktúrou do 3 stĺpce, potom v paneli definujme Výška sur Min. výška, a potom Minimálna výška kliknime ďalej VH a nastavte posúvač na 100.

Pridajme a Miniaplikácia Interná sekcia – Vnútorná časť – v strednom stĺpci. Tento widget je predvolene nakonfigurovaný s 2 stĺpcami, vymažme jeden z nich. Poďme si to nakonfigurovať Výška sur Min. výška a Minimálna výška zadefinujme si to kurzor na 400.

Na karte Štýl, nastavme obrázok na pozadí výberom obrázka z knižnice a potom nastavte jeho polohu na Superior Centered, Opakujte ďalej Neopakované a veľkosť zapnutá Kryt.

O Prekrytie pozadiaKliknutím na Degradovaný pre Typ pozadia, vyberte a zmeňte hlavnú farbu na #2299EF a umiestnenie na 20, potom zapnite sekundárnu farbu #1917 pred Kristom a umiestnenie na 50, uhol zapnutý 140 a nepriehľadnosť zapnutá 0.85

Potom pridajte a Názov Widget dans l 'Vnútorná časť a páči sa mi Názov, Dajme meno a potom na karte Štýl miniaplikácie Názov zmeňte farbu na #FFFFFF. Potom pridajte a Miniaplikácia Textový editora na karte Štýl Vycentrujte text a zmeňte farbu na #FFFFFF.

Pozri tiež: Ako pridať obrázok do miniaplikácie Tabuľka cien pomocou Elementor

Znova vyberte Vnútorná časť, prejdite na kartu Pokročilé, v oddiele Vnútorná marža, zadajte 25-2 2 - 2

Znova vyberte vnútornú sekciu a prejdite na kartu Rozšírené a v sekcii Vlastné CSS skopírujte a prilepte nasledujúci 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;
}

Ďalej pridajme druhý útržok kódu nižšie k predchádzajúcemu:

/*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;
}

Potom tiež prilepme úryvok nižšie.

/*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);
}

Potom vyberieme stredný stĺpec a v záložke pokročilý, zadajte hexa-mama v teréne CSS triedy.

Zduplikujme tento stĺpec 2-krát a ostatné 2 stĺpce vymažte.

Poďme zmeniť obrázok na pozadí iných widgetov Vnútorná časť, Názov a obsah textového editora a tiež farby prechodov prekrytia pozadia. Mali by ste mať výsledok, ktorý vyzerá takto:

Tu ste práve dokončili túto úlohu ľahko. Stačí si zobraziť ukážku práce svojho tabletu a smartfónu a pokúsiť sa zmeniť okraje tak, aby zodpovedali každému zariadeniu.

Získajte teraz prvok Elementor!

záver

Takže ! To je všetko pre tento článok, ktorý vám ukáže, ako vytvoriť hexadecimálnu mapu s efektom. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...