Läs om hur du lägger till, konfigurerar och testar helskärms- och miniatyrbildsbildspelswidgetar i Adobe Muse.

Obs!

Inga nya funktioner läggs till i Adobe Muse och supporten för Adobe Muse kommer att upphöra den 26 mars 2020. Mer information finns på sidan med information om när Adobe Muse inte längre kommer att vara tillgängligt.

Bildspelswidgetar i Adobe Muse är interaktiva widgetar som enbart arbetar med bilder. Precis som flikpanelswidgetar visas motsvarande version av startsidebanderollbild i en annan större behållare på sidan när användarna klickar på miniatyrbildsbehållaren.

Adobe Muse stöder följande typer av bildspelswidgetar:

  • Grundläggande: Den här widgeten består av en stor behållare där du kan lägga till bilder och nedanför den kan du lägga till bildtext. Knapparna Föregående och Nästa samt antalet aktuella bildrutor finns också i bildtextområdet.
  • Tom: Den här liknar det grundläggande bildspelet. Behållarna är dock tomma i den här widgeten.
  • Helskärm: Den här widgeten visas i helskärm när du drar och placerar den på designarbetsytan. Som standard visas knapparna Föregående och Nästa samt antalet aktuella bildrutor i en liten behållare uppe i det övre vänstra hörnet på sidan.
  • Ljuslåda: Den här widgeten tonar resten av sidan förutom bildspelet eller gallerielementet som aktivt visas på sidan. Ljuslåda är en av de vanligaste widgetarna bland bildspel, som gör att användaren omedelbart fokuserar på det aktiva galleriet.
  • Miniatyrbilder: Den här widgeten liknar en kompositionswidget, där det finns miniatyrbilder till vänster om galleriområdet. När en användare klickar på den här miniatyrbilden visas motsvarande bild i galleriområdet.

I följande artikel bygger vi upp ett fotogalleri som visar flera miniatyrbilder längst upp tillsammans med en större bild som visas nedan. Med alternativpanelen kan du styra hur fotogalleriet beter sig och visas. Du kan också använda inställningar i kontrollpanelen för att anpassa bildspelets utseende.

Lägg till bildspel med 100 % bredd: lär dig hur du lägger till ett bildspel med 100 % bredd till din webbdesign i Adobe Muse. Bildspelet med 100 % bredd finns i Widgetprogrambibliotek.
Danielle Beaumont

Lägga till en miniatyrbildsbildspelswidget på en sida

Bildspel kan också läggas till direkt på sidor, men i det här exemplet kommer du att kapsla in en miniatyrbildspelswidget i innehållsområdet i en flikpanelswidget. Så här lägger du till bildspel direkt:

  1. Öppna Adobe Muse. Gör något av följande på välkomstskärmen:

    • Klicka på Skapa och lägg till en bildspelswidget på den webbplats du skapar.
    • Klicka på Öppna och öppna den befintliga .muse-fil som du vill lägga till widgeten i. Dubbelklicka på och öppna den sida där du vill lägga till bildspelswidgeten.
  2. Öppna panelen Widgetprogrambibliotek (Fönster > Widgetprogrambibliotek) och expandera avsnittet Bildspel. Välj den widget du vill använda i listan. Välj till exempel miniatyrbildsbildspelswidgeten i listan och dra den till vyn Design.

    Bildspel med miniatyrbilder i Adobe Muse, Widgetprogrambibliotek
    Dra miniatybildspelswidgeten till sidan.

    Du ser att det finns en miniatyrbildsbehållare till vänster, en behållare för startsidebanderollbilden och bildtextbehållare under bilden.

    Obs!

    För att ta bort standardinnehållet i en widget högerklickar du  widgeten och väljer Ta bort widgetinnehåll.

  3. För att ta bort miniatyrbilder, markerar du platshållarens innehåll (bildramen och textramen i innehållsområdet) och raderar det.

Konfigurera en miniatyrbildsbildspelswidget med hjälp av panelen Alternativ

