Skip to content

Kaikki WordPressistä, web-kehityksestä — ja paljon muuta

🚀 WPBakery Page Builder: opas vedä ja pudota -sivunrakennukseen

🚀 WPBakery Page Builder: opas vedä ja pudota -sivunrakennukseen

Räätälöity sivupohja ilman yhtäkään koodiriviä kuulostaa unelmalta. Varsinkin silloin, kun WordPressin oletusteema ei tarjoa tarvitsemaasi rakennetta eikä sinulla ole aikaa koodata sitä käsin. Sivunrakentajat ratkaisevat tämän ongelman: asenna lisäosa, vedä ja pudota lohkoja hiirellä, niin saat laskeutumissivun, portfolion tai kotisivun tunnissa.

WPBakery Page Builder on yksi vanhimmista ja laajimmin käytetyistä tämän tyypin rakentajista. CodeCanyon-luettelon mukaan lisäosalla on yli 2 miljoonaa aktiivista käyttäjää ja yli 5 000 arvostelua. Se toimitetaan satojen ThemeForestin premium-teemojen mukana, ja sitä päivitetään edelleen aktiivisesti; nykyinen versio 8.7.3 julkaistiin toukokuussa 2026.

💡 Pikaopas:

  • Asenna WPBakery CodeCanyon-luettelosta tai teemapaketistasi, aktivoi se, niin saat rakennustilan käyttöön millä tahansa sivulla
  • Rakenna rakenne: lisää rivi, jaa se sarakkeisiin ja täytä elementeillä (teksti, painikkeet, galleriat, liukusäätimet)
  • Muokkaa visuaalisesti: vedä lohkot haluamaasi järjestykseen, säädä täytteitä ja taustoja rivipaneelin kautta
  • Tallenna pohja mallipohjaksi ja käytä sitä uudelleen muilla sivuilla yhdellä napsautuksella

Mikä WPBakery Page Builder on

WPBakery (aiemmin nimeltään Visual Composer) on WP Bakery -tiimin kehittämä WordPress-sivunrakentajalisäosa. Sitä myydään CodeCanyonissa, ja se toimitetaan monien suosittujen teemojen mukana. Tärkeä huomio: älä sekoita sitä erilliseen Visual Composer -tuotteeseen osoitteessa visualcomposer.com, sillä nämä ovat kaksi eri lisäosaa, joilla on samankaltaiset nimet.

Rakentaja toimii kahdessa tilassa: hallintapaneelin taustamuokkaimessa ja frontend-muokkaimessa, jossa näet sivun sellaisena kuin kävijä sen näkee ja muokkaat elementtejä lennossa. Koodia ei tarvita, vain vedä ja pudota sekä määritä asetukset valintapaneeleista.

Asennus ja ensimmäiset vaiheet

Lisäosa asennetaan tavalliseen tapaan: lataa ZIP-paketti CodeCanyon-tililtäsi tai teemapaketistasi, siirrä se palvelimelle kohdassa Lisäosat → Lisää uusi → Siirrä lisäosa ja aktivoi. Regular-lisenssi maksaa $59 yhdelle sivustolle ja sisältää elinikäiset päivitykset.

Aktivoinnin jälkeen sivun muokkausnäkymään ilmestyy uusia painikkeita: voit vaihtaa klassisen editorin ja rakennustilan välillä, minkä lisäksi käytössä on frontend-muokkainpainike.

WPBakery-tilan vaihtopainikkeet WordPressin hallintapaneelissa

Tästä eteenpäin ainoa raja on mielikuvituksesi. Lisää rivejä, sarakkeita, painikkeita, tekstiä ja kuvia elementtipaneelin kautta. Valmiin pohjan voit tallentaa mallipohjaksi uudelleenkäyttöä varten.

Sivun rakentaminen: rivit, sarakkeet ja elementit

Rivit ja sarakkeet

Sivun rakentaminen alkaa rivistä. Rivi on vaakasuuntainen säiliö, joka jakautuu sarakkeisiin. Vie hiiri rivin vasemmassa yläkulmassa olevan keltaisen välilehden päälle ja valitse sarakeasettelu. Rakentaja jakaa tilan automaattisesti tarvittavaan määrään sarakkeita.

Sarakkeiden asettelun valinta WPBakery-editorissa

