Läs om hur du lägger till kompositionswidgetar i Adobe Muse. Du kan skapa interaktiva webbplatser genom att konfigurera kompositionswidgetar.

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.

Med kompositionswidgetar i Adobe Muse kan du lägga till komplex interaktivitet till dina webbplatser. Oavsett om det är en fotografiwebbplats eller en restaurangwebbplats kan kompositionswidgetar vara praktiskt taget oumbärliga för alla webbplatser för att visa olika typer av innehåll. Du kan använda widgetarna för att skapa unika navigations- och bläddringsupplevelser, utan att skriva en enda rad kod.

I Adobe Muse finns flera typer av kompositionswidgetar som du kan använda för att lägga till olika sorters innehåll på din webbplats. Om du skapar en fotografiwebbplats kan du till exempel välja en widget med ljuslådevisning för att ha ett fotogalleri på webbplatsen. Den här widgeten dämpar tillfälligt resten av sidan och drar därigenom besökarens fokus till det aktiva visningsområdet.

Det är också möjligt att skapa intressant webbdesign genom att kapsla widgetar inuti en kompositionswidget. Om du till exempel utformar en katalog kan du använda en tom kompositionswidget för att skapa en hamburgermeny och kapsla en bildspelswidget i målområdet på den tomma kompositionswidgeten. Sådan design ger dina besökare en unik upplevelse.

Läs vidare och lär dig om de olika typerna av kompositionswidgetar som finns i Adobe Muse.

Typer av kompositionswidgetar

En kompositionswidget har två behållare: Utlösare och Mål. Utlösningsområdet är där en besökare klickar och målområdet är motsvarande område som visas. Du kan länka utlösar- och målområden för att öka komplexiteten och interaktiviteten för webbplatsen.

Adobe Muse erbjuder följande typer av kompositionswidgetar. Baserat på dina designkrav kan du antingen använda en av dessa widgetar eller en kombination av dem genom kapsling.

Tom

Tom kompositionswidget i Adobe Muse
Tom kompositionswidget i Adobe Muse

En widget med små miniatyrbilder. Som standard har denna widget ingen fyllning. Du kan länka den här till en målbehållare manuellt.

Aktuella nyheter

Aktuella nyheter - kompositionswidget i Adobe Muse
Aktuella nyheter - kompositionswidget i Adobe Muse

En widget som fungerar ungefär som en dragspelswidget. Du kan lägga till text och bilder i behållarområdet för den här widgeten.

Ljuslådevisning

Ljuslådevisning - kompositionswidget i Adobe Muse
Ljuslådevisning - kompositionswidget i Adobe Muse

En widget där innehållet i målområdet blir aktivt när du klickar på utlösaren. Resten av sidan är nedtonad när målet visas.

Presentation

Presentation - kompositionswidget i Adobe Muse
Presentation - kompositionswidget i Adobe Muse

Den här widgeten innehåller små miniatyrbilder som är kopplade till målpresentationsområdet. Som standard sveps bilderna horisontellt i den här widgeten.

Verktygstips

Verktygstips - kompositionswidget i Adobe Muse
Verktygstips - kompositionswidget i Adobe Muse

Den här widgeten innehåller verktygstipstext. När en användare håller pekaren över utlösarområdet visas verktygstipset direkt.

Lägga till och konfigurera kompositionswidgetar

Om du vill lägga till och använda en kompositionswidget i Adobe Muse väljer du den kompositionswidget du vill använda och sedan drar du den till vyn Design. Eftersom de här widgetarna är responsiva som standard är widgetarna variabla för olika brytpunkter. Om du vill ändra positionen för eller innehållet i en kompositionswidget kan du ändra, ändra storlek på eller fästa enskilda widgetelement vid en viss brytpunkt.