Du kan konfigurera inställningarna i en bildspelswidget genom att använda panelen Alternativ som är kopplad till widgeten. Läs vidare om du vill veta mer om hur du aktiverar automatisk uppspelning, övergångseffekter, svepning på pekenheter osv.

  1. Välj din widget och klicka på den blå pilikonen för att komma åt panelen Alternativ. I det här exemplet behöver du inte knapparna Nästa och Föregående. Avaktivera dem genom att avmarkera Nästa och Föregående. Lägg märke till att knapparna försvinner när du avmarkerar kryssrutorna.

    Avmarkera alternativen Bildtexter och Räknare så att enbart miniatyrbildsutlösarknapparna och den större målbehållaren är kvar. Titta igenom alternativen och uppdatera dem så de matchar inställningarna nedan:

    • Passning: Fyll ram proportionellt
    • Ny miniatyrbild: Fyll ram proportionellt
    • Övergång: Tona
    • Överföringshastighet: 0,5 sekunder
    • Spela upp automatiskt: Avaktiverat
    • Återuppta efter: Aktiverat
    • Spela upp en gång: Avaktiverat
    • Blanda: Avaktiverat
    • Aktivera svepning: Aktiverat
    • Ljuslåda: Aktiverat
    • Helskärmsläge: Aktiverat
    • Automatisk ljuslåda: Avaktiverat
    • Miniatyrbilder med valfri placering: Aktiverat
    • Första: Avaktiverat
    • Föregående: Aktiverat
    • Nästa: Aktiverat
    • Sista: Avaktiverat
    • Bildtexter: Aktiverat
    • Räknare: Aktiverat
    • Stängningsknapp: Avaktiverat
    • Miniatyrbilder: Aktiverat
    • Visa ljuslådedelar vid redigering: Aktiverat
    • Redigera tillsammans: Aktiverat
    Panelen för bildspelsalternativ
    Uppdatera inställningarna för miniatyrbildspelswidgeten på alternativpanelen.

  2. Olika widgetar har olika alternativ tillgängliga och vissa är mer komplexa än andra. Ägna en stund åt att granska menyalternativen för att se tillgängliga inställningar. Här är en snabb översikt:

    Lägg till bilder: klicka på mappikonen och bläddra efter och välj bilder som du vill ska visas.

    Passning: definierar hur det större fotoinnehållet visas i målbehållaren.

    • Anpassa innehållet proportionellt: fotobildfilen behåller samma storlek även om den inte matchar målbehållaren, en del av behållaren kan vara tom när bilden inte passar i den.
    • Fyll ram proportionellt: fotobildfilens storlek ändras så att den fyller proportionerna för målbehållaren. Det medför eventuellt att en del av fotobilden beskärs.

    Ny miniatyrbild: definierar hur det mindre miniatyrfotots innehåll visas i utlösarbehållaren.

    • Anpassa innehållet proportionellt: fotobildfilen behåller samma storlek även om den inte matchar målbehållaren, en del av behållaren kan vara tom när bilden inte passar i den.
    • Fyll ram proportionellt: fotobildfilens storlek ändras så att den fyller proportionerna för målbehållaren. Det medför eventuellt att en del av fotobilden beskärs.

    Övergång: den animeringsmetod som används när innehållet i en målbehållare håller på att ersättas av en annan målbehållare. Dessa aktiveras också för pekskärmar, så om du skapar webbplatser för mobila enheter kan besökarna svepa för att se övergångarna spelas upp när nästa innehållsobjekt visas.

    • Tona: opaciteten för den nya behållaren ökar när den befintliga behållarens minskar.
    • Horisontellt: den nya behållaren glider in från sidan horisontellt och sveper in över den befintliga behållaren.
    • Vertikalt: den nya behållaren sveper in från sidan vertikalt och sveper över den befintliga behållaren.

    Överföringshastighet: den tid i sekunder det tar att spela upp animeringen.

    Spela upp automatiskt: när det här alternativet är aktiverat spelas bildspelet upp automatiskt, i stället för i ett interaktivt gränssnitt som kräver att besökaren klickar på varje utlösare för att visa motsvarande mål i sekvensen. Ange antalet sekunder som du vill att varje bild ska visas innan övergång till nästa bild.

    Blanda: när det här alternativet är aktiverat visas bilderna i slumpmässig ordning, i stället för i sekventiell miniatyrbildsordning.

    Ljuslåda: när det här alternativet är aktiverat tonas resten av sidan ned med ett överlägg när innehållet i målbehållaren visas.  När ljuslådefönstret stängs visas hela sidan igen.

    Aktivera svepning: när det här alternativet är aktiverat och webbplatsen har en surfplatte- eller telefonlayout för visning av webbinnehåll på mobila enheter stöder de interaktiva delarna av widgeten pekskärmsgester.

    Avsnittet Delar:

    • Första: när det här alternativet är aktiverat visas navigeringsknappen Första.
    • Föregående: när det här alternativet är aktiverat visas navigeringsknappen Föregående.
    • Nästa: när det här alternativet är aktiverat visas navigeringsknappen Nästa.
    • Sista: när det här alternativet är aktiverat visas navigeringsknappen Sista.
    • Bildtexter: när det här alternativet är aktiverat visas bildtexter för fotogalleriet.
    • Räknare: när det här alternativet är aktiverat visas räknaren för fotogalleriet.
    • Stängningsknapp: när det här alternativet är aktiverat visas stängningsknappen.

    Miniatyrbilder: när det här alternativet är aktiverat visas miniatyrbildsutlösarknappar.

    Avsnittet Redigering:

    • Visa ljuslådedelar vid redigering: när det här alternativet är aktiverat visas varje målområde bara som standard när motsvarande utlösare väljs på sidan. När du utformar layouten kan du finna det användbart att aktivera det här alternativet för att kunna se målen medan du arbetar. Den här inställningen påverkar inte visningen av bildspelet när sidan förhandsvisas eller visas i en webbläsare. Om ljuslådealternativet inte är aktiverat är det här alternativet nedtonat. 

    Obs! Alternativet Visa ljuslådedelar vid redigering är endast aktiverat när du väljer ljuslådebildspelswidgeten.

    • Redigera tillsammans: det här alternativet är aktiverat som standard för att förenkla snabbare redigering av widgetar. Om du inte behöver ange utseende för varje utlösare på olika sätt håller du det här alternativet aktiverat så att eventuella ändringar som görs för ett element automatiskt används på de andra.

    När du har granskat de tillgängliga inställningarna klickar du på sidområdet utanför alternativmenyn för att stänga den.

    Obs!

    Alternativen Ljuslåda och Helskärmsläge är avaktiverade för helskärmsbildspel.

    Det går inte att aktivera alternativet Helskärmsläge för någon annan bildspelswidget än för helskärmsbildspelswidgeten.

