Želite li saznati kako zumirati profilnu karticu pomoću dodatka za izradu stranica Elementor ?
U ovom novom vodiču Elementor, pokazat ćemo vam kako primijeniti efekt zumiranja na karticu profila, dok otkrivate naziv profila kao i njegove ikone društvenih mreža.
Ako nemate pojma o čemu danas želimo razgovarati, pozivamo vas da pogledate sljedeći video:
Vratimo se onda zašto smo ovdje.
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.
Kreirajmo novi odjeljak sa strukturom od 3 stupca, a zatim na ploči definirajmo Visina sur Minimalna visinaa onda Minimalna visina kliknimo na VH i postavite klizač na 100.
Dodajmo widget Unutarnji dio u srednjem stupcu. Widget Internal Section je prema zadanim postavkama konfiguriran s 2 stupca, izbrišite jedan od njih. Konfigurirajmo ostalo na ploči mijenjajući njegovu Visina sur Minimalna visina i Minimalna visina postavimo kursor na 400.
U kartici Stil, izmijenimo Preklapanje pozadine, Kliknite na klasična na vrstu pozadine i odaberite sliku iz biblioteke i u postavkama slike odaberite Centrirano Centrirano na poziciji Pokriti na Veličina. Neprozirnost na 1 i
U odjeljku granice kliknite na % i uđi 4 za sve radijuse rubnika.
U broju okvira postavite klizač na 0 sur Vodoravan, Za 70 sur vertikala, Za 63 sur Nejasno, Za -60 sur difuzor. Ispod svoje slike trebali biste vidjeti prekrasan efekt sjene.
U unutarnji dio povucite Widget naslova. Kao naslov unesite Steve Jobs, na kartici Stil odaberite bijelu boju # FFFFFF. U tipografiji odaberite Veličina 20.
Zatim odaberite stupac widgeta unutarnjeg presjeka i na kartici Stil odaberite vrstu obruba klikom na Solid, sve širine na 1, a boje na #FFFFFF.
U kartici napredan, promijenite margine u 15 i unutarnje margine na 20.
Sada umetnite ikone društvenih medija povlačenjem widgeta Ikone društvenih medija u odjeljak Interno.
Uredite veze društvenih medija na kartici Sadržaj klikom na Svaka društvena mreža. Ako želite dodati druge društvene mreže, kliknite gumb Dodajer element
U polju ikona kliknite na Icon Library i u traku za pretraživanje upišite prva slova svoje društvene mreže, čim je pronađete, odaberite je i kliknite na gumb Umetni.
Zatim idite na karticu Stil, u odjeljku ikona, promijenite boju u Personnalisé.
Također pročitajte naš vodič na; Kako dodati paginaciju pomoću Elementora
na Glavna boja, postavite transparentnost na minimum.
na Sekundarna boja, odaberite boju # FFFFFF. Na Veličina unesite 20, uključena interna marža 0.4.
Sada kliknite na karticu napredan, te u odjeljku namještanjekliknite na Personnalisé. Naravno prilagođena širina, Unesi 0.
Otkrijte i vi Kako koristiti birač boja s Elementorom
na Položaj, odaberite absolu, u smjeni 15Na Vertikalna orijentacija choisir Bas, A smjena sur 20.
Ponovno odaberite Unutarnji dio i u kartici napredan, u odjeljku Prilagođena CSS (Ako nemate ovaj odjeljak, brzo nadogradite na pro verziju Elementora da biste nastavili)
Kopirajte i zalijepite sljedeći kod u ovaj odjeljak:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}A priori ne biste trebali vidjeti puno, ali ako zadržite pokazivač iznad slike, trebali biste vidjeti zumiranje primijenjeno na sliku.
Sada kopirajte i zalijepite sljedeći kod nakon prethodnog koda da biste prikazali ili sakrili određene elemente stupca:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}Sada čim zadržite pokazivač iznad slike, zumiranje se primjenjuje na sliku, a pojavljuju se nazivi i ikone društvenih mreža.
Duplicirajmo ovaj stupac 2 puta i izbrišite ostala 2 stupca.
Promijenite pozadinsku sliku internih odjeljaka, kao i naziv i poveznice društvenih mreža.
Eto, upravo ste 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 primijeniti Zoom efekt na karticu profila. 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.
...
