Cum se creează suprapuneri de margini animate pentru a evidenția conținutul cu Divi

Căutați un mod unic de a pune o anumită parte a paginii dvs. în centrul atenției? Continuați să citiți! Astăzi, vă vom arăta cum să creați suprapuneri de margini animate pentru a evidenția conținutul de pe pagina dvs. Vom crea trei suprapuneri de margini animate diferite pe pagina de destinație a pachetului de layout pentru dezvoltatori de aplicații, dar puteți utiliza această tehnică pentru orice tip de site web pe care îl creați. Cu siguranță vă va ajuta să adăugați o dimensiune suplimentară la pagina dvs. Sperăm că acest tutorial vă va inspira să vă creați și propriile suprapuneri de margini animate alternative.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului tuturor celor trei exemple. Vă puteți aștepta la un rezultat similar și la dimensiuni de ecran mai mici.

Exemplul nr. 1

Exemplul nr. 2

Exemplul nr. 3

Abonați-vă la canalul nostru Youtube

Creați o pagină nouă utilizând pagina de destinație a pachetului de layout pentru dezvoltatori de aplicații

Primul lucru pe care trebuie să-l faceți este să creați o pagină nouă utilizând pagina de destinație a pachetului de layout pentru dezvoltatori de aplicații.

Secțiunea Clone Hero

Primele noastre două exemple sunt create în secțiunea erou. Dacă doriți să recreați ambele exemple, vă recomandăm să clonați secțiunea erou, astfel încât să puteți trece la duplicat pentru a recrea al doilea exemplu.

Recreați exemplul nr. 1

Adăugați un rând nou la secțiunea Hero

Structura coloanei

Să începem să recreăm primul exemplu! Adăugați un rând nou în secțiunea de specialitate utilizând următoarea structură de coloane:

Adăugați un modul de text

Lăsați caseta de conținut goală

Adăugați un nou modul de text la rând și asigurați-vă că lăsați caseta de conținut goală. Folosim modulul pentru opțiunile sale de proiectare încorporate, nu pentru a afișa conținut scris.

Spațiere

Accesați setările de spațiere ale modulului de text și dați modulului o formă prin adăugarea unei căptușeli personalizate de sus și de jos. Creați suprapunerea dintre acest modul și modulele anterioare adăugând și o marjă superioară negativă.

• Marja superioară: -480px
• Căptușeală superioară: 223 px
• Căptușeală inferioară: 223 px

Frontieră

Apoi, accesați setările de margine ale modulului și adăugați un chenar la alegere.

• Lățimea chenarului: 9 px
• Culoare margine: # 0ae2ff
• Stilul frontierei: Outset

Box Shadow

Adăugați și o umbră de cutie.

• Puterea neclarității umbrei cutiei: 1 px
• Puterea răspândirii umbrei cutiei: 15 px
• Culoare umbră: rgba (10.226.255,0.59)

Animaţie

Și jucați-vă cu setările de animație pentru a face ca conținutul să apară.

• Stil de animație: Flip
• Repetați animația: o dată
• Direcția animației: Corect
• Durata animației: 1500 ms
• Întârziere animație: 1500 ms
• Intensitate animație: 500%

Recreați exemplul nr. 2

Adăugați un rând nou la secțiunea Duplicate Hero

Trecem la al doilea exemplu! Adăugați un rând nou la secțiunea erou duplicat folosind următoarea structură de coloane:

Adăugați modulul de text nr. 1

Lăsați caseta de conținut goală

Din nou, folosim un modul de text gol.

Spațiere

Mergeți la setările de spațiere și dați modulului o formă folosind o căptușire personalizată de sus și de jos. Faceți-l să se suprapună cu modulele anterioare adăugând și o marjă superioară negativă.

• Marja superioară: -480px
• Căptușeală superioară: 223 px
• Căptușeală inferioară: 223 px

Frontieră

Continuați adăugând un chenar la modulul de text.

• Lățimea chenarului: 9 px
• Culoare margine: # 0ae2ff
• Stilul chenarului: dublu

Animaţie

Și jucați-vă cu setările de animație pentru a crea un efect de rulare.

• Stil de animație: Roll
• Repetați animația: o dată
• Regia de animație: Centru
• Durata animației: 4500ms
• Întârziere animație: 1500 ms
• Intensitate animație: 100%
• Animație Opacitate de pornire: 100%

Clonați modulul text

După ce ați terminat modificarea primului modul de text, continuați și clonați-l.

Schimbați spațiul

Deschideți setările duplicatului și modificați valoarea marjei superioare în setările de spațiere.

• Marja superioară: -495px