Ändra storlek på och justera elementen i en miniatyrbildsbildspelswidget

  1. Klicka och markera bildspelswidgeten. Använd markeringsverktyget och dra dess handtag för att ändra storlek på miniatyrbildspelswidgeten tills den är cirka 790 pixlar bred och 490 pixlar hög. Du kan titta på omvandlingspanelen eller omvandlingsfälten på kontrollpanelen när du vill se måtten.

  2. Medan bildspelet är markerat klickar du på miniatyrbildsbehållaren och markerar den behållare som innehåller de tre miniatyrbilderna. Använd sidomvandlingshandtagen till att göra den bredare och använd sedan markeringsverktyget och dra de tre miniatyrbilderna uppåt tills de är placerade över och vertikalt inpassade med mitten av den större huvudbildsbehållaren.

    Behållare med fem miniatyrbilder
    Markera miniatyrutlösarbehållaren och placera den över den större målbehållaren.

    Du kan se när miniatyrbehållaren är inpassad mot mitten av hjältebildsbehållaren eftersom en blå smart hjälplinje visas tillfälligt när du drar elementet.

    Följ de här stegen för att lägga till grafiken i fotogalleriet medan du automatiskt genererar motsvarande miniatyrbild och hjältebehållare:

  3. Klicka på den blå pilknappen för att öppna alternativmenyn. Klicka på mappikonen bredvid orden Lägg till bilder... och navigera till mappen där du har sparat filerna.

  4. Markera de bildfiler som behövs. Stäng dialogrutan Importera genom att klicka på Öppna.

    Dialogrutan Importera
    Markera de fem gallerifotona i undermappen galleri.

    När du markerar flera bildfiler laddar du upp miniatyrbildspelswidgeten. Med den här strategin kan du markera flera bildfiler och generera en miniatyrbehållarknapp som motsvarar varje ny större bildfil i hjältebildbehållaren.

    De nya bilderna läggs till i de befintliga miniatyrbildsknapparna.

  5. Dubbelklicka och välj miniatyrbilden som visas som standard när du först lade till bildspelet. Tryck på Delete (macOS) respektive Backsteg (Windows) för att ta bort var och en när du markerat den, tills endast de fem nya miniatyrbilderna är kvar.

    Miniatyrbilder och bilder i bildspel
    Visa och markera alla svartvita standardminiatyrbilder och tryck på Backsteg eller Delete för att bort dem en och en.

    Var försiktig så att du inte tar bort hela uppsättningen miniatyrbilder. Om detta inträffar ångrar du den senaste åtgärden genom att välja Redigera > Ångra och se sedan till att klicka på varje miniatyrbild (markeringsindikatorn visar ordet: Miniatyrbild) innan du trycker på Backsteg eller Delete.

  6. Markera den behållare som innehåller uppsättningen med fem miniatyrbilder. Använd omvandlingshandtagen till att ändra storlek på den så att de återstående miniatyrbilderna är centrerade över huvudbildsbehållaren.

    Miniatyrbilder och bilder i bildspel
    Ändra storlek på miniatyrbildsbehållaren till mitten av huvudbilden.

