Format Banner: 1920 x 900px

BEISPIELHAFTE DARSTELLUNG DER VERWENDBAREN ELEMENTE


DIE BLAUE LINIE IST OPTIONAL & IN DER LÄNGE ANPASSBAR

Der Abstand nach oben, unten, lins und rechts ist pro Element individuell einstellbar. 

Im Text können Buttons in blau oder weiß hinzugefügt werden:
test     test

SLIDER-ELEMENT


OPTIONALE HEADLINE

OPTIONALE SUBHEADLINE

Format Banner: 1920 x 900px

LINIENLÄNGE ANPASSBAR

PFEILE/PUNKTE EIN-/AUSBLENDBAR

Parallax-Element

Text und Bild sind austauschbar

Format Bild Parallax: 1920 x 609px

BILD-/TEXTELEMENT


LOREM IPSUM

Hier sind die Einstellungen sehr vielseitig: Der graue Hintergrund ist optional, Versatz nach oben und unten möglich, 3 verschiedene Button-Darstellungen, blaue Linie optional & Länge variierbar, Zoom-Animation des Bildes optional, 3er-Bild-Grid pflegbar, gespiegelte Platzierung Bild/Text möglich, Platzierung Bild über Text möglich - s. auch die folgenden 2 Elemente
lorem ipsum

Bildformat: 800 x 500px

LOREM IPSUM

LOREM IPSUM

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, hic veritatis. Dolore eos minus natu


HEADLINE


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, hic veritatis. Dolore eos minus natu
lorem ipsum

LOREM IPSUM


LOREM IPSUM

Beispiel Austauschmöglichkeit: Text links, Bild rechts
lorem ipsum
NUMBERS TEASER
ELEMENT
DARK-MODE
WÄHLBAR
450
MITARBEITER
Zitat-Element: Kann auch in 2-spaltigen-Elementen verwendet werden (s.u.).
Autor
Position
quote-icon quote-icon

Hier können z.B. Bilder, Texte, Slider oder das Numbers-Element platziert werden.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolore
Lorem ipsum
Lorem ipsum
quote-icon quote-icon

TEXTELEMENTE


LOREM IPSUM

Headline optional

Textausrichtung: Alle Texte & Headlines können links, mittig & rechts ausgerichtet werden.

Es gibt 1-spaltige Textelemente, 2-spaltige Textelemente und sie können beliebig platzier werden - auch neben anderen Elementen (s. z.B. oben, Zitat-Element)


Lorem Ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

LOREM IPSUM


LOREM IPSUM

Lorem Ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Video-Element

In der Höhe skalierbar, Standbild aus Frequenz auswählbar

Bildelement mit Button

Optionale Headline
optionaler Button

Bildformat: 500 x 500px

Produkt-Element

Produkt wird ausgewählt  & Darstellung zieht sich automatisch. Abweichende Darstellung über manuelle Pflege der weiteren Bild-/Textelemente bzw. Slider möglich.

Smart Sam

EINER FÜR ALLE. Ein bestechender Dauerbrenner mit ausgezeichneten Allround-Eigenschaften. Für alle die mit dem MTB, gerne zwischen Straße und Gelände wechseln.

  • Das markante Offroad Profil mit kompakten Mittelsteg sorgt für angenehmes, vibrationsarmes Abrollverhalten und besonders lange Haltbarkeit.
  • Kantige Außenstollen vermitteln dem Fahrer Sicherheit und optimalen Halt im Gelände.
Smart Sam
Schwalbe G-One Allround

DER UNIVERSELLE GRAVELREIFEN. Besticht durch unvergleichliche Vielseitigkeit und ausgewogene Fahreigenschaften, egal ob auf asphaltierter Straße, unbefestigten Wegen oder Offroad. Ob Feierabendrunde oder Adventure-Trip, dem „Allrounder“ sind kaum Grenzen gesetzt.

  • Das vielseitige Profil rollt leicht und vibrationsarm, greift aber sicher und zuverlässig auf Schotterwegen sowie leichten, trockenen Trails.
Schwalbe G-One Allround
CX Comp

ALLTERRAIN-REIFEN im Einstiegsbereich für Straße, Schotter und trockenes Gelände.

  • Ansprechendes Semi-Slick-Profil für leichten Lauf und guten Kurvengrip in leichtem Offroad-Gelände.
CX Comp

Trennbanner

Bildformat: 1920 x 600px

Card-Element

