Elementen laten reageren bij hover.

DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen

Laat een element veranderen wanneer een bezoeker erop wijst: een vak dat omhoogkomt, een knop die donkerder wordt, een foto die oplicht. Je stelt de rustlook in in het paneel Style en de hoverlook in zijn tweeling, het paneel Hover style. Het voorbeeld bouwt een grijs tekstvak dat bij hover omhoogkomt.

De video geeft een tekstvak een achtergrond, opvulling en een schaduw die bij hover dieper wordt.

Het tekstvak bouwen

  1. Klik op + in het inhoudsgebied en kies Section op het tabblad Layout.
  2. Klik op + op de sectie en kies Row.
  3. Klik op het gridpictogram op de rij, kies de tegel met drie gelijke kolommen en klik op Save.
  4. Klik op + in de eerste kolom en kies Text op het tabblad Content.
  5. Typ "Open day", zet het op Heading 3 en voeg één regel eronder toe.

Stel de ruststijl in

  1. Open in hetzelfde instellingendialoogvenster het paneel Style.
  2. Kies een lichtgrijze Background.
  3. Zet in het boxmodel de boven-, linker- en onderkant van Padding op 24.
  4. Zet Border radius op 8.
  5. Zet Drop shadow op 1.

Stel de hoverstijl in

  1. Open het paneel Hover style.
  2. Zet Drop shadow op 4.
  3. Klik op Save.
  4. Klik op Save op de DXPR Builder-werkbalk.
  5. Open het weergavemenu, het oogpictogram op de werkbalk, en kies Preview.
  6. Beweeg de pointer op het tekstvak.

Wat je ziet

In rust is het tekstvak grijs met afgeronde hoeken en een lichte schaduw. Wanneer de pointer hem bereikt, wordt de schaduw dieper en lijkt het vak omhoog te komen; wanneer de pointer weggaat, zakt het terug. De schaduwverandering is geanimeerd. Andere hoverwijzigingen, zoals een nieuwe kleur, schakelen meteen om.

Instellingen

Het paneel Hover style bevat dezelfde velden als het paneel Style. Een veld dat leeg blijft behoudt de rustwaarde.

Veld Gebruik bij hover
Margin, Border, Padding (box model) Verschuif, kader of vergroot het element
Font color Licht tekst uit
Border color Benadruk de rand
Background Wijzig de vulling
Background image, Background style, Background position Verwissel of verplaats de foto
Border style Toon een rand
Font size Vergroot de tekst
Border radius Rond de hoeken af
Opacity Toon of dim het element
Drop shadow Voeg diepte toe, van 1 tot 5

Veelvoorkomende patronen

  • Card lift: Drop shadow 1 in Style, 4 in Hover style.
  • Picture reveal: Opacity 0.7 in Style, 1 in Hover style.
  • Button colour change: een donkerdere Background in Hover style.
  • Border highlight: Border style Solid met een lichte Border color in Style, een accent-Border color in Hover style.

Als je het effect niet ziet

  • Het tekstvak verandert niet wanneer je erop wijst. De hoverwaarde is gelijk aan de rustwaarde, of je stelde hem per ongeluk in het paneel Style in. Open More > Settings en verhoog Drop shadow in het paneel Hover style.
  • Het effect is moeilijk te beoordelen terwijl je bewerkt. In de bewerkmodus toont het element ook zijn besturingsbalk en omlijning wanneer je erop wijst. Kies Preview in het weergavemenu en wijs het opnieuw aan.
  • Opacity, Font size of Border radius op 0 heeft geen effect. Een waarde 0 telt als niet ingesteld voor deze drie velden. Om een element bijna volledig te laten vervagen, gebruik je een Opacity van 0.01.

Wat nu?