Želite li stvoriti originalni Divi izbornik u obliku rotirajućeg kotačića pri lebdenju?
Stvaranje kotačića izbornika koji se vrti dok lebdite je zabavan način za prikazivanje korisnih poveznica na vašem web stranica. To bi bio sjajan način za pružanje višestrukih poziva na radnju u zaglavlju kako bi se korisnici usmjerili kamo trebaju ići. A to bi također bio cool izbornik potkategorije za blog.
U ovom vodiču pokazat ćemo vam kako stvoriti rotirajući kotačić izbornika pri lebdenju u Diviju. To se može učiniti pomoću kombinacije ugrađenih Divi opcija i nekih prilagođenih CSS isječaka.
pregled
Prije nego krenemo u ovaj vodič, pogledajmo rezultat koji želimo postići.
Preuzmite DIVI odmah!!!
Stvorite novu stranicu s Divi Builderom
Za početak trebat će vam sljedeće:
S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder
zatim kliknite Počnite graditi (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.
Dizajn rotirajućeg kotačića izbornika u Diviju
Napravite odjeljak i liniju 1
U odjeljku koji je prisutan prema zadanim postavkama dodajte red sa sljedećom strukturom stupaca.
Zatim dodajte tekstualni modul u red sa sljedećim sadržajem.
Zatim ažurirajte dizajn teksta na sljedeći način:
- Font teksta: Share Tech
- Razmak između slova teksta: 1px
- Naslov 2 Veličina teksta: 8vw
Dodajte liniju 2 za izradu kotača
Zatim moramo dodati novi red u stupac ispod retka 1.
Prije nego što počnemo dodavati naše tekstualne module za naše veze, moramo dizajnirati našu liniju kao kotač. Bit će potrebno mnogo optimizacija u nizu kako bismo napravili naš dizajn kotača.
Pročitajte također: Kako otkriti sadržaj na lebdećem razdjelniku odjeljaka u Diviju
Za početak otvorite postavke reda 2 i ažurirajte sljedeće:
- Boja pozadine: #02366b
- Boja gradijenta lijeve pozadine: rgba(0,0,0,0.45)
- Boja gradijenta desne pozadine: #02366b
- Vrsta gradijenta: Kružni
- Radijalni smjer: centar
- Početna pozicija: 36%
- Krajnji položaj: 0%
- Koristi prilagođenu širinu oluka: DA
- Širina oluka: 1
- Širina: 500 px
- Maksimalna širina: 500 piksela (stolno računalo), automatski (tablet i telefon)
- Visina: 500 px (stolno računalo), automatski (tablet i telefon)
- Ispuna (radna površina): 0px (gore i dolje)
- Razmak (tablet i telefon): 20 px (gore, dolje i lijevo)
- Margina (telefon): -10% (desno)
Moramo postaviti visinu i širinu crte na 500 piksela tako da bude savršen kvadrat. To će nam omogućiti da mu damo savršeni kružni oblik koristeći Divijevu opciju zaobljenih kutova (radijus ruba).
- Zaobljeni uglovi: 50%
Zatim možemo dodati još jednu razinu dizajna kruga pomoću sjene okvira na sljedeći način:
- Snaga zamućenja sjene okvira: 0px
- Snaga širenja sjene okvira: 210 px
- Boja sjene: rgba(2,54,107,0.66)
Zatim ćemo dodati mali CSS isječak za vertikalno centriranje sadržaja našeg retka. Ispod kartice napredan, dodajte sljedeći prilagođeni CSS u glavni element.
display:flex;align-items:center;
Dodavanje poveznica
Svaka karika u kotaču bit će kreirana s modulom Tekst. Napravit ćemo ukupno šest modula Tekst. Pet modula Tekst sadržavat će poveznice za kotač, a drugi će sadržavati naslov izbornika.
Započnite stvaranjem novog modula "Tekst".
Zatim ažurirajte postavke teksta na sljedeći način:
- Bodi: “Element 1”
- Font teksta: Share Tech
- Boja teksta: #ffffff
- Veličina: 16 px (zadano), 20 px (lebdeći)
- Razmak između slova: 1px
- Visina retka teksta: 60 px
- Širina: 250 px (stolno računalo), automatski (tablet i telefon)
- Visina: 60 px
- Razmak (lijevo): 20 px
Za sada spremite postavke. Zatim duplicirajte tekstualni modul 4 puta da biste stvorili ukupno 5 tekstualnih modula.
Pozicioniranje tekstualnih poveznica/modula
Sada smo spremni postaviti naše veze duž perimetra kotača. Da bismo to učinili, ažurirat ćemo svaki modul Tekst s opcijama transformacije koje pomiču/prebacuju i rotiraju modul na mjestu.
Otkrijte također: Kako stvoriti mrežu stupca fluida pri lebdenju u divi
Da biste to olakšali, implementirajte način prikaza žičanog okvira i označite tekstualne module počevši s vezom 1 na vrhu do veze 5 na dnu.
Založno pravo 1
Počet ćemo s uređivanjem veze 1. Otvorite postavke tekstualnog modula za vezu 1 i ažurirajte sljedeće:
- Transformacija prijevoda (os Y): 120 px (stolno računalo), 0 px (tablet i telefon)
- Transformacija Rotacija (Z os): 60 stupnjeva (stolno računalo), 0 px (tablet i telefon)
- Izvor: 50% (sredina desno)
Založno pravo 2
Otvorite postavke tekstualnog modula za vezu 2 i ažurirajte sljedeće:
- Transformirati
- Prijevod (os Y): 60 px (stolno računalo), 0 px (tablet i telefon)
- Rotacija osi Z: 30 stupnjeva (stolno računalo), 0 px (tablet i telefon)
- Izvor: 50% (u sredini desno)
Založno pravo 3
Budući da je tekstualni modul za vezu 3 u sredini, možemo ga ostaviti na mjestu.
Založno pravo 4
Otvorite postavke tekstualnog modula za vezu 2 i ažurirajte sljedeće:
- Transformirati:
- Prevedi Y os: -60px (stolno računalo), 0px (tablet i telefon)
- Rotacija osi Z: -30 stupnjeva (stolno računalo), 0 px (tablet i telefon)
- Izvor: 50% (desno u sredini)
Založno pravo 5
Otvorite postavke tekstualnog modula za vezu 2 i ažurirajte sljedeće:
- Transformirati:
- Prevedi Y os: -120px (stolno računalo), 0px (tablet i telefon)
- Rotacija osi Z: -60 stupnjeva (stolno računalo), 0 px (tablet i telefon)
- Izvor: 50% (u sredini desno)
Sada da vidimo dosadašnji rezultat. Primijetite kako veze/tekstovi u tekstualnim modulima savršeno prolaze duž perimetra kruga.
Dodana oznaka izbornika
Da bismo dodali oznaku izbornika, morat ćemo dodati još jedan tekstualni modul povrh pet tekstualnih modula koje već imamo. Samo naprijed i dodajte novi tekstualni modul iznad veze 1.
Zatim ažurirajte sadržaj tijela sa sljedećim:
Menu
Zatim, kako biste ubrzali dizajn, kopirajte stilove tekstualnog modula za vezu 3 i zalijepite te stilove modula u novi tekstualni modul.
Zatim ažurirajte sljedeće:
- Visina retka teksta: 300 px (stolno računalo), 20 px (tablet i telefon)
- Visina: vraćanje zadane postavke (automatski)
- Transformacija rotacije (os Z): 180 stupnjeva (stolno računalo), 0 stupnjeva (tablet i telefon)
- Izvor transformacije: 50% (u sredini desno)
Nakon što završimo, modulu Tekst oznake izbornika trebamo dati apsolutnu poziciju. Da biste to učinili, dodajte sljedeći prilagođeni CSS u glavni element:
position: absolute!important;
Sada saznajte rezultat. Trebali biste vidjeti da je stavka izbornika naopako s desne strane kotačića.
Dodan efekt lebdenja koji se vrti na liniju/kotačić
Da biste retku dodali efekt okretnog lebdenja, ažurirajte postavke retka na sljedeći način:
- Transformacija rotacije (Z os): 180 stupnjeva (stolno računalo), 0 stupnjeva (lebdenje), 0 stupnjeva (tablet i telefon)
Zatim ažurirajte postavke prijelaza na sljedeći način:
- Trajanje prijelaza: 450 ms
- Prijelaz krivulje brzine: Ease-in-Out
Sada gledajte kako se kotač okreće kada lebdite iznad njega.
Stvaranje izgleda u dva stupca za odjeljak
Trenutačno se izgled sastoji od dva retka s jednim stupcem naslaganih jedan na drugi. Međutim, možemo upotrijebiti svojstvo flex css za vodoravno poravnavanje dvije linije.
Da bismo to učinili, možemo dodati mali isječak prilagođenog CSS-a u odjeljak. Kad to bude gotovo, morat ćemo malo prilagoditi razmak kako bismo stvari posložili kako treba.
Otvorite postavke odjeljka i dodajte sljedeći prilagođeni css u glavni element:
display:flex;
Ažurirajte prored 1
Zatim ažurirajte veličinu i razmak retka 1 na sljedeći način:
- Širina: 40% (stolno računalo)
- Margina (stolno računalo): 5% lijevo
Konačni rezultat
Sada vidimo konačni rezultat.
Preuzmite DIVI odmah!!!
Alternativni dizajn polu-kotača
Lijep alternativni dizajn je sakriti desnu polovicu kotačića s vanjske strane odjeljka tako da su veze skrivene, a zatim otkrivene kada lebdite.
Da biste to učinili, duplicirajte cijeli odjeljak koji sadrži crtež koji smo upravo stvorili.
U odjeljku duplikata ažurirajte parametre u retku 1 na sljedeći način:
- Širina: 70% (stolno računalo)
Zatim ažurirajte postavke u retku 2 da izbacite kotačić iz odjeljka na sljedeći način:
- Margina: -250px desno
Moramo koristiti -250px jer je ukupna širina kotača 500px i želimo sakriti točno pola linije.
Zatim postavite vidljivost odjeljka na skriveno na sljedeći način:
- Horizontalni preljev: skriven
- Vertikalni preljev: skriveno
Evo konačnog rezultata.
Preuzmite DIVI odmah!!!
Zaključak
Kotač s okretnom karikom jedan je od onih elegantnih dizajnerskih elemenata koji mogu uključiti posjetitelji sa suptilnim i jedinstvenim efektom lebdenja. I prilično je nevjerojatno kako se ovaj dizajn lako može napraviti s Divi ugrađenim postavkama dizajna.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete 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.
...
