Preskoči na glavni sadržaj

Kako stvoriti člana tima koji pomiče vrtuljak s Divijem

Divi: najlakša tema za WordPress

Divi: najbolja WordPress tema svih vremena!

više 901.000 preuzimanja, Divi je najpopularnija WordPress tema na svijetu. Kompletan je, jednostavan za korištenje i dolazi s više od 62 besplatnih predložaka. [Preporučeno]

Prilikom izrade svoje stranice About, vjerojatno ćete htjeti predstaviti i članove svog tima. Na taj način posjetiteljima dopuštate interakciju s ljudima koji stoje iza vašeg poslovanja. Ako tražite način da na svitku oživite odjeljak za članove svog tima, ovaj vodič može biti za vas. Stvorit ćemo vrtuljak člana za automatsko pomicanje koji se kreće dok vaši posjetitelji pomiču stranicu. 

Demonstracija

Prije nego što uđemo u tutorial, pogledajmo rezultat na različitim veličinama zaslona.

Scroll divi član tima

Početak začeća

Dodajte novi odjeljak

razmak

Započnite dodavanjem novog redovnog odjeljka na stranicu na kojoj radite. Otvorite postavke odjeljka i dodajte prilagođene obloge na različitim veličinama zaslona.

  • Gornja obloga: 200 px (radni stol), 100px (tablet i telefon)
  • Donje obloge: 200 px (radni stol), 100px (tablet i telefon)
Konfiguracija parametara

prelijeva

Kako bismo bili sigurni da se u našem dizajnu ne pojavljuje vodoravna traka za pomicanje, sakriti ćemo preljeve odjeljaka u naprednoj kartici.

  • Vodoravni preljev: skriven
  • Okomiti preljev: skriven
Konfiguracija preljeva

Dodajte redak br. 1

Struktura stupaca

Nastavite dodavati novi redak odjeljku koristeći sljedeću strukturu stupaca:

Odaberite raspored divi

dimenzioniranje

Bez dodavanja bilo kakvih modula, otvorite postavke reda, prebacite se na karticu dizajn i promijenite širinu i maksimalnu širinu u postavkama veličine.

  • Širina: 90%
  • Maksimalna širina: 1580px
Parametar Divi linije

razmak

Također dodamo prilagođene gornje i donje obloge.

  • Gornja obloga: 100px
  • Donja obloga: 100px
Konfiguracija divija razmaka između redaka

Dodajte tekstualni modul u stupac

Dodajte H2 sadržaj

Vrijeme je za dodavanje modula, počevši od prvog tekstualnog modula. Unesite sadržaj H2 po vašem izboru.

Upoznajte tim

Postavke teksta H2

Idite na karticu dizajn modula i promijenite postavke teksta H2 na sljedeći način:

  • Naziv fonta 2: Quicksand
  • Naziv fonta 2: polu-podebljani
  • Boja teksta predmeta 2: # 000000
  • Zaglavlje 2 Veličina teksta: 70 px (desktop), 50px (tablet), 40px (telefon)
Divi razmak teksta

Dodajte modul za odvajanje u stupac

vidljivost

Zatim dodajte modul za odvajanje. Provjerite je li omogućena opcija "Prikaži separator".

Jednostavno izradite svoju web stranicu s Elementor-om

Elementor vam omogućuje jednostavno stvaranje bilo kojeg dizajna web stranice s profesionalnim izgledom. Prestanite plaćati skupo za ono što možete učiniti sami. [Slobodni]

  • Pokaži separator: Da
Prikaži separator divi

Crta

Zatim promijenite postavke linije.

  • Boja linije: # edf000
  • Stil linije: čvrst
  • Pozicija crte: gore
Divi stil razmaka

dimenzioniranje

I dovršite parametre modula izmjenom dimenzionalnih parametara u skladu s tim:

  • Težina razdjelnika: 20px
  • Širina: 11%
  • Poravnanje modula: lijevo
  • Visina: 20px
Dimenzioniranje modula divizije

Dodajte liniju br. 2

Struktura stupaca

U sljedeći red! Upotrijebite sljedeću strukturu stupaca:

Konfiguracija stupca Divi

dimenzioniranje

Bez dodavanja dodatnih modula, otvorite parametre retka i izmijenite parametre veličine na sljedeći način:

  • Koristite prilagođenu širinu oluka: Da
  • Širina oluka: 2
  • Širina: 100%
  • Maks. Širina: 100%
Konfiguracija širine žlijeba

razmak

Zatim dodajte lijevu i desnu oblogu samo na manjim zaslonima.

  • Lijeva obloga: 5% (samo tablet i telefon)
  • Pravo podmetanje: 5% (samo tablet i telefon)
Konfiguracija stila razmaka između redaka

Parametri stupca (5x)

Sada, u sljedeća tri koraka ovog vodiča, napravit ćemo neke promjene u stupcima. Primijenite tri koraka na svaki stupac u retku.

Konfiguracija linije parametara Divi

Gradijentna pozadina

Prvo dodajte pozadinu gradijenta u svaki stupac.

  • 1 boja: rgba (255,255,255,0)
  • 2 boja: rgba (0,0,0,0,84)
  • Tip gradijenta: linearni
  • Početna pozicija: 25%
  • Krajnji položaj: 86%
  • Postavite gradijent iznad pozadinske slike: Da
