Cum să creați un blog de stil mediu cu Divi

Publicat: 2017-07-06

În postarea de astăzi pe blogul Divi, vă vom împărtăși câteva sfaturi excelente despre cum să creați propriul site de blogging în același stil ca și blogul Medium.

Se știe că Medium este una dintre cele mai utilizate platforme pentru blogging. Nu numai că au o comunitate mare de bloggeri care se implică în mod regulat cu publicul lor, dar platforma lor de blogging oferă, de asemenea, o experiență de utilizator foarte plăcută. Exact asta își dorește fiecare blogger. Vor să fie siguri că transmit mesajul într-un mod clar și într-un mediu în care cititorul se simte confortabil.

Cu toate acestea, blogging-ul pe Medium are limitele sale. De exemplu, nu există beneficii ale SEO. Prin crearea propriului blog, care este inspirat de stilul blogului Medium, puteți continua acel sentiment familiar pe care îl au deja cu blogul Medium și îl puteți aduce pe propriul site web.

Să începem

Abonați-vă la canalul nostru Youtube

Vă vom arăta cele mai importante părți ale creării unui blog în stil mediu și vă vom arăta, de asemenea, pas cu pas, cum să creați unele dintre părțile importante. De exemplu; cum să creați un șablon de postare pe stil mediu, pe care să îl puteți utiliza pentru toate postările dvs. Șablonul arată astfel:

De asemenea, vă vom arăta cum să adăugați pluginurile Worth The Read și Highlight and Share pentru a face să pară și mai asemănător. Rezultatul Merită citit arată astfel:

Și Evidențiați și partajați va avea următorul efect:

Creați un meniu simplist ca blogul mediu

Unul dintre lucrurile pe care le puteți observa în mod clar atunci când vizitați site-ul web Medium este simplitatea meniului lor. Nu există prea multe opțiuni disponibile, ceea ce facilitează imediat navigarea vizitatorilor. Vizitatorii pot explora postările de blog evidențiate pe pagina de pornire și își pot continua șederea de acolo.

Elemente de meniu

Alegeți o siglă care se potrivește cu simplitatea restului site-ului dvs. web și asigurați-vă că este subtilă oferindu-i o dimensiune mică în meniul dvs. Cu siguranță nu doriți ca sigla să depășească conținutul pe care îl partajați pe site-ul dvs. web.

Apoi, nu includeți prea multe pagini în navigare. Deoarece site-ul dvs. web va fi despre blogging, pagina de pornire este probabil suficientă. De asemenea, puteți lua în considerare adăugarea unei pagini despre, dacă doriți să le spuneți vizitatorilor un pic mai multe despre dvs.

Continuând, includeți o pictogramă de căutare, astfel încât oamenii să poată căuta cu ușurință în postările dvs. de pe blog cu câteva cuvinte cheie. Este vorba despre conținutul pe care îl produceți și de a face mai ușor de găsit.

Pentru exemplul de mai sus, am folosit următoarele setări pentru bara de meniu principală din Customizerul tematic:

Înălțimea meniului: 54
Logo Înălțime maximă: 37
Dimensiune text: 18

Utilizați o paletă de culori cu contrast și fonturi simple

Blogul Medium utilizează trei culori principale pe toată platforma, ceea ce face ca conținutul să fie ușor de citit. Deși două dintre culori pot apărea ca și cum ar fi alb-negru, sunt ușor mai moi la ochi. Al treilea este o culoare gri deschis, dar lizibilă. Efectuați următoarele ajustări la Bara principală de meniu din Customizerul tematic pentru a schimba culorile și fontul care sunt utilizate în meniul principal:

Font: Source Sans Pro
Culoare text: rgba (0,0,0, .44)
Culoare link activ: rgba (0,0,0,, 44)
Culoare fundal: #fbfcfd

Includeți pictograma de căutare

În plus, pentru a include pictograma Căutare în meniul principal, accesați Antet și navigare> Elemente antet> Afișați pictograma de căutare.

Dezactivați bara de navigare fixă

