Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Glöm PowerPoint, så här skapar du presentationer i WordPress

Vill du skapa en presentation i WordPress men vet inte riktigt var du ska börja?

Medan programvara som Google Slides och PowerPoint kan göra beautiful slides, kanske de inte ser bra ut när de är embedda på din WordPress website. Det är därför vi rekommenderar att du använder ett WordPress presentations plugin.

I den här artikeln visar vi dig en Step-by-Step guide till hur du skapar PowerPoint-liknande presentationer i WordPress.

Forget PowerPoint, how to create presentations in WordPress

Varför skapa presentationer i din WordPress blogg?

Det finns många fall där det kan vara fördelaktigt att skapa presentationer i WordPress.

Låt oss säga att du run en blogg om utbildning. Att lägga till en presentation i WordPress kan göra ditt content mer engagerande, särskilt för nybörjare. Detta kan skicka positiva signaler till search engines, vilket kan förbättra din WordPress SEO.

Om you run a small business site and want to show off your senaste industry report, then it may be more user-friendly and interesting to display it in a presentation.

Att lägga till Google Ads eller Microsoft PowerPoint-presentationer är ett sätt att skapa presentationer på din website. Det finns dock ingen garanti för att den slutförda presentationen kommer att se bra ut på din WordPress website. Dessutom kostar vissa fristående program pengar.

Den goda nyheten är att du enkelt kan skapa beautiful presentationer i WordPress med hjälp av en WordPress plugin. Så låt oss se hur du kan skapa presentationer i PowerPoint-stil i WordPress.

Använd gärna dessa länkar för att navigera genom stegen:

Step 1: Installera Smart Slider 3 och välj en template

Det enklaste sättet att skapa presentationer i WordPress är att använda Smart Slider 3. Detta gratis plugin fungerar med alla WordPress teman och är optimerat för sökmotorsoptimering. Det kommer också med förgjorda slides, animationer och templates, så att du kan skapa beautiful presentationer, snabbt.

Först måste du installera och aktivera Smart Slider 3. Om du behöver hjälp kan du vänligen läsa vår guide om hur du installerar ett plugin för WordPress.

Efter aktivering, gå till Smart Slider ” Dashboard och klicka sedan på ’Go To Dashboard’.

Creating a PowerPoint-style presentation in WordPress

Du kommer nu att komma till pluginets dashboard där du kan view all your projects.

Här klickar du helt enkelt på ”New Project”.

Creating a new Smart Slider project

Nu kan du bestämma om du vill börja med ett blankt papper eller använda en av Smart Sliders färdiga presentations templates.

Om du snabbt vill skapa en professionellt utformad presentation rekommenderar vi att du väljer ”Start with a Template”.

Choosing a presentation template

Smart Slider kommer nu att visa alla tillgängliga templates.

Om du vill titta närmare på en design hoverar du musen över den och klickar sedan på ögon-iconen när den dyker upp. Detta öppnar presentationsmallen i en new tab.

Choosing a presentation template

När du hittar en template du vill använda, hoverar du bara över den och klickar sedan på knappen ”Import”.

Detta kommer att öppna din valda template i Smart Slider editor.

How to create a PowerPoint style presentation in WordPress

Steg 2: Konfigurera din WordPress PowerPoint-liknande presentation

När du har valt en template är det en bra idé att konfigurera presentationens settings. De alternativ som du ser kan variera beroende på din template, men vi kommer att täcka alla de viktigaste inställningarna.

Om du behöver konfigurera dessa Settings igen efter att du har skapat din presentation kan du alltid gå tillbaka till det här steget.

Konfigurera allmänna settings och storleksinställningar

På tabben ”Allmänt” kan du ge presentationen ett namn genom att skriva in det i fältet ”Namn”.

Adding a title to an online presentation

Du kan också add to en thumbnail, som kan vara synlig för besökarna beroende på hur du konfigurerar presentationen.

Klicka bara på ikonen ”+” bredvid ”Thumbnail” och välj sedan antingen en image från mediabiblioteket i WordPress eller uploada en new file från din dator.

