Tipps zum Umgang mit den Modulen
- Die Module sind so konzipiert, dass sie Sectionweise untereinander angeordnet werden können
- das Modul „Pre-Footer“ MUSS immer ans Ende der Seite gesetzt werden, es enthält die Social Icons am rechten Bildschirmrand und das Newsletter-Anmeldeformular
- die Spaltenaufteilung dieser komplexen Module darf grundsätzlich nicht verändert werden:
- Product Header
- Balken schwarz + Call to Action
- Text links | Bild randabfallend rechts
- Bild randabfallend links | Text rechts
- H2-Visual + H1-Visual + Text + Paragraph-Big Mittig
- Akzent-Bild
- die Spaltenaufteilung dieser einfachen Module darf verändert werden:
- Zeile weiß
- Zeile schwarz
- Zeile grau
- Icon-Reihe weiß
- Icon-Reihe schwarz
- Icon-Reihe grau
- Feha-Elemente dürfen in komplexen Modulen nur in Spalten platziert werden, in denen bereits Elemente platziert sind. Es dürfen hier aber auch Elemente gelöscht und die Reihenfolge getauscht werden. Ganze Zeilen wenn möglich nicht verschieben oder löschen.
- Feha-Elemente dürfen in einfachen Modulen in allen Spalten platziert werden, z.B: dürfen, wenn man die Spaltenaufteilung von einem Zwei- in einen Dreispalter ändert, in der neuen dritten Spalte Elemente platziert werden.
Module werden über diesen Button eingefügt:
Abstand nach oben anpassen
Jedes Modul hat einen Abstand nach oben eingebaut, damit man sie untereinander anordnen kann. Wenn ihr euren Beitrag aufbaut, müsst ihr aus dem als erstes auf der Seite platzierten Modul diesen Abstand löschen, damit der Abstand zur Navigation nicht zu groß wird. Ihr löscht dazu aus der Section die Klasse container-padding-top.
1.
2.
Wenn ihr zusätzliche Module benötigt, fragt uns! Wir richten sie gerne für euch ein!
H2-Visual
H1-Visual: Modul: Product Header
Ein Paragraph. 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.
H2-Visual
Paragraph. Lorem ipsum dolor sit amet, consetetur sadipscin.
H2-Visual
Paragraph. Lorem ipsum dolor sit amet, consetetur sadipscin.
H2-Visual
Paragraph. Lorem ipsum dolor sit amet, consetetur sadipscin.
H2-Visual
H1-Visual: Modul: Zeile Weiß
H2-Visual Lorem ipsum dolor sit
H3-Visual Lorem ipsum dolot sit amed
Paragraph Big. Hervorgehobener Text. Ein Link icideri ut apient autemquis sectur? Cest hicatis cienet lates dus ratatquosam quaspe perumque voluptatur sint, cor solo dolupta tempore, nam ne pos sitae nus dion
Paragraph. 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 ein Link, 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.
H1-Visual: Modul: Zeile Schwarz
H2-Visual Lorem ipsum dolor sit
H3-Visual Lorem ipsum dolot sit amed
Paragraph Big. Hervorgehobener Text. Ein Link icideri ut apient autemquis sectur? Cest hicatis cienet lates dus ratatquosam quaspe perumque voluptatur sint, cor solo dolupta tempore, nam ne pos sitae nus dion
Paragraph. 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 ein Link, 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.
H1-Visual: Modul: Zeile Grau
H2-Visual Lorem ipsum dolor sit
H3-Visual Lorem ipsum dolot sit amed
Paragraph Big. Hervorgehobener Text. Ein Link icideri ut apient autemquis sectur? Cest hicatis cienet lates dus ratatquosam quaspe perumque voluptatur sint, cor solo dolupta tempore, nam ne pos sitae nus dion
Paragraph. 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 ein Link, 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.
H1-Visual: Modul: Balken schwarz + Call to Action
H2-Visual: Lorem ipsum dolor
H1-Visual: Modul: Text links | Bild randabfallend rechts
Paragraph. 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 ein Link, 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.
H2-Visual: Lorem ipsum dolor
H1-Visual: Modul: Bild randabfallend rechts | Text rechts
Unsere Kooperation mit Review Forest verbindet Kundenerfahrungen mit Umweltschutz. Jede Bewertung, die Sie auf Google hinterlassen, führt zu einer wertvollen Aktion: Wir pflanzen einen Baum über die Initiative Plant-for-the-Planet. Diese Partnerschaft ist unser Beitrag zur Nachhaltigkeit und zum Umweltschutz. Wir glauben fest daran, dass auch kleine Handlungen große Auswirkungen haben können. Jede einzelne Bewertung ist Teil einer umweltfreundlichen Bewegung, die den CO2-Fußabdruck verringert und die Natur stärkt.
H2-Visual
H1-Visual: Modul: H2-Visual + H1-Visual + Text mittig
Paragraph-Big: 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.
H2-Visual: Lorem ipsum dolor
H1-Visual: Modul: Text links | Bild randabfallend rechts (6/12+1/12+5/12)
Paragraph. 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 ein Link, 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.
H2-Visual: Lorem ipsum dolor
H1-Visual: Modul: Bild randabfallend links | Text rechts (6/12+1/12+5/12)
Unsere Kooperation mit Review Forest verbindet Kundenerfahrungen mit Umweltschutz. Jede Bewertung, die Sie auf Google hinterlassen, führt zu einer wertvollen Aktion: Wir pflanzen einen Baum über die Initiative Plant-for-the-Planet. Diese Partnerschaft ist unser Beitrag zur Nachhaltigkeit und zum Umweltschutz. Wir glauben fest daran, dass auch kleine Handlungen große Auswirkungen haben können. Jede einzelne Bewertung ist Teil einer umweltfreundlichen Bewegung, die den CO2-Fußabdruck verringert und die Natur stärkt.
Modul Pre Footer: MUSS immer ans Ende jeder Seite gesetzt werden
Newsletter
Keine News mehr verpassen!
Erfahren Sie alles über Neuheiten, Trends und Veranstaltungen aus den Bereichen Dokumentenmanagement, IT-Lösungen und Bürodesign.
Jetzt unseren Newsletter abonnieren und immer gut informiert sein!