Una dintre paginile de destinație exclusive pe care vi le oferim ca membri pe viață și noi clienți de Black Friday în acest an este uimitoarea pagină de destinație a kitului UI. Acest aspect conține unele dintre cele mai bune combinații de design încorporate Divi și machete de înaltă calitate, care vor duce site-ul dvs. la nivelul următor. În această postare vă vom arăta cum să puneți mâna pe ea și să o utilizați eficient.

Dacă sunteți un client Lifetime actual sau dacă ați achiziționat un cont nou sau ați făcut upgrade în timpul vânzării noastre de Black Friday, puteți descărca acest aspect chiar acum.

Obțineți pagina de destinație exclusivă a setului de interviuri pentru Black Friday

Înainte de a intra în acest caz de utilizare, va trebui să puneți mâna pe pagina de destinație exclusivă Black Friday UI Kit pe care o puteți obține devenind un nou membru Elegant Themes, actualizând contul dvs. existent sau fiind deja membru pe viață la noi. Dacă sunteți într-adevăr deja membru pe viață, vă puteți conecta la zona noastră de membri și puteți descărca toate paginile noastre de destinație exclusive aici. Toți ceilalți vor trebui să utilizeze butonul de mai jos pentru a cumpăra sau actualiza înainte de a putea urma împreună cu restul tutorialului nostru.

Revendicați afacerea înainte ca aceasta să dispară!

Utilizarea structurilor de coloane Divi pentru a enumera frumos produsele și caracteristicile

Pentru restul acestei postări, vom presupune că ați profitat fie de afacerea noastră de Black Friday, fie că sunteți deja membru pe viață și aveți acces la pagina de destinație a kitului Black Friday UI Kit.

După ce ați descărcat noua pagină de destinație a kitului UI din zona noastră de membri, puteți viziona videoclipul de mai jos pentru a vedea cât de ușor este de configurat. De asemenea, vă încurajăm să urmați acest tutorial pentru a vă pregăti site-ul pentru o personalizare ulterioară.

În acest post de utilizare, vă vom arăta cum să vă listați uimitor caracteristicile și / sau produsele folosind noile structuri de coloane Divi. Designul pe care îl vom gestiona arată excelent cu pagina de destinație a kitului UI și vă permite să utilizați spațiul de pe pagina dvs. într-un mod eficient și frumos.

previzualizare

Să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.

Plasați cursorul și animația

De asemenea, vom adăuga câteva setări de hover și animație subtile la diferitele elemente de design. Aceasta va da următoarea interacțiune:

Să începem!

Adăugați o pagină nouă utilizând pagina de destinație a kitului UI

Primul lucru pe care va trebui să-l faceți este să creați o pagină nouă utilizând pagina de destinație a kitului de interfață pe care ați descărcat-o și ați încărcat-o. Dacă nu sunteți sigur cum să faceți acest lucru, asigurați-vă că verificați videoclipul din partea anterioară a acestei postări care vă va ghida acolo pas cu pas.

Găsiți secțiunea Caracteristici pe pagină

După ce ați încărcat aspectul, derulați în jos până când întâlniți secțiunea de funcții de pe pagină.

Eliminați rândurile existente

Eliminați ultimele două rânduri pe care le puteți găsi în această secțiune. Vom înlocui conținutul acestor rânduri cu lista noastră de caracteristici / produse.

Adăugați un rând nou sub rândul care conține rândul

Structura coloanei

Adăugați un rând nou la secțiune folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările de rând și modificați setările de dimensionare în fila de proiectare.

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

Spațiere

Pentru a ne asigura că acest design arată excelent pe toate dimensiunile ecranului, vom folosi diferite marje personalizate și valori de umplere:

• Marja superioară: 100 px
• Marja inferioară: 100 px
• Căptușeală superioară: 87 px
• Coloana 1 Căptușeală superioară: 100 px (desktop), 0 px (tabletă și telefon)
• Coloana 2 Căptușeală superioară: 100 px (desktop), 0 px (tabletă și telefon)
• Coloana 3 Căptușeală superioară: 100 px (desktop). 0px (tabletă și telefon)
• Coloana 3 Căptușeală inferioară: 50 px (tabletă și telefon)
• Coloana 4 Căptușeala din stânga: 10 px (numai pentru telefon)
• Coloana 4 Căptușeala dreaptă: 10 px
• Coloana 5 Padding stânga: 5 px (desktop și tabletă), 10 px (telefon)
• Coloana 5 Căptușeala dreaptă: 5 px (desktop și tabletă), 10 px (telefon)
• Coloana 6 Garnitura stânga: 10 px
• Coloana 6 Căptușire stânga: 10 px (numai telefon)

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

Adauga continut

E timpul să începeți să adăugați module! Adăugați un modul de text în prima coloană cu un număr.