Använda responsiva bildspelswidgetar

Bildspel är responsiva, eller variabla, som standard. Så här använder du en responsiv bildspelswidget på din Adobe Muse-webbplats:

  • Om du skapar en webbplats monterar du bildspelswidgeten från panelen Widgetprogrambibliotek. Widgeten är responsiv som standard.
  • Om du har en befintlig .muse-fil öppnar du den i den senaste versionen av Adobe Muse. Markera widgeten. Om du vill göra widgeten responsiv markerar du elementen i den och väljer alternativet Responsiv bredd och höjd eller Ändra storlek på snabbmenyn.
Gör bildspelswidgeten responsiv genom att välja alternativet Ändra storlek
Gör bildspelswidgeten responsiv genom att välja alternativet Ändra storlek

Om du lägger till bildspelswidgeten på en responsiv webbplats kontrollerar du positionen och storleken på den för alla brytpunkter. Du kan ändra innehållet i och storleken på enskilda element i bildspelswidgetar. Du kan även aktivera responsiva inställningar för enskilda element som knappen Föregående, knappen Nästa och för bildtexter för olika brytpunkter.

Testa hur miniatyrbildsbildspelswidgeten visas

När du har flyttat på bildspelselementen och tagit bort platshållarens miniatyrbilder kan du testa bildspelet för att se hur det visas.

  1. Testa först fotogalleriet i designvyn genom att klicka på miniatyrbildsknapparna längst upp och se hur motsvarande hjältebild visas i den större behållaren nedan.

  2. Klicka på Förhandsvisa för att se hur galleriet kommer att se ut i en webbläsare. Interagera med bildspelet för att se hur de större bilderna visas när du klickar på motsvarande miniatyrbild.

    Testa miniatyrbilden och bildspelet
    Placera galleriet så att det är centrerat i innehållsområdesbehållaren för flikpanelswidgeten.

  3. Välj Arkiv > Förhandsvisa sidan i webbläsare för att se Om-sidan i din standardwebbläsare.

    Ändra storlek på webbläsaren och förhandsvisa bildspelswidgeten i olika skärmstorlekar. Du kan se att bildspelswidgetar är responsiva som standard. Det innebär att de ändrar storlek och anpassar sig efter skärmstorleken. 

    Du kan också använda skrubbaren i vyn Design för att förhandsvisa widgetarna. Om du någon gång vill ändra eller flytta widgeten lägger du till en brytpunkt och justerar widgeten. 

  4. Testa funktionerna för flikpanelswidgeten. Klicka på flikarna för att se motsvarande innehåll visat i innehållsområdesbehållarna. Testa sedan bildspelet på fliken Galleri genom att klicka på miniatyrbildsknapparna för att visa motsvarande större hjältebilder.

Skapa ett bildspel med hjälp av bildspelswidgeten

