{"id":371437,"date":"2023-04-07T16:17:00","date_gmt":"2023-04-07T13:17:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371437"},"modified":"2023-04-07T16:17:06","modified_gmt":"2023-04-07T13:17:06","slug":"kuinka-luoda-askelkulku-elementor-process-widgetin-avulla","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-luoda-askelkulku-elementor-process-widgetin-avulla\/","title":{"rendered":"Kuinka luoda askelkulku Elementor Process Widgetin avulla"},"content":{"rendered":"\n<p>Olipa verkkosivustosi mink\u00e4 tyyppinen tahansa, laadukkaan sis\u00e4ll\u00f6n lis\u00e4ksi on t\u00e4rke\u00e4\u00e4 pysty\u00e4 n\u00e4ytt\u00e4m\u00e4\u00e4n se houkuttelevalla tavalla. Onneksi monet ty\u00f6kalut antavat meille mahdollisuuden <strong>jakaa monenlaisia \u200b\u200btietoja luovasti<\/strong>. Voit <a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-lisata-elementor-parallax-tehostetta-nopeasti-ja-helposti\/\" title=\"lis\u00e4t\u00e4 parallaksitehosteen\">lis\u00e4t\u00e4 parallaksitehosteen<\/a> korostaaksesi sivustosi nykyaikaista s\u00e4vy\u00e4, <a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-luoda-kytkimia-ja-harmonikoita-wordpressissa\/\" title=\"k\u00e4ytt\u00e4\u00e4 valitsimia ja harmonikoita\">k\u00e4ytt\u00e4\u00e4 valitsimia ja harmonikoita<\/a> parantaaksesi sis\u00e4lt\u00f6rakennetta, ja prosessiwidgetit ovat arvokkaita, koska niiden avulla voimme n\u00e4ytt\u00e4\u00e4 monimutkaisen tiedon selke\u00e4ll\u00e4, mielenkiintoisella ja mukaansatempaavalla tavalla.<\/p>\n<p>Jos sinulla on sis\u00e4lt\u00f6\u00e4, joka edellytt\u00e4\u00e4 jonkinlaisen prosessin n\u00e4ytt\u00e4mist\u00e4, on t\u00e4rke\u00e4\u00e4 pysty\u00e4 jakamaan se k\u00e4ytt\u00e4jillesi yksinkertaisesti, selke\u00e4sti ja ytimekk\u00e4\u00e4sti, mutta et kuitenkaan menet\u00e4 siihen liittyvi\u00e4 t\u00e4rkeit\u00e4 yksityiskohtia. Verkkokaupat pit\u00e4v\u00e4t prosessiwidgeti\u00e4 arvokkaana, koska sen avulla voidaan <strong>n\u00e4ytt\u00e4\u00e4 verkko-ostojen prosessi vaihe vaiheelta, yritykset voivat jakaa, milt\u00e4 ty\u00f6llist\u00e4mismenettely n\u00e4ytt\u00e4\u00e4 yrityksess\u00e4\u00e4n<\/strong>, l\u00e4\u00e4ketieteelliset verkkosivustot voivat <strong>esitell\u00e4 paranemisprosessia vaiheittain<\/strong>, mink\u00e4 tahansa ty\u00f6nkulun kautta. voidaan esitt\u00e4\u00e4 visuaalisesti vaiheittain \u2013 mahdollisuudet ovat rajattomat.<\/p>\n<p>T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4mme sinulle, kuinka voit helposti m\u00e4\u00e4ritt\u00e4\u00e4 ja mukauttaa prosessi-widgetin verkkosivustollasi. Pysy kuulolla lukeaksesi lis\u00e4\u00e4 aiheesta:<\/p>\n<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/colSjAmnAQU\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Qi-lis\u00e4osat Elementor-prosessiwidgetiin<\/h2>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/?campaign=ProcessWidget&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi Addons for Elementor<\/a> on tehokas, monipuolinen ja <strong>eritt\u00e4in helppok\u00e4ytt\u00f6inen ty\u00f6kalu<\/strong>, joka lis\u00e4\u00e4 verkkosivustollesi toiminnallisuuden lis\u00e4ksi eleganssia. T\u00e4ll\u00e4 hetkell\u00e4 t\u00e4m\u00e4 ty\u00f6kalu on verkon <strong>laajin ilmaisten lis\u00e4osien kokoelma, ja se sis\u00e4lt\u00e4\u00e4 60 ilmaista widgeti\u00e4<\/strong>, joiden avulla jopa aloittelijat voivat helposti rikastuttaa verkkosivustojaan tehokkailla elementeill\u00e4 ilman koodaustaitoa. Ilmaisten widgetien lis\u00e4ksi l\u00f6yd\u00e4t uskomattomia yli 40 premium-tuotteita.<\/p>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/process\/?campaign=ProcessWidget&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Maksuton Prosessi<\/a> -widget sis\u00e4lt\u00e4\u00e4 <strong>runsaasti mukautusvaihtoehtoja, ja sen avulla voit luoda kauniita n\u00e4ytt\u00f6j\u00e4 kaikenlaisista ty\u00f6nkuluista ja prosesseista<\/strong>, jotka vastaavat saumattomasti sek\u00e4 verkkosivustosi tarpeita ett\u00e4 tyyli\u00e4.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d783b50.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d783b50.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>Kun olet vet\u00e4nyt prosessi-widgetin sivuun, saat sen oletusn\u00e4kym\u00e4n, jota voit muokata. On t\u00e4rke\u00e4\u00e4 huomata, ett\u00e4 widget k\u00e4ytt\u00e4\u00e4 teemasi k\u00e4ytt\u00e4mi\u00e4 fontteja, joten jos haluat yhten\u00e4isyytt\u00e4 t\u00e4h\u00e4n kohtaan, sinun ei tarvitse muuttaa sit\u00e4.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d96dc04.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d96dc04.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>Prosessi-widgetin asetukset ovat Sis\u00e4lt\u00f6- ja Tyyliasetukset. T\u00e4\u00e4ll\u00e4 <strong>valitsemme mink\u00e4 elementin haluamme prosessiwidgetiin ja p\u00e4\u00e4t\u00e4mme milt\u00e4 se kaikki n\u00e4ytt\u00e4\u00e4 tyylin suhteen<\/strong>. Mukautusasetuksia on paljon, mutta ne ovat niin hyvin j\u00e4rjestettyj\u00e4, ett\u00e4 sinun on eritt\u00e4in helppo kokeilla ja kokeilla vaihtoehtoja.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36db5fdc3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36db5fdc3.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<h2>Prosessi-widget \u2013 Sis\u00e4lt\u00f6-v\u00e4lilehti<\/h2>\n<p>T\u00e4ss\u00e4 ovat yleiset asetukset, animaatioasetukset, prosessin asettelu ja hy\u00f6dyllinen kehitt\u00e4j\u00e4ty\u00f6kalu, mutta my\u00f6s <strong>ohje, josta l\u00f6yd\u00e4t ohjeita ja tukea lis\u00e4osan kirjoittajalta itselt\u00e4\u00e4n<\/strong>.<\/p>\n<h3>Yleiset vaihtoehdot<\/h3>\n<p>Ensimm\u00e4inen asia, jonka tarvitset, on itse widgetin yleiset asetukset.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36ddf0499.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36ddf0499.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>T\u00e4ss\u00e4 valitsemme <strong>sarakkeiden lukum\u00e4\u00e4r\u00e4n ja jos haluat kaikkien kohteiden olevan yhdell\u00e4 rivill\u00e4, valitset sarakkeiden lukum\u00e4\u00e4r\u00e4n kohteiden lukum\u00e4\u00e4r\u00e4n<\/strong>. Muussa tapauksessa, jos asetat v\u00e4hemm\u00e4n sarakkeita kuin kohde, kohteet ovat 2 tai useammalla rivill\u00e4 tai jos valitset enemm\u00e4n sarakkeita kuin kohde, riville j\u00e4\u00e4 tyhj\u00e4 tila.<\/p>\n<p>Tied\u00e4t luultavasti heti, kuinka monta tuotetta haluat, kun aloitat t\u00e4m\u00e4n rakentamisen, joten haluan m\u00e4\u00e4ritt\u00e4\u00e4 sen heti, ja tietysti voit my\u00f6s muokata n\u00e4it\u00e4 asetuksia my\u00f6hemmin.<\/p>\n<p>T\u00e4rke\u00e4 asetus on <strong>Columns Responsive<\/strong>, jossa <strong>s\u00e4\u00e4d\u00e4mme, milt\u00e4 prosessimme n\u00e4ytt\u00e4\u00e4 erikokoisilla laitteilla<\/strong>. Voit valita ennalta m\u00e4\u00e4ritetyn tai mukautetun, se on valintasi.<\/p>\n<p>Kokemuksemme perusteella koko 618\u2013768 kuvapistett\u00e4 n\u00e4ytt\u00e4\u00e4 parhaimmalta, kun se k\u00e4ytt\u00e4\u00e4 yht\u00e4 saraketta, joten laitamme sen n\u00e4in.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e0a9b27.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e0a9b27.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p><strong>Kohteet tietysti lis\u00e4\u00e4v\u00e4t kohteen prosessiin<\/strong>. Voit lis\u00e4t\u00e4 niin monta kuin tarvitset. On mahdollisuus sek\u00e4 <strong>kopioida kohde ett\u00e4 poistaa se<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e2be51a.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e2be51a.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p><strong>Jokainen tuote r\u00e4\u00e4t\u00e4l\u00f6id\u00e4\u00e4n erikseen<\/strong>, sen erityiset ominaisuudet sy\u00f6tet\u00e4\u00e4n ja <strong>kullekin tuotteelle voidaan asettaa tiettyj\u00e4 kohteita siten, ett\u00e4 jokainen tuote n\u00e4ytt\u00e4\u00e4 erilaiselta<\/strong>. Jos haluat kuitenkin, <strong>ett\u00e4 kaikki kohteet n\u00e4ytt\u00e4v\u00e4t samalta, m\u00e4\u00e4rit\u00e4t niiden tyylin Tyyli-asetuksissa, et jokaisessa kohteessa erikseen<\/strong>. Kaikki tyyliasetuksissa asetettu koskee kaikkia prosessikohteita, paitsi niit\u00e4, joissa itse alkio on asetettu hieman eri tavalla suhteessa tyyliasetuksiin. Kaikki on sinulle selv\u00e4\u00e4, kun k\u00e4ymme asetukset l\u00e4pi.<\/p>\n<p>Otsikko- ja <strong>Teksti<\/strong> -kentti\u00e4 k\u00e4ytet\u00e4\u00e4n <strong>tekstin<\/strong> <strong>kirjoittamiseen, joka liittyy tiettyyn prosessivaiheeseen<\/strong>. Tietenkin t\u00e4ss\u00e4 tapauksessa on luonnollista, ett\u00e4 jokaisella vaiheella on eri otsikko ja kuvaus, joten t\u00e4m\u00e4 on ainoa paikka, johon voit sy\u00f6tt\u00e4\u00e4 n\u00e4m\u00e4 arvot.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e46aed3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e46aed3.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>T\u00e4lt\u00e4 se n\u00e4ytt\u00e4\u00e4, kun se korvataan tekstill\u00e4mme.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e68d676.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e68d676.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p><strong>Tuotevaihtoehdot viittaavat tuotteen siihen osaan, joka ei ole otsikko ja kuvaus<\/strong>. K\u00e4yt\u00e4mme <strong>er\u00e4poikkeamaa yhden tuotteen sijoittamiseen<\/strong>. Ympyr\u00e4, jossa on yksikk\u00f6 ja seuraavaan vaiheeseen johtava viiva, ovat osa yht\u00e4 alkiota ja <strong>siirret\u00e4\u00e4n n\u00e4it\u00e4 elementtej\u00e4 alas tai yl\u00f6s<\/strong> s\u00e4\u00e4t\u00e4m\u00e4ll\u00e4 Item Offset. Kuten kuvasta n\u00e4kyy, olemme asettaneet ensimm\u00e4iselle tuotteelle jonkin verran siirtym\u00e4\u00e4 ja se on nyt hieman seuraavan tuotteen tason alapuolella.<\/p>\n<p>Kohteen offset -vaihtoehto on my\u00f6s Tyyli-asetuksissa, jotka, kuten mainitsimme, kaikki siell\u00e4 asetettu p\u00e4tee kaikkiin prosessielementteihin. Siksi, jos haluat kaikkien kohteiden olevan eri tasossa jokaiselle kohteelle, asetat siirtym\u00e4n erikseen.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e95bd4c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e95bd4c.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p><strong>Item Holder Size<\/strong> on sen kent\u00e4n koko, jossa se on t\u00e4ll\u00e4 hetkell\u00e4 1 eli askelm\u00e4\u00e4r\u00e4, ja my\u00f6hemmin katsotaan mit\u00e4 muuta t\u00e4\u00e4lt\u00e4 l\u00f6ytyy. (T\u00e4m\u00e4 vaihtoehto l\u00f6ytyy my\u00f6s tyylivaihtoehdoista, jos haluamme, ett\u00e4 kaikki tavaratelineet ovat samankokoisia).<\/p>\n<p><strong>Kohteiden typografia<\/strong> viittaa askelm\u00e4\u00e4r\u00e4n typografisiin ominaisuuksiin.<\/p>\n<p>Taustalla m\u00e4\u00e4ritet\u00e4\u00e4n <strong>esineelle sopiva v\u00e4ri tai<\/strong> <strong>tausta<\/strong>. Voimme my\u00f6s asettaa gradienttitaustan. Jos haluamme, ett\u00e4 kaikilla kohteilla on sama tausta, s\u00e4\u00e4d\u00e4mme sit\u00e4 Tyyliasetuksissa, jos haluamme taustan olevan erilainen eri kohteelle, s\u00e4\u00e4d\u00e4mme sit\u00e4 kohteen asetusten kautta.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36eb93a9c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36eb93a9c.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>Toistaiseksi lis\u00e4\u00e4mme vain taustav\u00e4rin.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36edc20b7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36edc20b7.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>Oletuksena kohteet n\u00e4ytet\u00e4\u00e4n ympyr\u00f6in\u00e4, mutta jos haluat neli\u00f6n tai muodon tietyill\u00e4 kulmilla <strong>Kohteen pidikkeen s\u00e4de<\/strong> on paikka, jossa voit s\u00e4\u00e4t\u00e4\u00e4 sit\u00e4. <strong>Kun arvo on 0, se on suorien kulmien neli\u00f6<\/strong>. Lis\u00e4\u00e4m\u00e4ll\u00e4 arvoja n\u00e4et kuinka kulmat muuttuvat. Jos poistat arvot, saat j\u00e4lleen ympyr\u00e4n. Kaikkien kulmien ei tarvitse olla samoja, voit asettaa kullekin kullelle eri arvon.<\/p>\n<p><strong>Reunuksen tyyppi, leveys ja v\u00e4ri viittaavat reunakohteisiin<\/strong>. Kun et halua reunaa, Reuna on Tyyppi Ei mit\u00e4\u00e4n.<\/p>\n<p>Sinulla on my\u00f6s kaikki n\u00e4m\u00e4 asetukset tyyliasetuksissa, jos haluat kaikkien kohteiden olevan samoja.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f07dd7e.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f07dd7e.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>N\u00e4imme juuri kuinka siirtym\u00e4\u00e4 muutetaan, ja nyt meill\u00e4 on kaksi vaihtoehtoa, joiden avulla voimme muuttaa vain seuraavaan prosessiin johtavan linjan sijaintia. <strong>Viivan yl\u00e4poikkeamaa<\/strong> k\u00e4ytet\u00e4\u00e4n <strong>siirt\u00e4m\u00e4\u00e4n viivan sijaintia (yl\u00f6s\/alas)<\/strong> ja <strong>linjan kiertoa k\u00e4ytet\u00e4\u00e4n sen kiert\u00e4miseen<\/strong>. Kuten alla olevasta huomautuksesta n\u00e4et, olemme k\u00e4\u00e4nt\u00e4neet viivaa, eik\u00e4 se ole en\u00e4\u00e4 suorassa kulmassa esineeseen n\u00e4hden. Sinulla on vain n\u00e4m\u00e4 asetukset itse kohteessa.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f3073fc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f3073fc.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>Alussa missasimme tarkoituksella <strong>Icon Type -vaihtoehdon<\/strong>, jonka avulla voimme <strong>lis\u00e4t\u00e4 kirjastosta kuvakkeen kohteeseen tai ladata SVG-kuvakkeen<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f658152.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f658152.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>Kiinnit\u00e4 huomiota siihen, mit\u00e4 seuraavaksi tapahtuu, <strong>vaiheiden j\u00e4rjestysluku ei en\u00e4\u00e4 kirjoiteta kohteen keskelle, vaan erillisen\u00e4 lis\u00e4ympyr\u00e4n\u00e4<\/strong>.<\/p>\n<p>Nyt <strong>kohteen typografia<\/strong> ja <strong>nimikkeen v\u00e4ri viittaavat itse kuvakkeeseen<\/strong>. T\u00e4\u00e4ll\u00e4 s\u00e4\u00e4d\u00e4mme kunkin kuvakkeen koon (typografian kokovaihtoehdossa) ja v\u00e4rin.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f84bdde.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f84bdde.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>Toinen asia, jota emme ole tarkastelleet yksityiskohtaisemmin yll\u00e4, on kohteen taustakuva, kuten esimerkin toisen kohteen tapauksessa:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fac84a2.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fac84a2.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p><strong>Jokaisessa taustakuvassa on tiettyj\u00e4 asetuksia<\/strong>, jotka koskevat kuvan sijoittelua, sen kokoa ja sit\u00e4, tuleeko se olemaan pelkk\u00e4 tausta vai vieritystehoste (liitevaihtoehto). Sinulla on kaikki n\u00e4m\u00e4 vaihtoehdot, kun k\u00e4yt\u00e4t taustakuvaa.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fe223dd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fe223dd.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>Yleisten asetusten asettamisen j\u00e4lkeen prosessi-widget n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370092b5f.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370092b5f.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<h3>N\u00e4yt\u00e4 Animaatioasetukset<\/h3>\n<p>Prosessiwidgetiss\u00e4 voi olla animaatio \u2013 <strong>kohteet latautuvat per\u00e4kk\u00e4in ja n\u00e4kyv\u00e4t samassa j\u00e4rjestyksess\u00e4<\/strong>, ja t\u00e4m\u00e4 on paikka, jota s\u00e4\u00e4d\u00e4mme halusimme sit\u00e4 tai emme.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37034cbd2.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37034cbd2.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<h3>Asetteluvaihtoehdot<\/h3>\n<p>Asetteluvaihtoehtoja on kaksi \u2013 <strong>vaaka- ja pystyn\u00e4kym\u00e4 prosessista<\/strong>. Toistaiseksi olemme n\u00e4ytt\u00e4neet kaiken vaakatasossa. Jos kuitenkin valitset pystyn\u00e4yt\u00f6n, vaihtoehdot ovat t\u00e4sm\u00e4lleen samat. <strong>Ainoa asia, johon on kiinnitett\u00e4v\u00e4 huomiota, on sarakkeiden lukum\u00e4\u00e4r\u00e4<\/strong> (puhuimme t\u00e4st\u00e4 yleisiss\u00e4 vaihtoehdoissa). Pystysuorassa prosessissa on aina yksi sarake, jos halutaan, ett\u00e4 kohteet j\u00e4rjestet\u00e4\u00e4n toistensa alle samassa sarakkeessa.<\/p>\n<p>Koska asetimme esimerkillemme kolme saraketta, koska meill\u00e4 on 3 kohdetta, vaihtamatta yhteen sarakkeeseen widgettimme n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3706c21f6.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3706c21f6.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>Tietenkin, jos perustamme yhden sarakkeen, kaikki on niin kuin sen pit\u00e4isi olla:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3709b51cf.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3709b51cf.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<h3>Kehitysty\u00f6kalut<\/h3>\n<p>T\u00e4m\u00e4 vaihtoehto antaa meille mahdollisuuden <strong>n\u00e4hd\u00e4 widgetin lyhytkoodimuodossa,<\/strong> jos tarvitsemme sit\u00e4.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370d32300.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370d32300.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>Kuten mainitsimme, t\u00e4\u00e4lt\u00e4 voimme <strong>l\u00f6yt\u00e4\u00e4 lis\u00e4osien kirjoittajan dokumentaatiota ja apua<\/strong> itse widgetille.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371118542.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371118542.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<h2>Prosessi-widget \u2013 Tyyli-v\u00e4lilehti<\/h2>\n<p>Tyyli &#8211; v\u00e4lilehti tarjoaa <strong>vaihtoehtoja prosessin osien tyylitt\u00e4mist\u00e4 varten<\/strong>. Kuten olemme jo maininneet, <strong>kaikki t\u00e4ss\u00e4 asetettu koskee kaikkia prosessimme kohteita, paitsi niit\u00e4, joissa itse kohteelle on asetettu jotain erilaista<\/strong>.<\/p>\n<h3>Tyylivaihtoehdot<\/h3>\n<p>T\u00e4\u00e4lt\u00e4 l\u00f6yd\u00e4t erilaisia \u200b\u200btoistuvia vaihtoehtoja itse tuotteista, kuten v\u00e4reihin, typografiaan, offseteihin liittyvi\u00e4.<\/p>\n<p>Ainoa asia, joka ei ole kohteissa, on <strong>Tasaus<\/strong>, joka m\u00e4\u00e4ritt\u00e4\u00e4, <strong>kuinka otsikko ja teksti keskitet\u00e4\u00e4n<\/strong>.<\/p>\n<p>Jos haluat kaikkien kohteiden olevan samoja, voit s\u00e4\u00e4t\u00e4\u00e4 tyyli\u00e4 t\u00e4\u00e4ll\u00e4. Meid\u00e4n tapauksessamme s\u00e4\u00e4timme enimm\u00e4kseen kohteita, koska meill\u00e4 on erilaisia \u200b\u200btaustav\u00e4rej\u00e4, eri kokoja ja paikkoja. Asetamme t\u00e4h\u00e4n tuotteen <strong>v\u00e4rin<\/strong> eli kuvakkeen v\u00e4rin, joka oli oletuksena harmaa ja on nyt musta.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371766e2b.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371766e2b.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<h3>Viivatyyliasetukset<\/h3>\n<p>Prosessilinjan tyylitelm\u00e4 \u2013 meill\u00e4 on <strong>useita tyyppej\u00e4<\/strong>, voimme s\u00e4\u00e4t\u00e4\u00e4 v\u00e4ri\u00e4 ja paksuutta.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3719cdd73.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3719cdd73.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<h3>V\u00e4lityyli<\/h3>\n<p><strong>V\u00e4lily\u00f6nti, v\u00e4lily\u00f6nti alaotsikon yl\u00e4puolella, tekstin yl\u00e4puolella ja t\u00e4ytt\u00f6 tekstin ymp\u00e4rill\u00e4<\/strong>. T\u00e4m\u00e4 tekstin ymp\u00e4rill\u00e4 oleva t\u00e4ytt\u00f6 jollakin tavalla &quot;kaventaa&quot; sis\u00e4lt\u00f6\u00e4 asettamalla t\u00e4yte kentt\u00e4\u00e4n, jossa teksti\u00e4 ei voida n\u00e4ytt\u00e4\u00e4.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371c3e0ee.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371c3e0ee.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<h3>Lis\u00e4tyyli<\/h3>\n<p>Meill\u00e4 on n\u00e4m\u00e4 asetukset <strong>vain, kun tuotteemme sis\u00e4lt\u00e4\u00e4 lis\u00e4tyn kuvakkeen, eli kun meill\u00e4 on t\u00e4m\u00e4 lis\u00e4kentt\u00e4, jossa numero sijaitsee<\/strong>. Asetukset viittaavat siihen numeroon ja kenttiin, jossa se sijaitsee.<\/p>\n<p><strong>Lis\u00e4pitimen v\u00e4ri<\/strong> on sen kent\u00e4n v\u00e4ri, jossa numero ja <strong>lis\u00e4pitimen typografia<\/strong> liittyv\u00e4t kaikki itse numeron ulkoasun s\u00e4\u00e4t\u00e4miseen. <strong>Lis\u00e4pitimen koko<\/strong> on kent\u00e4n koko ja Lis\u00e4pitimen asennon avulla voimme muuttaa kent\u00e4n sijaintia.<\/p>\n<p>Voimme lis\u00e4t\u00e4 taustan my\u00f6s tavalliselle tuotekent\u00e4lle, mutta emme voi lis\u00e4t\u00e4 sit\u00e4 jokaiselle kent\u00e4lle erikseen, vaan sit\u00e4 sovelletaan kaikkiin kenttiin yleisesti. Lis\u00e4simme taustakuvan.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371ec0061.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371ec0061.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>Katsotaan ymm\u00e4rr\u00e4mmek\u00f6 toisiamme hyvin ja n\u00e4emme esityksen perusteella kuinka tietyt prosessit tehtiin. T\u00e4m\u00e4 voi auttaa sinua luomaan omasi ja tied\u00e4t heti, mihin asetat mit\u00e4.<\/p>\n<p>Olemme jo n\u00e4ytt\u00e4neet esimerkin horisontaalisesta. Ensi silm\u00e4yksell\u00e4 voimme huomata, ett\u00e4 meill\u00e4 on 3 saraketta ja niiss\u00e4 kohteet ovat kuvakkeita \u2013 lis\u00e4kentt\u00e4 numerolla kertoo, ett\u00e4 kohde on kuvake eik\u00e4 kuva, koska sanoimme, ett\u00e4 vasta silloin se ilmestyy .<\/p>\n<p>Koska kohteilla on eri v\u00e4rej\u00e4, tied\u00e4mme, ett\u00e4 n\u00e4m\u00e4 asetukset on tehty itse tuotteissa, ei yleisiss\u00e4 vaihtoehdoissa.<\/p>\n<p>Saatamme my\u00f6s huomata, ett\u00e4 offset on s\u00e4\u00e4dett\u00e4viss\u00e4, koska kaikki kohteet eiv\u00e4t ole samassa tasossa.<\/p>\n<p>Kaikilla kuvakkeilla ja teksteill\u00e4 on samat v\u00e4rit, jotka kertovat meille, ett\u00e4 t\u00e4m\u00e4 on asetettu Tyyli-v\u00e4lilehden asetuksiin.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37205efd6.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37205efd6.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>Toinen esimerkki, vaikka se n\u00e4ytt\u00e4\u00e4 monimutkaisemmalta, on viel\u00e4 helpompi toteuttaa. T\u00e4ss\u00e4 sivun rivi on jaettu kahteen osaan. Vasemmalla on kuva ja oikealla prosessi.<\/p>\n<p>Prosessilla on pystysuora asettelu, mik\u00e4 tarkoittaa, ett\u00e4 prosessin sarakkeiden lukum\u00e4\u00e4r\u00e4 on 1 ja ett\u00e4 kaikki 5 kohdetta sijoitetaan toistensa alle.<\/p>\n<p>Kaikki kohteet on j\u00e4rjestetty symmetrisesti toistensa alle, mik\u00e4 tarkoittaa, ett\u00e4 offsetia ei ole asetettu.<\/p>\n<p>Kaikilla teksteill\u00e4 on samat ominaisuudet, joten tyyli asetetaan Tyyli-v\u00e4lilehdell\u00e4.<br \/>\nT\u00e4ss\u00e4 n\u00e4emme, ett\u00e4 jokaisella tuotteella on taustakuva (ja ett\u00e4 numerolle ei ole lis\u00e4kentti\u00e4), mutta voimme my\u00f6s huomata, ett\u00e4 numero ei ole kohteen keskell\u00e4, kuten oletusarvoisesti.<\/p>\n<p>On temppu, jonka avulla voit piilottaa numeron, jos et halua numeron n\u00e4kyv\u00e4n. Sinun tarvitsee vain asettaa kohteen typografian kooksi 0px Yleisten asetusten Tyyli-v\u00e4lilehdell\u00e4. T\u00e4ll\u00e4 tavalla numeroa ei n\u00e4ytet\u00e4.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3725561cd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3725561cd.jpg\" alt=\"Kuinka luoda askelkulku Elementor Process Widgetin avulla\"><\/a><\/p>\n<p>T\u00e4st\u00e4 voi olla hy\u00f6ty\u00e4, jos et halua n\u00e4ytt\u00e4\u00e4 prosessia, vaan k\u00e4yt\u00e4t t\u00e4t\u00e4 widgeti\u00e4 muihin tarpeisiisi ja numeron tai vaiheiden n\u00e4ytt\u00e4minen h\u00e4iritsee sinua.<\/p>\n<h2>Tiivistettyn\u00e4<\/h2>\n<p>Prosessiwidgetin lis\u00e4\u00e4minen verkkosivustollesi Elementorin Qi Addons -sovelluksella ei ole vain helppoa, vaan my\u00f6s hauskaa ja antaa sinun ilmaista my\u00f6s luovuutesi. Suosittelemme sinua tutkimaan jatkuvasti tapoja, joilla voit rikastuttaa verkkosivustosi suunnittelua ja toimintoja. Jos verkkosivustosi keskittyy p\u00e4\u00e4asiassa visuaaliseen sis\u00e4lt\u00f6\u00f6n \u2013 saatat olla my\u00f6s utelias saamaan lis\u00e4tietoja <a href=\"https:\/\/themewp.inform.click\/fi\/elementor-tayslevea-sivu-ja-rivi-selitetty-yksityiskohtaisesti\/\" title=\"t\u00e4ysleve\u00e4n sivun ja rivin\">t\u00e4ysleve\u00e4n sivun ja rivin<\/a> lis\u00e4\u00e4misest\u00e4 WordPress-verkkosivustollesi tai jos haluat saavuttaa paremman sis\u00e4lt\u00f6rakenteen, saatat olla kiinnostunut <a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-luoda-wordpress-valilehtia-qi-lisaosilla-elementorille\/\" title=\"tiet\u00e4m\u00e4\u00e4n lis\u00e4\u00e4 WordPress-v\u00e4lilehdist\u00e4\">tiet\u00e4m\u00e4\u00e4n lis\u00e4\u00e4 WordPress-v\u00e4lilehdist\u00e4<\/a>. Kuten mainitsimme, Qi Addons sis\u00e4lt\u00e4\u00e4 60 ilmaista widgeti\u00e4, joten kokeileminen ja uusien mahdollisuuksien kokeileminen ei uhkaa budjettiasi, vaan voi vain innostaa sinua parantamaan verkkosivustoasi ja lis\u00e4\u00e4m\u00e4\u00e4n siihen hy\u00f6dyllisi\u00e4 ominaisuuksia.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nopea ja helppo tapa lis\u00e4t\u00e4 Elementor-prosessiwidget ja esitell\u00e4 askelkulku mink\u00e4 tahansa tyyppisill\u00e4 WordPress-verkkosivustoilla.<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[570],"tags":[843],"class_list":["post-371437","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpressin-perusteet","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/371437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=371437"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/371437\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=371437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=371437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=371437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}