Leren hoe u compositiewidgets in Adobe Muse kunt toevoegen. Configureer compositiewidgets om interactieve websites te maken.

Opmerking:

Adobe Muse voegt geen nieuwe functies meer toe en stopt op donderdag 26 maart 2020 met de ondersteuning. Zie de pagina Einde van levensduur voor Adobe Muse voor meer informatie en assistentie.

Met compositiewidgets in Adobe Muse kunt u complexe interactieve functies aan uw websites toevoegen. Dat kan een site voor fotografie of een restaurant zijn. Compositiewidgets zijn onmisbaar op elke site als u een gevarieerde inhoud wilt aanbieden. U kunt deze widgets gebruiken voor een unieke ervaring tijdens het navigeren en bladeren zonder dat u ook maar een regeltje code hoeft te schrijven.

Adobe Muse biedt diverse typen compositiewidgets waarmee u verschillende soorten inhoud kunt ontwerpen en aan uw website kunt toevoegen. Als u bijvoorbeeld een website voor fotografie gaat maken, kunt u een lichtbakweergave gebruiken voor een fotogalerij op uw website. Deze widget dimt tijdelijk de rest van de pagina, zodat de aandacht van de bezoeker naar het actieve weergavegebied getrokken wordt.

Het is ook mogelijk om interessante webdesigns te maken door widgets in een compositiewidget te nesten. Als u bijvoorbeeld een catalogus ontwerpt, kunt een blanco compositiewidget gebruiken om een hamburgermenu te maken en een presentatiewidget in het doelgebied van de blanco compositiewidget nesten. Zulke ontwerpen zorgen voor een unieke gebruikservaring voor bezoekers aan uw site.

Lees verder voor meer informatie over de soorten compositiewidgets die beschikbaar zijn in Adobe Muse.

Typen compositiewidgets

Een compositiewidget bestaat uit twee containers: Trigger en Doel. Het triggergebied is de plek waar de bezoeker van de site klikt en het doelgebied is het bijbehorende gebied dat wordt weergegeven. U kunt de trigger- en doelgebieden koppelen voor meer complexiteit en interactiviteit op uw site.

Adobe Muse biedt de volgende typen compositiewidgets. Op basis van uw ontwerpvereisten kunt u één van deze widgets gebruiken of een combinatie van deze widgets via nesten.

Blanco

Blanco compositiewidget in Adobe Muse
Blanco compositiewidget in Adobe Muse

Een widget met kleine miniaturen. Standaard is deze widget geen vullers. U kunt deze handmatig koppelen aan een doelcontainer.

Nieuws

Compositiewidget Nieuws in Adobe Muse
Compositiewidget Nieuws in Adobe Muse

Een widget die zich gedraagt als een accordeonwidget. U kunt tekst en afbeeldingen in het containergebied voor deze widget toevoegen.

Lichtbakweergave

Compositiewidget Lichtbakweergave in Adobe Muse
Compositiewidget Lichtbakweergave in Adobe Muse

Een widget waar inhoud in het doelgebied actief wordt wanneer u op de trigger klikt. De rest van de pagina wordt gedimd wanneer het doel wordt weergegeven.

Presentatie

Compositiewidget Presentatie in Adobe Muse
Compositiewidget Presentatie in Adobe Muse

Deze widget bevat kleine miniaturen die zijn verbonden met het doelpresentatiegebied. De presentaties bewegen standaard horizontaal in deze widget.

Knopinfo

Compositiewidgets Knopinfo in Adobe Muse
Compositiewidgets Knopinfo in Adobe Muse

Deze widget bevat knopinfotekst. Wanneer een gebruiker boven de trigger zweeft, wordt de knopinfo onmiddellijk weergegeven.

Compositiewidgets toevoegen en configureren

Als u een compositiewidget in Adobe Muse wilt toevoegen, selecteert u de compositiewidget die u wilt toevoegen en sleept u de widget in de ontwerpweergave. Deze widgets zijn standaard responsief, u kunt zien dat de widget vrij is bij verschillende breekpunten. Als u de positie of de inhoud van een compositiewidget wilt wijzigen en aanpassen, kunt u individuele widgetelementen voor een bepaald breekpunt aanpassen, vergroten/verkleinen en vastmaken.

