Ga naar inhoud
App installeren
Nederlands

Afbeeldingslinks bij hover

Toon een lijst met links naast een grote afbeelding die verandert als klanten met de muis over elke link gaan.

Naslag Alle abonnementen 2 min. leestijd

Een lijst met links naast een grote afbeelding die bij hover verandert in de afbeelding van elke link. Gebruik het om categorieën visueel te tonen (“Nieuw binnen”, “Bestsellers”, “Sale”) zonder de ruimte van een volledig afbeeldingsraster. In de app heet het blok Hover image links (afbeeldingslinks bij hover).

Het blok toevoegen

  1. De indeling kiezen

    Klik in het megamenupaneel van het voorbeeld op Blok toevoegen. Klik op Linklijst, ga met de muis over Hover image links en klik op Selecteren. Het blok begint met de kop “Collections” en 3 voorbeeldlinks.

    (1) Klik op Linklijst, (2) kies Hover image links.
  2. De kop en standaardafbeelding instellen

    Vul in Item bewerken, onder Algemeen, de Kop in, kies een Default image (standaardafbeelding) en vul Button label on image (knoplabel op afbeelding) in.

    Het blok Hover image links in het voorbeeld, met de instellingen in Item bewerken.
  3. Vul de Titel in, kies de Link en kies de Image on hover (afbeelding bij hover). Klik op Toevoegen om een link toe te voegen, of op Verwijderen om er een te verwijderen.

  4. Opslaan en publiceren

    Pas de afbeelding aan onder Style (stijl) en klik daarna op Opslaan en Publiceren.

Instellingen

Algemeen

KopStandaard: Collections
Tekst boven de links.
StandaardafbeeldingStandaard: Geen
Default image: verschijnt bij links zonder eigen Image on hover.
Knoplabel op afbeeldingStandaard: Shop now
Button label on image: tekst op de afbeelding, onder de titel van de link. Laat leeg om alleen de titel te tonen.
BreedteStandaard: 66.66%
Hoeveel van de megamenurij het blok inneemt: Automatisch of 8,33% tot 100%.

Stijl

Positie van de afbeeldingStandaard: Rechts
Image position: Rechts of Links van de links.
BeeldverhoudingStandaard: 4:3
1:1, 4:3, 3:4, 16:9 of 9:16.
TitelStandaard: New arrivals, Best sellers, Sale
De tekst van de link.
LinkStandaard: Geen
Waar de link naartoe gaat.
Afbeelding bij hoverStandaard: Geen
Image on hover: de afbeelding die verschijnt terwijl een klant met de muis over deze link gaat.

Maximaal 10 links per blok. Elke link staat ook onder het blok in de lijst Elementen, met een knop Add link (link toevoegen): sleep links om de volgorde te wijzigen, of klik op een link (in de lijst of het voorbeeld) om alleen die link te bewerken, inclusief de eigen Zichtbaarheid. Zichtbaarheid voor het hele blok werkt zoals bij elk blok; zie Instellingen die elk blok heeft.

Tips

  • Gebruik afbeeldingen met dezelfde vorm en stel Beeldverhouding daarop in, zodat het afbeeldingsvlak niet verspringt tussen links.
  • Houd titels van links kort. De titel verschijnt ook op de afbeelding.

Was dit nuttig?

Probleem melden