Följ den här proceduren om du vill lägga till en kompositionswidget i layouten.

  1. Öppna Adobe Muse. På välkomstskärmen kan du antingen klicka på Skapa ny för att skapa en ny webbplats, eller öppna en befintlig Adobe Muse-webbplats där du vill lägga till en kompositionswidget.

  2. Från vyn Planera dubbelklickar du och öppnar den sida där du vill lägga till widgeten.

  3. Öppna widgetbiblioteket (Fönster > Widgetbibliotek) och klicka på Kompositioner för att expandera alternativet. Välj en av kompositionswidgetarna utifrån dina designkrav.

    Välj till exempel Ljuslådevisning i Widgetprogrambibliotek.

    Obs!

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

    Dra en kompositionswidget från Widgetprogrambibliotek i Adobe Muse.
    Dra en kompositionswidget från Widgetprogrambibliotek.

    Standardversionen av ljuslådevisningswidgeten har tre mindre gråa utlösarrutor över den större ljusgråa målbehållaren.

    När besökare klickar på utlösarbehållaren visas målbehållaren i ljuslådevisningswidgeten. Du kan bädda in bilder, text och videofilmer (även från YouTube) som mål.

  4. Markera behållaren eller utlösaren i kompositionswidgeten. Om du vill markera hela widgeten klickar du på den. Ordet Komposition visas i markeringsindikatorn längst upp till vänster i programmet.

    Om du vill välja utlösaren dubbelklickar du på och markerar de mindre rutorna i widgeten. Ordet Utlösare visas i markeringsindikatorn. De mindre rutorna är utlösare för widgeten. De är knappar som användare kan interagera med.

    Visa markeringsindikatorn längst upp till vänster på Adobe Muse-sidan
    Visa markeringsindikatorn längst upp till vänster på sidan

    Inga andra element är markerade när ordet "Sida" visas i markeringsindikatorn längst upp till vänster.

  5. Välj Arkiv > Montera för att öppna dialogrutan Importera. Bläddra efter och välj de filer du vill montera i widgeten. Klicka på Öppna för att välja filen och stänga dialogrutan Importera.

    Klicka en gång på sidan för att montera bilden med fullständig storlek.

  6. När bilden fortfarande är markerad högerklickar du och väljer Klipp ut i menyn.

    Du kan även använda kortkommandot för att klippa ut bilden, som tar bort den från sidan och kopierar den till Urklipp.

  7. Högerklicka i utlösarknappen och välj Klistra in. Du kan även använda kortkommandot för att klistra in till att klistra in bilden i utlösaren. Utlösarbehållaren blir automatiskt lika stor som bilden.

    Det kan vara svårt att klistra in innehåll i en behållare. Ibland kan innehållet faktiskt vara inklistrat på sidan, fast du tror att det är inklistrat i behållaren.

    Om du vill bekräfta att bilden finns i utlösarbehållaren trycker du en gång på Esc och tittar på markeringsindikatorn. Om ordet "Utlösare" visas i markeringsindikatorn är bilden i utlösaren. Om ordet "Sida" visas i markeringsindikatorn måste du klippa ut och klistra in bilden i utlösarbehållaren igen.

    Du kan också öppna panelen Lager (Fönster > Lager) för att verifiera var bilden klistras in. Panelen Lager visar elementens hierarki på en sida.

  8. Om du vill lägga till fler miniatyrbilder klickar du på plustecknet (+) bredvid utlösarbehållarna.

    Klicka på + för att lägga till miniatyrbilder i en ljuslådevisning
    Klicka på + för att lägga till miniatyrbilder
  9. När widgeten är placerad i vyn Design kan du gå vidare och konfigurera widgeten. Om du vill konfigurera alternativ för kompositionswidgeten markerar du widgeten och klickar på den blå pilen längst upp till höger i widgeten.

    Konfigurera kompositionswidgeten med hjälp av menyn Alternativ
    Konfigurera kompositionswidgeten med hjälp av panelen Alternativ

    Du kan konfigurera följande inställningar i panelen Alternativ:

    • Placering: ange var målområdet är placerat på sidan. Välj Skiktat om du vill att dina mål ska överlappas och välj Spridda om du vill att dina mål ska placeras i olika positioner. Välj Ljuslåda om du vill tona ned resten av sidan.
    • Visa mål: Anger beteende för målet när en användare klickar på utlösaren. 
    • Dölj mål: ange att målet ska vara dolt. Målområdet förblir dolt om inte en användare klickar på utlösaren. 
    • Övergång: ange hur innehållet i målområdet ska ändras när en användare klickar på eller för pekaren över utlösaren. Välj Toning om du vill tona in det nya målet, Horisontellt om du vill låta målen glida in horisontellt och Vertikalt om du vill låta målen glida in vertikalt. 
    • Övergångshastighet: Anger hastigheten för övergångarna. för kompositionswidgeten. Om du vill att övergången ska vara omedelbar väljer du Ingen.
    • Spela upp automatiskt: använd det här alternativet om du vill skapa ett bildspel på webbplatsen. Om du väljer det här alternativet spelas bilderna upp automatiskt utan att användaren behöver göra något.
    • Blanda: välj det här alternativet om du vill visa målen i slumpmässig ordning.
    • Utlösare överst: Välj det här alternativet om du vill placera utlösaren ovanför målbehållaren. Du kan se samma hierarki som visas i panelen Lager.
    • Aktivera svepning: välj det här alternativet om du vill att det ska gå att gå till nästa mål genom att svepa på enheter med pekfunktioner.
    • Dölj alla ursprungligen: välj det här alternativet om du vill dölja alla målalternativ när webbplatsen läses för första gången. Användarna måste klicka på motsvarande utlösare för att målen ska visas.
    • Automatisk ljuslåda: välj det här alternativet om du vill att ljuslådan ska visas automatiskt när webbplatsen läses in.
    • Delar: välj Föreg, Nästa eller Stängningsknapp om du vill göra widgeten ännu mer interaktiv. Användare kan klicka på alternativen föregående, nästa och stäng på webbplatsen.
    • Redigering: välj Visa ljuslådedelar vid redigering om du vill visa målområdet i vyn Design när du redigerar widgeten. Välj visa alla i designläget om du vill visa alla målbehållare samtidigt i vyn Design.
    Konfigurera inställningarna för kompositionswidgetar i Adobe Muse
    Konfigurera inställningarna för kompositionswidgetar

    Obs!

    Alternativet Visa ljuslådedelar vid redigering är avaktiverat när du har valt Spridda eller Skiktat som alternativ i listrutan Position.

    Alternativet Dölj alla ursprungligen är avaktiverat om du väljer Automatisk ljuslåda.

  10. Om du vill ta bort de utlösare du inte behöver dubbelklickar du på den utlösare du vill ta bort. Tryck på Delete (MacOS) eller Backsteg (Windows) för att ta bort den markerade utlösaren.

  11. Om du vill anropa ljuslådeeffekten klickar du på startsidebanderollbilden i utlösarbehållaren.

    Klicka på en bild till vänster (utlösare) för att visa ljuslådevisningen
    Klicka på en bild till vänster (utlösare) för att visa ljuslådevisningen (till höger)

    Om du vill stänga ljuslådefönstret och återgå till vyn Design för att fortsätta redigera Adobe Muse-sidan trycker du på Esc.

  12. När du har konfigurerat och monterat kompositionswidgeten i designen kan du testa den i vyn Förhandsvisning.