Volg deze procedure om een compositiewidget aan uw lay-out toe te voegen.

  1. Open Adobe Muse. In het welkomstscherm klikt u op Nieuw maken om een nieuwe site te maken of open een bestaande Adobe Muse-site waar u een compositiewidget wilt toevoegen.

  2. Vanuit de overzichtsweergave dubbelklikt u op en opent u de pagina waaraan u de presentatiewidget wilt toevoegen.

  3. Open de Widget-bibliotheek (Venster > Widget-bibliotheek) en klik op Composities om de optie uit te vouwen. Kies een compositiewidget op basis van de vereisten van uw ontwerp.

    Kies bijvoorbeeld een lichtbakweergave uit de widget-bibliotheek.

    Opmerking:

    Als u alle standaardinhoud uit de widget wilt verwijderen, klikt u met de rechtermuisknop op de widget en selecteert u Widgetinhoud wissen.

    Sleep een compositiewidget uit de Widget-bibliotheek naar Adobe Muse.
    Sleep een compositiewidget uit de widget-bibliotheek.

    De standaardversie van de lichtbakcompositiewidget heeft drie kleinere, grijze triggervakken boven op de grotere, lichtgrijze doelcontainer.

    Wanneer bezoekers op de triggercontainer klikken, wordt de doelcontainer van de lichtbakweergave weergegeven. U kunt afbeeldingen, tekst en video's, waaronder YouTube-filmpjes, insluiten.

  4. Selecteer de container of de trigger in de compositiewidget. Selecteer de widget om de hele widget te selecteren. In de selectie-indicator in de linkerbovenhoek van de toepassing wordt het woord Compositie weergegeven.

    Selecteer de trigger, dubbelklik erop en kies de kleinere vakken in deze widget. Het woord Trigger wordt weergegeven in de selectie-indicator. De kleinere vakken zijn de triggers voor deze widget. Ze zijn de knoppen die reageren op gebruikersinteractie.

    Bekijk de selectie-indicator in de linkerbovenhoek van de Adobe Muse-pagina
    Bekijk de selectie-indicator in de linkerbovenhoek van de pagina

    U kunt zien dat er geen andere elementen zijn geselecteerd wanneer de selectie-indicator in de linkerbovenhoek het woord Pagina weergeeft.

  5. Kies Bestand > Plaatsen om het dialoogvenster Importeren te openen. Blader en selecteer de bestanden die u in deze widget wilt plaatsen. Klik op Openen om het bestand te kiezen en sluit het dialoogvenster Importeren.

    Klik eenmaal, ergens op de pagina, om de afbeelding op volledige grootte op te nemen.

  6. Klik, terwijl u de afbeelding selecteert, met de rechtermuisknop en kies Knippen in het contextmenu.

    U kunt ook de sneltoets gebruiken om de afbeelding te knippen. Hierdoor wordt de afbeelding van de pagina verwijderd en naar het klembord gekopieerd.

  7. Klik met de rechtermuisknop in de triggerknop en kies Plakken. U kunt ook gebruikmaken van de sneltoets om de afbeelding in de trigger te plakken. De triggercontainer wordt automatisch aan het formaat van de afbeelding aangepast.

    Inhoud in een container plakken kan lastig zijn. Hoewel u soms denkt dat de inhoud naar de container wordt geplakt, wordt de inhoud feitelijk op de pagina geplakt.

    Als u moet controleren of de afbeelding binnen de triggercontainer staat, drukt u eenmaal op Escape en bekijkt u de selectie-indicator. Als in de selectie-indicator het woord Trigger wordt weergegeven, staat de afbeelding in de trigger. Als in de selectie-indicator het woord Pagina wordt weergegeven, moet u de afbeelding opnieuw knippen en in de triggercontainer plakken.

    U kunt ook het deelvenster Lagen (Venster > Lagen) openen om te kijken waar de afbeelding wordt geplakt. Het deelvenster Lagen toont de hiërarchie van de elementen in een pagina.

  8. Als u extra miniaturen wilt toevoegen, klikt u op het plusteken (+) naast de triggercontainers.

    Klik op + om miniaturen aan een lichtbakweergave toe te voegen
    Klik op + om miniaturen toe te voegen
  9. Nadat u de widget in uw ontwerpweergave hebt geplaatst, kunt u de widget gaan configureren. Als u de opties wilt configureren voor uw compositiewidget, selecteert u de widget en klikt u op de blauwe pijl in de rechterbovenhoek van de widget.

    De compositiewidget configureren via het menu Opties
    Compositiewidgets configureren via het deelvenster Opties

    U kunt de volgende instellingen aanpassen via het deelvenster Opties:

    • Positie: Hiermee stelt u in waar het doelgebied op de pagina wordt geplaatst. Selecteer Gestapeld als u wilt dat uw doelen elkaar overlappen. Selecteer Verspreid als u wilt dat uw doelen op verschillende posities worden geplaatst. Selecteer Lichtbak als u de rest van de pagina wilt dimmen.
    • Doel tonen: Hiermee stelt u de instelling voor doelgedrag in wanneer een gebruiker op de trigger klikt. 
    • Doel verbergen: Hiermee stelt u de instellingen voor het verbergen van een doel in. Het doelgebied blijft verborgen, tenzij een gebruiker op de trigger klikt. 
    • Overgang: Hiermee stelt u in hoe de inhoud in het doelgebied verandert wanneer een gebruiker op de trigger klikt of er met de muis overheen gaat. Kies Infaden om op het nieuwe doel in te faden, Horizontaal om de doelen horizontaal te laten bewegen en Verticaal om de doelen verticaal te laten bewegen. 
    • Overgangssnelheid: Hiermee stelt u de snelheid van de overgang voor uw compositiewidget in. Als u wilt dat de overgang direct wordt uitgevoerd, selecteert u Geen.
    • Automatisch afspelen: U kunt deze optie configureren om een diapresentatie te maken op uw website. Als u deze optie selecteert, worden de presentaties automatisch afgespeeld, zonder tussenkomst van de gebruiker.
    • Willekeurige volgorde: Selecteer deze optie als u wilt dat de doelen in willekeurige volgorde worden weergegeven.
    • Triggers bovenaan: Selecteer deze optie om de trigger boven de doelcontainer te plaatsen. U ziet bovendien dezelfde hiërarchie als in het deelvenster Lagen.
    • Vegen inschakelen: Selecteer deze optie om de veegbeweging te gebruiken om naar het volgende doel op touch-apparaten te gaan.
    • In eerste instantie alles verbergen: Selecteer deze optie als u alle doelopties wilt verbergen wanneer de website voor de eerste keer wordt geladen. Gebruikers moeten op de corresponderende trigger klikken om het doel te zien.
    • Auto lichtbak: Selecteer deze optie als u wilt dat de lichtbak automatisch wordt weergegeven wanneer de website wordt geladen.
    • Onderdelen: Selecteer de knopopties Vorige, Volgende of Sluiten om extra interactiviteit aan uw widget toe te voegen. Gebruikers kunnen op de opties vorige, volgende en afsluiten op uw website klikken.
    • Bewerken: Selecteer Lichtbakonderdelen tonen tijdens bewerken om het doelgebied in de ontwerpweergave weer te geven tijdens het bewerken van de widget. Selecteer Alles tonen in ontwerpmodus om alle doelcontainers op hetzelfde moment in de ontwerpweergave te bekijken.
    De instellingen voor compositiewidgets configureren in Adobe Muse
    De instellingen voor compositiewidgets configureren

    Opmerking:

    De optie Lichtbakonderdelen tonen tijdens bewerken wordt uitgeschakeld wanneer u Verspreid of Gestapeld hebt gekozen uit de vervolgkeuzelijst Positie.

    De optie In eerste instantie alles verbergen wordt uitgeschakeld als u de optie Auto lichtbak selecteert.

  10. Als u triggers wilt verwijderen die u niet nodig hebt, dubbelklikt u op de trigger die u wilt verwijderen. Druk op Delete (Mac) of op Backspace (Windows) om de geselecteerde trigger te verwijderen.

  11. Klik op de hoofdafbeelding in de triggercontainer om het lichtbakeffect aan te roepen.

    Klik op een afbeelding links (trigger) om de lichtbakweergave te bekijken
    Klik op een afbeelding links (trigger) om de lichtbakweergave te bekijken (zoals rechts weergegeven)

    Druk op Escape om het lichtbakvenster te sluiten en ga terug naar de ontwerpweergave om de Adobe Muse-pagina verder te bewerken.

  12. Nadat u de compositiewidget in uw ontwerp hebt geconfigureerd en geplaatst, test u de widget in de weergave Voorvertoning.

