Lær, hvordan du tilføjer kompositionswidgets i Adobe Muse. Konfigurer kompositionswidgets for at lave interaktive websites.

Bemærk:

Adobe Muse tilføjer ikke længere nye funktioner og slutter med at tilbyde support 26. marts 2020. Find flere oplysninger og hjælp på Adobe Muses side om ophør af tjeneste.

Kompositionswidgets i Adobe Muse giver dig mulighed for at tilføje kompleks interaktivitet på din websites. Om det er et website for en fotograf eller en restaurant kan kompositionswidgets være uundværlige for sitet og kan fremvise en bred vifte af indhold. Du kan bruge disse widgets til at skabe unikke navigerbare browseroplevelser uden at skrive en eneste kode.

Adobe Muse tilbyder adskillige slags kompositionswidgets, som gør det muligt at tilføje og designe forskellige typer indhold til dit website. Hvis du f.eks. laver et website med fotografier, kan du vælge en Lightbox-visningswidget til et fotogalleri på websitet. Denne widget nedtoner midlertidigt resten af siden, så den besøgendes opmærksomhed trækkes hen mod det aktive visningsområde.

Det er også muligt at skabe interessante webdesign ved at indlejre widgets inden i en kompositionswidget. Hvis du f.eks. designer et katalog, kan du bruge en tom kompositionswidget til at lave en hamburgermenu og indlejre en diasshowwidget i målområdet i den tomme kompositionswidget. Sådanne design skaber en unik brugeroplevelse for websitets besøgende.

Læs videre for at få mere at vide om de typer kompositionswidgets, der er tilgængelige i Adobe Muse.

Typer af kompositionswidgets

En kompositionswidget består af to containere: Udløser og mål. Udløserområdet er det område, som en besøgende klikker på, og målområdet er det tilsvarende områder, der vises. Du kan sammenkæde udløser- og målområderne for at gøre dit website komplekst og interaktivt.

Adobe Muse tilbyder følgende typer kompositionswidgets. Baseret på dine designkrav kan du enten bruge en af disse widgets eller en kombination af disse widgets ved hjælp af indlejring.

Tom

Kompositionswidgeten Tom i Adobe Muse
Kompositionswidgeten Tom i Adobe Muse

En widget med små miniaturebilleder. Som standard har denne widget intet fyld. Du kan manuelt linke denne til en målcontainer.

Fremhævede nyheder

Kompositionswidgeten Fremhævede nyheder i Adobe Muse
Kompositionswidgeten Fremhævede nyheder i Adobe Muse

En widget, der fungerer på samme måde som en harmonikawidget. Du kan tilføje tekst og billeder i denne widgets containerområde.

Lightbox-visning

Kompositionswidgeten Lightbox-visning i Adobe Muse
Kompositionswidgeten Lightbox-visning i Adobe Muse

En widget, hvor indholdet i målområdet bliver aktivt, når du klikker på udløseren. Resten af siden nedtones, når målet vises.

Præsentation

Kompositionswidgeten Præsentation i Adobe Muse
Kompositionswidgeten Præsentation i Adobe Muse

Denne widget indeholder små miniaturebilleder, der er forbundet til målpræsentationsområdet. Som standard stryges diasbilleder vandret i denne widget.

Værktøjstip

Kompositionswidgeten Værktøjstip i Adobe Muse
Kompositionswidgeten Værktøjstip i Adobe Muse

Denne widget indeholder tekst i værktøjstippet. Når en bruger placerer en markør over udløserområdet, vises værktøjstippet med det samme.

Tilføj og konfigurer kompositionswidgets

Du kan tilføje og bruge en kompositionswidget i Adobe Muse ved at vælge den kompositionswidget, du vil tilføje, og trække den ind i designvisningen. Da disse widgets som standard er responsive, kan du se, at widgeten er flydende på tværs af forskellige brudpunkter. Hvis du vil ændre placeringen af eller indholdet i en kompositionswidget, kan du modificere, ændre størrelse på eller fastgøre de enkelte widgetelementer for et specifikt brudpunkt.

