Divi Builder -lisäosan dokumentaatio

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.

Vastaa

Sähköpostiosoitettasi ei julkaista.