Elementor: Kako stvoriti heksadecimalnu kartu s efektom

Trebate stvoriti heksadecimalnu kartu s efektom lebdenja kroz moćne stranica Builder Elementor ? Ako je tako, saznajte u ovom članku kako doći do toga.

Ako želite imati pregled onoga o čemu ćemo govoriti u ovom vodiču, pozivamo vas da pogledate sljedeći video:

Da biste dovršili ovaj vodič, trebat će vam Pro verzija Elementora, jer ćemo koristiti prilagođeni CSS kod koji podržava samo ova verzijaElementor.

Pročitajte i naš vodič na: Kako dodati krušne mrvice na web stranicu s Elementor

Kreirajmo novi odjeljak sa strukturom za 3 stupca, zatim na ploči definirajmo Visina sur Minimalna visinaa onda Minimalna visina kliknimo na VH i postavite klizač na 100.

Dodajmo a Widget internog odjeljka – Unutarnji dio – u srednjem stupcu. Ovaj widget je prema zadanim postavkama konfiguriran s 2 stupca, izbrišite jedan od njih. Konfigurirajmo ga Visina sur Minimalna visina i Minimalna visina definirajmo ga klizač na 400.

U kartici Stil, postavimo pozadinsku sliku odabirom slike iz vaše biblioteke, a zatim postavite njenu poziciju na Superior Centered, Ponovite dalje Neponovljeno i Veličina uključena Pokriti.

na Preklapanje pozadinekliknite na Degradirano za Vrsta pozadine, odaberite i promijenite glavnu boju #2299EF i mjesto na 20, zatim sekundarna boja uključena #1917 pr. Kr i mjesto na 50, kut uključen 140 a neprozirnost uključena 0.85

Zatim dodajte a Widget naslova dans l 'Unutarnji odjeljak i slično Naslov, Dajemo Ime, a zatim na kartici Stil widgeta Naslov promijenite boju u # FFFFFF. Zatim dodajte a Widget za uređivač teksta, i na kartici Stil Centrirajte tekst i promijenite boju u # FFFFFF.

Otkrijte također: Kako dodati sliku u widget tablice cijena uz Elementor

Ponovno odaberite Unutarnji dio, idite na karticu Napredna, u odjeljku Interna marža, Unesi 25-2-2-2

Ponovno odaberite unutarnji odjeljak i idite na karticu Napredno i u odjeljku Custom CSS kopirajte i zalijepite sljedeći kod:

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

Zatim dodajmo drugi isječak koda u nastavku prethodnom:

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

Zatim zalijepimo i isječak ispod.

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

Zatim odaberimo srednji stupac i na kartici napredan, Unesi heksa-mama u polju CSS klase.

Duplicirajmo ovaj stupac 2 puta i izbrišite ostala 2 stupca.

Promijenimo pozadinsku sliku drugih widgeta Unutarnji odjeljak, Naslov i sadržaj uređivača teksta, a također i boje gradijenata Pozadinskog sloja. Trebali biste imati rezultat koji izgleda ovako:

Ovdje ste upravo lako obavili ovaj zadatak. Samo pregledajte rad vašeg tableta i pametnog telefona, pokušavajući promijeniti margine kako bi odgovarale svakom uređaju.

Nabavite Elementor Pro odmah!

Zaključak

Dakle ! To je to za ovaj članak koji vam pokazuje kako stvoriti heksadecimalnu kartu s efektom. Ako imate bilo kakvih nedoumica oko toga kako doći do tamo, javite nam unutar Komentari.

Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...