Crearea cardurilor orizontale fără sfârșit pentru mobil cu Divi

Glisarea prin conținut este ceva ce face aproape toată lumea în fiecare zi. Practic a devenit a doua natură, așa că este de la sine înțeles că adăugarea acestuia la site-ul dvs. web poate contribui la îmbunătățirea experienței generale a utilizatorului. În această postare, vă vom arăta cum să creați nesfârșite carduri orizontale care se concentrează în principal pe dispozitive mobile și tablete, unde este implicată atingerea. Deși acesta este un tutorial primul pe mobil, rezultatul va funcționa excelent și pe desktop. Utilizatorii pot utiliza bara de defilare care va fi inclusă sau „glisa” la stânga și la dreapta folosind touchpad-ul lor.

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.

Exemplul 1: rândul cu o coloană

Desktop

Mobil

Exemplul 2: rând cu două coloane + module multiple în „Glisați coloana”

Desktop

Mobil

Abordare

• Pentru a crea acest efect frumos, va trebui să transformăm o întreagă coloană verticală într-un mecanism orizontal de glisare / derulare, utilizând doar câteva linii de cod CSS
• Folosind o coloană verticală pentru acest mecanism (și transformându-l într-o grilă orizontală) vă va permite să adăugați câte cărți de glisare doriți, veți determina câte coloane trebuie să fie
• Cu alte cuvinte; veți adăuga module în jos și mecanismul de glisare / derulare va plasa tivul într-o coloană orizontală
• Pentru primul exemplu, vom folosi un rând cu o coloană
• Acest lucru va permite mecanismului de glisare să ocupe întreaga lățime a ecranului
• Al doilea exemplu, pe de altă parte, transformă doar una din cele două coloane într-un mecanism de glisare / derulare și lasă cealaltă coloană în starea sa statică
• De asemenea, vă vom arăta cum să adăugați mai multe module la o „coloană” a mecanismului de glisare / derulare
• Odată ce ați înțeles abordarea, veți putea crea literalmente orice tip de design doriți și să facă parte din mecanismul de glisare / derulare pe care îl puteți vedea în GIF-urile de mai sus.
• Puteți găsi toate imaginile de fundal fluide pe care le vom folosi accesând postarea „Descărcați 10 imagini de fundal GRATUITE ale secțiunii de fluid pentru Divi”

Abonați-vă la canalul nostru Youtube

Recreați exemplul nr. 1

Adăugați o secțiune nouă

Să începem să creăm primul exemplu! Adăugați o nouă secțiune la pagina la care lucrați.

Adăugați un rând nou

Structura coloanei

Apoi, adăugați un rând cu o coloană. Vom transforma întreaga coloană într-un mecanism de glisare / derulare.

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și accesați setările de dimensionare. Aici vom elimina tot spațiul dintre secțiune, rând și coloană. Cu alte cuvinte, coloana va ocupa î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

Cod CSS coloană

Așa cum am menționat mai devreme, transformăm coloana însăși într-un mecanism de glisare / derulare. Pentru a face acest lucru, vom avea nevoie de trei rânduri de cod CSS personalizat, pe care le puteți găsi mai jos. Continuați și adăugați-le la Elementul principal al coloanei din fila avansată a rândului.

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 70%);

Prima linie de cod CSS permite derularea / glisarea. A doua linie transformă coloana într-o grilă orizontală. Și a treia linie de cod CSS definește grila. În principiu, spunem că vrem 6 coloane care să aibă fiecare o lățime de 70%. În funcție de numărul de carduri care doriți să apară în mecanismul de glisare / derulare, va trebui să modificați valorile. Deci, să zicem, de exemplu, că doriți ca 10 carduri diferite să facă parte din mecanism și doriți să măriți lățimea fiecărei coloane la 90%, va trebui să utilizați în schimb următoarea linie de cod CSS:

grid-template-columns: repeat(10, 90%);

Adăugați modulul CTA în coloana 1

Adauga continut