Konfiguracija stražnjeg stupa Divi

Pozadinska slika

Zatim prenesite pozadinsku sliku po vašem izboru. Ova pozadinska slika predstavlja svakog člana tima, zato za svaki stupac koristite drugačiju sliku.

Tražite li najbolje WordPress teme i dodatke?

Preuzmite najbolje dodatke i WordPress teme na Envato i jednostavno stvorite svoju web stranicu. Već više od preuzimanja 49.720.000. [ISKLJUČIVO]

  • Veličina pozadinske slike: naslovnica
  • Položaj pozadinske slike: Sredina
Dodajte pozadinsku sliku stupca divi

Glavni element

Dovršite postavke stupca dodavanjem prilagođenog CSS-a glavnom elementu tableta svakog stupca. Ovi retci CSS koda pomoći će nam da stupce postavimo jedan iznad drugog na tabletu, umjesto da imamo dva uporedo.

širina: 100%! važno; marža: 50px 0px 50px 0px! važno;
Kod css divi stupac

Dodajte osobu modul u stupac

Dodajte sadržaj

Da bismo podijelili informacije o članovima tima, koristit ćemo modul Person. Dodajte prvi modul Osoba u stupac 1 i upotrijebite sadržaj koji želite.

Ime osobe divi

Izbriši sliku

Zatim izbrišite sliku. Umjesto toga koristimo pozadinsku sliku stupca.

Ukloni divi sliku

Pozadinska slika

Zatim ćemo dodati prekrivanje slike kao pozadinsku sliku modula. Onu koju koristimo možete pronaći preuzimanjem mape na početku ovog vodiča.

  • Veličina pozadinske slike: naslovnica
  • Položaj pozadinske slike: Sredina
Konfiguracija pozadine osobnog modula

Postavke teksta naslova

Idite na karticu dizajn modula i promijenite postavke teksta naslova na sljedeći način:

  • Razina naslova: H3
  • Font naslova: Quicksand
  • Težina naslovnog slova: podebljano
  • Boja teksta naslova: #ffffff
  • Veličina teksta naslova: 230%
Prilagođavanje naslova modula Divi

Postavke teksta tijela

Promijenite i postavke teksta teksta

  • Font tijela: otvorena ne
  • Boja teksta tijela: #ffffff
  • Visina linije tijela: 2,2 em
Divi prilagodba tijela

Postavke teksta položaja

Zatim napravite neke promjene u postavkama teksta položaja.

  • Pozicija fonta: Otvori Sans
  • Boja teksta položaja: # edf000
Divi položaj

razmak

I dovršite postavke modula dodavanjem prilagođenih vrijednosti umetanja u postavke razmaka.

  • Gornja obloga: 70%
  • Donja obloga: 10%
  • Lijeva obloga: 10%
  • Desna obloga: 10%
Razmak modula za divu osobu

Umnožite modul Osobe 4 puta

Nakon što završite modul Osobe, možete klonirati čitav modul četiri puta.

Duplikate stavite u preostale stupce

Postavite dvostruke module u preostala četiri stupca retka. Obavezno uredite i sadržaj.

Jednostavno izradite svoju mrežnu trgovinu

Preuzmite besplatnu WooCommerce, najbolji e-trgovinski dodatak za prodaju fizičkih i digitalnih proizvoda na WordPressu. [Preporučeno]

Pretvorite red u vrtište s automatskim pomicanjem

Promijenite veličinu retka br. 2

Sada da bismo ovaj redak pretvorili u vrtuljak člana automatskog pomicanja, moramo ponovo otvoriti postavke retka i promijeniti širinu i maksimalnu širinu u postavkama veličine.

  • Širina: 180%
  • Maksimalna širina: 220% (radni stol), 100% (tablet i telefon)
Razmak izmene redaka divi

Dodajte vodoravno kretanje linije # 2

Dovršite postavke linije dodavanjem vodoravnog kretanja postavkama efekta pomicanja na naprednoj kartici i gotovi ste!

  • Aktivirajte vodoravno kretanje: Da
  • Pokretanje:
    • Ured: 2,5
    • Tablet i telefon: 0
  • Prosječni odmak: 0 (na 40%)
  • Kraj pomaka:
    • Ured: -25 (na 62%)
    • Tablet i telefon: 0
  • Učinak okidačkog pokreta: sredina elementa
Konfiguracija animacije pomicanja Divi

pregled

Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.

Biro

Scroll divi član tima

Završne misli

U ovom vodiču pokazali smo vam kako postati kreativan s ugrađenim Divijevim efektima pomicanja. Točnije, stvorili smo prekrasan vrtuljak člana automatskog pomicanja. Dok se posjetitelji pomiču prema dolje, pojavljuje se drugi dio vrtuljka.

Ovaj članak sadrži komentare 0

Ostavi komentar

Vaša email adresa neće biti objavljena. Obavezna polja su označena *

Ova web stranica koristi Akismet kako bi smanjila neželjene. Saznajte više o načinu upotrebe podataka o vašim komentarima.

Povratak na vrh
0 dionice
udio
cvrkut
Prijaviti