10+ moduri de a vă înfrumuseța designul postărilor de blog

Proiectarea postărilor pe blog spune multe despre marca dvs. și poate avea un impact crucial asupra cititorilor dvs. În acest articol, vă vom oferi idei inspiraționale pentru a îmbunătăți aspectul postărilor de pe blogul dvs. WordPress.

Ca atare, încorporarea elementelor de design unice și convingătoare în blogul dvs. este o necesitate. Cu toate acestea, este posibil să vi se pară greu de găsit inspirația, iar sarcina poate părea copleșitoare dacă nu sunteți un profesionist în design.

Din fericire, blogurile performante sunt o sursă excelentă de inspirație atunci când căutați idei de design. În plus, nu trebuie să fiți un profesionist în design pentru a reproduce și a încorpora aceste elemente în propriul blog. În schimb, puteți utiliza Elementor pentru a vă face munca rapidă și ușoară.

În această postare, vom evidenția 12 modele de blog de top găsite pe bloguri performante. Apoi vă vom arăta cum să aplicați fiecare secret de proiectare pe blogul dvs. folosind Page Builder. Să începem!

InVision este o platformă de colaborare și flux de lucru de top și, ca atare, iau în serios designul blogului lor. În general, acesta este un blog foarte curat, cu o utilizare amplă a spațiului negativ, animații de bun gust (cum ar fi utilizarea unui antet de paralaxă) și o tipografie lizibilă, bine setată.

Ne place în mod deosebit utilizarea capacelor pentru introducerea posturilor lor. Acesta este un mod excelent de a atrage atenția asupra conținutului, iar efectul este foarte ușor de reprodus folosind Elementor.

Mergeți la Elementor . De aici, adăugați o nouă secțiune, apoi glisați și fixați widgetul Editor text . În cele din urmă, adăugați textul dorit în editor și acesta trebuie să apară pe ecranul principal.

Pentru a adăuga majuscule, derulați în jos deasupra Editorului de text din meniul din stânga. Veți vedea o opțiune picătură Cap - pur și simplu rândul său , caracteristica On, și ați terminat!

Elementor vă permite să proiectați și să personalizați Drop Cap cu o gamă largă de posibilități de proiectare:

Alegeți vizualizarea care va fi „stivuită” la „încadrată”

Schimbați culoarea primară și secundară, Spațiul dintre capacul drop și paragraf, schimbați dimensiunea cadrului și raza marginii acestuia și schimbați tipografia capacului drop.

Urmați acești pași:

• Adăugați un widget text
• Porniți Drop Cap
• Personalizați stilul Drop Cap

Lifehacker este un blog de stil de viață și productivitate, cu un număr puternic de urmăritori. Folosind un design simplu care încorporează mult spațiu alb cu o combinație clasică de fonturi sans-serif / serif, blogul are o senzație de conținut. Pe scurt, Lifehacker știe cum să țină cititorii implicați și să revină pentru mai multe.

O metodă pe care Lifehacker o folosește pentru a separa și a oferi atenție conținutului lor este folosirea chenarelor stânga colorate pentru anumite elemente. Acestea oferă accent și sunt grozav de utilizat pentru citate sau aspecte deosebit de importante ale conținutului dvs.

Elementor vă permite să creați acest efect folosind widgetul Blockquote. Aceasta înseamnă că îl puteți implementa pe propriul site în câteva secunde.

Din editor , glisați și fixați widgetul Blockquote . Adăugați textul pe care doriți să îl afișați și alegeți aspectul chenarului, apoi personalizați culoarea și lățimea chenarului.

Urmați acești pași:

• Adăugați un widget Blockquote
• Lipiți conținutul
• Alegeți pielea chenarului
• Personalizați stilul chenarului

În calitate de experți în nișa de marketing prin e-mail, Sumo este un blog cu o înțelegere puternică a conținutului, a designului și a modului de a combina cele două pentru cele mai bune rezultate. Blogul lor folosește o marjă destul de îngustă, cu un text mai mare decât de obicei, care pare să atragă cititorul.

