Cum să creați un tablou de bord al jocului cu pachetul de layout al clubului de fotbal 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 un tablou de bord interesant folosind pachetul Divi Soccer Club Layout Pack. Vom crea acest ultim tablou de joc folosind doar opțiunile încorporate ale lui Divi, așa că hai să ajungem la el!

previzualizare

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

Încărcați pachetul Layout al pachetului Soccer Club

Pentru a crea acest tutorial, vom folosi pagina de destinație a pachetului de machete Soccer Club, așa că mergeți mai departe și adăugați o pagină nouă folosind acest aspect.

Adăugați o secțiune nouă

Apoi, adăugați o nouă secțiune chiar aici:

Culoare de fundal

Deschideți setările secțiunii și adăugați o culoare de fundal în continuare.

• Culoare fundal: # f4f4f4

Spațiere

Joacă-te și cu valorile spațierii.

• Căptușeală superioară: 55 px
• Căptușeală inferioară: 140 px

Clonați rândul și locul în secțiunea

Localizați rândul și creați clona

Pentru a economisi timp, vom clona rândul titlului în secțiunea următoare.

Amplasați în secțiunea nouă

Schimbați textul

Schimbați copia modulului de text din rând pentru a se potrivi cu noua secțiune.

Adăugați rândul # 2

Structura coloanei

Chiar sub rândul anterior, continuați și adăugați un rând nou folosind următoarea structură de coloane:

Culoare de fundal

Deschideți setările rândului și schimbați culoarea de fundal.

• Culoare fundal: #ffffff

Coloana 1 Culoare fundal

Adăugați și o culoare de fundal a coloanei 1.

• Coloana 1 Culoare fundal: #fcfcfc

Coloana 3 Culoare fundal

Repetați același pas pentru coloana 3.

• Coloana 3 Culoare fundal: #fcfcfc

Dimensionare

Modificați și setările de dimensionare.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimea coloanei: Da

Spațiere

Eliminați în continuare toate umpluturile implicite.

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

Frontieră

Pentru a se potrivi cu pachetul de aspect, adăugați un rând superior și inferior la rând.

• Lățimea marginii inferioare: 8 px
• Culoarea chenarului inferior: # 00aaff

Box Shadow

În cele din urmă, adăugați o umbră de casetă subtilă pentru a crea adâncime pe pagină.

• Box Shadow Vertical Position: 20 px
• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -20px
• Culoare umbră: rgba (0,0,0,0.56)

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

Adauga continut

E timpul să începeți să adăugați module! Începeți cu un modul de text în coloana 1 și adăugați un conținut.

Culoare de fundal

Schimbați culoarea de fundal în continuare.

• Culoare fundal: # E8E8E8

Setări text

Continuați jucând cu setările de text.

• Font text: Squada One
• Stil de text text: majuscule
• Culoarea textului: # 333333
• Dimensiune text: 20 px
• Orientare text: centru

Spațiere

Apoi, adăugați câteva valori de spațiere personalizate.

• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px
• Căptușeală stângă: 10 px
• Garnitura dreapta: 10 px

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

Adauga continut

Adăugați un nou modul de text chiar sub modulul de text anterior din coloana 1. După ce faceți acest lucru, adăugați conținut în caseta de conținut.

Setări text

Schimbați apoi setările de text.

• Font text: Deschideți Sans
• Greutatea fontului textului: Bold
• Culoarea textului: # 333333
• Dimensiune text: 18 px
• Orientare text: centru

Spațiere

Joacă-te și cu valorile spațierii.

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

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

Încărcați logo-ul clubului

Ultimul modul necesar în coloana 1 este un modul de imagine care conține sigla clubului uneia dintre echipele care concurează.

Dimensionare

După ce ați încărcat imaginea logo-ului clubului, accesați setările de dimensionare și faceți câteva modificări.

• Lățime: 45% (desktop), 16% (tabletă), 28% (telefon)
• Alinierea modulului: centru

Spațiere

Continuați adăugând valori de marjă personalizate în setările de spațiere.

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

Clonați module și plasați duplicatele în coloana 3

După ce ați terminat cu toate cele trei module din coloana 1, le puteți clona și plasa duplicatele în a treia coloană.

Schimbați conținutul

Desigur, va trebui să schimbați conținutul fiecărui modul clonat.

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

Adauga continut

În a doua coloană, vom plasa data și scorul final. Începeți prin adăugarea unui modul de text cu o dată.

Culoare de fundal

Adăugați o culoare de fundal care se potrivește cu pachetul de layout următor.

• Culoare fundal: # 00aaff

Setări text

Schimbați și setările de text.

• Font text: Squada One
• Stil de text text: majuscule
• Culoarea textului: #FFFFFF
• Dimensiune text: 42 px
• Orientare text: centru

Spațiere

Apoi, accesați setările de spațiere și oferiți modulului mai multă umplere.

• Căptușeală superioară: 30 px
• Căptușeală inferioară: 30 px

Vizibilitate

În cele din urmă, dezactivați modulul de pe telefon și tabletă.

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

Adauga continut

Al doilea modul de text din coloana 2 trebuie să conțină scorul jocului.

Setări text

După adăugarea conținutului, modificați setările pentru text.

• Font text: Squada One
• Culoarea textului: # 333333
• Dimensiune text: 150 px
• Înălțimea liniei de text: 1em
• Orientare text: centru

Spațiere

Continuați modificând valorile spațierii.

• Marja superioară: 40 px (desktop), 20 px (tabletă și telefon)
• Marja inferioară: 20 px (tabletă și telefon)
• Căptușeală stângă: 10 px
• Garnitura dreapta: 10 px