Følg denne fremgangsmåde for at føje en kompositionswidget til dit layout.

  1. Åbn Adobe Muse. På velkomststartbilledet skal du enten klikke på Opret ny for at oprette et nyt website eller åbne et eksisterende Adobe Muse-website, hvor du vil tilføje en kompositionswidget.

  2. På planvisningen skal du dobbeltklikke og åbne den side, hvor du vil tilføje widgeten.

  3. Åbn widgetsbiblioteket (Vindue > Widgets-bibliotek), og klik på Kompositioner for at udvide det. Vælg en kompositionswidget baseret på dine krav til designet.

    Du kan f.eks. vælge en Lightbox Display fra widgetsbiblioteket.

    Bemærk:

    Du kan fjerne standardindholdet i widgeten ved at højreklikke på widgeten og vælge Slet widgetindhold.

    Træk en kompositionswidget fra widgetsbiblioteket ind i Adobe Muse.
    Træk en kompositionswidget fra widgetsbiblioteket.

    Standardversionen af widgeten Lightbox-visning har tre mindre grå udløserbokse over den større lysegrå målcontainer.

    Når besøgende klikker på udløsercontaineren, vises målcontaineren for Lightbox-visning. Du kan indlejre billeder, tekst, videoer, herunder YouTube-videoer, som målet.

  4. Vælg containeren eller udløseren i kompositionswidgeten. Markér widgeten for at vælge hele widgeten. Markeringsindikatoren i øverste venstre hjørne i programmet viser ordet Komposition.

    Dobbeltklik og vælg de mindre bokse i denne widget for at vælge udløseren. Ordet Udløser vises i markeringsindikatoren. De mindre bokse er udløserne for denne widget. De er knapperne, der reagerer på brugerinteraktion.

    Se markeringsindikatoren i øverste venstre hjørne på Adobe Muse-siden
    Se markeringsindikatoren i øverste venstre hjørne på siden

    Du kan se, at ingen andre elementer er valgt, når markeringsindikatoren i øverste venstre hjørne viser ordet Side.

  5. Vælg Filer > Placer for at åbne dialogboksen Importer. Søg for at markere de filer, du vil placerer i widgeten. Klik på Åbn for at vælge filen og lukke dialogboksen Importer.

    Klik én gang hvor som helst på siden for at placere billedet i fuld størrelse.

  6. Selvom billedet stadig er markeret, skal du højreklikke og vælge Klip på kontekstmenuen.

    Du kan også bruge tastaturgenvejen til at klippe billedet, så det fjernes fra siden, og kopiere det til udklipsholderen.

  7. Højreklik inden i udløserknappen og vælg Indsæt. Du kan også bruge genvejstasterne på tastaturet for at indsætte billedet i udløseren. Bemærk, at udløsercontaineren automatisk udvides til billedets dimensioner.

    Det kan være svært at indsætte indhold i en container. Nogle gange tror du, at det er blevet indsat indeni, mens det i virkeligheden er indsat på siden.

    Hvis du har brug for at kontrollere, at billedet er inden i udløsercontaineren, skal du trykke på Esc én gang og se på markeringsindikatoren. Hvis det viser ordet Udløser, ved du, at billedet er inden i udløseren. Hvis markeringsindikatoren viser ordet Side, er du nødt til at klippe og indsætte billedet inde i udløsercontaineren igen.

    Du kan også åbne lagpanelet (Vindue > Lag) for at se, hvor billedet er blevet indsat. Lagpanelet viser hierarkiet af elementer på siden.

  8. Klik på plustegnet (+) ved siden af udløsercontainerne for at tilføje flere miniaturebilleder.

    Klik på + for at tilføje miniaturebilleder i en Lightbox-visning
    Klik på + for at tilføje miniaturebilleder
  9. Når du har placeret widgeten i designvisningen, kan du gå i gang med at konfigurere widgeten. Du kan konfigurere indstillingerne for din kompositionswidget ved at vælge widgeten og klikke på den blå pil i øverste højre hjørne på widgeten.

    Konfigurer kompositionswidgets ved hjælp af menuen Indstillinger
    Konfigurer kompositionswidgets ved hjælp af panelet Indstillinger

    Du kan konfigurere følgende indstillinger fra panelet Indstillinger:

    • Placering: Angiver, hvor målområdet er placeret på siden. Vælg Stablet, hvis du vil have, at din mål overlapper, og vælg Spredt, hvis du vil have, at dine mål placeres på forskellige placeringer. Vælg Lightbox, hvis du vil nedtone resten af siden.
    • Vis mål: Angiver indstillingen for målfunktionen, når en bruger klikker på udløseren. 
    • Skjul mål: Angiver indstillingerne for, hvordan du skjuler et mål. Medmindre en bruger klikker på udløseren, forbliver målområdet skjult. 
    • Overgang: Angiver, hvordan indholdet i målområder ændres, når en bruger klikker eller ruller over udløseren. Vælg Udtoning for at fade det nye mål ind, Vandret for at vise diasbilleder i en vandret bevægelse, Lodret for at vise diasbilleder i en lodret bevægelse. 
    • Overgangshastighed: Specificerer hastigheden på overgangen for din kompositionswidget. Hvis overgangen skal ske med det samme, skal du vælge Ingen.
    • Automatisk afspilning: Konfigurer denne indstilling for at lave et diasshow på dit website. Hvis du vælger denne indstilling, afspilles diasbillederne automatisk, uden interaktion fra brugeren.
    • Bland: Vælg denne indstilling, hvis du vil have målene vist i tilfældig rækkefølge.
    • Udløsere øverst: Vælg denne indstilling for at placere Udløseren over målcontaineren. Du kan også se samme hierarki vist i lagpanelet.
    • Aktivér svip: Vælg denne indstilling for aktivere svipbevægelser for at gå videre til næste mål på enheder med berøringsskærme.
    • Skjul alt først: Vælg denne indstilling, hvis du vil skjule alle målindstillinger, når websitet indlæses. Brugere skal klikke på den tilhørende udløser for at se målet.
    • Auto Lightbox: Vælg denne indstilling, hvis du vil have, at Lightbox'en automatisk skal vises, når websitet indlæses.
    • Dele: Vælg knappen Forrige, Næste eller Luk for at føje ekstra interaktivitet til din widget. Brugerne kan klikke på forrige, næste og luk på dit website.
    • Redigering: Vælg Vis Lightbox-dele under redigering for at vise målområder i designvisningen, når du redigerer widgeten. Vælg Vis alt i designtilstand for at vise alle målcontainere på samme tid i designvisningen.
    Konfigurer indstillingerne for kompositionswidgets i Adobe Muse
    Konfigurer indstillingerne for kompositionswidgets

    Bemærk:

    Indstillingen Vis Lightbox-dele under redigering er deaktiveret, hvis du har valgt Spredt eller Stablet som indstilling i rullemenuen Placering.

    Indstillingen Skjul alt først er deaktiveret, hvis du vælger indstillingen Auto Lightbox.

  10. Du kan fjerne udløsere, du ikke skal bruge, ved at dobbeltklikke på den udløser, du gerne vil slette. Tryk på Delete (Mac), eller Backspace (Windows) for at fjerne den valgte udløser.

  11. Klik på heltebilledet i udløsercontaineren for at aktivere Lightbox-effekten.

    Klik på et billede til venstre (udløser) for at se Lightbox-visningen
    Klik på et billede til venstre (udløser) for at se Lightbox-visningen (som vist til højre)

    Tryk på Esc for at lukke Lightbox-vinduet og gå tilbage til designvisningen for at fortsætte med at redigere Adobe Muse-siden.

  12. Når du har konfigureret og placeret din kompositionswidget i dit design, kan du teste widgeten i forhåndsvisningen.