Läs följande avsnitt om du använder en kompositionswidget i en responsiv layout. Se till att du testar och förhandsvisar din widget på alla dina brytpunkter.

Använda kompositionswidgetar i en responsiv layout

Kompositionswidgetar är variabla eller responsiva som standard. Gör något av följande för att lägga till och använda kompositionswidgetar i en responsiv layout:

  • Om du skapar en ny responsiv webbplats med den senaste versionen av Adobe Muse drar och placerar du kompositionswidgeten i vyn Design från panelen Widgetprogrambibliotek.
  • Om du har använt Adobe Muse 2017.0.3 eller tidigare versioner är din kompositionswidget inte responsiv. I det här fallet öppnar du .muse-filen med den senaste versionen av Adobe Muse. Markera elementen inuti widgeten och välj alternativet Ändra storlek som Responsiv bredd eller Responsiv höjd och bredd (efter behov).
Konvertera icke-responsiva kompositionswidgetar till responsiva
Konvertera icke-responsiva kompositionswidgetar till responsiva

Obs!

Du kan inte markera hela widgeten och ändra egenskaperna för att ändra storlek. Markera enskilda element inuti widgeten för att göra den responsiv.

Konfigurera widgeten genom att följa stegen som beskrivs i Lägga till och konfigurera kompositionswidgetar. När du har konfigurerat och stylat widgeten kan du antingen förhandsvisa widgeten i webbläsaren eller använda skrubbaren och ändra storlek. Du kommer att se att widgetarna ändrar storlek automatiskt beroende på skärmens storlek.

