Želite li stvoriti kartice s efektom lebdenja od redaka s Divi ?
Kartice su svakako korisne za stavljanje važnih informacija na raspolaganje u sažetom području web stranica. Ovo smanjuje potrebu za korisnikom da se pomiče kroz sadržaj duge stranice. Modul kartice od Divi je jednostavan za korištenje i idealan za pregledavanje a sadržaj jednostavno jednim klikom.
Ali u ovom vodiču pokazat ćemo vam kako pretvoriti retke Divi s karticama i pojavljuju se kada lebdite.
Također ćemo vam pokazati kako izraditi vodoravne i okomite kartice. Ovo će otključati snagu Divi za stvaranje cjelovitih izgleda s više modula za svako područje sadržaj tab.
Dodaci nisu potrebni!
Počnimo.
pregled
Ovdje je pregled kartica koje ćemo zajedno izraditi u ovom vodiču.
Preuzmite DIVI odmah!!!
Stvorite novu stranicu s Divi Builderom
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.
Stvaranje vodoravnih lebdećih kartica pomoću "Divi redaka"
U postojećem zadanom odjeljku dodajte redak s dva stupca.
Linija pozadine, ispuna okvira i sjena
Prije nego što dodamo naše module, prvo malo prilagodimo postavke retka. Otvorite postavke linije i ažurirajte sljedeće:
- Boja lijevog gradijenta: #284f91
- Boja desnog gradijenta: #4646c4
- Razmak: 50 px (gore i dolje), 50 px (lijevo i desno)
- Box Shadow: pogledajte snimak zaslona
- Boja sjene okvira: rgba(70,70,196,0.66)
Dodajte sadržaj u red
Sada ćemo dodati sadržaj rezerviranog mjesta u naš red. U stupac 1 dodajte sliku po izboru s modulom Slika. Ovdje smo koristili sliku iz paketa izgleda « Paket izgleda konferencije o dizajnu« .
U desnom stupcu dodajte modul Poziv na akciju i ažurirajte sljedeće:
- URL veze gumba: # (samo za prikaz gumba za sada)
- Koristite boju pozadine: NE
- Poravnanje teksta: lijevo
- Font naslova: Lato
- Veličina teksta naslova: 60 px (stolno računalo), 50 px (telefon)
Izrada kartice
Da bismo stvorili stvarnu karticu preko koje će korisnici prijeći pokazivačem kako bi otkrili sadržaj tog retka, moramo izraditi tekstualni modul i postaviti ga gore desno s nekim prilagođenim CSS-om.
Samo naprijed i dodajte novi tekstualni modul ispod slike u stupcu 1 i ažurirajte sljedeće:
- Tijelo: "Tab 1"
- Pozadina: #284f91 (ovo bi trebalo odgovarati boji lijevog gradijenta linije)
- Poravnanje teksta: centrirano
- Boja teksta: #ffffff
- Širina: 100 px
- Visina: 50 px
- Margina: -100px (gore), -50px (lijevo)
- Razmak: 14 px (vrh)
Na kraju, dodajte sljedeći prilagođeni css glavnom elementu kako biste mu dali apsolutnu poziciju na vrhu retka.
position: absolute !important;
top: 0;
Visina i razmak presjeka
Za sada otvorite postavke odjeljka i ažurirajte sljedeće:
- Min. visina: 500 px (stolno računalo), 900 px (tablet), 750 px (telefon)
- Margina: 100 px (gornja i donja)
- Razmak: 0px (gornji i donji dio)
Stvaranje druge linije
Da biste stvorili drugi redak, duplicirajte redak koji ste prethodno stvorili. Premjestite tekstualni modul u stupac 1, a sliku u stupac 2. Zatim ažurirajte sliku novom. To će vam pomoći da steknete ideju o tome kako različiti sadržaji izgledaju na svakoj kartici.
Zatim otvorite postavke modula Tekst koji se koristi za stvaranje kartice u stupcu 1 i pomaknite karticu udesno tako da tamo gdje se ovaj redak preklapa s gornjim redom možete vidjeti karticu izravno desno od kartice prvog retka.
- Margina: 50px (lijevo)
Dodan efekt lebdenja
Otvorite postavke retka i dodajte sljedeći filtar:
- Neprozirnost: 70% (zadano), 100% (lebdjenje)
Zatim dodajte trajanje prijelaza i krivulju brzine za efekt lebdenja neprozirnog filtra.
- Vrijeme prijelaza: 500 ms
- Krivulja brzine prijelaza: linearna
Izrada treće kartice
Sada možemo dodati našu posljednju karticu. Da biste to učinili, duplicirajte drugi redak koji ste upravo stvorili. Zatim premjestite tekstualni modul u stupac 1, a sliku u stupac 2. I ažurirajte modul slike novom slikom.
Ažurirajte postavke linije novim pozadinskim gradijentom.
- Boja gradijenta lijeve pozadine: #333333
- Boja gradijenta desne pozadine: #4646c4
Zatim otvorite postavku modula Text koja se koristi za stvaranje kartice u stupcu 1 i ažurirajte boju i marginu.
- Pozadina: #333333
- Margina: 150px (lijevo)
Evo kako bi vaša stranica trebala izgledati prije nego što naše linije postavimo tako da se preklapaju.
Preklapajuće linije s apsolutnim pozicioniranjem
Da bismo preklapali naše linije, moramo koristiti apsolutno pozicioniranje. Najprije ažurirajte visinu sva tri retka na 100%.
- Visina: 100%
Zatim dodajte sljedeći prilagođeni CSS u glavni element sva tri retka:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Ovako trenutno izgledaju naše kartice.
Promjena redoslijeda redova pri lebdenju sa Z indeksom
U ovom trenutku možda ste primijetili da je treći red/kartica u prvom planu. Dakle, moramo preurediti retke pomoću Z indeksa tako da se prva kartica prikazuje prva dok ne prijeđete pokazivačem iznad druge kartice.
Pročitajte također: Kako stvoriti prilagođene slojeve slika u Diviju
Da biste to učinili, otvorite postavke prvog retka i ažurirajte z-index na sljedeći način:
Z-indeks: 10
Zatim stavite Z indeks druge dvije linije na lebdeći.
Z-indeks: 11 (lebdjenje)
Učinjeno je ! Da vidimo krajnji rezultat.
Konačni rezultat
Preuzmite DIVI odmah!!!
Stvaranje okomitih kartica
Ako želite dodati okomite kartice u retke, evo što trebate učiniti.
Samo naprijed i duplicirajte odjeljak koji sadrži lebdeće kartice koje smo upravo izradili tako da imate novi dizajn za rad.
Zatim otvorite postavke odjeljka i ažurirajte sljedeće:
- Ispuna: 10% (lijevo i desno)
Ažurirajte sljedeće postavke za sva tri retka dupliciranog odjeljka sa sljedećim:
- Širina: 70% (stolno računalo), 70% (tablet), 80% (telefon)
- Maksimalna širina: 980 px
Zatim ažurirajte smjer gradijenta na 90 stupnjeva za sve tri linije.
- Smjer gradijenta: 90 stupnjeva
Sada je vrijeme da naše kartice tekstualnog modula postavimo lijevo od naših redaka kako bismo dobili željene okomite kartice.
Otkrijte također: Kako stvoriti izbornik s kotačićem kada lebdite u Diviju
Otvorite postavku kartice tekstualnog modula u prvom retku i ažurirajte sljedeće:
- Margina (radna površina): -50px (gore), -150px (lijevo)
Zatim otvorite postavke kartice modula Tekst 2. retka odjeljka i ažurirajte sljedeće:
- Margina (radna površina): 0px (gore), -150px (lijevo)
A za posljednju karticu u trećem redu ažurirajte sljedeće:
- Margina (desktop): 50px gore, -150px lijevo
Konačni rezultat
Sada vidimo konačni rezultat.
Preuzmite DIVI odmah!!!
Zaključak
Uz malo kreativnosti i snagu Divi-ja, možete stvoriti neke prilično cool prilagođene kartice koristeći Divi linije. Postoje neka ograničenja onoga što možete prikazati.
Na primjer, s ovom konfiguracijom, svi redovi moraju imati istu visinu kao odjeljak. No, kako ne biste morali koristiti dodatak, ovo je odlično rješenje.
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.
...
