Utilizarea fundalurilor modulului pentru a afișa imagini paralele în linie cu Divi

Publicat: 2019-09-07

Folosirea fundalurilor de paralaxă în linie CSS poate ajuta cu adevărat la îmbunătățirea aspectului și a simțirii site-ului dvs. web, iar acest tutorial este exemplul perfect. Vom folosi fundaluri de module multiple pentru a crea un rezultat uimitor și coerent care să arate mai multe părți ale imaginii de fundal. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați The Inline Parallax Layout GRATUIT

Pentru a pune mâna pe aspectul de paralaxă inline gratuit, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Abonați-vă la canalul nostru Youtube

Să începem să recreăm

Adăugați o secțiune nouă

Începeți prin adăugarea unei noi secțiuni obișnuite la pagina la care lucrați.

paralela inline

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Setări coloana 1

Spațiere

Adăugați o primă valoare de umplere la prima coloană.

Căptușeală superioară:
- Desktop: 2vw
- Tabletă + telefon: 6vw

Setări coloana 2

Spațiere

Adăugați o valoare de umplere de top și la a doua coloană.

Căptușeală superioară:
- Desktop: 4vw
- Tabletă + telefon: 6vw

Coloana 4 Setări

Spațiere

Treceți peste coloana 3 și adăugați câteva valori de spațiere la coloana 4.

Căptușeală de sus
- Desktop: 19vw
- Tabletă: 0vw
- Telefon: 1vw
Căptușeala stângă și dreapta
- Desktop și tabletă: 1vw
- Telefon: 0vw

Adăugați primul modul de text în coloana 1

Adăugați conținut H2

Acum, adăugați primul modul de text în coloana 1. Introduceți un conținut H2 la alegere.

Text de antet

Treceți la fila de proiectare și modificați setările de text H2 în consecință:

Nivelul textului antet: H2
H2 Font: EB Garamond
Stilul fontului H2: TT
Culoare text H2: negru #oooooo
Dimensiunea textului H2:
- Desktop: 3.1vw
- Tabletă: 5.4vw
- Telefon: 10vw
Înălțimea liniei H2:
- Desktop + Tabletă: 1.1em
- Telefon: 1.3em

Spațiere

Apoi, adăugați spațiu la modul.

Căptușeală superioară:
- Desktop: 4vw
- Tabletă + telefon: 0vw
Căptușeală stângă:
- Desktop și tabletă: 1vw
- Telefon: 2vw
Căptușeală potrivită
- Desktop și tabletă: 1vw
- Telefon: 0vw

Adăugați al 2-lea modul de text la coloana 1

Adauga continut

Acum, adăugați un al doilea modul de text sub primul. Introduceți conținut de paragraf.

Text

Treceți la fila de proiectare și modificați setările de text după cum urmează:

Font text: EB Garamond
Culoarea textului: Gri închis # 3d3d3d
Mărimea textului:
- Desktop: 1vw
- Tabletă: 2.2vw
- Telefon: 3.8vw
Înălțimea liniei textului: 1,8em

Spațiere

Reglați apoi setările de spațiere ale modulului.

Căptușeală inferioară:
- Telefon: 4vw
Căptușeală stângă:
- Desktop + Tabletă: 1.4vw
Garnitura dreapta:
- Desktop: 1,3vw
- Tabletă + telefon: 1,7vw

Adăugați modulul buton la coloana 1

Adauga continut

Pentru a finaliza prima coloană, adăugați un modul buton. Introduceți o copie.

Adăugați un link

Adăugați și un link la buton.

Buton

Treceți la fila de proiectare și stilizați setările butonului în consecință:

Dimensiune text buton:
- Desktop: 1vw
- Tabletă: 2vw
- Telefon: 4vw
Culoarea textului butonului: Gri închis # 3d3d3d
Lățimea chenarului butonului: 1 px
Buton Font: EB Garamond

Spațiere

Apoi, reglați setările de spațiere ale butonului.

Marja superioară:
- Desktop + Tabletă: 1vw
Marja inferioară:
- Telefon: 5vw

Adăugați primul modul de text în coloana 2

Adauga continut

Treci la coloana următoare! Adăugați un modul de text cu un conținut H4 la alegere.

fundal

Continuați adăugând o imagine de fundal. Încărcați o imagine de fundal de paralaxă CSS pentru desktop și utilizați o imagine obișnuită pe dimensiuni de ecran mai mici (fără paralaxă CSS).

Fundal desktop: imagine
- Paralax: CSS
Tabletă + Fundal telefon: imagine

Plasați fundalul

Apoi, adăugați un fundal de gradient numai la cursor.

Plasați fundalul: gradient de culoare
Gradient de culoare 1: Galben auriu deschis # edba63
Gradientul de culoare 2: Galben auriu # ed9d12
Direcția gradientului: 23 grade
Plasați gradientul deasupra imaginii de fundal: Da

Text de antet

Treceți la fila de proiectare și modificați setările de text H4.

Nivelul antetului textului: H4
Font H4: EB Garamond
Culoare text H4: alb #ffffff
Dimensiune text H4:
- Desktop: 2.3vw
- Tabletă: 4,5vw
- Telefon: 8.5vw

Spațiere

Apoi, reglați spațiul.

Marja superioară:
- Telefon: -6vw
Căptușeală superioară:
- Desktop: 15vw
- Tabletă: 22vw
- Telefon: 43vw
Căptușeală inferioară:
- Desktop + Tabletă: 1vw
Căptușeala stângă și dreapta:
- Desktop și tabletă: 1,5 vw
- Telefon: 5vw