Un alt lucru pe care îl face blogul Medium este să-și păstreze bara de navigare în partea de sus a paginii. În acest fel, vizitatorii nu sunt întrerupți inutil când citesc. Pentru a dezactiva bara de navigare fixă de pe site-ul dvs. Divi, accesați panoul dvs. WordPress> Divi> Opțiuni temă> Setări generale> Dezactivați bara de navigare fixă.

Stilizați modulele de blog pe pagina de pornire după categorii

Apoi, doriți să stilizați pagina de pornire a site-ului dvs. pe categorii. În funcție de blogul pe care îl creați, puteți crea diferite secțiuni în pagina dvs. de pornire, care să corespundă cu ceea ce vizitatorilor le place să citească cel mai mult. Vă recomandăm să utilizați cel puțin următoarele tipuri de categorii: populare, cele mai recente și sugerate. Puteți atribui postări de blog acestor categorii prin crearea de categorii diferite în pagina „Categorii” din „Postări” din meniul dvs. WordPress și prin atribuirea fiecărei postări la una sau mai multe categorii din postarea în sine.

Un alt lucru pe care doriți să-l faceți este să faceți ușor de urmărit diferitele module și secțiuni ale blogului din pagina dvs. de pornire. Pentru a realiza acest lucru, puteți utiliza grila de blog standard din constructorul Divi sau puteți căuta ceva puțin mai avansat. Am enumerat mai jos trei pluginuri pe care le puteți lua în considerare.

Plugin Divi Article Card

Pluginul Divi Article Card este un plugin gratuit care a fost distribuit pe blogul nostru în timpul Divi 100. Stilul care este utilizat în acest plugin este curat și are un efect frumos de hover. Este un efect simplu, dar poate crea o atingere suplimentară pentru blogul dvs.

Pluginul este complet gratuit, mergi la postare și descarcă-l!

Modulul de blog personalizat Divi

Un alt plugin care a creat un aspect frumos al modulului de blog este modulul de blog personalizat Divi. Aceasta seamănă mai mult cu postările de pe blogul Medium decât cu cea anterioară, având imaginea prezentată plasată în partea stângă.

Prețul pluginului este de 20 USD.

Extras pentru blogul Divi

Ultimul plugin care vă poate ajuta să vă apropiați blogul de a arăta ca blogul Medium este Divi Blog Extras. Acest plugin are, de asemenea, o mulțime de aspecte diferite ale modulului Blog care vă pot ajuta să vă construiți blogul în stil mediu.

Pluginul se vinde la 15 USD pentru licența de site unic și 30 USD pentru licența extinsă.

Creați șablon de postare pe blog

Medium are un format standard de postare pe blog pentru toate postările care sunt create. Designul se concentrează pe esența postării: conținutul. Formatul postării pe blog care este utilizat este în concordanță cu modul în care este restul site-ului web: simplist. Se reduce la urmărire utilizând combinația de conținut scris și suport media pe care îl puteți insera pe parcursul postării.

Divi oferă aceleași posibilități. Puteți face postarea pe blog la fel de simplă sau delicată pe care o doriți utilizând diferitele module pe care le oferă constructorul Divi. Acesta este exemplul de aspect pe care îl vom arăta cum să creați pas cu pas:

Setări postare Divi

Începeți prin adăugarea unui post nou, acordându-i un titlu și activând constructorul Divi. Apoi, asigurați-vă că setările Divi Post sunt următoarele:

Aspect pagină: lățime completă
Navigare prin puncte: Dezactivat
Ascunde Nav înainte de derulare: implicit
Titlul postării: Ascundeți

Autor (Desktop)

Pentru a face aspectul, vom trece la Visual Builder. Începeți prin adăugarea unei noi secțiuni cu două rânduri. Continuați adăugând un modul de imagine la prima coloană și două module de text la a doua coloană. Deschideți setările secțiunii și adăugați alegeți „#fbfcfd” ca culoare de fundal.

Modulul de imagine