Bildspelswidgeten är en annan webbplatsfunktion som du kan lägga till på sidorna. Du kan ställa in ett bildspel där besökaren måste klicka på miniatyrer för att kunna se en större version av fotot, eller ett bildspel som spelas upp automatiskt när sidan läses in. Automatiskt uppspelade bildspel är ett utmärkt sätt att lägga till engagerande innehåll på webbplatsen genom att visa ett antal foton. Du kan kontrollera hur bildspelet spelas upp genom att ställa in olika övergångar för att bestämma hur bildrutorna ska animeras.

I följande delavsnitt får du lägga till ett automatiskt uppspelat bildspel på webbplatsens startsida.

Dubbelklicka i vyn Planera på miniatyrbilden Hem för att öppna den för redigering i vyn Design.

Konfigurera en bildspelswidget för automatisk uppspelning

Så här skapar du en presentation där ett antal bilder visas i följd:

  1. I Widgetprogrambibliotek klickar du på Bildspel.

  2. Markera den grundläggande widgeten och dra den så att den hamnar på sidan.

  3. De grundläggande bildspelswidgetarna innehåller som standard en mörkgrå rektangel (platshållare för bild), en platshållarbild, numret på bilden (1–1) och två pilknappar (nästa och föregående) som besökare kan använda till att bläddra bland olika bilder.

  4. Klicka på den blå pilen för att öppna menyn Alternativ. Kontrollera och ställ in följande alternativ:

    • Övergång: Tona
    • Spela upp automatiskt: Sakta
    • Ny hjälte: Fyll ramen proportionellt
    • Ny miniatyrbild: Fyll ramen proportionellt
    • Ljuslåda: Avmarkerad
    • Delar: Avmarkera alla alternativ för att dölja bildtexter, räknare och knapparna nästa och föregående.

    Obs!

    Bildspelet börjar spelas upp automatiskt när sidan läses in utan att besökaren behöver göra någonting. Om du vill skapa ett bildspel som besökaren kontrollerar genom att klicka anger du Spela upp automatiskt till Inget. Se till att Nästa och Föregående är markerade i avsnittet Delar på menyn Alternativ.

  5. Klicka vid sidan om menyn Alternativ för att stänga den. Observera att sedan dessa ändringar har gjorts kommer endast den mörkgrå rektangeln att förbli synlig. Du kan när som helst ändra konfigurationen för widgetar genom att ändra inställningarna på menyn Alternativ.

  6. Dubbelklicka och välj Bildram (den mörkgrå rektangeln) och dra sidohandtagen för att expandera bildspelet till sidans hela bredd.

    Bildspelsbildram
    Dra sidohandtagen i bildspelets bildram för att anpassa den till sidan.

  7. Använd de övre och undre pilarna för att öka höjden på bildramen så att den fyller ut hela startsidan. Sträck ut bildramen längst ned tills den slutar precis ovanför den sicksackformade bilden som visas högst upp i sidfoten. Det gör inget just nu att den mörkgrå platshållaren täcker den bruna droppande bilden till höger om navigeringsfältet.

  8. Klicka på den blå pilen för att öppna menyn Alternativ på nytt. Klicka den här gången på mappikonen längst upp, bredvid texten Lägg till bilder.

  9. Gå till din mapp med resurser i dialogrutan Importera och öppna dem. Klicka på Välj för att lägga till bilderna i bildspelen.

  10. Klicka på Förhandsvisa för att spela upp bildspelet. Det är inställt på långsam automatisk uppspelning, men du kan ändra inställningarna på menyn Alternativ om du vill att bilderna ska bläddras igenom snabbare. Observera att när det sista fotot har visats startas uppspelningen om från den första bilden. Bildspelet körs i en oändlig slinga när den automatiska uppspelningen är aktiverad.