Adding a presentation thumbnail to a slideshow in WordPress

När det är gjort måste du rulla till ”Slider Design” -sektionen.

Här kan du ändra sliderns justering och add to en marginal för att skapa mer utrymme runt dina slides.

Changing the presentation slider design

Därefter kanske du vill göra slidesen större eller mindre genom att välja tabben ”Size”.

Här kan du ställa in olika maxstorlekar för användare av surfplattor, mobiler och datorer. På så sätt kan du vara säker på att presentationen kommer att se bra ut på alla devices.

För att ställa in dessa maximala storlekar klickar du bara för att aktivera sliders för Desktop, Mobile och Tablet och skriver sedan in en siffra i fältet ”Max”.

Setting a maximum slider size in a presentation

Under ”Layouts” kan du välja om presentationen ska fylla hela bredden på webbläsaren (”Full width”) eller om den ska passa in i containern (”Boxed”).

Som standard kommer presentationen att skalas upp och ner automatiskt för att passa besökarens vy. Du vill vanligtvis låta dessa Settings vara aktiverade, men du kanske vill ange en minsta höjd genom att skriva in den i boxen ”Min Height”.

Changing the slideshow layout in WordPress

Konfigurera personuppgiftsansvariga och animeringsinställningar

Därefter klickar du på tabben ”Controls”. Här kan du ändra hur besökarna rör sig mellan de olika slidesen.

Standardinställningarna bör passa bra för de flesta bloggar och websites i WordPress, men du kanske vill ändra hur pilarna ser ut.

Du kan till exempel ändra färgen på pilarna och insatsen, som är en control för var pilarna visas på sliden.

Changing the arrow settings in a WordPress presentation

När du gör ändringar kanske du vill göra en preview på hur pilarna kommer att se ut i din presentation.

För att göra det klickar du bara på ikonen för ögat i toolbaren.

Previewing a presentation in WordPress

När det är gjort rullar du bara till ”Bullets”. Här kan du customize de prickade icons som tillåter besökare att flytta mellan de olika slidesna. You can try different bullet styles, add a box shadow, change the corner radius, and more.

Om du vill visa rubriken för varje slides klickar du bara på för att aktivera toggeln ”Text Bar”.

How to configure a presentation in WordPress

Ett annat alternativ är att visa varje slides thumbnail, vilket ger besökarna ett annat sätt att flytta mellan slides.

För att göra detta måste du aktivera ”Thumbnail” toggle. Du kommer nu att få tillgång till ytterligare några inställningar för att finjustera hur thumbnailerna ser ut.

Configuring a presentation's thumbnails

Slutligen kanske du vill lägga till en skugga längst ner i ditt slideshow genom att clicka på ”Shadow” toggle.

Efter det kan du öppna dropdown och välja mellan de olika skuggstilarna.

Adding a shadow to a Google Slides style presentation

CSS-animationer är ett bra sätt att fånga besökarens uppmärksamhet och uppmuntra dem att engagera sig i din presentation. Smart Slider kommer med built-in animationer, så se till att du clickar på tabben ”Animations” för att konfigurera dem.

Här öppnar du dropdown ’Main Animation’ och väljer den effekt som Smart Slider ska spela när du växlar mellan slides. Du kan också ändra hur länge animationerna ska spelas upp genom att skriva in en siffra i fältet ”Duration”.

Adding slide animations and transition effects

Beroende på vilken template du använder kan du också se ett alternativ för ”Bakgrundsanimering”. This allows you to animate the slide’s backgroundsbild and colors.

Tänk bara på att bakgrundsanimationer inte fungerar på videoklipp eller presentationer som använder parallaxrullning.

Om du vill titta närmare på Smart Sliders bakgrundsanimationer klickar du på ikonen ”+”. Detta öppnar en editor där du kan prova olika animationer för att se vilka effekter du kan skapa.

Adding background animations to slides in WordPress

Konfigurera Settings för Autoplay

Nästa tabs är ”Autoplay”.

Som standard måste besökarna flytta sig mellan dina slides manuellt. Om du vill att presentationen ska spelas upp automatiskt istället aktiverar du slidern ”Autoplay” genom att klicka på den.