OPTIONALE HEADLINE
Optionaler Text, beliebig lang (wird automatisch gekürzt, s.u.), beliebig viele Themen einsetzbar. Bildgröße: 398x250px
Optionaler Text, beliebig lang (wird automatisch gekürzt, s.u.), beliebig viele Themen einsetzbar. Bildgröße: 398x250px
Optionaler Text, beliebig lang (wird automatisch gekürzt, s.u.), beliebig viele Themen einsetzbar. Bildgröße: 398x250px
Optionaler Text, beliebig lang (wird automatisch gekürzt, s.u.), beliebig viele Themen einsetzbar. Bildgröße: 398x250px
Optionaler Text, beliebig lang (wird automatisch gekürzt, s.u.), beliebig viele Themen einsetzbar. Bildgröße: 398x250px
Optionale Headline
LOREM IPSUM
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanct
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanct
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanct
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd g ...
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu ...
Lorem ipsum
LOREM IPSUM
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanct
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanct
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanct
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd g ...
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu ...
Lorem ipsum

DYNAMISCHER BILDSLIDER


6f65e23ac2a34c5383e41cdc466d82ff

Konfiguration

  • Anzahl der Slider variabel
  • Mobile wird immer nur das 1. Bild angezeigt
  • Pfeile ausblendbar - falls ohne Slidefunktion gewünscht
  • Variante 1: 3 Bilder (dieser Slide)
  • Formate: 
    373x300px, 373x300px & 373x685px
-> 2. Slide ansehen für Variante 2

Previous slide
Next slide
e37e1617390d4e648e7eae5a0e6ff6a8

Variante 2: 2 Bilder

Formate: 756x300px & 373x685px

Previous slide
Next slide
6f65e23ac2a34c5383e41cdc466d82ff
451157ae435449bca1fa084d5c6a7706

Konfiguration

  • Anzahl der Slider variabel
  • Mobile wird immer nur das 1. Bild angezeigt
  • Pfeile ausblendbar - falls ohne Slidefunktion gewünscht
  • Variante 1: 3 Bilder (dieser Slide)
  • Formate: 
    373x300px, 373x300px & 373x685px
-> 2. Slide ansehen für Variante 2

Previous slide
Next slide
ab476c68d4184777a231aa0811fe684d
e37e1617390d4e648e7eae5a0e6ff6a8

Variante 2: 2 Bilder

Formate: 756x300px & 373x685px

Previous slide
Next slide
ab476c68d4184777a231aa0811fe684d

SLIDER (1 IMAGE & 1 TEXT )


image-slider

Konfiguration

Die Anzahl der Slides ist frei wählbar. Pfeile & Punkte können ein- & ausgeblendet werden. Text ist über ein Textfeld individuell pflegbar (auch Button).

Bildformat: 505x628px

optionaler Button

Formular-Element

Felder sind beliebig anpassbar, Button ist ebenfalls in blau oder weiß verfügbar, Empfänger anpassbar


ABWEICHENDE RECHNUNGSADRESSE


Mit dem Absenden dieses Formulars bestätigtst du, dass du die Teilnahmebedingungen und die Datenschutzerklärung zur Kenntnis genommen hast.

Die mit einem Stern (*) markierten Felder sind Pflichtfelder.

GUIDELINE


SEO-/BILDOPTIMIERUNG

Warum ist die Optimierung von Bildern wichtig?

1. Suchmaschinen
In einem Onlineshop wird eine Vielzahl von Bildern verwendet – auf der Startseite, den Kategorieseiten und den Artikeldetailseiten. Neben dem Text sind sie die wichtigsten sichtbaren Bestandteile einer Website. Bilder bieten über die Bildersuche der Suchmaschinen das Potential, Besucher auf die eigene Website zu bekommen. Doch Suchmaschinen, wie Google oder Bing, können den Inhalt eines Bildes nicht erschließen. Wir müssen ihnen also eine Hilfestellung geben.

2. Barrierefreiheit
Auch im Internet gilt Barrierefreiheit! Durch optimierte Bilder erhalten blinde User Zugang zu den Bildschirminformationen. Mit Hilfe von Screenreadern werden die Inhalte vorgelesen oder in Blindenschrift ausgegeben.

3. User Experience/Usability
Bilder nehmen Einfluss auf die User Experience, wie zum Beispiel die Ladezeit einer Website. Mit optimierten Bildern wird die Seite schneller geladen, was sich positiv auf die User Experience auswirkt. Zudem kann es vorkommen, dass ein Bild aus verschiedenen Gründen nicht geladen werden kann. Mit einem alternativen Text kann dem User trotzdem eine Bildinformation bereitgestellt werden.

Welche Optimierungsmöglichkeiten gibt es?

1. Dateiname