Bildspelet är klart. Om du vill korrigera dropparna till höger i navigeringsfältet finns det ytterligare en sak kvar att göra.

  1. Dubbelklicka på miniatyren för A-mallen i vyn Planera när du vill öppna den i designvyn.

  2. Använd markeringsverktyget och markera den del av det bruna bandet som verkar rinna nedåt i det övre högra hörnet av navigeringsgrafiken.

  3. Högerklicka på den rinnande delen och välj Ordna > Montera överst i sammanhangsmenyn som visas.

  4. Klicka på X på A-mallsfliken för att stänga den. Öppna sidan där du har lagt till den grundläggande widgeten. Klicka på Förhandsvisa och observera att droppbilden nu visas ovanför bildspelet som spelas upp automatiskt. När du har granskat bildspelet går du tillbaka till vyn Design.

    Obs!

    Eftersom navigeringsfältet skapades på A-mallssidan kommer eventuella ändringar som du gör för att kontrollera navigeringen (och andra vanliga element) att innebära att A-mallssidan öppnas i designvyn för redigering. Trots att du kan se elementen för en mallsida på sidorna som du redigerar, kan du inte redigera sidhuvudet och sidfoten på de andra webbplatssidorna.

Lägga till helskärmsbildspelswidgetar

Du kan skapa bildspel som visas i helskärm med en särskild widget för detta. När en besökare klickar på Bildspel i helskärm skalas innehållet så att det fyller hela webbläsarfönstret för datorn eller enheten och tillfälligt döljer resten av innehållet på webbplatsen. Om du vill kan du konfigurera bildspelet så att det spelas upp automatiskt och bläddrar igenom bilderna när sidan laddas. Besökare kan avsluta bildspelet genom att trycka på Escape.

Följ de här stegen för att lägga till en widget för bildspel i helskärm på en plats:

  1. Starta Adobe Muse. Dubbelklicka på en sida för att öppna sidan i vyn Design.

  2. Välj Fönster > Widgetprogrambibliotek för att öppna Widgetprogrambibliotek eller klicka på fliken Widgetprogrambibliotek för att aktivera det.

  3. Expandera avsnittet Bildspel i listan över widgetar. Välj widgeten Helskärm i avsnittet Bildspel.

    Widgetprogrambibliotek
    Leta rätt på och välj widgeten Helskärmsbildspel i Widgetprogrambibliotek.

Konfigurera helskärmsbildspelswidgetar

Widgeten Helskärmsbildspel fungerar på ett annat sätt än andra widgetar i Adobe Muse. Ta dig lite tid att titta på de olika funktionerna.

  1. Dra widgeten för bildspel i helskärm från Widgetprogrambibliotek till sidan.

    Tänk på att standardinnehållet skalförändras för att passa både höjd och bredd för hela webbläsarfönstret.

    Widget för bildspel i fullskärmsläge
    Widgeten för bildspel i helskärm expanderar för att täcka den synliga delen av webbplatsen och fyller upp webbläsarfönstret.

    När du lägger till bildspelswidgeten i helskärm visas som standard knapparna Föregående och Nästa och ett räknarfält i det övre högra hörnet.

  2. Klicka på den blå pilen för att granska inställningarna i panelen Alternativ.

    Panelen för bildspelsalternativ
    I panelen Alternativ visas standardinställningar som används för widgeten för bildspel i helskärm.

    Alternativet Fyll ram proportionellt används automatiskt för bilder av typen Passning (stora bilder) och Nya miniatyrbilder för att möjliggöra helskärmsvisning.

  3. Välj vilken typ av övergång du vill använda. Använd menyn Övergång för att välja mellan Tona, Horisontell och Vertikal. Som standard är övergångshastigheten inställd på 5 sekunder, men du kan ändra hastigheten efter önskemål.

    Om du aktiverar Spela upp automatiskt börjar bildspelet rulla så snart sidan laddas och bläddrar genom innehållet i enlighet med det antal sekunder du har ställt in. Som standard visas varje bild i 3,5 sekunder när Spela upp automatiskt har aktiverats.

    När du konfigurerar en widget för bildspel i helskärm är det vanligt att aktivera knapparna Nästa och Föregående så att miniatyrbilderna döljs som standard. Du kan dock aktivera alternativet Miniatyrbilder om du vill visa dem högst upp på huvudbilden för bildserien.

    Om miniatyrbilderna är dolda ska du se till att Nästa och Föregående är aktiverade. Räknaren är valfri – den hjälper besökare förstå vilken bild i serien som visas.

  4. Om du vill visa Nästa, Föregående och räknaren på en speciell del av sidan ska du använda markeringsverktyg för att flytta dem till önskad plats och fästa dem där. Om du vill att miniatyrbilderna ska vara kvar på samma plats på sidan placerar du och fäster miniatyrbildsuppsättningen också. Om du vill visa Nästa, Föregående och räknaren på en speciell del av sidan ska du använda markeringsverktyg för att flytta dem till önskad plats och fästa dem där. Om du vill att miniatyrbilderna ska vara kvar på samma plats på sidan ska du placera ut uppsättningen miniatyrbilder och fästa dem också.

    Du kan ändra inställningar för fästegenskaper och storlek vid olika brytpunkter när du lägger till den här widgeten på en responsiv webbplats.