How to create an autoplaying presentation in WordPress

Om du aktiverar det här alternativet får du tillgång till några ytterligare Settings där du kan ändra hur länge presentationen visar varje bild och hur besökarna kan stoppa slideshowet.

It also adds a ”Buttons” section, where you can customize the presentation’s ”Play” button.

Adding a Play button to a slideshow

Optimera din presentation

Därefter väljer du tabben ”Optimera”. Här hittar du inställningarna för Smart Sliders lazy loading.

Som standard hämtas slidern omedelbart, vilket är ett bra val om presentationen är det första som folk ser när de besöker page.

Men om du har planer på att placera presentationen längre ner på sidan rekommenderar vi att du öppnar dropdown-rutan ”Loading type” och väljer ”After page loaded”.

Enabling the lazy loading feature

Detta kan öka WordPress hastighet och prestanda, tillsammans med att förbättra besökarnas upplevelse genom att hämta resten av sidan först.

Ett annat alternativ är ”After delay”, som allow you att ställa in en fördröjning av sliderns laddning.

Adding a delay to a WordPress presentation

Konfigurera Settings för slides

Som standard kommer images att täcka hela sliden, även om Smart Slider behöver cropa bilden för att få plats. Detta brukar fungera bra för de flesta presentationer, men du kan ändra denna standardinställning genom att välja tabben ”Slides”.

Här öppnar du helt enkelt dropdown ’Slide Background Image Fill’ och väljer ett annat alternativ från listan, till exempel stretch, centrerat eller blur fit.

How to create a PowerPoint style presentation in WordPress

Tabben ”Utvecklare” har några avancerade inställningar, inklusive ett area där du kan add to custom CSS till dina presentationer.

De flesta som äger en website behöver inte använda dessa Settings. Men om du vill lära dig mer om något av alternativen för ”Utvecklare”, hoverar du bara över den lilla ikonen ”i”. Detta kommer att visa en Tooltip med lite mer information, plus en länk till Smart Slider documentation.

Advanced developer settings in the Smart Slider WordPress plugin

Step 3: Skapa slides för din PowerPoint-presentation

När du är nöjd med hur presentationen är konfigurerad är det dags att börja skapa slides.

Klicka bara på knappen ”Add Slide” för att komma igång.

Creating presentation slides in the WordPress dashboard

Smart Slider låter dig skapa några olika typer av slides. Det har även ett ”Post”-alternativ, som allow you att embed ett WordPress post inuti en slides.

You can experimental with the different alternatives, but in this guide we will be using the ’Blank’ design as an example.

Smart Slider's presentation types

När du har valt en typ av slide ser du slidesens thumbnail högst upp på vyn.

Håll bara hovern över thumbnailen och klicka sedan på knappen ”Edit” när den visas.

Editing slides in the WordPress editor

Detta öppnar Smart Slider Editor.

Längst upp på vyn finns en breadcrumb navigation där you kan flytta mellan de olika slides i presentationen.

Smart Slider's breadcrumb navigation

Längs den vänstra sidan av vyn finns alla lager som utgör slidesen. You can hover your mouse over any icon to see that layer’s name, such as Image or Row.

För att edit:a ett lager klickar du på det i menyn till vänster. Då öppnas en popup med alla Settings som du kan använda för att customize lagret.

The Smart Slider presentation and slideshow editor

Du kan också välja ett lager genom att clicka på det i Live Preview. Om du till exempel vill ersätta en del av standardtexten med ditt eget message klickar du bara för att selecta det lagret.

I popupen som visas skriver du in your message i fältet ”Text”.

Adding text to a presentation in WordPress

Du kan också ändra hur texten ser ut genom att clicka på tabben ”Style”.

Här kan du ändra textfärg, font, storlek och mycket mer.

Changing the text style in a slideshow

För att customize sliden klickar du bara på de olika lagren och gör sedan dina ändringar i popupen som visas.

