Come aggiungere modelli e design personalizzati ai formati dei post del blog di Divi (parte 3 di 3)
Pubblicato: 2017-05-04Benvenuto al giorno 3 di 3, l'ultimo giorno della nostra serie su Come aggiungere stili personalizzati ai formati dei post sul blog di Divi. Per impostazione predefinita, Divi viene fornito con sei formati di post del blog: Standard, Video, Audio, Citazione, Galleria e Link. In questa serie ti insegniamo come personalizzarli con php e css.
Oggi è l'ultimo giorno della nostra serie su come aggiungere modelli e stili personalizzati ai formati dei post del blog di Divi. Quest'ultimo giorno della serie è dedicato al design. Con il nostro single.php personalizzato e il nostro tema figlio attivo, siamo pronti per aggiungere uno stile ai formati dei post del blog.
Ti guiderò attraverso tutti e sei i formati di post mentre aggiungiamo alcuni tocchi di design unici a ciascuno. Alla fine di questo tutorial, avrai sei fantastiche alternative ai formati di post di blog predefiniti forniti con Divi.
Avrai anche una pagina del blog piuttosto unica che mostra i diversi elementi in primo piano del formato di post. Ad esempio, il formato del collegamento visualizzerà una casella di collegamento personalizzata al posto della miniatura dell'immagine in primo piano. Il post in formato galleria mostrerà uno slider delle immagini della tua galleria al posto della miniatura dell'immagine in primo piano. E così via.
Ecco un assaggio di come sarebbe la pagina del tuo blog dopo il tutorial di oggi (sto usando il modulo Divi Blog con un layout a griglia nella gif in basso).
Iniziamo.
Configurazione delle impostazioni generali di progettazione in Personalizzatore temi
Per prima cosa dobbiamo apportare alcune modifiche generali allo stile utilizzando il personalizzatore del tema. Dalla dashboard di WordPress, vai su Divi → Personalizzatore temi → Impostazioni generali → Impostazioni layout e modifica quanto segue:
Larghezza grondaia sito web: 2
Seleziona Usa larghezza barra laterale personalizzata
Larghezza barra laterale: 30
Anche in Personalizzatore di temi, vai su Combinazioni di colori e seleziona Arancione.
Ora diamo un'occhiata a come appare il tuo post standard finora:
Come puoi vedere, ha ancora bisogno di uno stile ma tutto è al posto giusto. Hai una sezione eroe che copre l'intera larghezza della pagina. Non hai ancora un'immagine in primo piano, quindi lo sfondo mostra solo il gradiente che hai aggiunto al tuo file single.php in precedenza. Anche il titolo del post e il meta sono all'interno della sezione degli eroi. Ora è il momento di aggiungere il resto degli elementi di design.
Disegnare la sezione Hero per tutti i formati di post
Poiché ciascuno dei tuoi formati di post condividerà la stessa sezione eroe e il design della barra laterale, puoi prima aggiungere questo CSS personalizzato. Torna a Personalizzatore temi, fai clic su CSS aggiuntivo in basso e aggiungi il seguente CSS personalizzato:
.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;
}
}
Ora controlla come appare ora un post standard.
Con la sezione eroe e lo stile della barra laterale in atto, sei pronto per modellare i singoli formati di post.
Disegnare il formato post standard
Il formato post standard è il formato predefinito per tutti i post del tuo blog. Puoi selezionare il formato standard del post quando modifichi il tuo post.
Tutto quello che faremo per questo formato standard è aggiungere l'immagine in primo piano. Poiché questa immagine in primo piano si estenderà per l'intera larghezza dello schermo, suggerisco di utilizzare un'immagine di 2000 x 600. Sto utilizzando immagini di unsplash.com.
Dopo aver aggiunto l'immagine in primo piano, controlla l'aspetto del post standard.
Modellare il formato del post video
Per definire lo stile del formato video del post, assicurati di aver selezionato il formato video per il tuo post.
Quindi, aggiungi l'URL o incorpora un video ai tuoi contenuti. Il formato video prenderà il primo URL del video, tag video o incorporerà e lo visualizzerà nella parte superiore del contenuto del tuo post. Questo video sostituirà anche l'immagine in primo piano sulla pagina del tuo blog.
Per questo esempio, sto solo usando l'URL di un video di YouTube.
Aggiungi la tua immagine in primo piano 2000 x 600 al post.
Successivamente, aggiungeremo uno stile aggiuntivo al video in primo piano per dare al video un bordo bianco e sollevarlo leggermente in modo che si sovrapponga alla sezione dell'eroe e si distingua un po'.
Vai a Personalizzatore temi → CSS aggiuntivo e aggiungi il seguente CSS personalizzato:
/* ---- 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;}
}
Ora controlla il tuo nuovo post sul formato video.
In alternativa, puoi creare questo post a tutta larghezza per un'altra fantastica opzione di design. Vai semplicemente a modificare il tuo post e, nelle Impostazioni Divi Post in alto a destra della pagina, seleziona un layout di pagina a larghezza intera.
Ora controlla il post sul formato video a tutta larghezza:
Disegnare il formato del post audio
Per l'Audio Post Format, assicurati di aver selezionato Audio Format per il tuo post.
Aggiungi la tua immagine in primo piano 2000 x 600.
Quindi, aggiungi il tuo file audio al tuo post. Può essere un file .mp3, .m4a, .ogg o .wav. Puoi caricare il tuo file audio nella tua libreria multimediale e inserirlo nel tuo post in tre modi diversi (incorpora il lettore multimediale, collega al file multimediale o collega alla pagina degli allegati).
Ognuna di queste tre opzioni funzionerà. Ma, per questo esempio, aggiungerò semplicemente un semplice URL al file audio. WordPress convertirà questo URL audio in un lettore multimediale nella parte superiore del post.
Ora diamo un'occhiata al post sul formato audio.
Non è male, ma potrebbe essere migliore. Nascondiamo il lettore multimediale duplicato che mostra sotto il lettore multimediale arancione e aggiungiamo un'immagine di sfondo al nostro lettore multimediale arancione.
Vai a Personalizzatore temi → CSS aggiuntivo e aggiungi il seguente CSS personalizzato:
/* ----- 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;}
Quindi trova e carica un'immagine nella tua galleria multimediale (dovrebbe essere di circa 700 x 300). Quindi copia l'URL e incolla nel CSS sopra dove dice "INSERISCI QUI URL IMMAGINE".
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Ora vai a dare un'occhiata al tuo nuovo post sul formato audio.
Disegnare il formato del post con citazione
Per il formato preventivo del post, assicurati di aver selezionato il formato del preventivo per il tuo post.
Quindi aggiungi un'immagine in primo piano di 2000 x 600 al post.
Il formato del preventivo utilizza lo shortcode blockquote per generare una visualizzazione del preventivo personalizzato. Quindi, aggiungi un blockquote al tuo contenuto per visualizzare il preventivo personalizzato.
Ora controlla il tuo post.
Personalizziamo la casella delle citazioni in primo piano con un po' di CSS per dargli un'immagine di sfondo e grandi citazioni in alto a destra.
Vai a Personalizzatore temi → CSS aggiuntivo e aggiungi il seguente CSS personalizzato:
/* ---- 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;
}
}
Trova e carica un'immagine nella tua galleria multimediale (dovrebbe essere di circa 700 x 300). Quindi copia l'URL e incolla nel CSS sopra dove dice "INSERISCI QUI URL IMMAGINE".
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Ora controlla il tuo risultato finale:
Disegnare il formato dei post della galleria
Per il formato del post della galleria, assicurati di aver selezionato il formato della galleria per il tuo post.
Quindi, assicurati di aggiungere l'immagine in primo piano 2000 x 600.
Il formato del post della galleria ti consente di creare una galleria all'interno del contenuto del tuo post dalla galleria multimediale.
Per creare una galleria per il tuo post, carica prima almeno 6 immagini nella tua galleria multimediale. La dimensione dell'immagine può variare, ma poiché la galleria ha un effetto lightbox che fa esplodere le immagini a grandezza naturale, puoi rendere le immagini di circa 1200 x 800.
Ora seleziona le tue immagini nella galleria multimediale, seleziona Crea galleria e fai clic sul pulsante "Crea una nuova galleria".
Ora dovresti avere uno shortcode della galleria nel tuo contenuto.
Questa galleria verrà visualizzata sul tuo post in un layout a mosaico largo tre colonne. La galleria sostituirà anche l'immagine in primo piano sulla pagina del tuo blog con un dispositivo di scorrimento delle immagini della tua galleria.
Ora vai a controllare il tuo post.
Aggiungiamo un po' di CSS alla galleria per elevarla un po' per sovrapporla alla sezione dell'eroe e modificare i margini attorno a ciascuna delle immagini.
Vai a Personalizzatore temi → CSS aggiuntivo e aggiungi il seguente CSS personalizzato:
/* ---- 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;
}
}
Ora controlla il risultato finale.
Disegnare il formato del link post
Per il formato link post, assicurati di aver selezionato il formato link per il tuo post.
Quindi, aggiungi la tua immagine in primo piano 2000 x 600 al tuo post.
Il formato link post prende il primo link nel post e lo visualizza nella parte superiore del contenuto all'interno di una casella. Questa visualizzazione del collegamento personalizzato sostituisce anche la miniatura dell'immagine in primo piano per questo post sulla pagina del tuo blog.
Vai avanti e aggiungi un link al tuo post e controlla il design del post.
Ora miglioriamo un po' il design aggiungendo un'immagine di sfondo alla casella del collegamento personalizzato e un'icona a sinistra dell'URL del collegamento.
Vai a Personalizzatore temi → CSS aggiuntivo e aggiungi il seguente CSS personalizzato:
/* ---- 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;}
Quindi trova e carica un'immagine nella tua galleria multimediale (dovrebbe essere di circa 700 x 300). Quindi copia l'URL e incollalo nello snippet CSS appena inserito dove dice "INSERISCI QUI URL IMMAGINE".
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Ora controlla come appare il post.
Questo è tutto!
Ora che abbiamo progettato tutti i nostri formati di post, è il momento di dare un'occhiata al fantastico layout che crea nella pagina del blog. Puoi vedere come vengono visualizzati tutti gli elementi in primo piano in diversi formati di post.
Nota: puoi visualizzare il tuo blog utilizzando l'editor predefinito o Divi Builder e il design continuerà a funzionare.
Reattivo?
Tutti i formati di post sono completamente responsive e funzionano bene su tutti i dispositivi. Ecco un esempio di come appare il post in formato galleria quando rimpicciolisco le dimensioni dello schermo:
Pensieri finali
Congratulazioni! Hai finito. Spero che questa serie in 3 parti sulla personalizzazione dei formati dei post del blog ti sia piaciuta. Semmai, spero che tu abbia imparato qualcosa di prezioso da portare con te nel tuo prossimo progetto. Ora che hai completato il tutorial, sentiti libero di sperimentare i tuoi elementi di design per i formati dei tuoi post sul blog.
Invia i tuoi commenti qui sotto. Aspetto tue notizie.