Überschriftenformate (h1-h6)

Es gilt zu beachten, dass je nach dem, ob ein Container eingesetzt ist und welche Darstellungsoptionen gewählt sind, die Abstände variieren können!

h1: Überschrift Level 1 (30 Pixel, Open Sans, Light, Abstand nach oben: 20px; Abstand nach unten: 10px;)

h2: Überschrift Level 2 (32 Pixel, Open Sans Condensed, Bold, Abstand nach oben: 20px; Abstand nach unten: 10px;)

h3: Überschrift Level 3 (25 Pixel, Open Sans, Semibold, Abstand nach oben: 20px; Abstand nach unten: 10px;)

h4: Überschrift Level 4 (18 Pixel, Open Sans, Semibold, Abstand nach oben: 10px; Abstand nach unten: 10px;)

h5: Überschrift Level 5 (16 Pixel, Open Sans, Semibold, Abstand nach oben: 10px; Abstand nach unten: 10px;)
h6: Überschrift Level 6 (30 Pixel, Open Sans, Semibold, Abstand nach oben: 0px; Abstand nach unten: 10px;)

Beispiele für Linkstyles und Listen

Normaler Link:

Ankerlink normal:

Beispiele für Spaltenaufteilungen

Ankerlink Buttonstyle:

Spaltenaufteilungen

Beispiel für ungeordnete Liste:

  • Ungeordnete Liste - Open Sans Light, 15px
  • Ungeordnete Liste
  • Ungeordnete Liste

Beispiel für geordnete Liste:

  1. Georndete Liste - Open Sans Light, 15px
  2. Liste
  3. Punkte

Beispiele für Fließtext und Spaltenaufteilungen

H2 Lorem ipsum dolor sit amet

Paragraph Text - Open Sans Light 15PX, #666. 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. 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 dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero.

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.

1/2
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. 
1/2
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. 

2/3
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.

1/3
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.

1/3
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.

2/3
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.

1/3
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. 
1/3
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. 
1/3
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. 

Beispiel für ein Akkordeon-Container

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 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 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.

Beispiel für eine Tabelle

Schriftschnitt Font-Size Font-Weight Font-Color
Open Sans 15 Pixel 700 (bold) #666666
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem

Beispiel für Tabs

Schriftschnitt, -größen und -farbe der Reiter

Font-Family: Open Sans
Font-Size: 15 Pixel
Font-Weight: bold
Font-Color: #ffffff

HTML Editor

Ich bin ein http://www.google.de. Alles, was in einem Home gepflegt werden kann, kann dargestellt werden. Ich bin aktiviert

Ich bin ein Bild

Beispiel für Horizontale Linien



Bildgrößen

Bildausschnittsformate

4:3 Querformat (4:3), z.B. für News Startseite: 640 x 480 Pixel
Full HD (16:9)
Quadratisch (1:1)
Headerbild (Unterseiten) (16:3)
Teaser hoch (3:4)
Newsteaser (4:2)
Vertretungen Teaser (Unternehmen) (16:9)
Headerbild (Startseite) (16:5)
4:3 Hochformat (3:4)
Produktbild 5:3 (5:3)
Produktbild für Slider (4:3)
Produktteaser Hochformat (2:4)
3:2 Querformat (3:2)
3:2 Hochformat (2:3)
News Detailseite Querformat (3:2)
News Detail Hochformat (2:3)

Bildformate Web

Vorschau (250 x 250)
Ausschnitt-Tool (450 x 450)
1 Spalte (67 x 0)
2 Spalten (164 x 0*)
3 Spalten (261 x 0*)
4 Spalten (358 x 0*)
5 Spalten (455 x 0*)
6 Spalten (552 x 0*)
7 Spalten (649 x 0*)
8 Spalten (746 x 0*)
9 Spalten (843 x 0*)
10 Spalten (940 x 0*)
11 Spalten (1037 x 0*)
12 Spalten (1134 x 0*)
Großer Hintergrund (1920 x 0*)
Teaser Startseite (247 x 208)
Header Detailseite (850 x 450)
Icons Karriere (115 x 115)  
w320 (320 x 0*)
w480 (480 x 0*)
w640 (640 x 0*)
w768 (768 x 0*)
w1024 (1024 x 0*)
w1280 (1280 x 0*)
w1920 (1920 x 0*)
w1440 (1440 x 0*)

* 0 bedeutet, dass die Höhe proportional zur Breite berechnet bzw. angezeigt wird.

Beispiele für Bildergalerien

Beispiel für Bildergalerie zweispaltig (Optik: Slider mit Autoplay)

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.

Beispiel für Bildergalerie einspaltig (Optik: Thumbnails)

Beispiel für Bildergalerie mit Zitat

Hier steht ein langes Zitat mit viel Text, damit es in die Bildergalerie laufen kann.

Beispiele für Container mit Hintergrundbild

Beispiel für Container mit Hintergrundbild und Text

Wunderschön bedruckte Baumwollstoffe der Kollektionen MARRAKESCH, PORTOFINO,
LONG ISLAND und SUMMER LOFT erwarten Sie hier!
Lassen Sie sich von unseren trendigen Stoffen begeistern und entdecken Sie mehrfarbige
moderne Prints mit dezenten, aber auch ausdrucksstarken Motiven.
Die unifarbenen Baumwollstoffe der Kollektion PURE COLOURS lassen sich perfekt dazu kombinieren. 
Egal, ob für traumhafte Dekoideen oder praktische Heimtextilien, die Gütermann ring a roses Stoffkollektionen
passen einfach immer und kreativen Nähideen sind keine Grenzen gesetzt.

Beispiel für Container mit Hintergrundbild, Text und Video

Produkte aus dem Bereich Non-Apparel


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.

Beispiele für Bilddarstellungen

Kollektion Marrakesch Bänder Stoffe


Kollektion
MARRAKESCH



Jetzt entdecken >>

           

                Kollektion
                   PORTOFINO
     


 

   
Kollektion LONG ISLAND

 Abtauchen und sich treiben lassen


 

   Kollektion
   SUMMER LOFT

 

 


Jetzt entdecken >>

 

 

 

 

Beispiel für Produktteaser

Font-Family: Open Sans Condensed
Font-Size: 24 Pixel
Font-Weight: 900 (bold)
Font-Color: #666666

Suchergebnisse

Beispiel für Produktslider

Beispiel Featured Topic Asset