Om du vill ta bort ett lager håller du bara musen över det och klickar sedan på den prickade ikonen. I dropdown-menyn måste du välja ”Delete”.

Deleting layers in Smart Slider

Vill du add to fler lager till slidesen?

Klicka bara på den gröna ikonen ”+” i menyn till vänster.

Adding layers to a WordPress presentation

Tabben ”Layers” visar några grundläggande lager, t.ex. images, knappar och text.

Du kan add to vilket som helst av dessa lager till slidesen med hjälp av drag and drop.

Adding layers to a slideshow in WordPress

Smart Slider har också ett bibliotek med färdiga slides som du kan add to din presentation.

För att ta en titt på dessa alternativ klickar du på tabben ”Library”.

The Smart Slider library

Du kan nu fortsätta att arbeta med den här sliden genom att lägga till lager och customize dem med ditt eget content och dina egna Settings.

När du är nöjd med hur slidesen är konfigurerad, clickar du på knappen ”Save”.

Saving a presentation in WordPress

För att börja arbeta med nästa slide måste du clicka på ”Slides” i toolbaren.

Välj sedan ”Add Slide”.

Adding slides to a presentation

Step-by-Step 4: Embed dina presentations slides i WordPress

När du har slutfört arbetet med presentationen klickar du bara på ”Back” för att återgå till huvudpanelen för Smart Slider.

Som standard publicerar Smart Slider alla dina slides, men det är ändå värt att kontrollera att det finns en grön bock bredvid varje slide som du vill visa på din site.

Publishing slides to a website or blog

Om du ser ett ”x” bredvid en slide betyder det att sliden är opublicerad. You will need to click on the ’x’ to turn it into a green checkmark, which makes the slide live.

Efter det är du redo att add to presentationen direkt till din store, website eller blogg. Öppna bara en post eller page i Gutenberg block editor och klicka sedan på ikonen ”+”.

Därefter måste du skriva ”Smart Slider 3” i popupen och välja rätt block när det visas i block editor.

Adding the Smart Slider 3 block to a page or post

Detta adderar ett WordPress slideshow block av Smart Slider 3 till page.

Gå sedan vidare och klicka på knappen ”Select Slider”.

How to add the Smart Slider 3 block to a page or post

Detta öppnar en popup som visar alla presentationer som you har skapat.

Klicka bara på den presentation du vill använda och välj sedan ”Insert”.

Adding a Smart Slider 3 block to WordPress

Detta addar presentationen till din website. Du kan nu antingen clicka på knappen ”Update” eller ”Publicera” för att göra presentationen Live.

Nu, om du besöker your website, kommer du att se PowerPoint-presentationen i action.

A PowerPoint-style presentation, created using a WordPress plugin

Lär dig hur du skapar mer engagerande content för bloggar

Att lägga till en slideshow-presentation är bara ett sätt att hålla dina läsare engagerade. Här är andra idéer som du kan implementera för att förbättra din blogg:

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar presentationer i WordPress. Du kanske också vill se vår lista över de bästa tilläggen för dynamiskt content i WordPress och våra exempel på bloggar högst upp i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

17 kommentarerLämna ett svar

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. THANKGOD JONATHAN says

    Who knew creating presentations in WordPress could be so easy? This guide opened up new possibilities for my content.
    Thanks for introducing a creative alternative to traditional tools.

    • WPBeginner Support says

      You would want to reach out to the plugin’s support for if that is an option with their current tools.

      Administratör

  3. Kevin Kovadia says

    Very good plugins, it is great. I will try to create slide from WordPress. If is possible to create google doc & Google sheet using such a way with WordPress.

  4. Sefa Tsegha says

    Wow. I never knew there’s a WordPress plugin for that. Thank you for sharing. I always learn something new from this site.

  5. Maddie says

    Great article. Just letting you know that presentation is spelt wrong twice in the second paragraph under the heading ’How to Create a Presentation in WordPress.’

    Here is the referenced sentence:
    ”Upon activation, you need to visit Presenation » Add New page to create your first presenation.”

  6. JIM C says

    This looks great. More use learning WordPress while making some presentations for different segments of the client base!

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.