Perusasetteluja ovat 1/2+1/2, 1/3+2/3, 1/4+3/4 ja niiden peilikuvavariantit. Yhdistelemällä rivejä, joissa on eri asetteluja, voit rakentaa kokonaisen sivun ruudukon ilman CSS:ää.

Sivuelementit

Napsauta "Lisää elementti" -painiketta avataksesi ponnahdusvalikon, jossa on kaikki käytettävissä olevat moduulit. WPBakeryn vakiopaketti sisältää tekstilohkot, otsikot, painikkeet, kuvat, galleriat, haitarit, välilehdet, avattavat lohkot, viimeisimmät artikkelit -lohkot ja sivupalkin vimpaimet.

WPBakeryn elementtien lisäysvalikko

Elementtien määrä riippuu teemastasi ja aktiivisista lisäosista. Monet premium-teemat lisäävät omia moduulejaan, jotka on räätälöity niiden ulkoasuun: karusellit, erottimet, kuvake-elementit, virstanpylväät ja aikajanat.

Kun valitset elementin, sen asetuspaneeli avautuu (joskus useilla välilehdillä). Alla on esimerkki Kuvake-elementti-moduulin asetusikkunasta (saatavilla sitä tukevissa teemoissa):

Kuvake-elementin asetuspaneeli WPBakery-työkalussa

Suoraan laatikosta otettuna builder tukee neljää suosittua kolmannen osapuolen lisäosaa: Layer Slider, Revolution Slider, Gravity Forms ja Contact Form 7. Jos jokin näistä on asennettu, teemalle ilmestyy automaattisesti sivuelementti. Kun lisäät elementin, WPBakery näyttää pudotusvalikon aiemmin luomistasi slider-objekteista tai lomakkeista. Shortcodeja ei tarvitse kopioida käsin.

Vedä ja pudota sekä mallipohjat

Elementtien raahaus-ja-pudotus-käyttöliittymä WPBakery-työkalussa

Minkä tahansa rivin tai elementin voi vetää uuteen paikkaan milloin vain. Rivien ja elementtien kopiointi on käytettävissä, mikä on hyödyllistä toistuvan sisällön kanssa: identtiset sarakkeet, avattavat osiot tai UKK-lohkot.

Kun asettelu on valmis, tallenna se mallipohjaksi: klikkaa "Mallipohjat"-painiketta, anna nimi ja vahvista. Kun luot uuden sivun, mallipohja latautuu kaikkine tallennettuine elementteineen ja asetuksineen.

Riviasetukset

Jokaisen rivin vasemmassa kulmassa kolme kuvaketta hallitsevat toimintoja: kloonaa koko rivi sisältöineen, lisää uusia moduuleja ja muokkaa sarakkeita.

Rivien hallintakuvakkeet WPBakery-työkalussa kloonausta ja asetuksia varten

Käytettävissä olevat muotoiluvaihtoehdot riippuvat teemasta. Jotkut kehittäjät jättävät WPBakeryn ennalleen, kun taas toiset laajentavat paneelia vastaamaan teemansa designia. Ennen teeman ostamista tarkista, mitä builder-asetuksia siihen on lisätty.

Frontend-editori

WPBakery sisältää live frontend-editorin: näet sivun kävijän silmin ja muokkaat tekstiä, kuvia ja välistyksiä suoraan paikan päällä. Klikkaa elementtiä, asetuspaneeli avautuu ja näet tuloksen välittömästi.

Kaikki teemat eivät tue frontend-editoria. Tarkista teeman ominaisuuslista tai ota yhteyttä kehittäjään yhteensopivuuden selvittämiseksi. Teemat, jotka on rakennettu WPBakery mielessä pitäen, sisältävät yleensä täyden tuen molemmille tiloille (backend ja frontend).

Laajennukset ja shortcodet

WPBakery Page Builderin virallinen verkkosivusto

WPBakery tukee kolmannen osapuolen shortcode-integraatiota. Lisäosan asetussivulla mene "Omat shortcodet" -välilehdelle ja klikkaa "Kartoita shortcodet". Järjestelmä hakee kaikki sivuston rekisteröidyt shortcodet ja lisää ne builderin elementtivalikkoon.

Jos olet kehittäjä, lisäosan API mahdollistaa omien moduulien lisäämisen builderin käyttöliittymään. Tavallisille käyttäjille CodeCanyon tarjoaa kymmeniä lisäosia, jotka laajentavat vakioelementtivalikoimaa: artikkeliruudukoita, tuotekortteja, edistyneitä gallerioita ja slider-objekteja.

Lisäosan asetukset

WPBakery toimii paitsi sivujen, myös artikkeleiden ja mukautettujen sisältötyyppien kanssa. Mene kohtaan Asetukset → WPBakery Page Builder ja valitse sisältötyypit, joissa tarvitset builderia.

WPBakeryn asetussivu, jossa sisältötyypin valinta

Lisäosa näyttää automaattisesti kaikki teemaan rekisteröidyt sisältötyypit: sivut, artikkelit, portfoliot, suosittelut, WooCommerce-tuotteet ja bbPress-foorumit. Valitse tarvitsemasi ja tallenna.

Mistä WPBakeryn saa

WPBakery Page Builderia myydään CodeCanyonissa hintaan 59 dollaria, Regular-lisenssi yhdelle sivustolle elinikäisillä päivityksillä. Extended-lisenssi teeman tai lisäosan mukana paketointia varten maksaa enemmän.

Monet premium-teemat sisältävät WPBakeryn hinnassaan, joten ostaessasi saat builderin lisenssin ilman lisäkuluja. Jos valitset teemaa uuteen projektiin, WPBakeryn mukana tuleminen säästää 59 dollaria ja tuntikausia yhteensopivuustestausta.

Esimerkkisivu, joka on rakennettu WPBakery Page Builderilla

⁉️🤔 Usein kysytyt kysymykset

Ovatko Visual Composer ja WPBakery sama asia?

Kyllä. Vuonna 2017 Visual Composer -lisäosa nimettiin uudelleen WPBakery Page Builderiksi, jotta sekaannusta Visual Composer Website Builder -tuotteeseen (visualcomposer.com) vältettäisiin. Koodi ja toiminnallisuus pysyivät samoina; vain nimi vaihtui.

Tarvitseeko minun osata koodata?

Ei. Rakentaja on suunniteltu täysin koodittomaan käyttökokemukseen. Kokoat sivut valmiista lohkoista vetämällä ja pudottamalla. Tarvitset vain perustason WordPress-osaamista: lisäosan asentaminen, sivun luominen ja "Tallenna"-painikkeen napsauttaminen.

Toimiiko WPBakery minkä tahansa teeman kanssa?

Useimpien kanssa kyllä. Mutta integraation syvyys vaihtelee. Jotkin teemat eivät yksinkertaisesti häiritse rakentajaa, kun taas toiset lisäävät omia moduuleitaan, tyylejään ja ruudukoitaan. Ennen teeman ostamista tarkista kuvauksesta maininta "Yhteensopiva WPBakery Page Builderin kanssa".

Voinko käyttää WPBakerya usealla sivustolla?

Tavallinen Regular-lisenssi on $59 yhtä projektia varten. Kahta tai useampaa projektia varten osta erilliset lisenssit tai harkitse Extended-lisenssiä, jos aiot niputtaa lisäosan oman tuotteesi mukana.

Miten WPBakery eroaa Elementorista?

Elementor on uudempi rakentaja, jossa on laaja ilmainen versio ja moderni käyttöliittymä. WPBakery on koeteltu veteraani, joka on syvälle integroitunut ThemeForest-ekosysteemiin: sadat teemat toimitetaan sen kanssa. Niiden välillä valitseminen riippuu käyttöliittymämieltymyksistä ja omasta teemastasi.

Kannattaako WPBakery vuonna 2026

Jos teemasi sisältää jo WPBakeryn, käytä sitä. Se on kypsä työkalu, jota päivitetään säännöllisesti ja jolla on valtava lisäosakirjasto. Jos valitset teemaa puhtaalta pöydältä, katso, kumpi rakentaja tuntuu mukavammalta päivittäisessä työssäsi, eikä niinkään näyttäviä vertailuja. Sekä WPBakerylla että Elementorilla voi rakentaa ammattimaisen sivuston. Ratkaiseva tekijä on se, kumman käyttöliittymä tuntuu mukavammalta työskennellä, sillä sinä olet se, joka niitä sivuja muokkaa.