Hvis du bruger en kompositionswidget i et responsivt layout, skal du læse følgende afsnit. Sørg for, at du tester og ser en forhåndsvisning af din widget på alle dine brudpunkter.

Brug af kompositionswidgets i et responsivt layout

Kompositionswidgets er som standard flydende eller responsive. Du kan tilføje og bruge kompositionswidget i et responsivt layout ved at gøre et af følgende:

  • Hvis du opretter et nyt responsivt website med den nyeste version af Adobe Muse skal du fra panelet Widgets-bibliotek trække og placere kompositionswidgeten i designvisnigen.
  • Hvis du bruger Adobe Muse 2017.0.3 eller ældre versioner, er dine kompositionswidgets ikke responsive. I dette tilfælde skal du åbne din .muse-fil med den nyeste version af Adobe Muse. Vælg elementerne inden i widgeten, og vælg indstillingen Tilpas størrelse som responsiv bredde eller responsiv højde og bredde (alt efter hvilken en, der er relevant at bruge).
Konvertering af ikke-responsive kompositionswidgets til responsive
Konvertering af ikke-responsive kompositionswidgets til responsive

Bemærk:

Du kan ikke vælge hele widgeten og ændre egenskaberne for tilpasning af størrelse. Vælg et enkelte element eller elementer inden i widgeten for at gøre den responsiv.

Konfigurer din widget ved at følge trinnene i Tilføj og konfigurer kompositionswidgets. Når du har konfigureret og formateret widgeten, kan du enten se en forhåndsvisning af widgeten i en browser eller bruge skrubben til at tilpasse størrelsen. Du kan se, at widgets automatisk tilpasser størrelsen alt efter skærmstørrelsen.

Responsive kompositionswidgets i Adobe Muse
Responsive kompositionswidgets i Adobe Muse

Bemærk:

Når du føjer kompositionswidget til et responsivt layout, anbefaler vi, at du arrangerer dit design i det største brudpunkt først. Når du har færdiggjort placeringen og konfigurationen af widgeten på det største brudpunkt, kan du tilføje ydereliger brudpunkter alt efter behov.

Få mere at vide om at designe dit website med et responsivt layout ved at se Placering af objekter i responsivt design.

Kombinering af kompositionswidgets med andre widgets

Et af de mest unikke aspekter ved en kompositionswidget er, at den understøtter indlejring af widgets indeni. Det vil sige, at du kan tilføje widgets, som formularer, diasshows eller menuelementer, inden i en kompositionswidget.

Du kan f.eks. tilføje en diasshowwidget inden i målcontaineren på en widget med fremhævede nyheder på et madlavningssite. Når en besøgende klikker på menuen (Fremhævede nyheder-widget), vises målområdet med et galleri som et diasshow.

Du kan også tilføje en kontaktformular som et mål, så når en bruger klikker på Kontakt-etiketten, føres brugeren straks til kontaktformularen.

Der er mange flere kombinationer og designmuligheder, som du kan lave med indlejring. Vær dog opmærksom på følgende, når du designer indlejrede widgets i et responsivt layout:

  • Fastgørelse er ikke altid tilgængelig for responsive elementer, der er indlejret inden i en ikke-responsiv container. 
  • Objekter er ikke responsive, når du placerer dem inden i en ikke-responsiv container.

Bemærk:

Når du indlejrer widgets inden i kompositionswidgets, anbefaler vi, at du ikke bruger mere end tre niveauer af indlejring.

I følgende afsnit kan du læse om, hvordan du opretter en undermenu med en kompositionswidget. Læs videre for at lære dette prøvescenario for at oprette en skjult undermenu til navigering på dit website.

Opret undermenuer med kompositionswidgets

Du kan konfigurere kompositionswidgets for at bygge sidenavigering med undermenuer. Du kan oprette et menupunkt, der viser en undermenu, når en besøgende ruller sin markør over det aktive område, og skjuler samme undermenu, når den besøgende ruller markøren væk fra det aktive område, der udløste, at undermenuen åbnede. Du kan også konfigurere widgeten, så en undermenu skjules, hvis den besøgende ikke klikker på nogen links i undermenuen og bare ruller sin markør ud af selve undermenuen. Muligheden for at oprette disse typer interaktive undermenuer er praktisk, når du skal oprette en navigationslinje til et website med mange forskellige undersektioner. 

Menuerne Vis mål og Skjul mål er nyttige, hvis du vil gengive en almindelig menufunktion på dit website. Den besøgende kan vælge at klikke på links eller rulle sin markør uden for vinduesområdet for at skjule vinduet. Det er ikke nødvendigt at klikke på en lukkeknap for at skjule en undermenu, når denne indstilling er aktiveret.

Denne funktion er tilgængelig, når du arbejder med følgende kompositionswidgets:

  • Tom
  • Fremhævede nyheder
  • Værktøjstip

Panelet Indstillinger indeholder to indstillinger til visning af målcontaineren:

  • Ved klik: Viser målet, når en bruger klikker
  • Ved overgang: Viser målet, når en bruger ruller over udløseren

Du kan også vælge at skjule målcontaineren i en kompositionswidget. Følgende er fire indstillinger, der kan bruges til at skjule målcontaineren:

  • Ingen
  • Ved klik
  • Ved udrulning
  • Ved udrulning af udløser og mål