Schimbați frontiera

Modificați și culoarea chenarului.

• Culoare margine: #ededed

Schimbați animația

Și modificați setările de animație pentru a obține rezultatul pe care l-ați văzut în previzualizarea acestei postări.

• Repetați animația: buclă
• Durata animației: 5000 ms
• Întârziere animație: 2000 ms

Recreați exemplul nr. 3

Schimbați spațiul modulului de imagine în coloana 2

Trecem la următorul și ultimul exemplu! Navigați la secțiunea de proces de pe pagină și adăugați câteva umpluturi superioare la modulul de imagine care conține ilustrația mare din mijloc.

• Marja superioară: 70 px (desktop), 0 px (tabletă și telefon)

Adăugați culoare de fundal la modulele de text existente

Continuați adăugând o culoare albă de fundal la fiecare dintre modulele de text din prima și a treia coloană.

• Culoare fundal: #ffffff

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

Lăsați caseta de conținut goală

Acum putem începe să adăugăm prima suprapunere animată a chenarului! Adăugați un nou modul de text în prima coloană (consultați ecranul de imprimare) și asigurați-vă că lăsați caseta de conținut goală.

Spațiere

Accesați setările de spațiere ale modulului de text de mai jos și creați forma și suprapunerea utilizând marja personalizată și valorile de umplere.

• Marja superioară: -230 px
• Marja stângă: 80 px
• Marja dreaptă: 100 px
• Căptușeală superioară: 120 px
• Căptușeală inferioară: 120 px

Frontieră

Adăugați o margine în continuare.

• Lățimea chenarului: 13 px
• Culoare margine: # bcf5f3
• Stilul chenarului: dublu

Animaţie

Continuați adăugând o animație la alegere, care vă va ajuta să evidențiați conținutul pe care îl partajați.

• Stil de animație: Fold
• Repetați animația: o dată
• Direcția animației: Corect
• Intensitate animație: 100%

Indicele Z

Pentru a ne asigura că marginile apar sub conținut, vom folosi o valoare negativă pentru indexul Z al modulului text care conține setările de margine.

• Indicele Z: -1

Clonați modulul de text și locul la sfârșitul coloanei 1

După ce ați terminat de creat și modificat modulul de text, continuați și clonați-l. Plasați duplicatul la sfârșitul primei coloane.

Schimbați frontiera

Schimbați culoarea chenarului.

• Culoare margine: # ffc0ec

Schimbați animația

Și adăugați și o întârziere a animației.

• Întârziere animație: 1000 ms

Adăugați un modul de text în coloana 3

Lăsați caseta de conținut goală

Continuați adăugând un modul de text la a treia coloană (consultați ecranul de imprimare) și asigurați-vă că lăsați caseta de conținut goală.

Spațiere

Treceți la setările de spațiere și creați forma și suprapunerea utilizând marja personalizată și valorile de umplere.

• Marja superioară: -230 px
• Marja stângă: 100 px
• Marja dreaptă: -80px
• Căptușeală superioară: 120 px
• Căptușeală inferioară: 120 px

Frontieră

Adăugați apoi o margine la alegere.

• Lățimea chenarului: 13 px
• Culoare margine: # 7479ff
• Stilul chenarului: dublu

Animaţie

Împreună cu o animație care include o întârziere a animației mai mare decât cele care au fost acordate celor două module text anterioare.

• Stil de animație: Fold
• Repetați animația: o dată
• Direcția animației: Stânga
• Întârziere animație: 2000 ms
• Intensitate animație: 100%

Indicele Z

Asigurați-vă că modulul apare sub conținut utilizând un index Z negativ.

• Indicele Z: -1

Clonați modulul text și amplasați la sfârșitul coloanei 3

După ce ați terminat adăugarea și modificarea modulului de text, clonați-l și plasați duplicatul la sfârșitul celui de-al treilea rând.

Schimbați frontiera

Schimbați culoarea chenarului duplicatului.

• Culoare margine: # b3d1ff

Schimbați animația

Adăugați o întârziere suplimentară a animației și ați terminat!

• Întârziere animație: 3000 ms

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului tuturor celor trei exemple pe care le-am recreat de-a lungul acestui tutorial.

Exemplul nr. 1

Exemplul nr. 2

Exemplul nr. 3

Gânduri finale

În această postare, v-am arătat cum să vă puneți conținutul în centrul atenției folosind suprapuneri de margini animate. Aceasta este o tehnică excelentă pentru a atrage atenția asupra unei anumite părți a paginii dvs. și a o face și într-un mod elegant. Puteți utiliza această tehnică pentru orice tip de site web pe care îl creaț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!