Fără nicio profunzime stilizată, blogul ar putea arăta destul de plat. Umbrele imaginilor, deși pot părea inutile, sunt răspunsul, iar Sumo le aplică tuturor imaginilor. Acest lucru ajută la divizarea în continuare a conținutului și adaugă o notă profesională oricărui blog sau site web.

Pentru a adăuga acest element, pur și simplu trageți și fixați widgetul Image din meniul Elements într-o nouă secțiune a paginii. Apoi, selectați imaginea pe care doriți să o utilizați, apoi reglați-o după cum doriți. În exemplul nostru, am centrat imaginea și am făcut-o la dimensiune completă:

Pentru a adăuga umbra, mergeți la Stil > Umbra cutiei și activați setarea. De aici, puteți regla modul în care apare umbra schimbând diferitele opțiuni (cum ar fi Culoare , Estompare și Spread ).

În timp ce Color și Blur sunt destul de auto-explicative, Spread este similar cu o margine, prin aceea că valoarea arată cât de mult se va extinde umbra pe toate părțile imaginii. Măriți valoarea pentru o acoperire crescută sau micșorați pentru efectul opus.

Urmați acești pași:

• Adăugați widget Imagine
• Set Box Shadow
• Personalizați diferitele setări de umbră

Gawker a fost o rețea de bloguri media extrem de activă care s-a închis oficial în august 2016. Cu toate acestea, mai putem învăța multe din designul site-ului web, cum ar fi schema de culori monocromă (care pune conținutul în fața și centrul) și modul sunt afișate ghilimele.

Aceasta este o caracteristică excelentă pentru blogurile cu cotare mare (cum ar fi blogurile de știri și politici), deși poate fi utilizată pe aproape orice site web pentru a pune accent pe anumite secțiuni de conținut.

Pentru a realiza acest lucru în Elementor - deși cu un pic de „oomph” suplimentar decât originalul - mai întâi glisați și fixați un widget Blockquote pe pagina dvs. și adăugați textul așa cum doriți să apară. Puteți ajusta textul după cum doriți - inclusiv dimensiunea, culoarea și stilul fontului.

Iată câteva dintre setările pe care le-am folosit pentru a atinge acest aspect:

În ceea ce privește fila Conținut, aspectul pe care l-am ales este Citat, alinierea este la centru. Pentru butonul tweet, vizualizarea este pictogramă, iar pielea este bule.

În ceea ce privește fila Stil, fontul este Playfair Display pentru citat și Helvetica pentru autor. Culoarea pictogramei cotației este # 004fce.

Pentru casetă, accesați fila Stil, sub casetă, alegeți culoarea # ffedf6, adăugați aparate de radio și căptușeala casetei.

Simțiți-vă liber să jucați cu valorile până când veți obține aspectul pe care îl căutați.

Urmați acești pași:

• Adăugați widgetul Blockquote
• Lipiți textul pentru citat și autor
• Culoare cutie personalizată, căptușeală și aparate de radio

Huffington Post este un site popular de jurnalism și, ca atare, elementele sale de design sunt axate în mare parte pe furnizarea de conținut de top. Spre deosebire de alte bloguri din această listă, Huffington Post folosește un aspect cu două coloane și conține o mulțime de conținut în ele, inclusiv reclame, postări în tendințe și multe altele. Cu toate acestea, în timp ce site-ul este ocupat, nu este mai puțin convingător de citit.

Un aspect pentru care titlurile site-ului ne-au inspirat a fost „textul de pornire” - în esență, o linie de deschidere mare, care oferă beneficii similare cu capacele.

Pentru început, adăugați un widget Heading sub antetul principal. Lipiți textul pentru sub-titlu și începeți să proiectați tipografia.

Culoarea este # 000 (negru), fontul Helvetica, greutatea fontului 300 și sub setul avansat de umplere la 0.

Asta e! Foarte simplu de adăugat și face mult mai ușor pentru cititorul dvs. să înțeleagă despre ce este postarea dvs.

Urmați acești pași:

• Trageți un widget de antet
• Lipiți textul
• Setați tipografia