Culoare de fundal implicită

Adăugați o culoare de fundal la acest modul.

• Culoare fundal: # 0f0f0f

Plasați cursorul pe culoarea de fundal

Și schimbați culoarea de fundal la cursor.

• Culoare fundal: # ff5400

Imagine de fundal

De asemenea, puteți adăuga pe fundal una dintre imaginile pictograme, pe care o puteți găsi în biblioteca dvs. media:

• Dimensiunea imaginii de fundal: dimensiunea reală
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare

Setări implicite pentru text

Continuați modificând setările pentru text.

• Font text: Muli
• Greutatea fontului textului: ușoară
• Culoarea textului: #ffffff
• Dimensiune text: 80 px (desktop și telefon), 40 px (telefon)
• Înălțimea liniei de text: 1em

• Culoare umbră text: ## ffffff
• Orientare text: stânga

Spațiere implicită

Adăugați câteva umpluturi personalizate pentru a crea un pătrat.

• Căptușeală superioară: 200 px
• Căptușeală stângă: 50 px (numai telefon)
• Căptușeală dreaptă: 50 px (numai telefon)

Distanța cu mouse-ul

Modificați setările de spațiere pe hover.

• Căptușeală stângă: 100 px

Frontieră

Pentru a se potrivi cu pagina de destinație a kitului UI, adăugăm și câteva colțuri rotunjite subtile. Adăugați „20px” la fiecare colț.

Box Shadow

Utilizați următoarea umbră a casetei pentru a adăuga o culoare și modulului:

• Poziție orizontală a umbrei cutiei: 20 px
• Box Shadow Vertical Position: -50px
• Puterea răspândirii umbrei cutiei: 17 px
• Culoare umbră: # 593aff

Animaţie

Nu în ultimul rând, adăugați o animație de diapozitive foarte subtilă la modulul text.

• Stil de animație: Slide
• Direcția animației: Corect
• Intensitatea animației: 3%

Adăugați modulul divizor în coloana 2

Vizibilitate

Următorul modul de care vom avea nevoie este un modul divizor. Continuați și adăugați una la a doua coloană. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare

Schimbați apoi culoarea separatorului.

• Culoare: #ffffff

Spațiere

Pentru a suprapune modulul de text din prima coloană, vom folosi câteva valori de marjă personalizate pe care le vom regla în funcție de diferitele dimensiuni ale ecranului.

• Marja superioară: 30 px
• Marja stângă: -200px (desktop și tabletă), 0px (telefon)
• Marja dreaptă: 200 px (desktop și tabletă), 0 px (telefon)

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

Adauga continut

Treci la coloana următoare! Aici, primul modul de care avem nevoie este un titlu Modul text. Continuați și adăugați titlul primei dvs. caracteristici sau produse.

Setări text antet

Apoi, accesați setările pentru textul antetului și efectuați câteva modificări pentru a se potrivi cu pachetul de aspect al kitului UI.

• Rubrica 3 Font: Muli
• Rubrica 3 Greutatea fontului: ușoară
• Rubrica 3 Culoarea textului: #ffffff
• Rubrica 3 Dimensiune text: 30 px (desktop și tabletă), 18 px (telefon)

Spațiere

Pentru a împinge acest modul spre stânga, vom folosi câteva valori de spațiere personalizate.

• Marja superioară: 20 px
• Marja inferioară: 20 px
• Marja stângă: -180 px (desktop și tabletă), 0 px (telefon)
• Căptușire stângă: 20 px (desktop și tabletă), 50 px (telefon)
• Căptușeală dreaptă: 20 px (desktop și tabletă), 50 px (telefon)

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

Adauga continut

Următorul modul de care avem nevoie este o descriere Modul text. Continuați și introduceți descrierea caracteristicii sau produsului dvs.

Setări text

Schimbați apoi setările de text.

• Culoare text: rgba (255,255,255,0,5)
• Înălțimea liniei textului: 2.2em

Spațiere

Împingeți acest modul și la stânga utilizând câteva valori de spațiere personalizate.

• Marja stângă: -180 px (desktop și tabletă), 0 px (telefon)
• Căptușire stângă: 20 px (desktop și tabletă), 50 px (telefon)
• Căptușeală dreaptă: 20 px (desktop și tabletă), 50 px (telefon)

Modul buton Clonare și plasare în coloana 3

Ultimul modul de care vom avea nevoie în coloana 3 este un modul buton. Pentru a economisi timp, vom clona un buton existent pe pagină și vom plasa duplicatul chiar sub celelalte două module pe care le-am adăugat.

Schimbați conținutul

Schimbați conținutul modulului buton.

Schimbați spațiul

