Tipps zum Um­gang mit den Mo­du­len

  • Die Mo­du­le sind so kon­zi­piert, dass sie Sec­tion­wei­se un­ter­ein­an­der an­ge­ord­net wer­den kön­nen
  • das Mo­dul „Pre-Foo­ter“ MUSS im­mer ans Ende der Sei­te ge­setzt wer­den, es ent­hält die So­cial Icons am rech­ten Bild­schirm­rand und das News­let­ter-An­mel­de­for­mu­lar
  • die Spal­ten­auf­tei­lung die­ser kom­ple­xen Mo­du­le darf grund­sätz­lich nicht ver­än­dert wer­den:
    • Pro­duct Hea­der
    • Bal­ken schwarz + Call to Ac­tion
    • Text links | Bild rand­ab­fal­lend rechts
    • Bild rand­ab­fal­lend links | Text rechts
    • H2-Vi­su­al + H1-Vi­su­al + Text + Pa­ra­graph-Big Mit­tig
    • Ak­zent-Bild
  • die Spal­ten­auf­tei­lung die­ser ein­fa­chen Mo­du­le darf ver­än­dert wer­den:
    • Zei­le weiß
    • Zei­le schwarz
    • Zei­le grau
    • Icon-Rei­he weiß
    • Icon-Rei­he schwarz
    • Icon-Rei­he grau
  • Feha-Ele­men­te dür­fen in kom­ple­xen Mo­du­len nur in Spal­ten plat­ziert wer­den, in de­nen be­reits Ele­men­te plat­ziert sind. Es dür­fen hier aber auch Ele­men­te ge­löscht und die Rei­hen­fol­ge ge­tauscht wer­den. Gan­ze Zei­len wenn mög­lich nicht ver­schie­ben oder lö­schen.
  • Feha-Ele­men­te dür­fen in ein­fa­chen Mo­du­len in al­len Spal­ten plat­ziert wer­den, z.B: dür­fen, wenn man die Spal­ten­auf­tei­lung von ei­nem Zwei- in ei­nen Drei­spal­ter än­dert, in der neu­en drit­ten Spal­te Ele­men­te plat­ziert wer­den.

Mo­du­le wer­den über die­sen But­ton ein­ge­fügt:

Ab­stand nach oben an­pas­sen

Je­des Mo­dul hat ei­nen Ab­stand nach oben ein­ge­baut, da­mit man sie un­ter­ein­an­der an­ord­nen kann. Wenn ihr eu­ren Bei­trag auf­baut, müsst ihr aus dem als ers­tes auf der Sei­te plat­zier­ten Mo­dul die­sen Ab­stand lö­schen, da­mit der Ab­stand zur Na­vi­ga­ti­on nicht zu groß wird. Ihr löscht dazu aus der Sec­tion die Klas­se con­tai­ner-pad­ding-top.

1.

2.

Wenn ihr zu­sätz­li­che Mo­du­le be­nö­tigt, fragt uns! Wir rich­ten sie ger­ne für euch ein!

H2-Vi­su­al

H1-Vi­su­al: Mo­dul: Pro­duct Hea­der

Ein Pa­ra­graph. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum. Stet cli­ta kasd gu­ber­gren, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum. Stet cli­ta kasd gu­ber­gren, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet.

H2-Vi­su­al

Pa­ra­graph. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscin.

H2-Vi­su­al

Pa­ra­graph. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscin.

H2-Vi­su­al

Pa­ra­graph. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscin.

H2-Vi­su­al

H1-Vi­su­al: Mo­dul: Zei­le Weiß

H2-Vi­su­al Lo­rem ip­sum do­lor sit

H3-Vi­su­al Lo­rem ip­sum do­lot sit amed

Pa­ra­graph Big. Her­vor­ge­ho­be­ner Text. Ein Link ici­de­ri ut apient au­tem­quis sec­tur? Cest hi­ca­tis ci­e­net la­tes dus ra­tat­quo­sam quaspe per­um­que vo­lupt­atur sint, cor solo do­lupta tem­po­re, nam ne pos si­tae nus dion

Pa­ra­graph. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum. Stet cli­ta kasd ein Link, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum. Stet cli­ta kasd gu­ber­gren, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet.

H1-Vi­su­al: Mo­dul: Zei­le Schwarz

H2-Vi­su­al Lo­rem ip­sum do­lor sit

H3-Vi­su­al Lo­rem ip­sum do­lot sit amed

Pa­ra­graph Big. Her­vor­ge­ho­be­ner Text. Ein Link ici­de­ri ut apient au­tem­quis sec­tur? Cest hi­ca­tis ci­e­net la­tes dus ra­tat­quo­sam quaspe per­um­que vo­lupt­atur sint, cor solo do­lupta tem­po­re, nam ne pos si­tae nus dion

Pa­ra­graph. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum. Stet cli­ta kasd ein Link, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum. Stet cli­ta kasd gu­ber­gren, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet.

H1-Vi­su­al: Mo­dul: Zei­le Grau

H2-Vi­su­al Lo­rem ip­sum do­lor sit

H3-Vi­su­al Lo­rem ip­sum do­lot sit amed

Pa­ra­graph Big. Her­vor­ge­ho­be­ner Text. Ein Link ici­de­ri ut apient au­tem­quis sec­tur? Cest hi­ca­tis ci­e­net la­tes dus ra­tat­quo­sam quaspe per­um­que vo­lupt­atur sint, cor solo do­lupta tem­po­re, nam ne pos si­tae nus dion