Deschideți modulul de imagine, încărcați imaginea în fila Conținut și puneți Aliniere imagine la „Stânga” în fila Proiectare. Mergând mai departe, adăugați „-5%” la marja superioară și „25%” la marginea din stânga din subcategoria Spațiu din fila Proiectare.

După aceea, adăugați următorul cod la Elementul principal din subcategoria CSS personalizată din fila Avansat:

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

Primul modul de text

Adăugați numele autorului în caseta de conținut din fila Conținut și efectuați următoarele ajustări la subcategoria Text a filei Proiectare:

Orientare text: stânga
Font text: Source Sans Pro
Dimensiunea fontului textului: 18
Culoarea textului: rgba (0,0,0,0,8)
Înălțimea liniei textului: 1.7em

Derulați în jos aceeași filă pentru a adăuga „-3%” la marja superioară și „-70%” la marja stângă.

Al doilea modul de text

Tastați sloganul în al doilea modul de text și efectuați următoarele ajustări la subcategoria Text a filei Proiectare:

Orientare text: stânga
Font text: Source Sans Pro
Dimensiunea fontului textului: 14
Culoare text: rgba (0,0,0,0,44)
Înălțimea liniei textului: 1.7em

În plus, derulați în aceeași filă și adăugați „-5%” la Marja superioară și „-70%” la Marja stângă în subcategoria Spațiere.

Vizibilitate la rând

În cele din urmă, deschideți setările Rând și dezactivați rândul pe telefoane și tablete în subcategoria Vizibilitate a filei Avansate.

Autor (mobil)

Adăugați un alt rând la aceeași secțiune cu un rând cu lățime completă. Continuați clonând modulul de imagine și modulele de text din rândul anterior și plasându-le în rândul cu lățime completă. Va trebui să aducem câteva modificări fiecărui modul pentru a le centra pe ecran atunci când cineva deschide pagina pe mobil sau tabletă.

Modulul de imagine

Deschideți modulul de imagine și puneți Aliniere imagine la „Centru”.

Primul modul de text

Deschideți primul modul de text și schimbați Orientarea textului la „Centrare” în subcategoria Text din fila Proiectare.

Derulați în jos în aceeași filă, ștergeți marja stângă și păstrați marja superioară.

Al doilea modul de text

Mai mult, faceți același lucru pentru al doilea modul de text. Puneți Orientarea textului pe „Centrare” și ștergeți Marja din stânga din subcategoria Spațiere din fila Conținut.

Vizibilitate la rând

În cele din urmă, deschideți setările rândului și dezactivați rândul pentru desktopuri.

Modulul Titlu post

Deoarece am dezactivat titlul postării în setările noastre pentru posturile Divi, vom adăuga un modul Titlu postare într-un rând cu lățime completă în aceeași secțiune pe care am folosit-o până acum.

În subcategoria Elemente din fila Conținut, putem alege ce elemente dorim să apară. Întrucât am menționat deja autorul, am dezactivat totul, în afară de titlu.

În plus; efectuați următoarele ajustări la subcategoriile Text și Titlu Text din fila Proiectare:

Orientare text: centru
Titlu Font: Source Sans Pro
Titlu Font Style: Bold
Dimensiunea fontului titlului: 47 px (desktop), 40 (tabletă), 35 (telefon)
Culoarea textului titlului: rgba (0,0,0,0,8)

Imagini cu lățime completă

Prima imagine cu lățime completă pe care o vom adăuga este o reprezentare a imaginii prezentate. Adăugați o secțiune Fullwidth, plasați un modul de imagine Fullwidth în ea și încărcați o imagine în fila Conținut. Este la fel de simplu ca asta.

Module de text

Mai departe, vom crea modulele de text care sunt utilizate pentru postarea pe blog. Adăugați o secțiune standard cu un rând cu lățime completă și puneți un modul de text în el. În acest exemplu, folosim familia de fonturi „Cardo” în loc de „Georgia” pur și simplu pentru că „Cardo” este o familie de fonturi încorporată.

