Zurück zur Übersicht

Text- und Bildelemente

Text mit einspaltigem Bild

Text mit einspaltigem Bild (linksbündig)

Text mit einspaltigem Bild (linksbündig)

Zurück nach oben

Text mit zweispaltigem Bild

Text mit zweispaltigem Bild (rechtsbündig)

Text mit zweispaltigem Bild (rechtsbündig)

Zurück nach oben

XXL-Bild mit Text oder alleinstehender Text

Das XXL-Bild ist dreispaltig. Es hat eine Breite 676 Pixel und ist in der Höhe variabel.

XXL-Bild mit Text oder alleinstehender Text
Zurück nach oben

Listen – Nummerierung

Listen – Nummerierung
Zurück nach oben

Listen – Aufzählungspunkte

Listen – Aufzählungspunkte
Zurück nach oben

Video mit Text

Video mit Text
Zurück nach oben

Vorteilskommunikation

Vorteilskommunikation
Zurück nach oben

E-Learning mit Text

E-Learning mit Text
Zurück nach oben

Bild mit Text und Downloads

Das Bild hat eine Breite von 220 Pixeln und ist in der Höhe variabel.

Bild mit Text und Downloads
Zurück nach oben

Bild mit Text und Linkliste

Das Bild hat eine Breite von 220 Pixeln und ist in der Höhe variabel.

Bild mit Text und Linkliste
Zurück nach oben

Interaktives Flash – eingebettet

Interaktives Flash – eingebettet

Die gestrichelte Linie markiert den oberen und unteren Rand des interaktiven Flash-Moduls. Seine Breite ist 676 Pixel. Die Höhe ist variabel.

Zurück nach oben

Auflistung mit referenzierten Elementen

Eine Liste dieser Art wird typischerweise auf der News-Übersichtsseite verwendet. Die Bilder haben eine feste Größe von 220 x 124 Pixel. Sie werden automatisch auf 188 x 106 Pixel verkleinert.

Auflistung mit referenzierten Elementen
Zurück nach oben

Bild und Text mit einem Link und Rahmen

Dieses Modul kann mit oder ohne Grauverlauf verwendet werden.

Bild und Text mit einzelnem Link und Rahmen
Zurück nach oben

HIGHLIGHTS-Einzellink (nur für HIGHLIGHTS)

HIGHLIGHTS-Einzellink (nur für HIGHLIGHTS)
Zurück nach oben

HIGHLIGHTS-Galerie (nur für HIGHLIGHTS)

HIGHLIGHTS-Galerie (nur für HIGHLIGHTS)
Zurück nach oben

Text und Call-to-Action-Button

Text und Call-to-Action-Button
Zurück nach oben

Text und Bild mit einem Link und einem Download

Die Bildbreite beträgt 200 Pixel. die Höhe ist variabel.

Text und Bild mit einem Link und einem Download
Zurück nach oben

Testimonial-Galerie

Die Bildbreite beträgt 220 Pixel. Die Höhe beträgt 124 Pixel. Das Bild wird automatisch auf 188 x 108 Pixel verkleinert.

Testimonial-Galerie
Zurück nach oben

Testimonial-Detailansicht

Die Bildbreite beträgt 220 Pixel. Die Höhe beträgt 124 Pixel. Das Bild wird automatisch auf 188 x 108 Pixel verkleinert.

Testimonial-Detailansicht

Bildergalerie auf einer Unterkategorieseite

Die Bildergalerie wird im Inhaltsbereich einer Seite platziert. Wird auf ein Thumbnail geklickt, öffnet sich ein Layer mit einem vergrößerten Bild.

Das Pfeil-Icon ist zentriert. Die Größe der Thumbnails ist 85 x 85 Pixel.

Bildergalerie auf einer Unterkategorieseite
Zurück nach oben

Interaktionskonzept

Aktion 1

Werden die klickbaren Pfeil-Icons angezeigt, hat der Nutzer die Möglichkeit, zwischen den Thumbnails zu navigieren. dies ist der Fall, wenn mehr als sechs Bilder in der Galerie enthalten sind.

Mit Klick auf einen der Pfeile wird eine neue Gruppe von maximal sechs Thumbnails angezeigt.

  • Karusselleffekt der Bildergalerie
  • Animation: horizontale Bewegung der Bilder
  • Übergang: easeOutCubic
  • Zeit: 0,5 Sekunden
  • Statusleiste: keine Animation, verändert sich durch Klick
