{"id":367294,"date":"2023-03-04T16:13:00","date_gmt":"2023-03-04T13:13:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367294"},"modified":"2022-10-12T12:13:27","modified_gmt":"2022-10-12T09:13:27","slug":"hur-man-skapar-vaxlar-och-dragspel-i-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-skapar-vaxlar-och-dragspel-i-wordpress\/","title":{"rendered":"Hur man skapar v\u00e4xlar och dragspel i WordPress"},"content":{"rendered":"\n<p>Dragspel och v\u00e4xlar \u00e4r praktiska element som l\u00e4gger till mer funktionalitet till din sida, l\u00e5ter dig strukturera inneh\u00e5ll b\u00e4ttre och hj\u00e4lper till med den \u00f6vergripande organisationen av webbplatsen. <strong>Att l\u00e4gga till dem \u00e4r inte s\u00e4rskilt komplicerat men kan vara s\u00e4rskilt enkelt med r\u00e4tt verktyg<\/strong>.<\/p>\n<p>Det \u00e4r d\u00e4rf\u00f6r vi valde de anv\u00e4ndarv\u00e4nliga <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/?campaign=TogglesAccordions&#038;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi-till\u00e4ggen f\u00f6r Elementor<\/a> som inneh\u00e5ller ett <strong>brett utbud av anpassningsalternativ och \u00e4r otroligt l\u00e4tt att anv\u00e4nda<\/strong>. Detta plugin \u00e4r f\u00f6r n\u00e4rvarande den st\u00f6rsta samlingen av <strong>60 gratis widgets<\/strong> du kan anv\u00e4nda f\u00f6r att l\u00e4gga till mer funktionalitet till din webbplats. Det finns ocks\u00e5 en fantastisk samling av <strong>40+ premium Qi-widgets<\/strong>. Och det som ocks\u00e5 \u00e4r v\u00e4ldigt viktigt \u00e4r att det \u00e4r kompatibelt med alla WordPress-teman.<\/p>\n<h2>L\u00e4gga till dragspel och v\u00e4xla gratis widget med Qi-till\u00e4gg f\u00f6r Elementor<\/h2>\n<p>Qi-till\u00e4ggen l\u00e5ter dig <strong>helt anpassa dragspelen och v\u00e4xla stil till WordPress-temat du anv\u00e4nder<\/strong>, fr\u00e5n typsnitt till f\u00e4rger och kanter och allt d\u00e4remellan.<\/p>\n<p>F\u00f6r att bli inspirerad rekommenderar vi att du kollar in <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/accordions-and-toggles\/?campaign=TogglesAccordions&#038;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">widgetsidan<\/a>. Vi kommer att visa dig hur vi till\u00e4mpade det.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f0a5ca65.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-343047-633e6f0a5ca65.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<p>Den grundl\u00e4ggande uppfattningen om hur Elementor fungerar \u00e4r allt du beh\u00f6ver f\u00f6rst\u00e5 i det h\u00e4r avsnittet. Detta \u00e4r faktiskt en rad som inneh\u00e5ller tv\u00e5 kolumner med en bild i den v\u00e4nstra kolumnen och dragspel i den h\u00f6gra. <strong>Naturligtvis kan ett dragspel ta upp hela raden eller n\u00e5gon del av raden, enligt ditt behov<\/strong>.<\/p>\n<p>Innan vi forts\u00e4tter, l\u00e5t oss kolla upp n\u00e5gra grundl\u00e4ggande stilegenskaper som detta till\u00e4gg kommer med. S\u00e5 l\u00e5t oss b\u00f6rja fr\u00e5n Beteende. <strong>Tv\u00e5 typer av beteende \u00e4r m\u00f6jliga \u2013 dragspel<\/strong> d\u00e4r endast ett objekt kan vara \u00f6ppet vid en tidpunkt och <strong>v\u00e4xlar<\/strong> som till\u00e5ter mer \u00e4n ett objekt att vara \u00f6ppet samtidigt.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f0d359b6.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-343047-633e6f0d359b6.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<p><strong>Stilen kan ytterligare definieras med kanter och flera alternativ finns tillg\u00e4ngliga:<\/strong><\/p>\n<ul>\n<li>Standard \u2013 inga gr\u00e4nser<\/li>\n<li>F\u00f6rpackad \u2013 med b\u00e5rder,<\/li>\n<li>Border top \u2013 har bara kant p\u00e5 toppen ovanf\u00f6r rubriken<\/li>\n<li>Border Between- har bara gr\u00e4nsen mellan rubrik och beskrivning<\/li>\n<\/ul>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f10ce932.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-343047-633e6f10ce932.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<h2>Hur man l\u00e4gger till Accoridons och v\u00e4xlar med Qi-till\u00e4gg<\/h2>\n<p>Till att b\u00f6rja med kommer vi att st\u00e4lla in raden s\u00e5 att den delas i tv\u00e5 kolumner och l\u00e4gga till en bild i den v\u00e4nstra kolumnen, bara f\u00f6r att g\u00f6ra avsnittet mer visuellt tilltalande.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f143d6e6.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-343047-633e6f143d6e6.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<p>Efter att bilden har lagts till hittar vi widgeten Dragspel och v\u00e4xlar genom att skriva i s\u00f6kf\u00e4ltet eller genom att scrolla ner i menyn. N\u00e4r widgeten hittas <strong>klickar du helt enkelt p\u00e5 den, h\u00e5ller den och flyttar dit du vill placera det nya elementet<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f17f28ff.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-343047-633e6f17f28ff.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<p>Vi lade till widgeten Dragspel och v\u00e4xlar till h\u00f6ger p\u00e5 raden, och du kan se <strong>alla inst\u00e4llningar som \u00e4r relaterade till den till v\u00e4nster<\/strong>. Standardinst\u00e4llningarna f\u00f6r widgeten \u00e4r inst\u00e4llda p\u00e5 ett s\u00e5dant s\u00e4tt att <strong>texten och stilen automatiskt matchar temat du anv\u00e4nder<\/strong>, s\u00e5 om du inte ser n\u00e5got behov av att \u00e4ndra det kan du helt enkelt avsluta processen h\u00e4r, widgeten kommer att se ut som den h\u00f6rde naturligt till till temat.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f1aa77cc.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-343047-633e6f1aa77cc.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<p>N\u00e4sta sak du beh\u00f6ver st\u00e4lla in \u00e4r <strong>beteende och stil<\/strong>. Vi har redan n\u00e4mnt alternativen Beteende och Stil s\u00e5 att du kan st\u00e4lla in det som fungerar f\u00f6r dig h\u00e4r. F\u00f6r syftet med denna artikel valde vi alternativet Dragspel fr\u00e5n Beteende-menyn och Standardstil.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f1dc011b.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-343047-633e6f1dc011b.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<p>Det som m\u00e5ste g\u00f6ras nu \u00e4r att <strong>l\u00e4gga till objekt<\/strong>. Rulla ned f\u00f6r att hitta <strong>objektalternativen<\/strong>. Du kommer att m\u00e4rka tv\u00e5 sm\u00e5 ikoner i det \u00f6vre h\u00f6gra h\u00f6rnet p\u00e5 fliken Objekt. Den f\u00f6rsta \u00e4r f\u00f6r att <strong>kopiera ett befintligt f\u00f6rem\u00e5l<\/strong> och det <strong>lilla Xet n\u00e4sta \u00e4r f\u00f6r att ta bort ett f\u00f6rem\u00e5l<\/strong>. Under fliken Objekt finns <strong>knappen L\u00e4gg till ny<\/strong> som anv\u00e4nds f\u00f6r att l\u00e4gga till nya objekt. N\u00e4r du klickar f\u00f6r att ange ett nytt objekt m\u00e5ste du f\u00f6rst <strong>s\u00e4tta en rubrik och sedan skriva in texten i det angivna f\u00e4ltet nedan<\/strong>. Du kommer att m\u00e4rka m\u00e5nga alternativ som liknar de som erbjuds i olika textredigerare f\u00f6r att utforma och formatera texten. Vi rekommenderar att du ordnar texten och rubriken nu d\u00e5 du omedelbart f\u00e5r en f\u00f6rhandstitt p\u00e5 hur det kommer att se ut i slut\u00e4ndan.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f206ce5c.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-343047-633e6f206ce5c.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<p>N\u00e4r du har skrivit in texten kan du st\u00e4lla in <strong>inneh\u00e5llsh\u00f6jden<\/strong>. Det h\u00e4r alternativet <strong>h\u00e4nvisar till storleken p\u00e5 v\u00e4xlingsf\u00e4ltet<\/strong>. Om du st\u00e4ller in den p\u00e5 <strong>H\u00f6gsta<\/strong> f\u00f6rem\u00e5lsh\u00f6jd kommer varje f\u00f6rem\u00e5l att ha samma storlek som den st\u00f6rsta. Om du v\u00e4ljer alternativet <strong>Individuell objekth\u00f6jd<\/strong> kommer storleken p\u00e5 varje objekt att motsvara storleken p\u00e5 inneh\u00e5llet i den.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f234b68b.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-343047-633e6f234b68b.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<p>Om du vill <strong>\u00e4ndra standardikonerna som visas n\u00e4r du \u00f6ppnar och st\u00e4nger objektet klickar du helt enkelt p\u00e5 f\u00e4ltet \u00d6ppna ikon eller St\u00e4ng ikon och tv\u00e5 nya alternativ kommer att visas<\/strong>. Den ena \u00e4r f\u00f6r att l\u00e4gga till nya ikoner fr\u00e5n ikonbiblioteket, och den andra \u00e4r f\u00f6r att l\u00e4gga till en SVG.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f262759d.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-343047-633e6f262759d.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<p>Nu kan vi g\u00e5 till <strong>stilinst\u00e4llningarna<\/strong>. Det \u00e4r h\u00e4r du g\u00f6r finjusteringen av dragspelet och v\u00e4xla widgetstil.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f28d995d.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-343047-633e6f28d995d.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<p>Du kan <strong>v\u00e4lja titelstil och st\u00e4lla in titeltypografi<\/strong>. Som vi n\u00e4mnde \u00e4r standardalternativen inst\u00e4llda p\u00e5 ett s\u00e5dant s\u00e4tt att stilen p\u00e5 widgeten matchar det tema du anv\u00e4nder. Men du kan alltid <strong>prova alla andra alternativ helt enkelt genom att v\u00e4lja dem och \u00e4ndringarna kommer att synas direkt i widgeten till h\u00f6ger p\u00e5 sk\u00e4rmen<\/strong>. Utforska alternativen och se vad som fungerar b\u00e4st f\u00f6r dig.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f2cbed4b.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-343047-633e6f2cbed4b.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<p>N\u00e4sta inst\u00e4llningar h\u00e4nvisar till de stil\u00e4ndringar som <strong>h\u00e4nder med ett objekt n\u00e4r det st\u00e4ngs eller \u00f6ppnas<\/strong>. Du kan till exempel st\u00e4lla in texten s\u00e5 att den \u00e4r i annan f\u00e4rg n\u00e4r den \u00f6ppnas, eller s\u00e5 kan bakgrunden ha en annan f\u00e4rg. Det finns ocks\u00e5 m\u00f6jlighet att st\u00e4lla in annan utfyllnad n\u00e4r objektet \u00e4r aktivt, dvs \u00f6ppnat.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f30ee551.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-343047-633e6f30ee551.jpg\" alt=\"Hur man skapar v\u00e4xlar och dragspel i WordPress\" ><\/a><\/p>\n<p>Om du f\u00f6redrar videotutorials, ta en titt p\u00e5 den h\u00e4r skapad av Qis f\u00f6rfattare:<\/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\/WDgy5sFM0vc\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Sammanfattningsvis<\/h2>\n<p>N\u00e4r du k\u00e4nner dig mer bekant med pluginet kommer du att utforska \u00e4nnu mer f\u00f6rfinade alternativ f\u00f6r att finjustera stilen p\u00e5 din dragspels- och v\u00e4xlarwidget. Detta intuitiva verktyg \u00e4r perfekt f\u00f6r nyb\u00f6rjare eftersom det \u00e4r otroligt l\u00e4tt att anv\u00e4nda, medan avancerade anv\u00e4ndare ocks\u00e5 kommer att njuta av att anv\u00e4nda det eftersom det erbjuder en m\u00e4ngd anpassningsm\u00f6jligheter.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>L\u00e4r dig hur du skapar dragspel i WordPress med ett gratis plugin och organisera ditt inneh\u00e5ll p\u00e5 det mest anv\u00e4ndarv\u00e4nliga s\u00e4ttet!<\/p>\n","protected":false},"author":1,"featured_media":364273,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[574],"tags":[850],"class_list":["post-367294","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-grunderna-i-wordpress","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/367294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=367294"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/367294\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/364273"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=367294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=367294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=367294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}