Als u een compositiewidget in een responsieve lay-out gebruikt, lees dan het volgende stuk. Zorg dat u uw widget bij alle breekpunten test en bekijkt.

Compositiewidgets gebruiken in een responsieve lay-out gebruiken

Compositiewidgets zijn standaard vloeiend of responsief. Als u compositiewidgets wilt toevoegen en in een responsieve lay-out wilt gebruiken, voer dan één van de volgende stappen uit:

  • Als u een nieuwe responsieve website met de nieuwste versie van Adobe Muse maakt: Sleep de compositiewidget vanaf het deelvenster Widget-bibliotheek naar de Ontwerpweergave.
  • Als u Adobe Muse 2017.0.3 of een eerdere versie gebruikt, reageert uw compositiewidget niet. In dat geval opent u uw .muse-bestand met de nieuwste versie van Adobe Muse. Selecteer de elementen in de widget en kies de optie Vergroten/verkleinen als Responsieve breedte of Responsieve Hoogte en breedte (wat van toepassing is).
Niet-responsieve compositiewidgets omzetten naar responsief
Niet-responsieve compositiewidgets omzetten naar responsief

Opmerking:

U kunt niet de hele widget selecteren en de formaateigenschappen wijzigen. Als u de widget responsief wilt maken, moet u de afzonderlijke elementen of de elementen in de widget selecteren.