Lägga till bilder i helskärmsbildspel

Därefter ska du lägga till bilder i widgeten för bildspel i helskärm. Gör följande:

  1. Välj Arkiv > Montera.

  2. I fönstret Import som visas Skift-klickar du för att markera flera bilder efter varandra på datorn. Eller om du vill kan du hålla Kommando (MacOS) eller Ctrl (Windows) intryckt samtidigt som du markerar flera bilder, som inte behöver vara i följd, från en mapp.

  3. Klicka på Öppna för att läsa in de valda filerna i placeringsverktyget.

    Obs!

    Även om bilderna du har valt har olika dimensioner och utseende kan du använda alternativet Fyll ram proportionellt för att de ska passa perfekt med sidans mått.

  4. Klicka en gång i bildspelet för att lägga till valda filer. Observera att bildspelets standardbilder tas bort automatiskt så snart du lägger till nya bilder.

  5. Välj Arkiv > Förhandsvisa sidan i webbläsare. Ändra storleken för webbläsarfönstret för att se hur bildspelets innehåll skalas och beskärs för att fylla hela webbläsarfönstret. Klicka på knapparna Nästa och Föregående för att bläddra genom hela serien bilder, eller låt helt enkelt bilderna spelas upp om automatisk uppspelning är aktiverad.

  6. Stäng webbläsarfönstret och gå tillbaka till Adobe Muse.

Konfigurera miniatyrbilder med valfri form i bildspelswidgetar

Med hjälp av miniatyrbilder med valfri form kan du få fullständig kontroll över hur miniatyrbilderna i ett bildspel visas. Istället för att lägga upp miniatyrbilderna i en rad eller en uppsättning rader kan du placera varje miniatyrbild på den plats du önskar.

  1. När du är i designvyn öppnar du Widgetprogrambibliotek och expanderar avsnittet Bildspel. Dra vilken del som helst av bildspelswidgetarna till en sida.

  2. När hela sidan är markerad dubbelklickar du och väljer miniatyrbilden. Du kan visa vilka element som har markerats med hjälp av markeringsindikatorn i det övre vänstra hörnet av kontrollpanelen.

    Miniatyrbildsbehållare
    En begränsningsram omger miniatyrbildsbehållaren när den är markerad.

    Som standard lagras miniatyrbilder som visas i ett bildspel i en behållare med namnet Miniatyrbehållare. Den här yttre behållaren ser till att miniatyrbilderna läggs upp i raka linjer eller rader, beroende på hur du ändrar storleken för den yttre behållaren. Uppsättningen miniatyrbilder nästlas inuti en behållare för miniatyrbilder för alla bildspel med aktiverade miniatyrbilder, tills dess att du aktiverar alternativet Miniatyrbilder med valfri form.

Konfigurera visningsinställningarna för miniatyrbilder med valfri form

