InteractiveBoxes - 3 Elemente

1. HoverBox

• Ein LINK in Form Bild / Text
• Linkziel intern - z.B. versteckte Inhaltsseite
• Linkziel extern - Sprung zu externer URL
• Hover blendet Infotext ein; für diesen gibt es Gestaltungsvarianten

Beispiel mit Flexcards - feste Breite der Cards

HoverBox - Bildlink

Hier Klicken!

Sprung zu anderer Seite oder Aufruf externe Website.

Text - normal, linksbündig

Bei Hover wird Text über dem Bild eingeblendet.
Klick springt zu Interner Seite oder folgt externem LINK.

Hoverbox - Textlink

Der Linktext ist ein Slogan oder Stickwort. Das kann auch als Schaltfläche wie ein Menüpunkt genutzt werden.

Der Websitebesucher erhält vorab hilfreiche Infos.



Text - fett, zentriert

Was mit Bild geht, funktioniert natürlich auch mit Text.

HoverBox - Bildlink

Hier Klicken!

Sprung zu anderer Seite oder Aufruf externe Website.

Text - normal, linksbündig

Bei Hover wird Text über dem Bild eingeblendet.
Klick springt zu Interner Seite oder folgt externem LINK.

Beispiel mit GridCards - optimale Ausnutzung verfügbare Breite

Titel 1

Hier Klicken!

Sprung zu anderer Seite oder Aufruf externe Website.

Text - normal, linksbündig

Bei Hover wird Text über dem Bild eingeblendet.
Klick springt zu Interner Seite oder folgt externem LINK.

Titel 2

Der Linktext ist ein Slogan oder Stickwort. Das kann auch als Schaltfläche wie ein Menüpunkt genutzt werden.

Der Websitebesucher erhält vorab hilfreiche Infos.

Text - fett, zentriert

Was mit Bild geht, funktioniert natürlich auch mit Text.

Titel 3

Hier Klicken!

Sprung zu anderer Seite oder Aufruf externe Website.

Text - normal, linksbündig

Bei Hover wird Text über dem Bild eingeblendet.
Klick springt zu Interner Seite oder folgt externem LINK.

2. LinkBox

• Bild als LINK
• Linkziel intern - z.B. versteckte Inhaltsseite
• Linkziel extern - Sprung zu externer URL
• InfoBox erweitert Linkfläche auf gesamten Inhalt
• LinkBox füllt umgebenden Container aus - hier FlexCard
• LinkBox bringt eigenes Inset mit max. Größe mit, damit Linkfläche nicht alles einnimmt

LinkBox

Bild ist Linkelement. Der LINK erweitert sich automatsich auf den restlichen Inhaltsbereich. Gesamte Box klickbar.
Klick springt zu Interner Seite oder folgt externem LINK.

3. OverlayBox

• Link als Bild oder Text
• Klick blendet Inhalt einer (versteckten) Inhaltsseite ein
• Seite wird nicht verlassen
• Inhalt legt sich über Seite
• Ideal für Infoseiten zu Produktkarten u.ä.

OverlayBox

Link zu anderer Seite liegt auf Bild oder Text "Weitere Infos". klick blendet versteckte Seite in einem Overlay ein. Die Seite wird dazu nicht verlassen.