Frontieră

Continuați prin stilizarea chenarelor.

Colțuri rotunjite: 1vw toate colțurile
Stiluri de frontieră: toate laturile
Lățimea chenarului: 0,3vw
Culoare margine: alb #ffffff

Transformă Scara Hover

Completați setările modulului adăugând un efect de zoom pe hover.

Scară de transformare la plimbare: 102%

Adăugați al doilea modul de text la coloana 2

Adauga continut

Adăugați un al doilea modul la a doua coloană cu un conținut H4 la alegere.

fundal

La fel ca modulul de text anterior, adăugați o imagine de fundal de paralaxă CSS pe desktop și o imagine de fundal obișnuită pe dimensiuni de ecran mai mici.

Fundal desktop: imagine
- Paralax: CSS
Tabletă + Fundal telefon: imagine

Plasați fundalul

Adăugați și un fundal cu gradient de deplasare.

Plasați fundalul: gradient de culoare
Gradient de culoare 1: Magenta deschisă # 91463f
Gradientul de culoare 2: Magenta # 910400
Direcția gradientului: 23 grade
Plasați gradientul deasupra imaginii de fundal: Da

Text de antet

Stilizați setările textului H4 în continuare.

Nivelul antetului textului: H4
Font H4: EB Garamond
Culoare text H4: alb #ffffff
Dimensiune text H4:
- Desktop: 2.3vw
- Tabletă: 4,5vw
- Telefon: 8.5vw

Spațiere

Și modificați setările de spațiere.

Căptușeală superioară:
- Desktop: 15vw
- Tabletă: 21.1vw
- Telefon: 43vw
Căptușeală inferioară:
- Desktop + Tabletă: 1vw
Căptușeala stângă și dreapta:
- Desktop și tabletă: 1,5 vw
- Telefon: 5vw

Frontieră

Modificați și setările de margine.

Colțuri rotunjite: 1vw toate colțurile
Stiluri de frontieră: toate laturile
Lățimea chenarului: 0,3vw
Culoare margine: alb #ffffff

Transformați Scara Hover

Nu în ultimul rând, adăugați un efect de zoom la modulul text.

Scară de transformare la plimbare: 102%

Duplicați modulele de text de la coloana 2 la coloana 3

Duplicați și trageți module text

Clonați ambele module text și plasați-le în a treia coloană a rândului.

Ajustați primul modul de text din coloana 3

Schimbați conținutul H4

Deschideți primul modul de text duplicat din coloana 3 și modificați conținutul.

Schimbați fundalul pentru tabletă și telefon

Schimbați imaginea de fundal pe dimensiuni mai mici ale ecranului.

Schimbați gradientul de culoare pe Hover

Continuați schimbând culorile în cursorul de gradient.

Gradient de culoare 1: Roz roz # cc9293
Gradientul de culoare 2: roz # cc9293

Spațiere

În cele din urmă, reglați spațiul după cum urmează.

Marja superioară:
- Tabletă: -6,4vw
- Telefon: 0vw

Ajustați al doilea modul de text din coloana 3

Schimbați conținutul H4

Mai întâi, schimbați conținutul.

Schimbați fundalul pentru tabletă și telefon

Apoi, modificați imaginea de fundal pe dimensiuni mai mici ale ecranului.

Schimbați gradientul de culoare pe Hover

Schimbați și fundalul de gradient.

Gradient de culoare 1: Pin moale # 5c755c
Gradient de culoare 2: verde pin # 4D754D

Adăugați primul modul de text în coloana 4

Adauga continut

Trecând la coloana 4, adăugați un modul text. Introduceți un conținut H3 la alegere.

Text de antet

Treceți la fila de proiectare și modificați setările de text H3 după cum urmează:

Nivelul textului antet: H3
Font H3 Text: EB Garamond
Stilul fontului H3: TT
Culoarea textului H3: Negru #oooooo
Dimensiunea textului H3:
- Desktop: 3vw
- Tabletă: 5vw
- Telefon: 12vw
Înălțimea liniei H3
- Desktop + Tabletă: 1em
- Telefon: 1.1em

Adăugați al doilea modul de text la coloana 4

Adauga continut

Adăugați un alt modul text sub primul. Introduceți conținut de paragraf.

Text

Treceți la fila de proiectare și modificați setările de text în consecință:

Font text: EB Garamond
Culoarea textului: Gri închis # 3d3d3d
Mărimea textului:
- Desktop: 1vw
- Tabletă: 2.2vw
- Telefon: 3.8vw
Înălțimea liniei textului: 1,8em

Spațiere

Apoi, reglați spațiul.

Căptușeală inferioară:
- Telefon: 4vw
Căptușeală stângă: 0,9vw
Garnitura dreapta: 2.2vw

Duplicați modulul buton de la coloana 1 la coloana 4

Duplicați și trageți modulul buton

Duplicați modulul buton din coloana 1.
Trageți-l în coloana 3 de sub modulele text.

Spațiere

Reglați câteva valori de spațiere în modulul buton duplicat și ați terminat!

Marja inferioară: 0vw
Marginea stângă:
- Desktop + tabletă: 0,7vw
- Telefon: 0.9vw

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Concluzie

În această postare, v-am arătat cum să creați un design de paralaxă în linie cu patru casete de text care arată o parte diferită a aceleiași imagini. Sperăm să vă placă acest design și, dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!