Împingem și acest modul spre stânga. După cum puteți observa, toate modulele din coloana 3 ocupă spațiul a două coloane. Acest tip de abordare ne permite să creăm o altă structură de coloane care să se potrivească cu rezultatul dorit.

• Marja superioară: 50 px
• Marja stângă: -160 px (desktop și tabletă), 50 px (telefon)
• Marja dreaptă: 50 px (numai telefon)

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

Incarca imaginea

Treci la coloana următoare! Adăugați un modul de imagine în coloana 4 și încărcați o imagine la alegere. Pentru acest exemplu, am folosit dimensiuni de imagine de 500 × 500, dar nu ezitați să vă jucați și cu alte dimensiuni de imagine.

Box Shadow

Adăugați o umbră de casetă subtilă la acest modul.

• Culoare umbră: #ffffff

Animaţie

Și pentru a completa, adăugați și o animație de diapozitive la imagine.

• Stil de animație: Slide
• Direcția animației: Stânga
• Întârziere animație: 100 ms
• Intensitatea animației: 3%

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

Adauga continut

Chiar sub modulul de imagine, continuați și adăugați un titlu Modul de text cu un anumit conținut la alegere.

Culoare de fundal implicită

Schimbați culoarea de fundal a acestui modul.

• Culoare fundal: # 0f0f0f

Plasați cursorul pe culoarea de fundal

Și utilizați o altă culoare de fundal pe hover.

• Culoare fundal: # 593aff

Setări text antet

Continuați modificând setările pentru textul antetului pentru a se potrivi cu pagina de destinație a kitului UI.

• Rubrica 4 Font: Muli
• Rubrica 4 Greutatea fontului: ușoară
• Titlul 4 Culoare text: #ffffff
• Titlul 4 Dimensiune text: 23 px (desktop și tabletă), 18 px (telefon)

Spațiere implicită

Adăugați câteva valori de spațiere personalizate în continuare.

• Căptușeală superioară: 50 px
• Căptușeală stângă: 30 px
• Căptușeală dreaptă: 30 px

Distanța cu mouse-ul

Și schimbați aceste valori la plecare pentru a crea o tranziție frumoasă.

• Marja inferioară: 50 px
• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px

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

Adauga continut

Al doilea și ultimul modul de care vom avea nevoie în coloana 4 este o descriere Modul text. Introduceți un conținut la alegere.

Culoare de fundal

Schimbați culoarea de fundal în continuare.

• Culoare fundal: # 0f0f0f

Setări text

Și modificați setările de text.

• Culoare text: rgba (255,255,255,0,5)
• Înălțimea liniei textului: 2.2em

Spațiere

Pentru a crea un aspect curat, adăugați câteva umpluturi personalizate la acest modul.

• Căptușeală inferioară: 50 px
• Căptușeală stângă: 30 px
• Căptușeală dreaptă: 30 px

Frontieră

Nu în ultimul rând, adăugați „20 px” în cele două colțuri inferioare ale modulului.

Clonați toate modulele din coloana 4 de două ori și plasați-le în coloanele rămase

Schimbați imaginea și conținutul

Acum, că aveți toate modulele de care aveți nevoie în coloana 4, puteți continua și clona toate aceste module de două ori și plasați duplicatele în cele două coloane rămase. Schimbați conținutul și imaginile pentru a crea varietate.

Clonați rândul de câte ori doriți (în funcție de numărul de articole din listă)

Am terminat primul nostru articol de listă! Acum puteți continua și clona acest rând de câte ori doriți, în funcție de numărul de caracteristici și / sau produse pe care doriți să le prezentați.

Schimbați conținutul clonării

Pentru fiecare dintre duplicate, va trebui să modificați conținutul.

Găsiți și înlocuiți culoarea

De asemenea, puteți utiliza funcția Găsiți și înlocuiți de Divi pentru a schimba rapid paleta de culori a unui element din listă.

Schimbați culoarea de fundal a cursorului

Asigurați-vă că, odată ce schimbați paleta de culori, schimbați și culoarea de fundal a mouse-ului pentru modulul Text Text.

• Culoare fundal: # 593aff

Schimbați imaginea de fundal

Nu în ultimul rând, puteți alege, de asemenea, o altă pictogramă din listă, în funcție de caracteristica și / sau produsul pe care doriți să îl prezentați.

Gânduri finale

Acest caz de utilizare face parte din oferta noastră de Black Friday, unde împărtășim 6 pagini gratuite de destinație în ediție limitată cu clienții Black Friday și membrii pe toată durata vieții. Alăturându-vă comunității noastre împuternicite în aceste zile și devenind membru, veți primi:

• 25% REDUCERE PE TOT
• Toate cele 6 pagini de destinație gratuite
• Acces la temele și pluginurile noastre minunate
• Premii bonus

Profitați de ocazie și deveniți membru astăzi!