Responsiv kompositionswidget i Adobe Muse
Responsiv kompositionswidget i Adobe Muse

Obs!

När du lägger till kompositionswidgetar i en responsiv layout rekommenderar vi att du lägger ut din design i den största brytpunkten först. När du har slutfört positioneringen och konfigurationen av widgeten på den största brytpunkten kan du lägga till ytterligare brytpunkter där så behövs.

Du kan läsa mer om hur du designar din webbplats för responsiv layout på Lägga ut objekt i responsiv design.

Kombinera en kompositionswidget med andra widgetar

En av de mest unika aspekterna av en kompositionswidget är stödet för kapslade widgetar inuti en kompositionswidget. Det innebär att du kan lägga till widgetprogram som former, bildspel eller menypunkter inuti en kompositionswidget.

Du kan till exempel lägga till en bildspelswidget inuti målbehållaren med en aktuella nyheter-widget på en matlagningswebbplats. När en besökare klickar på menyetiketten (Aktuella nyheter-widget) visas det målområde som innehåller galleriet som ett bildspel.

Du kan också lägga till ett kontaktformulär som ett mål så att en användare som klickar på etiketten Kontakt tas direkt till kontaktformuläret.

Det finns många fler kombinationer och designmöjligheter som du kan uppnå med kapsling. Notera dock följande aspekter när du utformar kapslade widgetar i en responsiv layout:

  • Det går inte att fästa responsiva element som är kapslade i en icke-responsiv behållare.
  • Objekten är inte responsiva om du placerar dem i en icke-responsiv behållare.

Obs!

När du kapslar widgetar inuti kompositionswidgetar rekommenderar vi att du inte använder mer än tre nivåer av kapsling.

Följande avsnitt beskriver hur du skapar en undermeny med en kompositionswidget. Fortsätt läsa om du vill lära dig mer om det här exempelscenariot för att skapa en dold undermeny för webbplatsnavigeringen.

Skapa undermenyer med hjälp av kompositionswidgetar

Du kan skapa sidnavigering med undermenyer med hjälp av kompositionswidgetar. Du kan skapa ett menyalternativ som används till att visa en undermeny när en besökare håller pekaren över det aktiva området, och döljer samma undermeny när besökaren tar pekaren från det aktiva området för undermenyn. Du kan även konfigurera widgeten så att en undermeny döljs om besökaren väljer att inte klicka på någon av länkarna på undermenyn och ta bort pekaren från den. Den här typen av undermenyer kan vara praktiska när du skapar ett navigeringsfält för en plats med många olika underavsnitt. 

Menyerna Visa mål och Dölj mål är användbara när du vill använda samma menybeteende på hela webbplatsen. Besökaren kan klicka på någon av länkarna, eller så kan du placera markören utanför området för att dölja fönstret. Det är inte nödvändigt att klicka på en stängningsknapp för att dölja en undermeny när det här alternativet är aktiverat.

Den här funktionen är tillgänglig när du arbetar med följande kompositionswidgetar:

  • Tom
  • Aktuella nyheter
  • Verktygstips

Panelen Alternativ har två inställningar för att visa målbehållaren:

  • Vid klickning: Visar målet när en användare klickar
  • Vid överrullning: Visar målet när en användare rullar över utlösaren

Du kan även välja att dölja målbehållaren i en kompositionswidget. Följande är de fyra alternativen för att dölja målbehållaren:

  • Ingen
  • Vid klickning
  • Vid utrullning
  • Vid utrullning av utlösare och mål