Configureer uw widget door de stappen te volgen in Compositiewidgets toevoegen en configureren. Nadat u de configuratie en de opmaak van de widget hebt aangepast, kunt u een voorvertoning ervan in een browser bekijken of de scrubber en het formaat gebruiken. U zult zien dat het formaat van widgets automatisch de schermgrootte volgt.

Responsieve compositiewidget in Adobe Muse
Responsieve compositiewidget in Adobe Muse

Opmerking:

Wanneer u de compositiewidgets aan een responsieve lay-out toevoegt, raden wij u aan om uw ontwerp eerst in het grootste breekpunt te plaatsen. Nadat u de positie en configuratie van de widget op het grootste breekpunt hebt bepaald, voegt u waar nodig extra breekpunten toe.

Zie Objecten in responsief ontwerp plaatsen voor meer informatie over sites ontwerpen voor een responsieve lay-out.

Compositiewidgets met andere widgets combineren

Een van de meest unieke eigenschappen van een compositiewidget is de ondersteuning voor geneste widgets binnen een compositiewidget. U kunt dus widgets zoals formulieren, presentaties of menu-items in een compositiewidget plaatsen.

Zo kunt u bijvoorbeeld een presentatiewidget in de doelcontainer van een Nieuws-widget in een kookwebsite plaatsen. Wanneer een bezoeker op het menulabel (Nieuws) klikt, wordt het doelgebied met de galerij als een presentatie weergegeven.

U kunt ook een contactformulier als doel toevoegen zodat de gebruiker meteen naar het contactformulier gaat zodra hij/zij op het label Contact klikt.

Met nesten zijn er overigens nog veel meer combinaties en ontwerpen mogelijk. U moet echter wel rekening houden met de volgende aspecten als u geneste widgets in een responsieve lay-out gaat ontwerpen:

  • Responsieve elementen die in een niet-responsieve container zijn genest, kunnen niet worden vastgezet.
  • Objecten worden niet responsief als u ze in een niet-responsieve container plaatst.

Opmerking:

Wanneer u widgets in compositiewidgets nest, raden we aan om maximaal drie nestniveaus te gebruiken.

In het volgende gedeelte ontdekt u hoe u een submenu met een compositiewidget kunt maken. Lees verder en ontdek in dit voorbeeldscenario hoe u een verborgen submenu voor uw sitenavigatie maakt.

U kunt compositiewidgets configureren om sitenavigatie met submenu's te creëren. U kunt een menu-item maken dat een submenu toont wanneer de bezoeker met de cursor over het actieve gebied beweegt, en dat hetzelfde submenu weer verbergt wanneer de cursor niet meer in het actieve gebied staat dat het desbetreffende submenu activeerde. U kunt de widget zo configureren dat het submenu wordt verborgen wanneer de bezoeker ervoor kiest niet op een van de koppelingen in het submenu te klikken en in plaats daarvan de cursor verplaatst van het submenu naar een andere locatie. De mogelijkheid om deze typen interactieve submenu's te maken is nuttig wanneer u een navigatiebalk maakt voor een site met veel verschillende subsecties. 

De menu's Doel tonen en Doel verbergen zijn nuttig wanneer u een bepaald menugedrag elders op uw website wilt repliceren. De bezoeker kan op de koppelingen klikken of de cursor buiten het venstergebied bewegen om het venster te verbergen. Het is niet nodig op een knop Sluiten te klikken om een submenu te verbergen wanneer deze optie is ingeschakeld.

Deze functie is beschikbaar wanneer u de volgende compositiewidgets gebruikt:

  • Blanco
  • Nieuws
  • Knopinfo

Het deelvenster Opties bevat twee instellingen voor het weergeven van de doelcontainer:

  • Bij klikken: Toont het doel als de gebruiker erop klikt
  • Bij rollover: Toont het doel als de gebruiker over de trigger gaat

U kunt er ook voor kiezen om de doelcontainer in een compositiewidget te verbergen. Hieronder vindt u de vier opties voor het verbergen van de doelcontainer:

  • Geen
  • Bij klikken
  • Bij rollout
  • Bij rollout van Trigger en Doel

