Divi-blogimoduulin lisääminen, konfigurointi ja mukauttaminen.
Divissä jopa blogit ovat moduuli, ja ”blogisi” voidaan sijoittaa minne tahansa verkkosivuillasi ja eri muodoissa. Voit yhdistää blogi- ja sivupalkkimoduuleja ja luoda klassisia blogimalleja. 1-palstaiset, 2-palstaiset tai 3-palstaiset blogit voidaan kaikki rakentaa käyttämällä blogi- ja sivupalkkimoduuleja.
Katsele tämän moduulin live-demo
Miten lisäät blogimoduulin sivullesi
Ennen kuin pystyt lisäämään blogimoduulin sivullesi, sinun on ensin hypättävä Divi Builderiin. Kun Divi-teema on asennettu verkkosivustollesi, huomaat Käytä Divi Builder -painikkeen postieditorin yläpuolella aina, kun rakennat uutta sivua. Tätä painiketta napsauttamalla otat Divi Builderin käyttöön, jolloin pääset käyttämään kaikkia Divi Builderin moduuleja. Napsauta seuraavaksi Käytä Visual Builder -painiketta käynnistääksesi Builderin Visual Mode -tilassa. Voit napsauttaa Use Visual Builder -painiketta myös selatessasi verkkosivustoasi etupäässä, jos olet kirjautuneena WordPressin kojelautaan.
Kun olet päässyt Visual Builderiin, voit lisätä uuden moduulin sivullesi napsauttamalla harmaata plus-painiketta. Uusia moduuleja voi lisätä vain rivien sisälle. Jos aloitat uuden sivun, älä unohda lisätä sivulle ensin riviä. Meillä on hienoja opetusohjelmia siitä, miten voit käyttää Divin rivi- ja osioelementtejä.
Etsi blogimoduuli moduulien luettelosta ja lisää se sivullesi klikkaamalla sitä. Moduuliluettelo on hakukelpoinen, eli voit myös kirjoittaa sanan ”blogi” ja napsauttaa sitten enteriä, jolloin blogimoduuli löytyy ja lisätään automaattisesti! Kun moduuli on lisätty, sinua tervehtii moduulin vaihtoehtojen luettelo. Nämä vaihtoehdot on jaettu kolmeen pääryhmään: Sisältö, Suunnittelu ja Edistyneet.
Käyttökohde-esimerkki: Blogimoduulin lisääminen ruudukkoasettelulla oikealla sivupalkilla varustettuun erikoisosioon
Tässä esimerkissä aion lisätä blogimoduulin blogisivulle. Tällä blogisivulla on täysleveä otsikko, jonka alla on hakumoduuli. Hakumoduulin alle lisään erikoisosan, jonka vasemmalla puolella on Blogimoduuli ja oikealla puolella sivupalkkiosio. Oikeanpuoleisessa sivupalkissa on Viimeisimmät viestit -widget, Sähköposti-optin-moduuli ja Henkilömoduuli.
Tältä esimerkkisivu näyttää.
Huomaa, että blogimoduuli on ruudukkomaisessa asettelussa erikoisosiossa vasemmalla puolella.
Lähdetään liikkeelle.
Käytä visuaalista rakentajaa lisätäksesi erikoisosa-alueen seuraavalla asettelulla:
Vasemmalle puolelle pyydetään lisäämään joko 1-palstainen tai 2-palstainen rivi. Valitse 1-sarakkeinen rivi.
Sitten lisää riville Blogimoduuli.
Päivitä Blogin asetukset seuraavasti:
Sisältöasetukset
Postien määrä: 6
Lue lisää -painike: ON
Show Pagination: NO
Grid Tile Background Color: #ffffff
Suunnitteluasetukset
Layout:
Use Dropshadow: ON
Overlay Icon Color:
Hover Overlay Color: rgba(224,153,0,0.51)
Header Font:
Header Font Size: 21px
Header Text Color: #333333
Header Letter Spacing: 1px
Header Line Height: 1.2em
Use Border: YES
Border Color: YES
Border Color: YES
Border Color:
Border Width: 1px
Border Style: #f0f0f0f0
Border Width: 1px
Border Style: Solid
Advanced Options
Custom CSS (Read More Button):
Edistynyt Custom CSS for the read more button luo mukautetun ulkoasun, joka sopii hyvin muotoiluun.
Erikoisjaoston ulkoasun oikeaan sivupalkkiosioon on lisättävä sivupalkkimoduuli, joka vetää viimeisimpiä viestejä widgetin. Sen alapuolelle sinun tulee lisätä Email Optin -moduuli. Ja sitten Email Optin -moduulin alapuolelle sinun täytyy lisätä Henkilö-moduuli, jossa on tietoa kirjoittajasta.
Se on siinä!
Blogin sisältöasetukset
Sisältö-välilehdeltä löydät kaikki moduulin sisältöelementit, kuten tekstin, kuvat ja kuvakkeet. Kaikki, mikä ohjaa sitä, mitä moduulissasi näkyy, löytyy aina tältä välilehdeltä.
Postien määrä
Määritä, kuinka monta postia haluat näyttää. Sinulla täytyy olla tehtyjä viestejä, jotta mitään ei näy tämän moduulin sisällä.
Valitse kategoriat, jotka haluat sisällyttää post-syötteeseen. Kaikki luomasi postauskategoriat näkyvät tässä, jotta voit valita/poistaa ne.
Sisällytetyt kategoriat
Valitse, mitkä kategoriat haluat sisällyttää syötteeseen.
Meta Päivämäärämuoto
Määrittele päivämäärämuoto, jonka haluat näyttää blogin postauksissasi tässä. Oletusasettelu on M j, Y-muotoinen (6. tammikuuta 2014) Katso lisää vaihtoehtoja WordPress Codexin päivämäärämuodoista.
Sisältö
Täyden sisällön näyttäminen ei typistä viestejäsi indeksisivulla. Otteen näyttäminen näyttää vain otteen tekstisi.
Offset Number
Valitse, kuinka monta virkaa haluat siirtää. Jos siirrät esimerkiksi 3 virkaa, blogisyötteen kolmea ensimmäistä virkaa ei näytetä.
Show Featured Image
Tämän vaihtoehdon avulla voit valita, haluatko pikkukuvien näkyvän blogimoduulissasi.
Lue lisää -painike
Tässä voit määritellä, näytetäänkö ”lue lisää”-linkki otteen jälkeen vai ei.
Näytä kirjoittaja
Valitse, haluatko näyttää kunkin blogipostauksen kirjoittajan postauksen meta-alueella postauksen otsikon alla.
Näytä päivämäärä
Valitse, haluatko näyttää kunkin postauksen luomisen päivämäärän postauksen meta-alueella postauksen otsikon alla.
Näytä kategoriat
Valitse, haluatko näyttää postausluokat postauksen meta-alueella postauksen otsikon alla.
Show Comment Count
Valitse, haluatko näyttää kommenttien lukumäärän postauksen meta-alueella postauksen otsikon alapuolella.
Show Pagination
Valitse, haluatko näyttää tämän syötteen sivunumeron. Jotta voit ottaa käyttöön numeroidun paginoinnin, sinun on asennettava WP Page Navi -lisäosa.
Admin Label
Tämä muuttaa moduulin merkinnän rakentajassa, jotta se on helppo tunnistaa. Kun käytät WireFrame-näkymää Visual Builderissa, nämä merkinnät näkyvät moduulilohkon sisällä Divi Builderin käyttöliittymässä.
Blogin suunnitteluvaihtoehdot
Suunnitteluvälilehdeltä löydät kaikki moduulin muotoiluvaihtoehdot, kuten fontit, värit, koon ja välit. Tällä välilehdellä voit muuttaa moduulin ulkoasua. Jokaisella Divi-moduulilla on pitkä lista muotoiluasetuksia, joiden avulla voit muuttaa lähes mitä tahansa.
Layout
Voit valita, näytetäänkö blogipostaukset ruudukkona vai koko leveyden asetteluna.
Luonnoskuva-päällekkäisasettelu
Jos olet ottanut sen käyttöön, päällekkäisasettelujen väriä ja -kuvaketta näytetään silloin, kun kävijä vie hiiren leveydellä postauksen luonnehditun kuvan päälle.
Overlay Icon Color
Tässä voit määrittää mukautetun värin overlay-kuvakkeelle.
Hover Overlay Color
Tässä voit määrittää mukautetun värin overlay-kuvakkeelle.
Hover Icon Picker
Tässä voit määritellä mukautetun kuvakkeen päällekkäisasettelulle.
Tekstin väri
Jos blogisi sijoitetaan vaalealle taustalle, tekstin värin tulisi olla ’Tumma’. Visa päinvastoin, jos blogisi sijoitetaan tummalle taustalle, tekstin väriksi tulee asettaa ’Vaalea’.
otsikon fontti
Voit muuttaa otsikkotekstin fonttia valitsemalla haluamasi fontin pudotusvalikosta. Divin mukana tulee kymmeniä loistavia fontteja, jotka ovat Google Fontsin käyttämiä. Oletusarvoisesti Divi käyttää Open Sans -kirjasinta kaikkeen sivusi tekstiin. Voit myös mukauttaa tekstin tyyliä käyttämällä lihavointi-, kursivointi-, all-caps- ja alleviivausvaihtoehtoja.
otsikon fonttikoko
Tässä voit säätää otsikkotekstin kokoa. Voit kasvattaa tai pienentää tekstin kokoa vetämällä alueen liukusäädintä, tai voit syöttää haluamasi tekstikoon arvon suoraan liukusäätimen oikealla puolella olevaan syöttökenttään. Syöttökentät tukevat eri mittayksiköitä, eli voit syöttää ”px” tai ”em” kokoarvosi perään vaihtaaksesi sen yksikkötyyppiä.
otsikkotekstin väri
Oletusarvoisesti kaikki tekstin värit Divissä näkyvät valkoisina tai tummanharmaina. Jos haluat muuttaa otsikkotekstin väriä, valitse haluamasi väri värivalitsimesta tämän vaihtoehdon avulla.
otsikon kirjainväli
Kirjainväli vaikuttaa kunkin kirjaimen väliseen tilaan. Jos haluat lisätä otsikkotekstin kirjainten välejä, säädä välystä alueen liukusäätimellä tai syötä haluamasi välyksen koko liukusäätimen oikealla puolella olevaan syöttökenttään. Syöttökentät tukevat eri mittayksiköitä, mikä tarkoittaa, että voit syöttää ”px” tai ”em” koon arvon perään vaihtaaksesi sen yksikkötyyppiä.
otsikon rivikorkeus
Rivikorkeus vaikuttaa otsikkotekstin jokaisen rivin väliseen tilaan Jos haluat kasvattaa jokaisen rivin väliin jäävää välystä, säädä välystä vaihteluvälin liukusäätimellä (range slider) tai syötä haluamasi välikoko liukusäätimen oikeanpuoleiseen kenttään. Syöttökentät tukevat eri mittayksiköitä, eli voit syöttää ”px” tai ”em” kokoarvosi perään vaihtaaksesi sen yksikkötyyppiä.
Runkotekstin fontti
Voit vaihtaa runkotekstin fonttia valitsemalla haluamasi fontin pudotusvalikosta. Divin mukana tulee kymmeniä loistavia fontteja, jotka ovat Google Fontsin käyttämiä. Oletusarvoisesti Divi käyttää Open Sans -kirjasinta kaikkeen sivusi tekstiin. Voit myös mukauttaa tekstin tyyliä lihavointi-, kursivointi-, all-caps- ja alleviivausvaihtoehdoilla.
Runkotekstin fonttikoko
Tässä voit säätää runkotekstin kokoa. Voit kasvattaa tai pienentää tekstin kokoa vetämällä alueen liukusäädintä, tai voit syöttää haluamasi tekstikoon arvon suoraan liukusäätimen oikealla puolella olevaan syöttökenttään. Syöttökentät tukevat eri mittayksiköitä, eli voit syöttää ”px” tai ”em” kokoarvosi perään vaihtaaksesi sen yksikkötyyppiä.
Vartalotekstin väri
Oletusarvoisesti kaikki tekstin värit Divissä näkyvät valkoisina tai tummanharmaina. Jos haluat muuttaa runkotekstin väriä, valitse haluamasi väri värivalitsimesta tämän vaihtoehdon avulla.
Runkotekstin kirjainväli
Kirjainväli vaikuttaa kunkin kirjaimen väliseen tilaan. Jos haluat kasvattaa runkotekstin kirjainten välistä tilaa, säädä välystä alueen liukusäätimellä tai syötä haluamasi välyksen koko liukusäätimen oikealla puolella olevaan syöttökenttään. Syöttökentät tukevat eri mittayksiköitä, mikä tarkoittaa, että voit syöttää ”px” tai ”em” kokoarvon perään vaihtaaksesi sen yksikkötyyppiä.
Vartalotekstin rivikorkeus
Rivikorkeus vaikuttaa runkotekstin jokaisen rivin väliseen tilaan Jos haluat kasvattaa jokaisen rivin väliin jäävää tilaa, säädä väliä vaihteluvälin liukusäätimellä (range slider) tai syötä haluamasi tilakoko liukusäätimen oikeanpuoleiseen kenttään. Syöttökentät tukevat eri mittayksiköitä, eli voit syöttää ”px” tai ”em” kokoarvosi perään vaihtaaksesi sen yksikkötyyppiä.
Meta-fontti
Voit vaihtaa metatekstin fonttia valitsemalla haluamasi fontin pudotusvalikosta. Divin mukana tulee kymmeniä loistavia fontteja, jotka ovat Google Fontsin käyttämiä. Oletusarvoisesti Divi käyttää Open Sans -kirjasinta kaikkeen sivusi tekstiin. Voit myös mukauttaa tekstisi tyyliä lihavointi-, kursivointi-, all-caps- ja alleviivausvaihtoehdoilla.
Meta-fontin koko
Tässä voit säätää metatekstisi kokoa. Voit kasvattaa tai pienentää tekstin kokoa vetämällä alueen liukusäädintä, tai voit syöttää haluamasi tekstikoon arvon suoraan liukusäätimen oikealla puolella olevaan syöttökenttään. Syöttökentät tukevat eri mittayksiköitä, eli voit syöttää ”px” tai ”em” kokoarvosi perään vaihtaaksesi sen yksikkötyyppiä.
Metatekstin väri
Oletusarvoisesti kaikki tekstin värit Divissä näkyvät valkoisina tai tummanharmaina. Jos haluat muuttaa metatekstin väriä, valitse haluamasi väri värivalitsimesta tämän vaihtoehdon avulla.
Meta-kirjainväli
Kirjainväli vaikuttaa kunkin kirjaimen väliseen tilaan. Jos haluat kasvattaa metatekstin kirjainten välistä tilaa, voit säätää välystä alueen liukusäätimellä tai syöttää haluamasi välyksen koon liukusäätimen oikealla puolella olevaan syöttökenttään. Syöttökentät tukevat eri mittayksiköitä, mikä tarkoittaa, että voit syöttää ”px” tai ”em” kokoarvosi perään vaihtaaksesi sen yksikkötyyppiä.
Meta Rivin korkeus
Rivin korkeus vaikuttaa metatekstisi jokaisen rivin väliseen tilaan Jos haluat lisätä jokaisen rivin välistä tilaa, säädä tilaa vaihteluvälin liukusäätimellä (range slider) tai syötä haluamasi välinekoko liukusäätimen oikealla puolella olevaan syöttökenttään. Syöttökentät tukevat eri mittayksiköitä, eli voit syöttää ”px” tai ”em” kokoarvosi perään vaihtaaksesi sen yksikkötyyppiä.
Käytä reunusta
Tämän vaihtoehdon ottaminen käyttöön asettaa reunuksen moduulisi ympärille. Tätä reunusta voidaan muokata seuraavilla ehdollisilla asetuksilla.
Border Color
Tämä vaihtoehto vaikuttaa reunuksen väriin. Valitse mukautettu väri värinvalitsimesta soveltaaksesi sitä rajaukseen.
Rajan leveys
Oletusarvoisesti rajauksen leveys on 1 pikseli. Voit lisätä tätä arvoa vetämällä alueen liukusäädintä tai syöttämällä mukautetun arvon liukusäätimen oikealla puolella olevaan syöttökenttään. Tuetaan mukautettuja mittayksiköitä, mikä tarkoittaa, että voit muuttaa oletusyksikön ”px” joksikin muuksi yksiköksi, kuten em, vh, vw jne.
Reunustyyli
Reunukset tukevat kahdeksaa erilaista tyyliä, mukaan lukien: yhtenäinen, katkoviivainen, katkoviivainen, kaksoiskatkoviivainen, uritettu, harjanne, sisäkkäin asetetut ja ulokkeet. Valitse haluamasi tyyli pudotusvalikosta soveltaaksesi sitä reunukseen.
Blogin lisäasetukset
Lisäasetukset-välilehdeltä löydät vaihtoehtoja, joita kokeneemmat verkkosuunnittelijat saattavat pitää hyödyllisinä, kuten mukautetun CSS:n ja HTML-attribuutit. Täällä voit soveltaa mukautettua CSS:ää mihin tahansa moduulin monista elementeistä. Voit myös soveltaa moduuliin mukautettuja CSS-luokkia ja -tunnuksia, joita voidaan käyttää moduulin mukauttamiseen lapsiteemasi style.css-tiedostossa.
CSS ID
Syötä valinnainen CSS-tunnus, jota käytetään tässä moduulissa. Tunnusta voidaan käyttää mukautetun CSS-muotoilun luomiseen tai linkkien luomiseen sivun tiettyihin osioihin.
CSS-luokka
Syötä valinnaiset CSS-luokat, joita käytetään tässä moduulissa. CSS-luokkaa voidaan käyttää mukautetun CSS-muotoilun luomiseen. Voit lisätä useita luokkia välilyönnillä erotettuna. Näitä luokkia voidaan käyttää Divi Child Theme -teemassasi tai mukautetussa CSS:ssä, jonka lisäät sivullesi tai verkkosivustollesi käyttämällä Divi Theme Options- tai Divi Builder Page Settings -asetuksia.
Custom CSS
Taattua CSS:ää voidaan soveltaa myös moduuliin ja mihin tahansa moduulin sisäisiin elementteihin. Custom CSS -osiossa on tekstikenttä, johon voit lisätä mukautetun CSS:n suoraan jokaiseen elementtiin. Näihin asetuksiin syötetyt CSS:t ovat jo valmiiksi käärittyjä tyylitunnisteisiin, joten sinun tarvitsee syöttää vain puolipisteillä erotetut CSS-säännöt.
Näkyvyys
Tämän vaihtoehdon avulla voit hallita, missä laitteissa moduulisi näkyy. Voit poistaa moduulisi käytöstä tableteilla, älypuhelimilla tai pöytätietokoneilla erikseen. Tämä on hyödyllistä, jos haluat käyttää eri moduuleja eri laitteissa tai jos haluat yksinkertaistaa mobiilisuunnittelua poistamalla tiettyjä elementtejä sivulta.