Backlinko este un blog de construire a traficului, axat pe conducerea și implicarea traficului pe care îl primiți pe site-ul dvs. web. La fel ca Huffington Post, acest blog cu două coloane este ocupat, dar nu în detrimentul lizibilității. Schema de culori este, de asemenea, strălucitoare și primitoare, care se potrivește cu tonul conversațional al conținutului său.

Acest lucru ne aduce la elementul de design care ne-a ieșit în evidență: sub-rubrici. Acestea sunt o culoare mult mai închisă decât orice altceva de pe blog, iar natura lor contrastantă înseamnă că sunt captivante și captivante.

Majoritatea articolelor au cel puțin câteva sub-rubrici, ceea ce înseamnă că cel mai probabil veți folosi această opțiune foarte mult. Acest tip de sub-titlu este excelent pentru postările tutoriale pas cu pas, deoarece fiecare pas este clar separat și facilitează urmărirea vizitatorului.

Mai întâi, trageți widgetul Heading. Lipiți textul, centrați-l folosind opțiunea de aliniere. Apoi, accesați fila stil și setați culoarea, fontul și alte setări de tipografie pentru text. Acum accesați fila avansată și setați culoarea de fundal la # EC4950. Adăugați o căptușeală superioară și inferioară de 50.

Vă recomand să salvați acest widget ca un widget global, astfel încât data viitoare când doriți să îl utilizați din postarea curentă sau din orice altă postare pe care o veți crea, va fi disponibil cu o simplă glisare și fixare din fila globală din lista de widgeturi panou. Acest pas este relevant pentru toate efectele de blog enumerate în acest articol, dar mai ales pentru sub-titlurile de fundal, deoarece sunt atât de frecvent utilizate.

Urmați acești pași:

• Trageți un widget de antet
• Lipiți textul
• Centrați alinierea textului
• Setați culoarea de fundal
• Pas opțional: salvați-l ca widget global

The Outline este o companie de media digitală din New York, cu un blog destul de neobișnuit, dar captivant. Conține articole detaliate despre o varietate de subiecte, cu accentul principal pe putere, cultură și viitor.

În timp ce un titlu atrăgător este o necesitate absolută, uneori numai acesta nu este suficient pentru a lega cititorii. Cu o imagine de fundal inclusă în titlul postării, puteți oferi cititorului o experiență mai bogată.

Înainte de a adăuga în imaginea de fundal, să găsim mai întâi widgeturile Heading și Text Editor . Adăugați o nouă secțiune la pagină, apoi adăugați trei widgeturi ( Heading , Text Editor și Text Editor ) stivuite una peste alta:

Pentru a adăuga o culoare de fundal, faceți clic pe Editați secțiunea (așa cum ați făcut pentru sub-titluri) și Stil . Aici puteți edita aspectul fundalului, inclusiv culoarea, imaginea (la care vom ajunge mai târziu), marginea și multe altele.

Puteți personaliza fiecare dintre aceste widget-uri (și aspectul) după cum doriți. Pentru a adăuga o margine de sus, reveniți la setările Layout , apoi la Stil > Bord și deconectați valorile. Alegeți tipul de chenar pe care l-ați dori ( solid , punctat , dublu sau punctat ) și creșteți valoarea pentru TOP până când vă place. În plus, puteți selecta culoarea sub valorile:

În continuare, adăugarea imaginii de fundal este simplă. Întoarce-te la Layout și mergi la fila Style . Derulați în jos la Overlay Background și selectați pensula. Puteți adăuga o imagine făcând clic pe plusul de sub Imagine , apoi fie introduceți una din biblioteca dvs. WordPress, fie încărcați una de pe computer.

Acum aveți o serie de opțiuni, inclusiv Poziție , Repetare, Dimensiune și Opacitate . Jucați-vă cu aceste opțiuni până când veți obține aspectul pe care l-ați dori.

Pentru a obține detalii despre blog, cum ar fi data și autorul, utilizați pluginul Apăsați Elements pentru a atrage aceste atribute în Elementor.

Urmați acești pași:

• Setați o imagine de fundal pentru secțiune
• Adăugați o suprapunere de imagine
• Trageți în titlu și alte elemente.

Un blog de vârf în industria optimizării motoarelor de căutare (SEO), Search Engine Land are o serie de elemente de design unice încorporate în toată lumea. Aspectul cu două coloane este, fără îndoială, cel mai ambalat din întreaga listă, iar designul este bine să se concentreze în continuare pe conținut. Cu toate acestea, am fost atrași de formularul de abonare prezentat adesea în partea de sus a postărilor.

Pentru a fi eficient în mod optim, formularele de abonare trebuie să fie cât mai atractive. Din fericire, Elementor vă permite să creați formulare precum Search Engine Land pentru site-ul dvs. Iată cum!

Pentru a începe, adăugați două widget-uri la o nouă secțiune a paginii. Widgetul de sus ar trebui să fie Heading , în timp ce partea de jos ar trebui să fie Editor de text . Adăugați textul și personalizați fiecare în funcție de propriile cerințe.

Apoi, cel mai important element al formularului de abonament poate fi adăugat cu o actualizare la Elementor Pro: widgetul Form .

Pentru a adăuga acest lucru, glisați și fixați widgetul în secțiune, modificați câmpurile de introducere și textul butonului, apoi stilizați-le după caz. În exemplul nostru, veți observa, de asemenea, că nu există niciun decalaj între cele două elemente (caseta de intrare și butonul formular). Pentru a obține acest aspect, pur și simplu accesați Stil > Formă > Coloană și setați valoarea la 0 .

Pentru a adăuga o imagine de fundal, accesați secțiunea Editare > Stil > Fundal . Apoi puteți adăuga imaginea pe care o alegeți sau chiar selecta o culoare de fundal sau un gradient.

Urmați acești pași:

• Trageți 2 widget-uri de antet, împreună cu widgetul formular
• Eliminați toate câmpurile formularului, cu excepția câmpului de e-mail.
• Setați câmpul și lățimea coloanei butonului astfel încât acestea să apară pe o singură linie
• Sub Stil, setați decalajul la 0
• Setați câmpul de sus și raza de margine stânga
• Setați butonul pe raza marginii de jos și dreapta

Neil Patel este binecunoscut pentru conținutul său de formă lungă și pentru copiile sale. Cu toate acestea, el folosește și un design îndrăzneț, dar rar, pentru site-ul său, care se potrivește cu tonul său de scriere.

Un îndemn la acțiune (CTA) este una dintre cele mai importante adăugiri la orice site web, datorită cerinței lor de a obliga utilizatorul să acționeze. De asemenea, sunt incredibil de versatile. Desigur, cu cât designul este mai atrăgător, cu atât veți vedea conversii mai bune.

Inclusiv aspectul (pe care l-ați învățat cum să stilizați în secțiunile anterioare), există un total de cinci elemente în cadrul acestui design. Exemplul nostru este împărțit în două secțiuni uniforme unul lângă altul, iar acest lucru permite o personalizare suplimentară.

În primul rând este imaginea din stânga. Această selecție specială se integrează bine în fundal și adaugă un flux continuu designului. Acest lucru se poate face folosind o imagine PNG, un tip de fișier care încorporează transparența în fundal.

Următorul este partea dreaptă a designului care constă din widget-uri Heading , Text Editor și Button . Pentru a adăuga aceste widgeturi împreună, pur și simplu trageți și fixați fiecare widget - unul câte unul - în secțiune. Se vor stiva automat pentru a se potrivi în interiorul secțiunii, iar acest lucru face mai ușor să păstreze designul impecabil.

Widgetul Heading este conceput la fel ca celelalte pe care le-am prezentat: acesta este setat la H2 , aliniat la stânga și setat la o greutate a fontului de 900. În cele din urmă, widgetul Button este simplu de configurat și personalizat. Ca și în cazul celorlalte widget-uri, butonul poate fi personalizat pentru a se alinia la blogul dvs.