I følgende afsnit får du at se, hvordan du kan bruge Ved overgang til at vise målcontaineren og ved udrulning af både udløsercontaineren og målcontaineren til at skjule målcontaineren.

Følg nedenstående trin for at se, hvordan du kan aktivere indstillinger af Skjul ved udrulning i kompositionswidgets for at oprette en menulinje, der skjuler og viser undermenulinks på basis af besøgendes interaktion:

  1. Tilføj i designvisning en Lightbox-kompositionswidget på siden ved at trække den fra widgetsbiblioteket.

  2. Vælg udløsercontainerne. Brug markeringsværktøjer til at flytte alle tre udløsercontainere til toppen over den store målcontainer, og fordel dem jævnt på siden.

    Flyt udløsercontainerne
    Flyt udløsercontainerne oven over det større heltebillede.

  3. Brug markeringsværktøjet til at trække i sidehåndtagene af hver udløsercontainer. Udvid bredden for at oprette et sæt af tre "faner" langs toppen i stil med en faneopdelt panel-widget.

    Brug markeringsværktøjet til at trække i håndtagene
    Træk afgrænsningsrammerne for at udvide bredden af de tre udløserknapper.

  4. Tilføj det ønskede indhold i hvert af de tre udløserområder. Udløserindholdet kan inkludere tekst, links, billeder, rektangler, integreret HTML m.m. Du kan f.eks. bruge tekstværktøjet til at føje tekst til hver udløser: Link one, Link two og Link three.

    Opret nu et link inde i det andet målområde med indhold.

  5. Klik på en udløsercontainer, og vælg derefter den større målcontainer, der svarer til den. Føj et link til det andet målområde for indhold. Klik derefter på rullemenuen ud for navnet Hyperlinks i højre side af kontrolpanelet. Føj et link til den webadresse, du vil linke til.

  6. Vælg Filer > Forhåndsvisning af side i browseren for at teste, hvordan kompositionswidgeten vises.
    Interager med widgeten ved at klikke på udløsercontainerne med navnene Link one, Link two og Link three.

    Bemærk, at målcontaineren som standard altid vises og aldrig skjules. Du kan klikke mellem de tre udløserknapper for at vise den tilsvarende målcontainer, men en af de tre målcontainere er altid vist.

  7. Vælg kompositionswidgeten for at konfigurere indstillingen Skjul ved udrulning. Klik på den blå pil for at få adgang til panelet Indstillinger og redigere widgetens konfigurationsindstillinger.

    Sørg for, at følgende indstillinger er aktiveret:

    • Position: Stablet (standard)
    • Vis mål: Ved overgang
    • Skjul mål: Ved udrulning af udløser og mål
    • Overgang: Udtoning (standard)
    • Overgangshastighed: 0,5 sekunder (standard)
    • Automatisk afspilning: Deaktiveret (standard)
    • Bland: Deaktiveret (standard)
    • Skjul alt først: Aktiveret
    Indstillingspanel for kompositioner
    Opdater indstillingerne i panelet Indstillinger for at styre widgetens funktionsmåde.

    De nøgleindstillinger, der styrer skjul/vis-funktionaliteten, er menuen Vis mål, menuen Skjul mål og aktivering af indstillingen Skjul alt først.

  8. Vælg Filer > Forhåndsvisning af side i browseren igen for at teste de seneste ændringer af widgeten.

    Når kompositionswidgeten nu indlæses første gang, er alle målområderne som standard skjult.

    Interager med widgeten igen. Bemærk, at når du ruller hen over et udløserområde, vises det tilsvarende målområde. Hvis din markør bliver i widgetområdet, kan du interagere med indholdet inden i målområder (f.eks. ved at klikke på linket til et website i den midterste målcontainer).

    Hvis du derimod ruller markøren ud af udløseren eller udløserområderne, er målområderne skjult, indtil du igen ruller hen over et andet udløserområde.

    Med denne funktion kan du få meget mere kompleks interaktiv websitenavigation, der svarer til de besøgendes musebevægelser.

Dette arbejde har licens under en Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Opslag på Twitter™ og Facebook er ikke omfattet af vilkårene for Creative Commons.

Juridiske meddelelser   |   Politik for beskyttelse af personlige oplysninger online