Prezentarea ultimelor dvs. postări de blog într-un design mobil uimitor cu Divi

Modul în care afișezi postările de pe blog pe site-ul tău are o influență mare asupra modului în care se comportă vizitatorii tăi atunci când îi întâlnesc în timp ce navighează pe site-ul tău. Pentru a vă ajuta să deveniți creativi și eficienți, vă vom arăta cum să prezentați cele mai recente postări de blog într-un mod uimitor.

Exemplul pe care îl vom recrea va arăta deosebit de grozav pe dimensiuni mai mici ale ecranului, păstrând în același timp un aspect și un aspect extraordinar pe desktop și tabletă. Sperăm că acest tutorial vă va inspira să vă creați propriile modele personalizate de ultimele postări pe blog.

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.

Să începem să recreăm!

Adăugați o secțiune nouă

Fundal de gradient

Creați o pagină nouă sau deschideți una existentă și adăugați o secțiune obișnuită la ea. Deschideți setările și adăugați un fundal degradat în continuare.

• Culoare 1: # 2e1b8f
• Culoare 2: #ffffff
• Direcția gradientului: 90 grade
• Poziția inițială: 53,3%
• Poziție finală: 53,3%

Spațiere

Apoi, accesați setările de spațiere. Aici, vom micșora dimensiunea conținutului secțiunii de pe desktop și vom scăpa treptat de spațiul respectiv pe dimensiuni de ecran mai mici.

• Marja superioară: 100 px
• Marja inferioară: 100 px
• Căptușire stângă: 26vw (desktop), 13vw (tabletă), 0vw (telefon)
• Căptușeală dreaptă: 22,8vw (desktop), 11,4vw (tabletă), 0vw (telefon)

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Coloana 2 Culoare fundal

Fără a adăuga încă module, deschideți setările rândului și adăugați o culoare de fundal la a doua coloană.

• Coloana 2 Culoare fundal: # f7f7f7

Coloana 3 Culoare fundal

Adăugați aceeași culoare și pe fundalul coloanei 3. Folosim aceeași culoare pentru ambele coloane pentru a le conecta și a le face să arate ca o singură bucată. Mai târziu în postare, vom folosi acest lucru pentru a manipula lățimile coloanei pe dimensiuni mai mici ale ecranului.

• Coloana 3 Culoare fundal: # f7f7f7

Dimensionare

Accesați fila de proiectare și deschideți setările de dimensionare. Aici vom elimina tot spațiul implicit dintre coloane.

• 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

Afişa

Acum, pentru a ne asigura că toate cele trei coloane apar una lângă alta pe dimensiuni de ecran mai mici, trebuie să adăugăm o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Adăugați Blurb Module la coloana 1

Selectați pictograma

E timpul să începeți să adăugați module! Începeți cu un modul Blurb în coloana 1 și selectați o pictogramă la alegere.

Fundal de gradient

Mergeți la setările de fundal ale modulului și adăugați un fundal de gradient radial.

• Culoare 1: # 5000ff
• Culoare 2: rgba (41.196.169,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 28%
• Poziție finală: 28%

Setări pictograme

Continuați accesând fila Design și modificând setările pictogramei.

• Culoare pictogramă: #ffffff
• Plasare imagine / pictogramă: sus
• Utilizați Font pictogramă: Da
• Pictogramă Dimensiune font: 22 px

Spațiere

Adăugați câteva căptușeli personalizate în partea de sus și de jos.

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

Frontieră

Și adăugați o margine de fund subtilă pentru a finaliza designul Blurb Module.

• Lățimea marginii inferioare: 1 px
• Culoare margine inferioară: #ffffff
• Stilul marginii inferioare: punctat

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

Adauga continut

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

Setări text

Apoi, accesați fila de proiectare și modificați setările de text în consecință:

• Font de text: Didact Gothic
• Greutatea fontului textului: Bold
• Culoarea textului: #ffffff

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

Adauga continut

Trecem la a doua coloană! Aici, singurul modul de care avem nevoie este un modul de text. Introduceți un conținut la alegere.

Culoare de fundal

Treceți la setările de fundal și adăugați o culoare de fundal complet albă.

• Culoare fundal: #ffffff

Setări text

De asemenea, schimbăm aspectul conținutului nostru modificând setările de text din fila de proiectare.

• Font text: Source Serif Pro
• Greutatea fontului textului: Bold
• Culoarea textului: # 000000
• Dimensiune text: 13 px
• Orientare text: centru

Dimensionare

Așa cum am menționat anterior, manipulăm structurile coloanelor pentru a crea un design personalizat pe dimensiuni mai mici de ecran. Pentru a face acest lucru, va trebui să micșorați lățimea modulului de text și să vă asigurați că este aliniat la partea stângă a coloanei.

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

Spațiere

În continuare adăugăm câteva valori de umplere personalizate.

• Căptușeală superioară: 57 px
• Căptușeală inferioară: 57 px
• Căptușeală stângă: 20 px
• Căptușeală dreaptă: 20 px

Box Shadow

Împreună cu o umbră de cutie subtilă.

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

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

Adauga continut

Treceți la următoarea și ultima coloană. Adăugați un modul text cu titlul H3 al postării de pe blog și un link. Adăugați detaliile postării în stilul textului paragrafului chiar sub titlu.

Setări text

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

• Font text: Source Serif Pro
• Culoarea textului: # a8a8a8
• Dimensiune text: 12 px

Setări text H3

Continuați schimbând și setările de text H3.

• Rubrica 3 Font: Didact Gothic
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 3 Dimensiune text: 17 px

Spațiere

În cele din urmă, va trebui să adăugăm câteva valori de spațiere personalizate. Veți observa că adăugăm, de asemenea, o marjă stângă negativă la modul. Acesta este ultimul pas către crearea unui alt tip de structură de coloană pe dimensiuni mai mici de ecran. Deci, deși structura coloanei este încă tehnic aceeași, am combinat fundalurile coloanelor, lățimile modulelor și marginea stângă negativă pentru a crea un rezultat cu aspect diferit.

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

Clone Row de două ori

După ce ați terminat modificarea rândului și a tuturor modulelor sale, puteți merge mai departe și puteți clona întregul rând de câte ori doriți, în funcție de câte postări de blog recente doriți să apară.

Schimbați pictogramele

Schimbați pictograma fiecărui duplicat.

Modificați conținutul și linkurile

Împreună cu conținutul și linkurile implicate ș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.

Gânduri finale

În această postare, v-am arătat cum să creați un design mobil uimitor care să prezinte cele mai recente postări de pe blog. Designul pe care l-am recreat pas cu pas este realizat în primul rând pentru dimensiuni de ecran mai mici, dar arată minunat și pe tabletă și desktop. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!