I följande avsnitt beskrivs hur du använder funktionen för överrullning till att visa målbehållaren och utrullningsfunktionen för att dölja målbehållaren för både den utlösande behållaren och målbehållaren.

Följ stegen nedan för att visa hur du kan aktivera inställningen Dölj vid utrullning för kompositionswidgetar för att skapa ett menyfält som döljer och visar undermenyalternativ i enlighet med besökarens aktivitet:

  1. Gå till vyn Design och lägg till en ljuslådewidget på sidan genom att dra widgeten från Widgetprogrambibliotek.

  2. Markera utlösarbehållarna. Använd markeringsverktyget för att flytta alla tre utlösande behållare högst upp över den större målbehållaren och sprid ut dem jämnt.

    Flytta utlösarbehållare
    Placera utlösarbehållaren över den större huvudbilden.

  3. Använd markeringsverktyget för att dra i sidohandtagen för varje utlösarbehållare. Expandera bredden för att skapa en uppsättning av tre "flikar" längs den övre delen, på samma sätt som en flikpanel.

    Dra i handtagen med markeringsverktyget
    Dra begränsningsramarna för att öka bredden för de tre utlösarknapparna.

  4. Lägg till det obligatoriska innehållet i de tre utlösarområdena. Innehållet i utlösaren kan inkludera text, länkar, bilder, rektanglar, inbäddad HTML och mer. Du kan till exempel använda verktyget Text till att lägga till text för varje utlösare: "Länk ett", "Länk två" och "Länk tre".

    Skapa en länk i det andra målinnehållsområdet.

  5. Klicka på en utlösarbehållare och välj sedan motsvarande större utlösarbehållare. Lägg till en länk i det andra målinnehållsområdet. Klicka på listrutan bredvid etiketten Hyperlänkar på höger sida av kontrollpanelen. Lägg till en länk till den webbadress du vill länka till.

  6. Välj Arkiv > Förhandsvisa sidan i webbläsaren för att testa hur kompositionswidgetarna visas.
    Interagera med widgeten genom att klicka på utlösarbehållarna med namnen Länk ett, Länk två och Länk tre.

    Observera att målbehållaren som standard alltid visas och aldrig döljs. Du kan växla mellan de tre utlösarknapparna för att visa motsvarande målbehållare, men en av de tre målbehållarna visas alltid.

  7. Om du vill konfigurera inställningen Dölj vid utrullning markerar du kompositionswidgeten. Klicka på den blå pilen för att få tillgång till panelen Alternativ och konfigurera widgeten.

    Aktivera följande inställningar:

    • Placering: Skiktat (standard)
    • Visa mål: Vid överrullning
    • Dölj mål: Vid utrullning från utlösare och mål
    • Övergång: Toning (standard)
    • Överföringshastighet: 0,5 sekunder (standard)
    • Spela upp automatiskt: Avaktiverat (standard)
    • Blanda: Avaktiverat (standard)
    • Dölj alla ursprungligen: Aktiverat
    Panelen för kompositionsalternativ
    Uppdatera inställningarna i alternativpanelen för att styra hur widgeten beter sig.

    Inställningarna som kontrollerar funktionerna för att dölja och visa är menyn Visa mål, menyn Dölj mål och aktivering av alternativet Dölj alla ursprungligen.

  8. Välj Arkiv > Förhandsvisa sidan i webbläsare en gång till för att testa de ändringar du har gjort för widgeten.

    När kompositionswidgeten läses in döljs alla målområden som standard.

    Interagera med widgeten igen. Lägg märke till att när du rullar över ett utlösarområde visas motsvarande målområde. Om pekaren hålls över widgetområdet kan du interagera med innehållet i målområdena (t.ex. genom att klicka på länken till en webbplats i den mittre målbehållaren).

    Om du håller pekaren utanför utlösar- eller målområdena döljs målområdena tills du håller den över ett annat utlösarområde.

    Den här funktionen gör det möjligt att konfigurera en mycket mer komplex interaktiv platsnavigering, som svarar på besökarens navigering med musen.

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