Artikkelikaruselli - Post Carousel

Artikkelikaruselli – Post Carousel

50,00 €

Luo tyylikkäitä ja täysin muokattavia artikkelikaruselleja WordPress-sivustollesi.
Post Carousel näyttää artikkelit modernina, responsiivisena karusellina: termivärit, otsikko + meta + ingressi, tarkat badge-insetit, autoplay, nuolinapit, pisteet sekä kattavat mobiiliasetukset. Mukana Gutenberg-lohko palvelinpuolen renderöinnillä.

GUARANTEED SAFE CHECKOUT
  • Visa Card
  • MasterCard
  • American Express
  • Discover Card
  • PayPal

Kuvaus

Post Carousel

Viimeistelty ja täysin muokattava artikkelikaruselli WordPress-sivustoille.

Post Carousel tarjoaa joustavan ja visuaalisesti huolitellun tavan näyttää artikkelit modernissa artikkelikarusellissa. Se hyödyntää taksonomioiden värimäärittelyjä, tarjoaa tarkan kuvan ja tekstin asettelun, kattavat desktop– ja mobiilitypografiat, dynaamisen korkeussäädön sekä tarkat term-badgen sijoittelut.

Artikkelikaruselli sopii blogeihin, verkkolehtiin, uutisiin, portfolioihin ja kaikille sivustoille, joilla halutaan tuoda sisältö esiin näyttävästi.

Keskeiset ominaisuudet

🎨 Termivärit automaattisesti

Voit määrittää mille tahansa kategoriatermille omat värit. Karuselli käyttää värejä automaattisesti:

  • Taustaväri

  • Tekstin väri

  • Term-badge

  • Dynaamiset ulkoasut, jotka istuvat saumattomasti sivuston brändiin

🖼 Joustava asettelu

Muokkaa ulkoasua yksityiskohtaisesti:

  • Kuva vasemmalla tai oikealla

  • Kuvan leveysprosentti (20–80 %)

  • Desktop- ja mobiilikorkeus erikseen

  • Sisältöalueen scrollaus

  • CSS-grid-tekniikka moderniin asetteluun

📱 Mobiilioptimoitu

Määritä mobiilissa erikseen:

  • Fonttikoot (otsikko, meta, ingressi, badge)

  • Badge-padding

  • Mobiilin karusellikorkeus

  • Mobiilibräkkäri (esim. 640 px)

🏷 Tarkat badge-insetit

Sijoita term-badge täsmälleen haluamaasi paikkaan:

  • top / right / bottom / left

  • Mukautettu padding ja border-radius

  • Oletus: tyylikäs vasen-alakulma

  • Täydellinen brändäyksen hienosäätöön

🎚 Toiminnallisuusasetukset

  • Autoplay (päälle/pois)

  • Säädettävä vaihtoväli

  • Nuolinapit

  • Piste-navigaatio

  • Ensimmäinen artikkeli aktiivisena

  • Valinnainen debug-tila kehittäjille

🧩 Gutenberg-lohko (SSR)

Mukana Post Carousel -lohko, joka käyttää palvelinpuolen renderöintiä:

  • Editorissa näkyvä esikatselu vastaa täydellisesti lopputulosta

  • Kaikki shortcoden parametrit saatavilla lohkon asetuksissa

🔐 Kertamaksu + automaattiset päivitykset

Lisenssiavaimen syöttämisen jälkeen saat päivitykset suoraan WordPressin lisäosahallinnasta.

Shortcode

[lieska_post_carousel total="4" post_type="post" ...]

Täydellinen parametrilista löytyy mukana olevasta käyttöohjeesta.

Sopii erityisesti

  • Blogit

  • Verkkolehdet

  • Uutissivut

  • Portfoliot

  • Teemakohtaiset nostot

  • Etusivun artikkelinostot

  • Kaikki sivustot, jotka haluavat visuaalisesti viimeistellyn artikkelikarusellin

Paketin sisältö

✔ Post Carousel -lisäosa
✔ Gutenberg-lohko
✔ Shortcode
✔ Termivärien hallinta
✔ Automaattiset päivitykset lisenssillä
✔ Asennus- ja käyttöohje
✔ Ei kuukausikuluja – kertamaksu

Lieska Post Carousel v1.7.5
1.7.1
Ensimmäinen julkinen versio

Arviot

Tuotearvioita ei vielä ole.

Kirjoita ensimmäinen arvio tuotteelle “Artikkelikaruselli – Post Carousel”

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

Asennus- ja käyttöohje – Post Carousel

Asennus

Lataus ja aktivointi

  1. Kirjaudu WordPressin hallintaan

  2. Siirry kohtaan Lisäosat → Lisää uusi → Lataa lisäosa

  3. Lataa ZIP-tiedosto post-carousel.zip (tai vastaava)

  4. Klikkaa Asenna nyt

  5. Aktivoi lisäosa

Lisenssiavaimen syöttäminen

  1. Siirry kohtaan Asetukset → Plugin Licenses (tai vastaava sivu)

  2. Etsi kohta Post Carousel

  3. Liitä lisenssiavain

  4. Tallenna

  5. Automaattiset päivitykset aktivoituvat

Artikkelikarusellin lisääminen sivustolle

Karusellin voi lisätä kahdella tavalla:

