Crearea unei grile de cărți de întrebări interactive pentru următoarea dvs. pagină despre Divi

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

Săptămâna aceasta, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să creați o grilă interactivă de carduri de întrebări pentru următoarea dvs. pagină despre Divi. Vom folosi pagina despre pachetul de aspect al furnizorului de servicii Internet, dar puteți utiliza abordarea pe orice pagină la care lucrați. Oferă vizitatorilor o experiență diferită de utilizator și vă permite să interacționați cu ei pe informațiile pe care le partajați. Odată ce veți obține abordarea, puteți crea modele alternative ale grilelor de cărți de întrebare la alegere, jucându-vă cu opțiunile încorporate ale Divi.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra grilei de cărți de întrebări pe care o vom recrea de la zero.

Desktop

Mobil

Să începem să creăm!

Creați o pagină nouă utilizând pagina Despre pachetul de aspect ISP

Pentru a crea designul pe care l-am arătat mai sus, vom folosi pagina despre pachetul de aspect al furnizorului de servicii Internet, așa că mergeți mai departe și creați o pagină nouă utilizând acest aspect. Ca de obicei, îl puteți găsi în aspectele premade.

Ștergeți toate secțiunile dintre secțiunea erou și subsol

Vom înlocui întregul conținut curent cu un card de întrebări. Pentru a face acest lucru, va trebui mai întâi să eliminăm toate secțiunile dintre secțiunea erou și subsol.

Adăugați o secțiune nouă între

Grila de cărți de întrebări pe care o vom crea poate conține orice fel de întrebări ale companiei la care doriți să răspundeți. De asemenea, puteți utiliza grila pentru a prezenta întrebările frecvente. Continuați adăugând o nouă secțiune obișnuită între secțiunea erou și subsolul paginii.

Adăugați un rând nou

Structura coloanei

Fără a face modificări la setările secțiunii, adăugați un rând nou folosind următoarea structură de coloane:

Dimensionare

Vom elimina tot spațiul implicit dintre coloane. Deschideți setările rândului și faceți câteva modificări la setările de dimensionare.

• 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

Vom avea în continuare nevoie de spațiu între coloane pentru a avea un design frumos. Accesați setările de spațiere și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px
• Coloana 1 Padding stânga: 10 px (desktop), 5 px (tabletă și telefon)
• Coloana 1 Căptușeala dreaptă: 5 px
• Coloana 2 Căptușeala din stânga: 5 px
• Coloana 2 Căptușeala dreaptă: 5 px
• Coloana 3 Căptușeala din stânga: 5 px
• Coloana 3 Căptușeala dreaptă: 10 px (desktop), 5 px (tabletă și telefon)

Adăugați un nou modul Blurb în coloana 1

Adauga continut

Pentru a crea efectul hover, singurul modul de care vom avea nevoie este un modul Blurb. Vom începe prin a crea unul și îl vom clona ulterior pentru a crea întregul rezultat. Adăugați un modul Blurb în coloana unu. Adăugați întrebarea la care doriți să răspundeți la câmpul de titlu și răspunsul la caseta de conținut.

Selectați pictograma

Apoi, selectați o pictogramă potrivită în setările de imagine și pictogramă. Această pictogramă vă va ajuta vizitatorii să înțeleagă că trebuie să treacă cu mouse-ul peste cartea de întrebări pentru a vedea răspunsul.

Setări implicite pentru pictograme

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

• Culoare pictogramă: #aaaaaa
• Plasarea pictogramelor: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 40 px

Plasați cursorul pe setările pictogramei

Și modificați culoarea pictogramei la cursor. Folosim o culoare complet transparentă pe hover pentru a face ca pictograma să dispară pe hover.

• Culoare pictogramă: rgba (255,255,255,0)

Setări text

Apoi, modificați orientarea textului în setările textului.

• Orientare text: centru

Setări implicite pentru textul titlului

Efectuați și câteva modificări la setările textului titlului.

• Titlu Font: Poppins
• Greutatea fontului titlului: Bold
• Culoare text titlu: # 333333
• Dimensiune text titlu: 40 px
• Spațiere litere titlu: -3px

Plasați cursorul pe setările pentru textul titlului

Și schimbați culoarea textului titlului la cursor. Din nou, folosim o culoare complet transparentă pentru a ne asigura că întrebarea nu apare odată ce cineva trece peste modulul Blurb.

• Culoare text titlu: rgba (255,255,255,0)

Setări implicite pentru textul corpului

Continuați modificând setările pentru textul corpului.

• Font corp: Open Sans
• Greutatea fontului corpului: ușoară
• Culoarea textului corpului: rgba (255,255,255,0)
• Dimensiunea textului corpului: 25 px
• Spațierea literelor corporale: -2 px
• Înălțimea liniei corpului: 1.6em

Plasați cursorul pe Setările textului corpului

Și schimbați culoarea textului corpului la cursor.

• Culoarea textului corpului: # 000000

Spațiere

Pentru a modela modulul nostru într-un pătrat, vom adăuga câteva valori de umplere personalizate.

• Căptușeală superioară: 9vw
• Căptușeală inferioară: 9vw
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Colțuri rotunjite implicite

De asemenea, oferim modulului nostru „30 px” de colțuri rotunjite.

Plasați colțurile rotunjite

Îndepărtăm aceste colțuri rotunjite.

Bordură implicită

Și vom adăuga o margine de jos.

• Lățimea marginii inferioare: 0 px
• Culoare margine inferioară: # 0fffeb

Plasați mouse-ul peste frontieră

Schimbați lățimea marginii de jos pe cursor pentru ca aceasta să apară.

• Lățimea marginii inferioare: 10 px

Box Shadow

Pentru a adăuga o anumită adâncime, vom folosi și o umbră de cutie.

• Culoare umbră: rgba (0,0,0,0.05)

Tranziții

Nu în ultimul rând, vom reduce durata tranziției în fila avansată.

• Durata tranziției: 250 ms

Clonați modulul Blurb de două ori și plasați-l în coloanele rămase

Acum, după ce ați terminat primul modul Blurb, puteți economisi timp clonându-l și plasând duplicatele în cele două coloane rămase.

Schimbați conținutul

Asigurați-vă că modificați conținutul fiecăruia dintre duplicate.

Schimbați culorile marginii inferioare

Împreună cu culoarea marginii inferioare.

Clonați întregul rând de două ori

Puteți crea grila cardului întrebării clonând rândul de câte ori doriți.

Schimbați conținutul și culorile inferioare pentru fiecare articol individual

Dar nu uitați să schimbați conținutul și culorile de jos pentru a face ca fiecare dintre cărțile de întrebare să fie unică!

previzualizare

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

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați o grilă interactivă de carduri de întrebări utilizând pachetul de dispunere a furnizorului de servicii Internet Divi. Deși ne-am asigurat că designul se potrivește cu stilul pachetului de layout, puteți utiliza această metodă pentru a transforma orice pagină despre aceasta într-una interactivă. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!