Aici puteți edita textul, dimensiunea și alinierea (în fila Conținut ), puteți personaliza forma, fundalul și culoarea textului (în fila Stil ) și puteți adăuga o margine sau o umplutură (în fila Avansat ).

Urmați acești pași:

• Setați o secțiune din două coloane
• Adăugați imaginea în coloana din stânga
• Adăugați două widget-uri de antet și un buton în coloana din dreapta
• Setați un fundal de gradient și transformați-l în ecranul divizat (veți găsi aici un tutorial video)
• Personalizați culorile, spațiul și tipografia titlurilor și a butonului

Iată un alt exemplu preluat din propriile noastre postări de blog. Uneori, când creați conținut de formă lungă, trebuie să vă separați între diferitele paragrafe. Titlurile și spațiul sunt o modalitate bună de a face acest lucru, dar uneori nu sunt suficiente. Utilizând widgetul Divider puteți crea o separare subtilă între paragrafe, facilitând cititorilor să înțeleagă unde se termină o parte a articolului și începe alta.

Pentru a adăuga un divizor la pagina sau postarea dvs., glisați și fixați widgetul Divider în zona pe care o alegeți. Implicit este o linie întunecată, continuă, cu o lățime de 100% (aceasta înseamnă că întinde lungimea zonei de conținut) și există patru stiluri diferite din care să alegeți, inclusiv Solid , Dublu , Punctat și Punctat .

Exemplul nostru folosește un stil punctat cu o greutate de 9 . Cu toate acestea, puteți experimenta stilurile, culoarea separatorului, decalajul (între puncte și liniuțe), lățimea și greutatea.

Urmați acești pași:

• Trageți widgetul Divider
• Setați-l pe punctat

Smart Passive Income este un blog de mare succes condus de antreprenorul Pat Flynn. Coloanele site-ului web sunt foarte largi, ceea ce servește la răspândirea aspectului ocupat și, de asemenea, înseamnă că elementele de design, cum ar fi secțiunea Postări corelate, au suficient spațiu de manevrare.

Acesta este, fără îndoială, cel mai complicat design din lista noastră, dar chiar și așa ar trebui să vă ia doar câteva minute pentru a pune împreună folosind Elementor.

În cadrul Generatorului de pagini , adăugați o secțiune și modificați aspectul. Am folosit o culoare de fundal și un chenar în designul nostru, dar îl puteți amesteca oricum doriți. Apoi, adăugați două widget-uri Heading , unul peste altul.

Ultimul element de adăugat este widget-ul Postări , o caracteristică Elementor Pro cu o varietate de utilizări. Pentru a încorpora acest lucru în secțiune, adăugați o zonă nouă la secțiune, apoi glisați și fixați widgetul Postări în loc. Setarea implicită include trei coloane și șase postări în total, deși puteți modifica ambele setări după bunul plac.

În plus, widgetul Postări va afișa titlul, data publicării și extrasul pentru fiecare postare. Cu toate acestea, puteți schimba cu ușurință modul în care se afișează acest lucru din Conținut > Aspect . De exemplu, imaginea de mai sus arată doar imaginea postării și titlul, iar acest lucru funcționează excelent pentru acest element de design specific.

Urmați acești pași:

• Trageți widgetul Postări
• Sub Interogare setați Comandă după> Aleator
• Adăugați un titlu cu textul „Call More Action”

Conținutul joacă un rol critic în succesul blogului dvs. Cu toate acestea, modul în care vă afișați conținutul poate fi la fel de important ca ceea ce spune acesta. Având în vedere acest lucru, este ușor de văzut de ce este esențială încorporarea de modele unice și captivante în blogul dvs.

În această postare, v-am prezentat 11 elemente de design prezentate pe bloguri performante. De asemenea, v-am arătat cum să implementați fiecare truc de proiectare în propriul blog cu ajutorul Elementor și a numeroaselor sale caracteristici - inclusiv 28 de widgeturi (și de numărare!) Și peste 100 de șabloane predefinite.

Aveți întrebări despre procesul de proiectare sau despre modul în care Elementor Page Builder vă poate ajuta? Spuneți-ne în secțiunea de comentarii de mai jos!