Der Dateiname spielt für das Ranking in der Bildersuche eine wichtige Rolle.

  • Beschreibenden Namen entsprechend des Bildinhaltes wählen
    optimierter Dateiname: huepfburg.jpg
    vermeiden: Teaser_3-8_FINAL4.jpg
  • Ergänzungen werden mit Bindestrichen hinzugefügt
    - Google sieht Bindestriche als trennend: clownhuepfburg vs. clownhuepfburg → sind unterschiedliche Keywords für Google
    - Unterstriche werden als verbindend gesehen
    optimierter Dateiname: huepfburg-mit-rutsche.jpg
    vermeiden: huepfburg_rutsche.jpg
  • Keine Umlaute und Sonderzeichen verwenden
    optimierter Dateiname: huepfburg.jpg
    vermeiden: hüpfburg.jpg
  • Keywords verwenden und an den Anfang stellen
    optimierter Dateiname: huepfburg-mieten.jpg
    vermeiden: kinderattraktion-springburg.jpg
  • Kurze Dateinamen verwenden (Themenrelevanz vor Länge)
    optimierter Dateiname: huepfburg.jpg
    vermeiden: schloss-huepfburg-mit-vier-tuermen-fuer-gross-und-klein.jpg
2. alt-Attribut
Das Alt-Attribut ermöglicht die Bereitstellung eines alternativen Textes, falls das Bild nicht angezeigt werden kann oder von Screenreadern vorgelesen wird (siehe Barrierefreiheit).
• Gib in kurzen Worten den Inhalt des Bildes wieder
• Verwende dabei das Hauptkeyword
• Vermeide eine Aneinanderreihung von Keywords (Keyword-Stuffing)
3. title-Attribut
Das title-Attribut spielt für Suchmaschinen eine untergeordnete Rolle, ist aber aus Usability-Gründen gut. Es erscheint, wenn man mit dem Mauszeiger über das Bild fährt.
  • Hier kann z.B. der gleiche Text wie im alt-Attribut oder ein CopyrightHinweis stehen
  • Verwende das Hauptkeyword
4. Dateiformate
Es sollten Bilddateiformate verwendet werden, die die meisten Browser unterstützen:
  • JPG/JPEG (gute Komprimierung), PNG (für Transparenz), GIF (für Animation)
  • WEBP (verlustfreie Komprimierung) wurde von Google entwickelt, wird allerdings nicht in allen Browsern angezeigt



5. Verzeichnis/Ordnerpfad
Bei der Suchmaschinenoptimierung von Bildern spielt auch die URL eine Rolle.
  • Bilder sollten in einem eigenen Verzeichnis gespeichert werden
  • Die Ordnerstruktur sollte thematisch relevant sein
    Bisher:
    /media/image/c3/09/0e/header-fraport_20205eAG3BKjOsf8t.jpg
    Besser:
    /bilder/referenzen/fraport-mitarbeiterfest-spielwiese.jpg
6. Dateigröße
Die Dateigröße nimmt Einfluss auf die Ladezeit einer Seite und das Ranking in der Bildersuche. Damit ein Bild schneller und leichter in den Index aufgenommen wird, sollte eine weboptimierte Dateigröße verwendet werden. 150 KB sind ideal, um die Ladezeit des Bildes in der Suche zu verkürzen. Auf hochauflösende Aufnahmen mit einer Dateigröße von mehr als 10 Megabyte ist dringend zu verzichten.
Zur Komprimierung der Bilder kann u.a. TinyPNG genutzt werden.
7. Bildgröße

Empfohlen wird die Bilder in der Bildgröße hochzuladen, in der sie auch im
Content angezeigt werden.
Kleine Bilder, wie Vorschaubilder oder Profilbilder, gelangen seltener in den
Index, wobei dies auch vom Keyword abhängt. Sucht man beispielsweise nach einer Person, so erscheint höchstwahrscheinlich auch ein Profilbild in der Bildersuche. Als untersten Richtwert für ein gutes Ranking können 300 Pixel für mindestens eine Seite des Bildes angenommen werden. Die zweite Seite kann dabei variieren. Auch hier ist das Keyword entscheidend. Bei der Suchanfrage „Kölner Dom“ werden höchstwahrscheinlich auch hohe Bilder angezeigt. Google hat einst eine Maximalgröße von 1280 x 960 Pixel für Bilder in der Google-Suche definiert. Größere Bilder können auch durch die Suchmaschine abgeschnitten oder skaliert werden. Ein Querformat von 4:3 ist daher zu empfehlen. 

8. Mehrfache Verwendung

Anders als bei den Texten einer Website fördert die Mehrfachverwendung eines Bildes mit den gleichen Metaangaben ein gutes Ranking in der Bildersuche. Sie ist ein Zeichen der Beliebtheit und Relevanz des Bildes. 

Hinweis Video-Optimierung

Hier gelten dieselben Anforderungen wie bei der Bildoptimierung (s.o.). Zusätzlich sollten die Videos per Default auf lautlos stehen und es sollte auf jeden Fall der Page Speed im Auge behalten werden - vor allem bei automatisch abspielenden Videos.

PDF herunterladen

Jetzt zum Newsletter anmelden

Verpasse keine Trends und Produktneuheiten mehr!

Der Link wurde erfolgreich kopiert
Nutzen Sie ihn wo immer Sie möchten.