Cum să creați o secțiune de erou mobilă cu conținut divizat animat cu Divi

Crearea unei secțiuni de erou care să iasă în evidență este cu adevărat importantă. Și nu numai că ar trebui să iasă în evidență, dar ar trebui, de asemenea, să fie împărțit în mai multe elemente care să împuternicească chemarea la acțiune care există. Structura ușor de înțeles a secțiunilor de eroi cu conținut divizat le face foarte populare și utilizate frecvent în diferite tipuri de site-uri web.

Și, deși crearea de secțiuni de erou cu conținut divizat pentru desktop este simplă, este posibil să nu le faci pentru dimensiuni mai mici de ecran. De aici va fi util acest tutorial. Vom recrea o secțiune de eroi extrem de interactivă, divizată pe mobil, care nu numai că va arăta bine pe mobil, ci pe toate dimensiunile diferite ale ecranului. De asemenea, combinăm câteva animații grozave pentru ca stilul de design să se potrivească perfect cu 2019. Sperăm că acest tutorial vă va inspira să creați propriile secțiuni de erou cu conținut divizat mobil.

Să ajungem la asta!

previzualizare

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

Mobil

Desktop

Să începem să recreăm!

Adăugați o secțiune nouă

Spațiere

Începeți prin a crea o pagină nouă sau a deschide una existentă. Adăugați o nouă secțiune obișnuită, accesați setările de spațiere și eliminați toate umpluturile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

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

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândurilor și adăugați o culoare de fundal complet neagră.

• Culoare fundal: # 000000

Coloana 1 Culoare fundal

Adăugați și o culoare de fundal neagră la prima coloană.

• Coloana 1 Culoare fundal: # 000000

Coloana 2 Culoare fundal

Același lucru pentru a doua coloană.

• Coloana 2 Culoare fundal: # 000000

Dimensionare

Apoi, accesați setările de dimensionare și permiteți rândului și coloanelor sale să ocupe întreaga lățime a ecranului.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

De asemenea, eliminăm toate umpluturile implicite de sus și de jos ale rândului.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Garnitura dreapta: 1vw

Afişa

Nu în ultimul rând, ne vom asigura că ambele coloane apar una lângă alta și pe dimensiuni de ecran mai mici. Pentru a face acest lucru, va trebui să adăugăm o singură linie de cod CSS în fila avansată a rândului.

display: flex;

Adăugați modulul de imagine în coloana 1

Lăsați caseta de imagine goală

E timpul să adăugăm toate modulele de care avem nevoie! Începeți cu modulul de imagine din prima coloană. În loc să încărcăm o imagine în caseta de imagine, vom încărca imaginea în setările de fundal în pașii următori. Acest lucru ne va permite să ne jucăm cu modul în care este poziționată imaginea și cu cât spațiu ocupă în rândul nostru.

Adăugați o culoare de fundal

Accesați setările de fundal ale modulului de imagine și adăugați o culoare de fundal. În pasul următor, vom combina această culoare de fundal și o imagine de fundal folosind un efect de amestecare pentru a întuneca imaginea.

• Culoare fundal: # 686868

Adăugați o imagine de fundal

Adăugați o imagine de fundal la alegere și modificați setările de fundal în consecință:

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: înmulțiți

Dimensionare

Am folosit două coloane de dimensiuni egale pentru rândul la care lucrăm, dar rezultatul nu arată așa. Vom schimba manual dimensiunea fiecărui modul pe care îl adăugăm pentru a face să pară că folosim o structură de coloane diferită. Motivul pentru care facem acest lucru (în loc să alegem doar o altă structură de coloană) este acela de a face totul să arate bine și să răspundă și la dimensiuni de ecran mai mici. Accesați setările de dimensionare ale modulului de imagine și modificați lățimea.

• Lățime: 88%
• Alinierea modulului: stânga

Spațiere

Acum ajungem să decidem dimensiunea imaginii noastre în setările de spațiere. De asemenea, folosim o unitate de vizualizare pentru aceste valori pentru a ne asigura că designul nostru rămâne complet receptiv pe toate dimensiunile ecranului.

• Căptușeală superioară: 26,3vw (desktop), 48vw (tabletă), 72vw (telefon)
• Căptușeală inferioară: 26,3vw (desktop), 48vw (tabletă), 72vw (telefon)

Animaţie

Nu în ultimul rând, vom adăuga o animație de diapozitive la modulul nostru de imagine. După ce aplicați animația, veți observa că imaginea va începe să apară numai din momentul în care intră în prima coloană. Culoarea de fundal a celei de-a doua coloane rămâne deasupra modulului de imagine în timp ce glisează spre stânga.

• Stil de animație: Slide
• Repetați animația: o dată
• Direcția animației: Stânga
• Durata animației: 1450 ms
• Intensitatea animației: 60%
• Animație Opacitate de pornire: 100%

Adăugați modulul buton la coloana 1

Adăugați o copie

Următorul modul de care avem nevoie în coloana 1 este un modul buton. Introduceți o copie la alegere.

Setări buton

Apoi, accesați fila de proiectare și modificați setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1,5vw (desktop), 2,5vw (tabletă), 4vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # e02b20
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 1 px
• Buton Font: Poppins
• Greutate font: greu

Spațiere

Modificați și valorile de spațiere.

• Marja superioară: -3,3vw (desktop), -6vw (tabletă), -9,1vw (telefon)
• Garnitura stânga: 8vw
• Garnitura dreapta: 8vw

Box Shadow

Și adăugați o umbră de casetă subtilă pentru a crea o anumită adâncime a paginii.

• Puterea neclarității umbrei cutiei: 20 px
• Culoare umbră: rgba (0,0,0,0.27)

Adăugați modulul de text nr. 1 în coloana 2

Adăugați conținut H1

Trecem la a doua coloană! Primul modul de care avem nevoie este un modul de text. Adăugați conținut H1 la alegere.

Setări text H1

Apoi, accesați fila de proiectare și modificați setările de text H1.

• Font de titlu: Poppins
• Culoare text antet: #ffffff
• Dimensiune text antet: 4vw (desktop), 5vw (tabletă), 6vw (telefon)

Spațiere

Modificați și valorile de spațiere.

• Marja superioară: 12vw
• Marja stângă: -20vw
• Marja dreaptă: 17vw (desktop), 15vw (tabletă), 1vw (telefon)

Animaţie

Și adăugați o animație subtilă.

• Stil de animație: Slide
• Repetați animația: o dată
• Direcția animației: Jos
• Durata animației: 1450 ms
• Intensitatea animației: 10%
• Animație Opacitate de pornire: 100%

Adăugați modulul divizor în coloana 2

Vizibilitate

Următorul modul de care avem nevoie în a doua coloană este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare

Apoi, accesați fila de proiectare și schimbați culoarea separatorului.

• Culoare: # e02b20

Animaţie

Adăugați o animație la modulul divizor următor.

• Stil de animație: Slide
• Repetați animația: o dată
• Direcția animației: Corect
• Durata animației: 1450 ms
• Intensitatea animației: 83%
• Animație Opacitate de pornire: 100%

Adăugați modulul de text nr. 2 în coloana 2

Adauga continut

La următorul și ultimul modul avem nevoie în a doua coloană! Adăugați o descriere la alegere.

Setări text

Apoi, accesați setările de text din fila de proiectare și efectuați unele modificări în consecință:

• Font text: Poppins
• Greutatea fontului textului: ușoară
• Culoarea textului: # 919191
• Dimensiune text: 0,7vw (desktop), 1,8vw (tabletă), 2,2vw (telefon)
• Spațiere scrisoare text: 0,1vw
• Înălțimea liniei textului: 2.2em

Spațiere

Modificați și valorile de spațiere.

• Marja superioară: 9vw (desktop), 19vw (tabletă), 23vw (telefon)
• Marja inferioară: 12vw (desktop), 19vw (tabletă), 23vw (telefon)
• Marja stângă: -3vw
• Marja dreaptă: 20vw (desktop), 6vw (tabletă), 3vw (telefon)

Animaţie

Nu în ultimul rând, adăugați o animație de estompare la modul și ați terminat!

• Stil de animație: Fade
• Repetați animația: o dată
• Durata animației: 1450 ms
• Întârziere animație: 1000 ms
• Animație Opacitate de pornire: 0%

previzualizare

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

Mobil

Desktop

Gânduri finale

În această postare, v-am arătat cum să creați secțiuni de eroi uimitoare cu conținut divizat folosind Divi. Secțiunile erou cu conținut divizat sunt foarte populare și sunt utilizate frecvent pe web, dar este important să vă asigurați că sunt foarte receptive. Sperăm că acest tutorial vă va ajuta să creați secțiuni de erou cu conținut divizat mobil pentru site-urile viitoare pe care le construiț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!