După ce ați terminat modificarea setărilor rândului, continuați și adăugați un modul CTA în coloană. Adăugați un conținut la alegere.

Legătură

De asemenea, va trebui să adăugați o adresă URL de link pentru buton pentru ca butonul să apară în modul.

Fundal de gradient

Continuați adăugând un fundal de gradient.

• Culoare 1: # 802bff
• Culoare 2: # 001519

Imagine de fundal

În secțiunea de abordare a acestei postări, am menționat că vom folosi imaginile de fundal fluide pe care le puteți descărca gratuit accesând această postare. După ce ați descărcat imaginile de fundal fluide, căutați fișierul de imagine „ fluid-style-2.png ” și încărcați-l în fila imagine de fundal. Modificați setările imaginii de fundal în consecință:

• Dimensiunea imaginii de fundal: potrivită
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: Suprapunere

Setări text

Treceți la fila de proiectare și asigurați-vă că se aplică următoarele setări de text:

• Orientare text: centru
• Culoarea textului: deschis

Setări text titlu

Modificați apoi setările pentru textul titlului.

• Titlu Font: Didact Gothic
• Greutatea fontului titlului: Bold
• Dimensiune text titlu: 1vw (desktop), 2,5vw (tabletă), 4vw (telefon)
• Înălțimea liniei de titlu: 1.9em

Setări text corp

Împreună cu setările pentru textul corpului.

• Font corp: Open Sans
• Dimensiunea textului corpului: 0,6vw (desktop), 1,3vw (tabletă), 2,5vw (telefon)
• Înălțimea liniei corpului: 2.6em (desktop și tabletă), 2.1em (telefon)

Setări buton

Schimbăm aspectul butonului și în acest modul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0.9vw (Desktop), 2.1vw (Tabletă), 3.5vw (Telefon)
• Culoarea textului butonului: # 000000
• Culoarea fundalului butonului: #ffffff
• Lățimea chenarului butonului: 10 px
• Culoarea chenarului butonului: #ffffff
• Buton Font: Didact Gothic

Dimensionare

De asemenea, este important să micșorați ușor lățimea modulului CTA în setările de dimensionare. Acest lucru vă va asigura că va exista întotdeauna un decalaj între acest modul și oricare dintre module care urmează în mecanismul de glisare / derulare.

• Lățime: 95%
• Alinierea modulului: centru

Spațiere

Desigur, vrem ca totul să arate grozav pe toate dimensiunile diferite ale ecranului. De aceea, vom adăuga diferite valori de umplere personalizate în setările de spațiere.

• Marja superioară: 50 px
• Marja inferioară: 50 px
• Căptușeală superioară: 12vw (desktop), 5vw (tabletă), 14vw (telefon)
• Căptușeală inferioară: 12vw (desktop), 5vw (tabletă), 14vw (telefon)
• Căptușeală stângă: 20vw (desktop), 3vw (tabletă), 8vw (telefon)
• Căptușeală dreaptă: 20vw (desktop), 3vw (tabletă), 8vw (telefon)

Frontieră

Nu în ultimul rând, adăugăm și „20px” la fiecare dintre colțurile modulului.

Clonați modulul CTA de câte ori doriți

După ce ați terminat de personalizat modulul CTA, puteți continua și clona modulul de câte ori doriți.

Schimbați fundalul și imaginea de fundal a gradientului Duplicat 1

Schimbați fundalul de gradient al primului duplicat.

• Culoare 1: # 7a010d
• Culoare 2: # 001519

Și utilizați în schimb imaginea de fundal „ fluid-style-9.png ”.

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

Schimbați gradientul de fundal și imaginea de fundal a Duplicatului 2

Schimbați apoi fundalul de gradient al celui de-al doilea duplicat.

• Culoare 1: # 26ccff
• Culoare 2: # 001519

Încărcați fișierul de imagine „fluid-style-10a.png” ca imagine de fundal.