Om du föredrar att visa miniatyrbilderna i slumpade eller ickelinjära positioner kan du ta bort den yttre behållaren och placera varje miniatyrbild på önskad plats på sidan. Gör följande:

  1. När bildspelswidgeten har markerats klickar du på den blå pilen för att få tillgång till menyn Alternativ.

  2. Aktivera kryssrutan invid alternativet: Miniatyrbilder med valfri form. Begränsningsramen som omger miniatyrbehållaren i designvyn tas omedelbart bort och markeringsindikatorn visar ordet: Bildspel.

    Panel med alternativ för miniatyrbehållare
    Om du aktiverar alternativet miniatyrbilder med valfri form elimineras behållaren som omger miniatyrbilderna.

  3. Klicka på en annan plats på sidan för att stänga alternativmenyn.

    Nu när du har tagit bort den yttre behållaren för miniatyrbilderna kan du placera om alla miniatyrbilder för att passa in på sidans design.

  4. Använd markeringsverktyget för att markera en miniatyrbild. När den är markerad visar markeringsindikatorn ordet: Miniatyrbild. Flytta den markerade miniatyrbilden till önskad plats. Upprepa det här steget för att omplacera alla miniatyrbilderna. Om du vill att alla miniatyrbilder ska vara på plats om du skrollar eller ändrar storlek kan du fästa varje miniatyrbild.

    Obs!

    Om du vill ändra storlek för miniatyrbehållarna ska du avaktivera alternativet Redigera tillsammans på menyn Alternativ och sedan använda markeringsverktyget för att dra i hörnen av varje miniatyrbild och skala dem till rätt storlek.

    På en responsiv webbplats kan du också justera, ändra storlek och konfigurera alternativ för fästegenskaper för miniatyrbilderna.

  5. Välj Fil > Förhandsvisa sidan i webbläsare. Miniatyrbilderna för bildspelet är spridda på sidan. Klicka på miniatyrbilderna för att visa hur motsvarande bild visas i bildspelet.

  6. Stäng webbläsaren och återgå till Adobe Muse.

Konfigurera alternativ för ljuslådevisning för bildspelswidgetar

När innehåll visas i en ljuslåda innebär detta att ett modalt fönster är i fokus, dess innehåll framhävs, och resten av sidan tonas ned. Besökare kan interagera med ljuslådan genom att klicka på en miniatyrbild, Nästa eller Föregående. För att stänga ljuslådan och gå tillbaka till normal visning av webbplatsen kan besökarna klicka på Stäng eller Escape.

Alla bildspelswidgetar i Adobe Muse har alternativet Ljuslåda. Dessutom är en widget i avsnittet Bildspel förkonfigurerad för att använda ljuslådefunktionen. I widgeten för Bildspel i ljuslåda är alternativet Ljuslåda aktiverat som standard.

För att skapa ett bildspel som visar bilderna i en ljuslåda gör du på följande sätt:

  1. När du är i designvyn expanderar du avsnittet Bildspel i Widgetprogrambibliotek. Dra vilken del som helst av bildspelswidgetarna till en sida.

  2. På menyn Alternativ letar du rätt på alternativet Ljuslåda i avsnittet Layout och verifierar att det är markerat.

    Alternativet ljuslåda
    Markera kryssrutan invid alternativet Ljuslåda, om denna inte redan är markerad.

  3. Låt menyn Alternativ vara öppen och gör alla andra ändringar som behövs för att konfigurera widgeten efter dina behov. Du kan till exempel visa eller dölja knapparna Föregående, Nästa, Bildtexter och Räknare. För ljuslådevisning är det bra att aktivera knappen Stäng. Markera kryssrutan bredvid alternativet Stängningsknapp.

    Stängningsknapp
    En stängningsknapp (med ett X) visas i det övre högra hörnet av bildspelet.

    Om du vill kan du använda markeringsverktyget för att flytta stängningsknappen till en annan plats. När besökare vill avsluta ljuslådevisning och stänga det modala fönstret kan de klicka på stängningsknappen eller trycka på Escape.

    Obs!

    Om du vill ändra bredden för kanten kring ljuslådefönstret väljer du widgeten för Bildspel i ljuslåda och uppdaterar inställningarna för Utfyllnad i panelen mellanrum.

  4. Välj Arkiv > Förhandsvisa sidan i webbläsaren för att testa bildspelswidgeten. Klicka på någon av miniatyrbilderna för att aktivera ljuslådeeffekten och visa motsvarande huvudbild i ett fönster samtidigt som resten av sidan tonas ned.

  5. Klicka på Nästa eller Föregående för att bläddra igenom bilderna i bildspelet.

  6. När du har testat bildspelet kan du stänga ljuslådevisningen genom att klicka på Stäng. Ljuslådan stängs och resten av innehållet på sidan visas.

  7. Stäng webbläsaren och återgå till Adobe Muse.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy