Cum se adaugă șabloane personalizate și design la formatele postărilor de blog ale Divi (partea 3 din 3)
Publicat: 2017-05-04Bine ați venit în Ziua 3 din 3, ultima zi din seria noastră despre Cum să adăugați stiluri personalizate la formatele postărilor de blog ale lui Divi. În mod implicit, Divi vine cu șase formate de postări pe blog: Standard, Video, Audio, Citat, Galerie și Link. În această serie vă învățăm cum să le personalizați cu php și css.
Astăzi este ultima zi a seriei noastre despre cum să adăugăm șabloane și stiluri personalizate la formatele de postări ale blogului Divi. Această ultimă zi a seriei este dedicată designului. Cu single.php personalizat și cu tema noastră activă pentru copii, suntem gata să adăugăm stil la formatele postărilor de blog.
Vă voi parcurge toate cele șase formate de postare, pe măsură ce le adăugăm câteva atingeri unice de design. Până la sfârșitul acestui tutorial, veți avea șase alternative minunate la formatele implicite de postare pe blog cu care vine Divi.
De asemenea, veți avea o pagină de blog destul de unică, care afișează diferitele elemente prezentate în formatul de postare. De exemplu, formatul linkului va afișa o casetă de link personalizată în locul miniaturii imaginii prezentate. Postarea în format galerie va afișa un glisor al imaginilor din galeria dvs. în locul miniaturii imaginii prezentate. Si asa mai departe.
Iată o privire asupra a ceea ce ar arăta pagina ta de blog după tutorialul de astăzi (folosesc modulul Blog Divi cu un aspect de grilă în giful de mai jos).
Să începem.
Configurarea setărilor generale de proiectare în Theme Customizer
Mai întâi trebuie să facem câteva modificări generale ale stilului folosind personalizatorul temei. Din tabloul de bord WordPress, accesați Divi → Personalizator temă → Setări generale → Setări aspect și modificați următoarele:
Lățimea jgheabului site-ului web: 2
Bifați Utilizați lățimea barei laterale personalizate
Lățimea barei laterale: 30
De asemenea, în Tema de personalizare, accesați Scheme de culori și selectați Portocaliu.
Acum să aruncăm o privire la cum arată postarea dvs. standard până acum:
După cum vă puteți da seama, are încă nevoie de ceva stil, dar totul este la locul potrivit. Aveți o secțiune erou care se întinde pe toată lățimea paginii. Nu aveți încă o imagine prezentată, astfel încât fundalul arată doar gradientul pe care l-ați adăugat mai întâi la fișierul single.php. De asemenea, titlul postului și meta se află în secțiunea erou. Acum este timpul să adăugați restul elementelor de design.
Stilizarea secțiunii Hero pentru toate formatele de postare
Deoarece fiecare dintre formatele dvs. de postare va partaja aceeași secțiune erou și designul barei laterale, puteți adăuga mai întâi acest CSS personalizat. Reveniți la Theme Customizer, faceți clic pe CSS suplimentar în partea de jos și adăugați următorul CSS personalizat:
.hero-section {
padding-top: 120px;
padding-bottom: 120px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
max-height: 450px;
background-color: #333;
}
.single-post #main-content #left-area {padding-top: 0px;}
/* ---- Sidebar Settings ---- */
.single #sidebar {background: #efefef; padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px;}
/* ---- Standard Post Title & Post Meta ---- */
.single h1.entry-title,.attachment h1.entry-title, .single p.post-meta {
width: 100%;
text-align: center;
padding-left: 8px;
padding-right: 8px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}
@media only screen and (min-width: 980px) {
/*** Set title font size for desktop ***/
.single h1.entry-title {
font-size: 65px !important;
}
}
Acum verificați cum arată acum o postare standard.
Cu secțiunea erou și stilul barei laterale, sunteți gata să stilizați formatele de postare individuale.
Stilizarea formatului de postare standard
Formatul de postare standard este formatul implicit pentru toate postările de pe blog. Puteți selecta formatul standard de postare atunci când vă editați postarea.
Tot ce vom face pentru acest format standard este să adăugăm imaginea prezentată. Deoarece această imagine prezentată se va întinde pe toată lățimea ecranului, vă sugerez să folosiți o imagine de 2000 x 600. Folosesc imagini de la unsplash.com.
După ce adăugați imaginea prezentată, verificați cum arată postarea standard.
Stilarea formatului de postare video
Pentru a stiliza formatul postării video, asigurați-vă că ați formatul video selectat pentru postarea dvs.
Apoi, adăugați adresa URL sau încorporarea unui videoclip la conținutul dvs. Formatul video va prelua prima adresă URL de videoclip, eticheta video sau încorpora și o va afișa în partea de sus a conținutului postării. Acest videoclip va înlocui, de asemenea, imaginea prezentată pe pagina blogului dvs.
Pentru acest exemplu, folosesc doar o adresă URL YouTube.
Adăugați imaginea recomandată de 2000 x 600 la postare.
Apoi, vom adăuga un stil suplimentar videoclipului prezentat pentru a da videoclipului o margine albă și a-l ridica ușor, astfel încât să se suprapună secțiunii erou și să iasă puțin în evidență.
Accesați Theme Customizer → CSS suplimentar și adăugați următoarele CSS personalizate:
/* ---- Format the Position of the Video Wrapper ---- */
@media only screen and (min-width: 980px) {
/*** elevate the video to overlap the hero section ***/
.single-post.single-format-video .et_main_video_container {margin-top: -120px; background: #fff; outline: 10px solid #ffffff !important; z-index: 100; margin-bottom: -100px;}
}
Acum verificați noua dvs. postare în format video.
Alternativ, ați putea face acest post lățime completă pentru o altă opțiune excelentă de design. Pur și simplu mergeți pentru a vă edita postarea și, în Setările postului Divi din partea dreaptă sus a paginii, selectați un aspect al paginii cu lățime completă.
Acum verificați postarea în format video cu lățime completă:
Stilizarea formatului de postare audio
Pentru formatul postării audio, asigurați-vă că ați selectat formatul audio pentru postarea dvs.
Adăugați imaginea dvs. de 2000 x 600.
Apoi, adăugați fișierul audio la postare. Acesta poate fi un fișier .mp3, .m4a, .ogg sau .wav. Puteți să încărcați fișierul audio în biblioteca dvs. media și să îl inserați în postare în trei moduri diferite (încorporați player media, link către fișier media sau link către pagina de atașament).
Oricare dintre aceste trei opțiuni va funcționa. Dar, pentru acest exemplu, voi adăuga doar o adresă URL simplă la fișierul audio. WordPress va converti această adresă URL audio într-un player media în partea de sus a postării.
Acum să aruncăm o privire la postarea în format audio.
Nu este rău, dar ar putea fi mai bine. Să ascundem playerul media duplicat care se afișează sub playerul portocaliu și să adăugăm o imagine de fundal la playerul nostru media portocaliu.
Accesați Theme Customizer → CSS suplimentar și adăugați următoarele CSS personalizate:
/* ----- Add Background Image to the Audio Player & Change size of the player ----- */
body.single .et_audio_content, .blog .et_audio_content {
margin-bottom: 0px !important;
height: 300px !important;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
background-repeat: no-repeat;
background-size: cover;
}
/* ---- Hide the Duplicate Audio Player ------ */
div#mep_1 {display: none;}
Apoi găsiți și încărcați o imagine în galeria dvs. media (ar trebui să fie în jur de 700 x 300). Apoi copiați adresa URL și lipiți în CSS de mai sus, unde scrie „ENTER URL IMAGE AICI”.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Acum, verificați noua dvs. postare în format audio.
Stilul Formatului Postării Cotației
Pentru formatul postului de ofertă, asigurați-vă că aveți formatul de ofertă selectat pentru postarea dvs.
Apoi adăugați o imagine de 2000 x 600 la postare.
Formatul cotației utilizează codul scurt blockquote pentru a genera un afișaj de cotație personalizat. Așadar, adăugați un blockquote la conținutul dvs. pentru a fi afișat citatul personalizat.
Acum verificați postarea dvs.
Să personalizăm caseta de cotație prezentată cu un mic CSS pentru a-i oferi o imagine de fundal și citate mari în partea dreaptă sus.
Accesați Theme Customizer → CSS suplimentar și adăugați următoarele CSS personalizate:
/* ---- Add Background Image to the Quote Box ---- */
.et_quote_content {
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE')!important;
background-repeat: no-repeat;
background-size: cover;
}
/* ---- Add the Quotation Symbol to the Quote Box ---- */
.et_quote_content blockquote p::before {
font-family: Cardo;
position: absolute;
top: 16px;
left: 5%;
margin-left: -16px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 70px;
font-color: #fff;
content: "\201C" !important;
}
/* ---- Text Format Inside of quote ---- */
@media only screen and (min-width: 980px) {
.single-post.single-format-quote blockquote p {
font-size: 30px !important;
font-weight: 600 !important;
}
}
Găsiți și încărcați o imagine în galeria dvs. media (ar trebui să fie în jur de 700 x 300). Apoi copiați adresa URL și lipiți în CSS de mai sus, unde scrie „ENTER URL IMAGE AICI”.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Acum verificați rezultatul final:
Stilul formatului Postare Galerie
Pentru formatul postării galeriei, asigurați-vă că ați selectat formatul galeriei pentru postarea dvs.
Apoi, asigurați-vă că adăugați imaginea prezentată de 2000 x 600.
Formatul de postare a galeriei vă permite să creați o galerie în conținutul postării dvs. din galeria media.
Pentru a crea o galerie pentru postarea dvs., încărcați mai întâi cel puțin 6 imagini în galeria dvs. media. Mărimea imaginii poate varia, dar din moment ce galeria are un efect lightbox care aruncă imaginile la dimensiune maximă, puteți face imaginile aproximativ 1200 x 800.
Acum selectați-vă imaginile în galeria media, selectați Creați galerie și faceți clic pe butonul „Creați o galerie nouă”.
Acum ar trebui să aveți un cod scurt al galeriei în conținutul dvs.
Această galerie va fi afișată pe postarea dvs. într-un aspect mozaic lat de trei coloane. Galeria va înlocui, de asemenea, imaginea prezentată pe pagina blogului dvs. cu un glisor al imaginilor galeriei dvs.
Acum, du-te la verificarea postării tale.
Să adăugăm niște CSS în galerie pentru a o ridica puțin pentru a suprapune secțiunea erou și a schimba marginile din jurul fiecărei imagini.
Accesați Theme Customizer → CSS suplimentar și adăugați următoarele CSS personalizate:
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
@media only screen and (min-width: 980px) {
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
.et_post_gallery {
z-index: 100;
position: relative;
border-top: 8px solid #fff !important;
border-left: 8px solid #fff !important;
background: #fff !important;
}
/* ---- Set Background Color, Margins & Padding for the Gallery Image ---- */
.et_gallery_item { margin: 0 0 0 0 !important;}
.et_gallery_item {
width: 33.3%;
margin: 0 0% 0% 0 !important;
padding-right: 8px !important;
background: #fff !important;
padding-bottom: 8px !important;
}
}
Acum verificați rezultatul final.
Stilizarea formatului Link Post
Pentru formatul de postare a linkului, asigurați-vă că ați selectat formatul de link pentru postarea dvs.
Apoi, adăugați imaginea dvs. prezentată de 2000 x 600 la postare.
Formatul de postare a linkului ia primul link din postare și îl afișează în partea de sus a conținutului într-o casetă. Această afișare a linkurilor personalizate înlocuiește, de asemenea, miniatura imaginii recomandate pentru această postare pe pagina blogului dvs.
Continuați și adăugați un link la postarea dvs. și verificați designul postării.
Acum, să îmbunătățim puțin designul adăugând o imagine de fundal în caseta de link personalizată și o pictogramă în stânga adresei URL a linkului.
Accesați Theme Customizer → CSS suplimentar și adăugați următoarele CSS personalizate:
/* ---- Add thick border to the left side and Lower the link box ---- */
.et_link_content {
border-bottom: 8px solid #ddd;
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(ENTER IMAGE URL HERE);
background-size: cover;
background-color:#edb059;
border-radius: 25px;
}
/* ---- Font Settings within the Link box ---- */
.et_link_content a.et_link_main_url { font-size: 21px; font-weight: 600; color: #fff !important;}
/* ---- Link Symbol on the right side ---- */
.et_link_content::before {
font-family: "ETmodules";
position: absolute;
top: 38%;
left: 5%;
margin-right: -26px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 48px;
color: #fff;
content: "\e02c";
}
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
@media only screen and (min-width: 980px) {
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
Apoi găsiți și încărcați o imagine în galeria dvs. media (ar trebui să fie în jur de 700 x 300). Apoi copiați adresa URL și lipiți-o în fragmentul CSS pe care tocmai l-ați introdus, unde scrie „ENTER URL IMAGE AICI”.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Acum, verificați cum arată postarea.
Asta e!
Acum, că avem toate formatele de postare proiectate, este timpul să verificăm aspectul grozav pe care îl creează pe pagina blogului. Puteți vedea cum sunt afișate toate diferitele elemente prezentate în formatul postării.
Notă: vă puteți afișa blogul folosind editorul implicit sau Divi Builder, iar designul va funcționa în continuare.
Sensibil?
Toate formatele de postare răspund complet, funcționând bine pe toate dispozitivele. Iată un exemplu de cum arată postarea Format galerie atunci când micșorez modificarea dimensiunii ecranului:
Gânduri finale
Felicitări! Ați terminat cu toții. Sper că v-a plăcut această serie de 3 părți de personalizare a formatelor de postări pe blog. În orice caz, sper că ai învățat ceva valoros pe care să-l iei cu tine la următorul tău proiect. Acum, după ce ați finalizat tutorialul, nu ezitați să experimentați propriile elemente de design pentru formatele postărilor de blog.
Vă rugăm să trimiteți comentariile de mai jos. Aștept cu nerăbdare să ne auzim.