• Dimensiunea imaginii de fundal: potrivită
• Poziția imaginii de fundal: stânga sus
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: Suprapunere

Schimbați fundalul de gradient și imaginea de fundal a duplicatului 3

Schimbați fundalul de gradient al celui de-al treilea duplicat.

• Culoare 1: # ff21b8
• Culoare 2: # 001519

Încărcați imaginea de fundal „ fluid-style-6.png ”.

• Dimensiunea imaginii de fundal: potrivită
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: Suprapunere

Schimbați gradientul de fundal și imaginea de fundal a Duplicatului 4

Schimbați fundalul de gradient al celui de-al patrulea duplicat.

• Culoare 1: # 4400aa
• Culoare 2: # 001519

Utilizați „ fluid-style-4.png ” ca imagine de fundal.

• Dimensiunea imaginii de fundal: potrivită
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: Suprapunere

Schimbați fundalul și imaginea de fundal a gradientului Duplicat 5

Schimbați fundalul de gradient al ultimului duplicat.

• Culoare 1: # ff2626
• Culoare 2: # 001519

Utilizați „ fluid-style-7.png ” ca imagine de fundal.

• Dimensiunea imaginii de fundal: potrivită
• Poziția imaginii de fundal: dreapta sus
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: Suprapunere

Ajustați coloana CSS la numărul de module

Am menționat acest lucru înainte, dar din nou, asigurați-vă că codul CSS se potrivește cu numărul de module pe care le aveți în coloana dvs.

Stilizarea barei de derulare

Adăugați clasa CSS în coloană

De asemenea, puteți stiliza bara de defilare care vine împreună cu acest mecanism de glisare / derulare. Adăugați următoarea clasă CSS în coloana dvs.:

• Coloana CSS Class: glisare-bara de derulare

Adăugați CSS personalizat la Setările paginii

Apoi, deschideți setările paginii, accesați fila avansată și adăugați următorul cod CSS personalizat:

.swipe-scrollbar::-webkit-scrollbar {
width: 10px;
}
.swipe-scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.swipe-scrollbar::-webkit-scrollbar-thumb {
background: #333;
border-radius: 50px;
}

Recreați exemplul nr. 2

Clonați secțiunea anterioară

Trecem la următorul exemplu! Clonați secțiunea pe care ați creat-o în partea anterioară a acestei postări.

Modificați setările de spațiere CTA

Apoi, modificați setările de spațiere ale primului modul CTA.

• Marja superioară: 50 px
• Marja inferioară: 50 px
• Căptușeală superioară: 5vw (desktop și tabletă), 14vw (telefon)
• Căptușeală inferioară: 5vw (desktop și tabletă), 14vw (telefon)
• Căptușire stângă: 4vw (desktop), 3vw (tabletă), 8vw (telefon)
• Căptușeală dreaptă: 4vw (desktop), 3vw (tabletă), 8vw (telefon)

Extindeți setările de spațiu la toate modulele din coloană

Extindeți aceste noi setări de spațiere făcând clic dreapta și făcând clic pe „Extindeți stilurile de spațiere”.

• Către: Toate apelurile la acțiuni
• De-a lungul: această coloană

Schimbați structura coloanei

Continuați schimbând structura coloanei rândului.

Mutați modulele în a doua coloană

Și așezați fiecare dintre module în a doua coloană.

Mutați CSS în a doua coloană și modificați valorile

Deoarece am mutat modulele de la o coloană la alta, va trebui să facem același lucru și pentru codul CSS. Adăugați în schimb clasa CSS în coloana 2.

• Coloana 2 Clasa CSS: glisare-bară de derulare

Plasați liniile de cod CSS în coloana 2 Element principal. De asemenea, schimbăm lățimea fiecărei coloane în „80%”.

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 80%);

Adăugați modulul de text al titlului în coloana 1

Adauga continut

Continuați adăugând un nou modul de text în prima coloană. Adăugați conținut H2 la alegere.

Setări text antet

Accesați fila de proiectare și modificați setările de text H2.