Aktion 2

Mit einem Klick auf ein Thumbnail wird ein Schatten über den Hintergrund gelegt und gleichzeitig öffnet sich der Layer. Der Layer ist zentriert.

Hintergrund:

  • Animation: Alpha von 0 bis 100 %
  • Zeit: 0 Sekunden

Layer:

  • Animation: Alpha von 0 bis 100 %
  • Übergang: easeOutCubic/ easeInCubic
  • Zeit: 0,5 Sekunden
Aktion 3

Mit einem Klick auf den Weiter- oder Zurück-Button, kann der Nutzer durch die Bilder navigieren. Da sich diese im Format unterscheiden können, wird der Layer automatisch und das entsprechende Bildformat angepasst.

  • Wechsel von Höhe und Breite, je nach Bildformat
  • Animation: Wechsel von Höhe und Breite
  • Übergang: easeOutCubic
  • Zeit: 0,5 Sekunden

Bildergalerie auf einer Unterkategorieseite – Vergrößerung

Dieser Typ von Bildergalerie kann verschiedene Bildgrößen enthalten. Der Nutzer navigiert mit der "Vor"- und "Zurück"-Funktion. Der Layer passt sich automatisch an das ausgewählte Bild an. Die maximale Breite beträgt 896 Pixel. Die maximale Höhe beträgt 400 Pixel.

Bildergalerie auf einer Unterkategorieseite – Vergrößerung

Interaktionskonzept

Hier wird das Verhalten in der "Zoom-Ansicht" beschrieben.

Mit einem Klick auf den "Vor"-Button kann der Nutzer navigieren. Wegen unterschiedlicher Bildformate (Porträt, Quadrat, Landschaft) passt sich der Layer automatisch an das Format der vorhandenen Bilder an. Höhe und Breite des Layers verändern sich je nach Bildformat.

  • Animation: Veränderung von Höhe und Breite
  • Übergang: easeOutCubic
  • Zeit: 0,5 Sekunden

Bildergalerie auf einer Produktdetailseite

In dieser Galerie können verschiedene Medienformate kombiniert werden, z. B. Produktbilder, Videos und 3D-Ansichten. Die Größe der Produktbilder und 3D-Ansichten beträgt 408 x 408 Pixel. Das Video ist 640 Pixel breit und 360 Pixel hoch.

Die Bildvergrößerung sowie die Thumbnails sind horizontal zentriert. Beim Mouseover erscheint ein schwarzer Rahmen um das Thumbnail.

Bildergalerie auf einer Produktdetailseite

Bild- und Videovergrößerung

Bild- und Videovergrößerungen können mit oder ohne Überschrift und Bildunterschrift angezeigt werden. Bilder können unterschiedliche Größen und Formate haben. Videos hingegen haben ein festes Format. Falls die Bildhöhe die Höhe des Bildschirms überschreitet, kann der Scroll-Balken. Die maximale Größe des Layers beträgt 928 Pixel. Die maximale Größe eines Bilds im Layer beträgt 896 x 672 Pixel.

Zurück nach oben

Layer mit funktionalen Elementen

Layer mit funktionalen Elementen
Zurück nach oben

Layer mit Inhaltselementen

Der Layer hat eine feste Größe von 726 x 500 Pixeln.

Layer mit Inhaltselementen

Interaktionskonzept:

Klickt der Nutzer auf einen definierten Link, wird der Hintergrund schattiert und gleichzeitig öffnet sich ein Layer.

Hintergrund

  • Animation: Alpha von 0 bis 100 %
  • Zeit: 0 Sekunden

Layer

  • Animation: Alpha von 0 bis 100 %
  • Übergang: easeOutCubic/ easeInCubic
  • Zeit: 0,5 Sekunden

 

Zurück nach oben

Tooltip

Der Seitenhintergrund wird mit einem Schatten dargestellt (Stärke 30 %, Abstand: 3 Pixel, Größe: 5 Pixel). Die Tooltip-Kante hat die Farbe #ccd0d2.

Tooltip
Zurück nach oben

PHOENIX CONTACT
GmbH & Co. KG

+49 5235 3-41984

Christine Nolte-Dietrich

Christine Nolte-Dietrich

Coordinator Communication Guidelines

Diese Webseite verwendet Cookies. Indem Sie weiter navigieren, stimmen Sie der Nutzung zu. Für weitere Informationen lesen Sie unsere Datenschutzerklärung.

Schließen