1. Gutenberg-lohko

  1. Avaa mikä tahansa sivu tai artikkeli

  2. Lisää lohko Post Carousel

  3. Säädä lohkon asetuksista:

    • Artikkelien haku (post type, kategoriat jne.)

    • Kuvan ja sisällön asettelu

    • Typografia (desktop + mobiili)

    • Autoplay-asetukset

    • Term-badgen tyyli ja tarkat insetit

    • Korkeudet ja mobiilibräkkäri

  4. Tallenna sivu

Lohko käyttää palvelinpuolen renderöintiä, joten esikatselu vastaa täsmälleen lopputulosta.

2. Shortcode

Voit lisätä karusellin myös shortcode-muodossa:

[lieska_post_carousel]

Mukauta karusellia lisäämällä parametreja (alla lista).

Shortcoden parametrit

Kysely

Parametri Selitys Esimerkki
total Näytettävien postausten määrä total="4"
post_type Post-tyyppi post_type="post"
orderby Järjestyskenttä orderby="date"
order Suunta order="DESC"
tax_slug Taksonomia tax_slug="category"
terms Pilkuilla erotetut termien slug-muodot terms="uutiset,tapahtumat"
color_tax Värit määrittävä taksonomia color_tax="category"

Asettelu

Parametri Selitys Esimerkki
image_pos Kuva vasemmalla/oikealla (left/right) image_pos="left"
image_pct Kuvan leveysprosentti (20–80 %) image_pct="40"

Typografia (desktop)

Parametri Selitys Esimerkki
title_fs Otsikon fonttikoko title_fs="22px"
meta_fs Metatietojen fonttikoko meta_fs="14px"
excerpt_fs Ingressin fonttikoko excerpt_fs="16px"
term_fs Term-badgen fonttikoko term_fs="13px"
term_pad Badgen padding term_pad="4px 8px"
term_radius Badgen kulmien pyöristys term_radius="4px"

Typografia (mobiili)

Parametri Selitys Esimerkki
title_fs_m Mobiilin otsikkokoko title_fs_m="18px"
meta_fs_m Mobiilin meta-koko meta_fs_m="12px"
excerpt_fs_m Mobiilin ingressin koko excerpt_fs_m="14px"
term_fs_m Mobiilin badge-fonteille term_fs_m="11px"
term_pad_m Mobiilin badge-padding term_pad_m="2px 6px"
mobile_bp Mobiilibräkkäri (px) mobile_bp="640"

Metatiedot

Parametri Selitys Esimerkki
show_date Näytä päivämäärä (1/0) show_date="1"
show_author Näytä kirjoittaja (1/0) show_author="0"
show_excerpt Näytä ingressi (1/0) show_excerpt="1"
date_format Päivämäärän formaatti date_format="j.n.Y"

Käyttäytyminen

Parametri Selitys Esimerkki
autoplay Automaattinen pyöritys autoplay="1"
interval Vaihtoväli millisekunteina interval="6000"

Korkeudet

Parametri Selitys Esimerkki
height Desktop-korkeus height="420px"
m_height Mobiilikorkeus m_height="360px"
content_scroll Sisältöalueen käyttäytyminen (clip/auto) content_scroll="auto"

Badge-insetit

Jos yhtään insettiä ei määritetä, badge sijoittuu automaattisesti vasempaan alakulmaan.

Parametri Esimerkki
term_top term_top="10px"
term_right term_right="12px"
term_bottom term_bottom="0"
term_left term_left="0"

Debug

Parametri Selitys Esimerkki
debug Tulostaa asetukset + WP_Query-tiedot debug="1"

Esimerkit

Peruskaruselli

[lieska_post_carousel]

Kuusi artikkelia tietystä kategoriasta

[lieska_post_carousel total="6" tax_slug="category" terms="blogi"]

Mobiilioptimoitu karuselli

[lieska_post_carousel
title_fs="26px"
excerpt_fs="18px"
title_fs_m="20px"
excerpt_fs_m="15px"
m_height="380px"
]

Autoplay + kuva oikealla

[lieska_post_carousel
autoplay="1"
interval="4000"
image_pos="right"
image_pct="45"
]

Termivärien käyttö

Voit määrittää värit mille tahansa kategoriatermille tai muulle julkiselle taksonomialle:

  1. Siirry kohtaan Artikkelit → Kategoriat

  2. Muokkaa termiä

  3. Aseta:

    • Taustaväri

    • Tekstiväri

Värit vaikuttavat automaattisesti:
✔ Badgeen
✔ Karusellin taustaan
✔ Teksteihin
✔ Pieniin väripisteisiin (CSS-luokat)

Dynaamiset väriluokat

Lisäosa luo automaattisesti CSS-luokkia, kuten:

.is-catfull-uutiset
.is-catfull-tapahtumat

Niitä voi käyttää teemoissa esim. väripisteinä.

Gutenberg-lohkon käyttö

  1. Lisää lohko Post Carousel

  2. Säädä:

    • Artikkelimäärä

    • Kuvan koko

    • Typografiat

    • Badge-asetukset

    • Autoplay

    • Korkeudet

  3. Tallenna

  4. Palvelinpuolen renderöinti varmistaa, että lopputulos vastaa esikatselua

Poistaminen

Lisäosan deaktivointi jättää jälkeensä vain:

  • Termien värit

  • Lisenssiavaimen
    Muutoin lisäosa ei jätä roskia.

Tutustu myös