Pa­ra­graph. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum. Stet cli­ta kasd ein Link, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum. Stet cli­ta kasd gu­ber­gren, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet.

H1-Vi­su­al: Mo­dul: Bal­ken schwarz + Call to Ac­tion

Pa­ra­graph-big. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum

H2-Vi­su­al: Lo­rem ip­sum do­lor

H1-Vi­su­al: Mo­dul: Text links | Bild rand­ab­fal­lend rechts

Pa­ra­graph. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum. Stet cli­ta kasd ein Link, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum. Stet cli­ta kasd gu­ber­gren, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet.

H2-Vi­su­al: Lo­rem ip­sum do­lor

H1-Vi­su­al: Mo­dul: Bild rand­ab­fal­lend rechts | Text rechts

Un­se­re Ko­ope­ra­ti­on mit Re­view Fo­rest ver­bin­det Kun­de­n­er­fah­run­gen mit Um­welt­schutz. Jede Be­wer­tung, die Sie auf Goog­le hin­ter­las­sen, führt zu ei­ner wert­vol­len Ak­ti­on: Wir pflan­zen ei­nen Baum über die In­itia­ti­ve Plant-for-the-Pla­net. Die­se Part­ner­schaft ist un­ser Bei­trag zur Nach­hal­tig­keit und zum Um­welt­schutz. Wir glau­ben fest dar­an, dass auch klei­ne Hand­lun­gen gro­ße Aus­wir­kun­gen ha­ben kön­nen. Jede ein­zel­ne Be­wer­tung ist Teil ei­ner um­welt­freund­li­chen Be­we­gung, die den CO2-Fuß­ab­druck ver­rin­gert und die Na­tur stärkt.

H2-Vi­su­al

H1-Vi­su­al: Mo­dul: H2-Vi­su­al + H1-Vi­su­al + Text mit­tig

Pa­ra­graph-Big: Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum.

H2-Vi­su­al: Mo­dul: Icon-Rei­he weiß

Pa­ra­graph: Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr.

H2-Vi­su­al: Mo­dul: Icon-Rei­he weiß

Pa­ra­graph: Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr.

H2-Vi­su­al: Mo­dul: Icon-Rei­he weiß

Pa­ra­graph: Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr.

H2-Vi­su­al: Mo­dul: Icon-Rei­he schwarz

Pa­ra­graph: Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr.

H2-Vi­su­al: Mo­dul: Icon-Rei­he schwarz

Pa­ra­graph: Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr.

H2-Vi­su­al: Mo­dul: Icon-Rei­he schwarz

Pa­ra­graph: Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr.

H2-Vi­su­al: Mo­dul: Icon-Rei­he grau

Pa­ra­graph: Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr.

H2-Vi­su­al: Mo­dul: Icon-Rei­he grau

Pa­ra­graph: Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr.

H2-Vi­su­al: Mo­dul: Icon-Rei­he grau

Pa­ra­graph: Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr.

H2-Vi­su­al:
Mo­dul: Ak­zent-Bild

Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re.

H2-Vi­su­al: Lo­rem ip­sum do­lor

H1-Vi­su­al: Mo­dul: Text links | Bild rand­ab­fal­lend rechts (6/12+1/12+5/12)

Pa­ra­graph. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum. Stet cli­ta kasd ein Link, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet. Lo­rem ip­sum do­lor sit amet, con­sete­tur sa­dipscing elitr, sed diam no­numy eirm­od tem­por in­vidunt ut la­bo­re et do­lo­re ma­gna ali­quyam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et jus­to duo do­lo­res et ea re­bum. Stet cli­ta kasd gu­ber­gren, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet.

H2-Vi­su­al: Lo­rem ip­sum do­lor

H1-Vi­su­al: Mo­dul: Bild rand­ab­fal­lend links | Text rechts (6/12+1/12+5/12)

Un­se­re Ko­ope­ra­ti­on mit Re­view Fo­rest ver­bin­det Kun­de­n­er­fah­run­gen mit Um­welt­schutz. Jede Be­wer­tung, die Sie auf Goog­le hin­ter­las­sen, führt zu ei­ner wert­vol­len Ak­ti­on: Wir pflan­zen ei­nen Baum über die In­itia­ti­ve Plant-for-the-Pla­net. Die­se Part­ner­schaft ist un­ser Bei­trag zur Nach­hal­tig­keit und zum Um­welt­schutz. Wir glau­ben fest dar­an, dass auch klei­ne Hand­lun­gen gro­ße Aus­wir­kun­gen ha­ben kön­nen. Jede ein­zel­ne Be­wer­tung ist Teil ei­ner um­welt­freund­li­chen Be­we­gung, die den CO2-Fuß­ab­druck ver­rin­gert und die Na­tur stärkt.

Mo­dul Pre Foo­ter: MUSS im­mer ans Ende je­der Sei­te ge­setzt wer­den

News­let­ter

Kei­ne News mehr ver­pas­sen!

Er­fah­ren Sie al­les über Neu­hei­ten, Trends und Ver­an­stal­tun­gen aus den Be­rei­chen Do­ku­men­ten­ma­nage­ment, IT-Lö­sun­gen und Bü­ro­de­sign.

Jetzt un­se­ren News­let­ter abon­nie­ren und im­mer gut in­for­miert sein!

.