Mai mult, deschideți setările modulului Text, tastați câteva exemple de text în caseta Conținut și accesați fila Proiectare. În subcategoria Text, efectuați următoarele ajustări:

Orientare text: stânga
Font text: Cardo
Dimensiunea fontului textului: 25 px (desktop), 19 px (tabletă), 17 px (telefon)
Culoarea textului: rgba (0,0,0,0,8)
Înălțimea liniei textului: 1,8em

Derulați în jos în aceeași filă, adăugați „800px” la lățimea maximă din subcategoria dimensionare și adăugați „10%” la marginea stângă din subcategoria spațiu.

Modul video

Ultimul lucru care poate da valoare adăugată postării de pe blog este integrarea unui videoclip. Pentru a face acest lucru, trebuie să clonați secțiunea realizată anterior cu modulul de text și să împărțiți conținutul total pe care îl aveți între cele două module de text. Chiar între cele două secțiuni, vom adăuga o altă secțiune cu un rând cu lățime completă. În acel rând de lățime completă, vom adăuga un modul video.

Așa ar trebui să arate structura în backend:

În afară de adăugarea adresei URL, nu am făcut modificări la modulul video.

Salvați șablonul

Puteți reutiliza diferitele secțiuni pentru a se potrivi postării de blog pe care o creați, clonându-le și schimbând conținutul. După ce ați făcut acest lucru, puteți salva șablonul de postare pe blog făcând clic pe „Salvare în bibliotecă” și dându-i un nume.

Data viitoare când doriți să utilizați șablonul, pur și simplu faceți clic pe „Încărcare din bibliotecă” și încărcați șablonul.

Merită citit

Un lucru tipic despre crearea unui blog Medium este numărul de minute necesare pentru a citi o anumită postare pe blog. Acest lucru apare de obicei chiar la începutul paginii și oferă utilizatorilor și o estimare a timpului necesar pentru a termina de citit. Într-o eră în care timpul este cel mai prețios lucru, acest lucru îi ajută pe oameni să decidă dacă vor să citească sau nu postarea de pe blog.

Un plugin WordPress gratuit care vă ajută să ajungeți acolo este Worth The Read by Well Done Marketing. O puteți descărca de pe pagina pe care am conectat-o sau o puteți căuta în pluginuri. Interesantul acestui plugin este că puteți alege unde doriți să apară timpul de citire; pagini, postări sau ambele. De asemenea, puteți alege destinația de plasare și formatul.

După ce ați descărcat pluginul și l-ați activat, faceți clic pe opțiunea „Lectura progresului” din meniul acestuia. Continuați și faceți modificările pe care trebuie să le faceți. Punerea unui timp de citire este de obicei utilizat numai pentru postări, astfel încât majoritatea oamenilor vor alege probabil doar acea opțiune.

În fila Stil, puteți alege stilul pe care doriți să îl utilizați. Asigurați-vă că utilizați același font ca în titlu. De asemenea, puteți adăuga cod CSS personalizat dacă doriți să faceți modificări suplimentare.

Evidențiați și partajați

Un alt lucru cu adevărat tipic despre Medium este posibilitatea de a evidenția ceva, de a-l împărtăși sau de a-l comenta dacă îți place. Oferă o valoare adăugată postării de pe blog, permițându-i să se angajeze cu oamenii care o citesc. Am găsit un plugin care vă ajută să faceți ceva similar; pluginul Highlight and Share, care este, de asemenea, gratuit.

Puteți decide ce canale de social media pot partaja oamenii accesând Setări> Evidențiați și partajați> Activarea canalelor de socializare pe care doriți să le utilizați.

Înfășurându-se

După ce ați citit această postare, ar trebui să puteți începe să creați blogul dvs. de stil Medium care conține unele dintre cele mai relevante părți ale Medium. Aveți o mulțime de posibilități de a-l simplifica, așa cum face blogul Medium, dar totuși îi dați câteva atingeri personale. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos, astfel încât să putem rămâne în legătură cu minunata noastră comunitate Divi!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de Julia Tim / shutterstock.com