Vizibilitate

Ascundeți acest modul și pe telefon și tabletă. În partea următoare, vom crea alternativa pentru dimensiuni mai mici de ecran.

Clonați ambele module și plasați-le în coloana 1

Clonați ambele module pe care le puteți găsi în coloana 2 și plasați duplicatele în prima coloană deasupra celorlalte module.

Schimbați vizibilitatea

Folosim ambele module pentru a avea un rezultat mai bun pe tabletă și telefon. Pentru a vă asigura că aceste module apar doar pe dimensiuni de ecran mai mici, dezactivați-le pe desktop.

Adăugați rândul # 3

Structura coloanei

În rândul următor, vom afișa diferitele obiective pe desktop. Utilizați următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândurilor și schimbați culoarea de fundal.

• Culoare fundal: #FFFFFF

Coloana 2 Culoare fundal

Schimbați și culoarea de fundal a coloanei 2.

• Coloana 2 Culoare fundal: # f7f7f7

Dimensionare

Eliminați tot spațiul dintre coloane în setările de dimensionare următoare.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 0
• Egalizați înălțimea coloanei: Da

Spațiere

Adăugați și valori de spațiere personalizate.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 1 Căptușeală inferioară: 100 px
• Coloana 1 Căptușeala dreaptă: 10 px
• Coloana 3 Căptușeala din stânga: 10 px

Frontieră

Apoi, adăugați o margine de fund subtilă pe rând.

• Lățimea marginii inferioare: 8 px
• Culoarea chenarului inferior: # 00aaff

Box Shadow

Pentru a crea adâncimea paginii, adăugați o umbră de casetă rând.

• Box Shadow Vertical Position: 20 px
• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -20px
• Culoare umbră: rgba (0,0,0,0.56)

Vizibilitate

Așa cum am menționat anterior, folosim acest rând pentru a afișa obiective numai pe desktop, așa că mergeți mai departe și dezactivați rândul de pe telefon și tabletă. Mai târziu în postare, vom crea o alternativă pentru tabletă și telefon.

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

Adauga continut

Adăugați un nou modul de text la prima coloană care conține primele detalii ale obiectivului.

Setări text

Schimbați apoi setările de text.

• Font text: Squada One
• Stil de text text: majuscule
• Culoarea textului: # 333333
• Dimensiune text: 27 px
• Orientarea textului: dreapta

Spațiere

Joacă-te și cu valorile spațierii.

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

Frontieră

Continuați adăugând o margine inferioară subtilă.

• Lățimea marginii inferioare: 1 px
• Culoarea chenarului inferior: # 333333

Clonați modulul de text de două ori

Schimbați spațiul duplicatelor

Clonați modulul de text pe care tocmai l-ați creat de două ori și modificați valorile de spațiere ale ambelor duplicate.

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

Clonați modulul de text nr. 1 și plasați duplicatul în coloana 3

Schimbați setările de text

Clonați din nou primul modul de text din coloana 1 și plasați duplicatul în coloana 3. Procedați prin schimbarea orientării textului.

• Orientare text: stânga

Schimbați spațiul

Marja superioară trebuie mărită, de asemenea.

• Marja superioară: 200 px

Clonați modulul text în coloana 3

Acum puteți clona din nou acest modul de text.

Adăugați rândul # 4

Structura coloanei

E timpul să adăugați ultimul rând! Alegeți următoarea structură de coloane:

Culoare de fundal

Schimbați culoarea de fundal a rândului.

• Culoare fundal: #FFFFFF

Dimensionare

Eliminați tot spațiul dintre coloane în continuare.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Adăugați câteva căptușeli suplimentare de sus și de jos.

• Căptușeală superioară: 100 px
• Căptușeală inferioară: 100 px

Frontieră

Vom avea nevoie de o margine de fund subtilă și pentru acest rând.

• Lățimea marginii inferioare: 8 px
• Culoarea chenarului inferior: # 00aaff

Box Shadow

Apoi, adăugați o umbră de casetă la rând.

• Box Shadow Vertical Position: 20 px
• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -20px
• Culoare umbră: rgba (0,0,0,0.56)

Vizibilitate

În cele din urmă, ascundeți rândul pe desktop.

Adăugați modulul de text nr. 1

Adauga continut

Adăugați un nou modul de text în coloana rândului și adăugați detaliile obiectivului.

Setări text

Schimbați apoi setările de text.

• Font text: Squada One
• Stil de text text: majuscule
• Dimensiune text: 27 px
• Orientarea textului: dreapta

Spațiere

Utilizați valorile de spațiere personalizate în continuare.

• Marja dreaptă: 150 px
• Căptușeală inferioară: 20 px

Frontieră

Adăugăm și o margine de fund subtilă.

• Lățimea marginii inferioare: 1 px
• Culoarea chenarului inferior: # 333333

Clonați modulul text

Schimbați setările de text

Clonați modulul de text pe care l-ați creat și modificați orientarea textului duplicatului.

• Orientare text: stânga

Spațiere

Modificați și valorile de spațiere.

• Marja superioară: 200 px
• Marja stângă: 150 px

Clonați ambele module text de câte ori este necesar

Acum puteți clona aceste module de câte ori doriți să arătați toate obiectivele diferite.

previzualizare

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

Gânduri finale

În această postare, v-am arătat cum să creați un tablou de bord al jocului folosind pachetul Divi's Soccer Club Layout Pack. Acesta este un mod excelent de a adăuga mai multe stimulente site-ului dvs. web și de a vă conecta cu publicul. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!