In het volgende gedeelte wordt beschreven hoe u de functionaliteit bij rollover kunt gebruiken om de doelcontainer weer te geven en de functionaliteit bij rollout van zowel de triggercontainer als de doelcontainer om de doelcontainer te verbergen.

Volg de onderstaande stappen om te leren hoe u de instelling Verbergen bij rollout kunt inschakelen voor compositiewidgets om een menubalk te maken waarop submenukoppelingen worden weergegeven en verborgen op basis van bezoekersinteractie:

  1. Voeg in de ontwerpweergave een lichtbakcompositiewidget aan de pagina toe door de widget uit de widget-bibliotheek te slepen.

  2. Selecteer de triggercontainers. Verplaats alle drie de triggercontainers met de tool Selecteren naar de bovenzijde, boven de grotere doelcontainer en verdeel ze gelijkmatig.

    De triggercontainers verplaatsen
    Plaats de triggercontainers boven de grotere hoofdafbeelding.

  3. Gebruik de tool Selecteren om de zijhandvatten van elke triggercontainer te slepen. Breid de breedte uit om bovenin een reeks van drie 'tabbladen' te maken, vergelijkbaar met een widget Deelvenster met tabbladen.

    De tool Selecteren gebruiken om de grepen te slepen
    Sleep de selectiekaders om de breedte van de drie triggerknoppen uit te breiden.

  4. Voeg de vereiste inhoud toe aan elk van de drie triggergebieden. De triggerinhoud kan tekst, koppelingen, afbeeldingen, rechthoeken, ingesloten HTML en nog veel meer bevatten. U gebruikt bijvoorbeeld de tool Tekst om tekst aan elke trigger toe te voegen: Link one, Link two en Link three.

    Vervolgens maakt u een koppeling in het tweede doelinhoudsgebied.

  5. Klik op een triggercontainer en selecteer vervolgens de grotere container die daarmee overeenkomt. Voeg een koppeling toe aan het tweede doelinhoudsgebied. Klik vervolgens op de vervolgkeuzelijst naast het label Hyperlinks, rechts van het regelpaneel. Voeg een koppeling toe naar het webadres dat u wilt koppelen.

  6. Kies Bestand > Voorvertoning van pagina weergeven in browser om de weergave van de compositiewidget te testen.
    Voer interactie met de widget uit door op de triggercontainers met het label Link one, Link two en Link three te klikken.

    De doelcontainer wordt standaard altijd weergegeven en nooit verborgen. U kunt op de drie triggerknoppen klikken om de bijbehorende doelcontainer weer te geven, maar een van de drie doelcontainers wordt altijd weergegeven.

  7. Selecteer de compositiewidget om het selectievakje Verbergen bij rollout te configureren. Klik op de blauwe pijl om het deelvenster Opties te openen en de configuratieopties van de widget te bewerken.

    De volgende instellingen moeten worden ingeschakeld:

    • Positie: Gestapeld (standaard)
    • Doel tonen: Bij rollover
    • Doel verbergen: Bij rollout van Trigger en Doel
    • Overgang: Infaden (standaard)
    • Overgangssnelheid: 0,5 seconden (standaard)
    • Automatisch afspelen: Uitgeschakeld (standaard)
    • Willekeurige volgorde: Uitgeschakeld (standaard)
    • In eerste instantie alles verbergen: Ingeschakeld
    Deelvenster met compositieopties
    Werk de instellingen in het deelvenster Opties bij om te bepalen hoe de widget zich gedraagt.

    De belangrijkste instellingen die de functionaliteit voor verbergen en tonen regelen, zijn het menu Doel tonen, het menu Doel verbergen en de ingeschakelde optie In eerste instantie alles verbergen.

  8. Kies nogmaals Bestand > Voorvertoning van pagina weergeven in browser om de recente wijzigingen in de widget te testen.

    Wanneer nu de compositiewidget voor de eerste keer wordt geladen, worden alle doelgebieden standaard verborgen.

    Voer opnieuw interactie uit met de widget. Wanneer u de cursor over een triggergebied beweegt, wordt het bijbehorende doelgebied weergegeven. Wanneer de cursor binnen het widgetgebied blijft, kunt u interactie uitvoeren met de inhoud in de doelgebieden (u kunt bijvoorbeeld klikken op de koppeling naar een website in de middelste doelcontainer).

    Als u echter de cursor van de trigger- of doelgebieden verplaatst, worden de doelgebieden verborgen totdat u de cursor weer over een ander triggergebied beweegt.

    Met deze functie kunt u een veel complexere interactieve sitenavigatie opzetten die reageert op de muisbewegingen van bezoekers.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid