Kuinka lisätä lyhytkoodeja Slider Revolutioniin – Qode Interactive

Tämä artikkeli on osa jatkuvaa Slider Revolution -oppituntisarjaamme. Löydät kaikki tämän sarjan artikkelit kattavasta Slider Revolution Guide -oppaastamme.

Yksi WordPressin hienoista asioista on, että se käyttää näitä pieniä asioita, joita kutsutaan lyhytkoodeiksi auttaa käyttäjiä lisäämään kaikki hämmästyttävät elementit verkkosivustoonsa. Ne ovat käteviä, kevyitä, helppokäyttöisiä ja erittäin tärkeitä kaikille WordPress-järjestelmänvalvojille. Joten tänään aiomme puhua kuinka lisätä lyhytkoodeja Slider Revolutioniin.

Mitä ovat lyhytkoodit?

WordPressissä lyhytkoodit ovat pieniä koodinpätkiä, jotka voidaan sijoittaa verkkosivustosi taustajärjestelmään tietyn elementin, toiminnon tai suunnitteluominaisuuden lisäämiseksi. Niitä voidaan käyttää lisäämään gallerioita, videoita, asetteluelementtejä, sivuosia kuvakkeilla tai kuvilla, infografioita, kuten ympyräkaavioita, laskureita jne. Tietysti niitä voidaan käyttää myös liukusäätimille. Premium WordPress-teemat yleensä sisältää suuren valikoiman mukautettuja lyhytkoodeja, jotka käyttäjät voivat lisätä sivuilleen – tai liukusäätimiä – vain muutamalla napsautuksella.

Miksi lisätä lyhytkoodeja Slider Revolutioniin?

Slider Revolutionilla on lähes loputtomat luovat mahdollisuudet. Silti joskus on helpompaa kopioida aiemmin muotoiltu lyhytkoodi liukusäätimeen kuin rakentaa tasot itse tyhjästä. Ajattele vain sitä: kun haluat luoda monimutkaisen elementin Slider Revolutionissa, voit tehdä sen käyttämällä useita kerroksia, jotka menevät päällekkäin ja muodostavat kyseisen elementin. Tämä tarkoittaa kuitenkin myös sinun on animoitava jokainen kerros erikseen, vaikka haluaisitkin, että kaikilla on sama animaatio. Jos toisaalta käytät aiemmin tyyliteltyä lyhytkoodia ja lisäät sen liukusäätimeen tasona, sinun ei tarvitse käydä läpi kaikkea sitä vaivaa. On selvää, että tämä menetelmä säästää valtavasti aikaa, joten katsotaanpa kuinka lisätä lyhytkoodeja Slider Revolutioniin.

Kuinka lisätä lyhytkoodeja liukusäätimeen

Ennen kuin aloitat, sinun pitäisi tietysti valitse lyhytkoodi, jota haluat käyttää, ja testaa sitä, vain varmistaaksesi, että se sopii tarpeisiisi. Käytä lyhytkoodia taustajärjestelmässäsi ja lisää se jollekin satunnaiselle testisivulle. Voit sitten kopioida sen tekstieditoritilassa ja liittää sen liukusäätimeen – mutta siitä lisää myöhemmin.

Goodwish-teemamme voi toimia hyvänä esimerkkinä lyhytkoodien käyttämisestä liukusäätimissä. Erityisesti Ecology Home, kuten alla:

Tämänkaltainen voitaisiin varmasti rakentaa käyttämällä sivun lyhytkoodeja ilman lisäosaa, mutta halusimme animoida sen ja huomasimme Slider Revolutionin olevan täydellinen tähän.

Näemme, että liukusäätimen vasemmalla puolella on tekstiä ja CTA-painike (painikkeiden lisääminen Slider Revolutionissa on toinen suoraviivainen prosessi). Toisella puolellamme on infografiikkaelementti, jossa on animoitu laskuri. Tämä on lisätty mukautettuamme Ympyräkaavion lyhytkoodi, yhdistettynä tekstin yläpuolelle ja suorakaiteen muotoiseen taustaan. Tällainen elementti voidaan luoda Slider Revolutionissa kerros kerrokselta käyttämällä yhtä kerrosta ohuelle ympyrälle, toista kerrosta lihavoidulle, toista prosenttitasolle ja toista alla olevalle otsikkotekstille.

Joten meidän ei vain tarvitsisi lisätä neljää eri kerrosta, vaan meidän olisi myös animoitava ne yksitellen. Ympyrädiagrammin lyhytkoodilla on kuitenkin omat animaationsa, joten kun lisäät lyhytkoodin liukusäätimen työkehykseen, saat kaikki toiminnot sen mukana. Siinä on perus-/yleiset vaihtoehdot, kuten Keskitekstin tyyppi jossa voit valita prosenttiosuuden ja otsikon välillä; sen alapuolella meillä on kenttä prosenttiarvon arvoa varten ja kolmas on otsikon asettaminen ympyrän alle. Jos et halua säilyttää ennalta määritettyä tyyliä, voit valita oman otsikkotunnisteen. Siellä on myös vaihtoehto tekstin lisäämiseen, mutta esimerkissämme liukusäädin ei käyttänyt mitään.

Ympyräkaavioiden lyhytkoodissa on erillinen ”Design Options” -välilehti. Täällä voit valitse elementille haluamasi värit. Voit myös muuttaa kokoja ja marginaalia kaavion alla, jos et pidä oletusasetuksista.

Kun olet määrittänyt kaikki lyhytkoodisi elementit, ja myös tarkistanut sen live-sivulta, voit kopioida koodin vaihtamalla tekstinmuokkaustilaan. Meidän tapauksessamme koodi on [edgtf_pie_chart type_of_central_text=”percent” percent=”90″ title=”Raised So Far” active_color=”#ffffff” inactive_color=”#f6cd7d” title_color=”#ffffff” percent_color=”#ffffff”].

Nyt on aika lisätä lyhytkoodi liukusäätimeen. Liitä se vain tekstikerrokseen Slider Revolutionissa ja aseta tasoasetukset kuten minkä tahansa muun tason asetukset.

Ja siinä on melkein kaikki. Tekstikerroksen lyhytkoodi muuttuu Goodwish-teeman esimerkissämme olevaksi infografiikkaelementiksi, ja mikä tahansa muu lyhytkoodi, jota päätät käyttää, tekee samoin.

Tiivistettynä

Lyhytkoodien lisääminen Slider Revolution -liukusäätimiin voi olla erittäin hyödyllistä tapauksissa, joista keskustelimme tänään. Kuten näimme, se säästää paljon aikaa, jonka muuten hukkaat erillisten tasojen luomiseen, ja saat täyden hallinnan tyylistä ja mukauttamisesta. Sinun tarvitsee vain löytää sinulle toimiva lyhytkoodi ja muokata sitä hieman tarpeidesi mukaan.