• Rubrica 2 Font: Didact Gothic
• Titlul 2 Greutate font: îndrăzneț
• Titlul 2 Aliniere text: centru
• Rubrica 2 Dimensiune text: 2,5vw (desktop), 5vw (tabletă), 6vw (telefon)

Spațiere

Adăugați și o marjă de sus personalizată.

• Marja superioară: 100 px

Adăugați un modul divizor în coloana 1

Vizibilitate

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

• Show Divider: Da

Culoare

Schimbați apoi culoarea separatorului.

• Culoare: # 333333

Dimensionare

Împreună cu setările de dimensionare.

• Greutatea divizorului: 7 px
• Înălțime: 0px
• Lățime: 10%
• Alinierea modulului: centru

Spațiere

Completați modulul divizor prin adăugarea unor margini superioare personalizate pe diferite dimensiuni de ecran.

• Marja superioară: 1,8vw (desktop), 2,5vw (tabletă), 4vw (telefon)

Adăugați modulul de text al corpului în coloana 1

Adauga continut

Următorul și ultimul modul de care avem nevoie în prima coloană este o descriere Modul text. Adăugați un conținut la alegere.

Setări text

Continuați modificând setările de text din fila de proiectare.

• Font text: Deschideți Sans
• Dimensiune text: 0,7vw (desktop), 1,6vw (tabletă), 2,3vw (telefon)

Dimensionare

Modificați și setările de dimensionare.

• Lățime: 43% (desktop), 68% (tabletă), 70% (telefon)
• Alinierea modulului: centru

Spațiere

Și adăugați niște margini personalizate de sus și de jos.

• Marja superioară: 50 px
• Marja inferioară: 50 px

Treceți la vizualizarea Wireframe

După ce ați terminat modificarea tuturor modulelor din coloana 1, continuați și treceți la vizualizarea wireframe.

Adăugați un modul de text în partea de sus a coloanei 2

Aici, vom adăuga un modul de text în partea de sus a celei de-a doua coloane. Codul CSS pe care l-am adăugat ne-a ajutat să creăm 6 coloane diferite. Aceasta înseamnă că, dacă doriți să apară două module diferite în fiecare dintre aceste 6 coloane, va trebui să aveți 12 module în total. Amplasarea modulului are loc orizontal, astfel încât primele 5 module pe care le aveți în coloana 2 vor apărea una lângă cealaltă. Apoi, mecanismul va trece la un alt rând și va adăuga restul de 6 module.

Adauga continut

Deschideți noul modul de text pe care l-ați adăugat în partea de sus a celei de-a doua coloane și adăugați un conținut la alegere.

Setări text

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

• Font de text: Didact Gothic
• Greutatea fontului textului: Bold
• Culoarea textului: # 000000
• Dimensiune text: 1.1vw (desktop), 3vw (tabletă), 3.5vw (telefon)

Modul de text Clonare 5x

Continuați și clonați acest modul text de 5 ori. Acum, veți avea 6 module de text diferite, acest lucru este egal cu numărul de module CTA pe care le avem și noi. Deci, dacă utilizați în schimb 10 module CTA, va trebui să adăugați 10 module de text (sau orice alte module) pentru a echilibra structura coloanei.

Schimbați conținutul duplicatelor

Schimbați conținutul fiecăruia dintre duplicate pentru a se potrivi cu modulul CTA care va apărea sub el și ați terminat!

previzualizare

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

Exemplul 1: rândul cu o coloană

Desktop

Mobil

Exemplul 1: rând cu două coloane + module multiple în „Glisați coloana”

Desktop

Mobil

Gânduri finale

În acest post, v-am arătat cum să creați nesfârșite carduri orizontale folosind Divi. Crearea acestor carduri glisante nu numai că vă va ajuta să adăugați o dimensiune suplimentară site-ului dvs. web, ci va ajuta și vizitatorii să navigheze fără probleme prin tot conținutul site-ului dvs. web. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!