Bildmaterial allgemein

Jegliches Bildmaterial sollte vor Upload für die Webseite optimal aufbereitet werden:

- ausschließlich im RGB-Farbraum
- Headerbilder: 1.600x900px, max. 300 KB, Dateiformat JPG
- Artikelbilder: max. 300 KB (besser kleiner, Ausnahmen nach oben sind möglich), längste Kantenseite = 2.000px, Dateiformat JPG, Freisteller als PNG möglich

Bei der Einstellung können die Bilder im Backend mittels "Cropper" zugeschnitten und mittels "Positionsauswahl Top / Middle / Bottom" platziert werden. 

Headermodul (=Text & Image)/ Standard: Headline = 23 bis 45 Zeichen (optimal)

Für jedes Bild in diesem Modul – und auch in anderen Modulen – kann die gewünschte Ausrichtung des Motivs gewählt werden: 
In der Standard-Konfiguration (wie beispielhaft hier) werden Bilder aus der Mitte heraus vergrößert. Dies ist sinnvoll wenn sich die wichtigsten Bestandteile des Motivs im Zentrum befinden.

Des weiteren können für unterschiedliche Gerätetypen verschiedene Seitenverhältnisse gewählt werden.

Beim Text im Headermodul sind 190 bis 390 Zeichen sind optimal

    Mehr erfahren

    Headermodul (=Text & Image)/ Bildausrichtung oben: Headline = 23 bis 45 Zeichen (optimal)

    Für jedes Bild in diesem Modul – und auch in anderen Modulen – kann die gewünschte Ausrichtung des Motivs gewählt werden: 
    In der Standard-Konfiguration werden Bilder aus der Mitte heraus vergrößert (siehe vorheriges Modul). Dies ist sinnvoll wenn sich die wichtigsten Bestandteile des Motivs im Zentrum befinden.
    Beispielsweise bei Portraits kann es sinnvoll sein, die Ausrichtung von oben zu wählen. Im Reiter "images" des jeweiligen Elements kann dies über den Schalter "Image position top" eingestellt werden.

    Des weiteren können für unterschiedliche Gerätetypen verschiedene Seitenverhältnisse gewählt werden.

    Beim Text im Headermodul sind 190 bis 390 Zeichen optimal.

      Mehr erfahren
      Stageslider
      Headlines zweizeilig
      Headline max. 40 Zeichen
      Subline max. 30 Zeichen
      Beispiel: Colour Code
      Farbe bekennen!

      Produktthementeaser

      Subheader

      Testhementeaser4

      Testhementeaser4

      Testhementeaser4
      Testhementeaser2

      Testhementeaser2

      Testhementeaser2
      Testhementeaser3

      Testhementeaser3

      Testhementeaser3
      Testhementeaser4

      Testhementeaser4

      Testhementeaser4

      Standard Textelement / Breite variabel 7/12

      Hier kann ein längerer Text stehen. Blindtext als Beispiel: Lorem ipsum dolor sit amet, 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 ipsum lore.

      Standard Textelement / Breite variabel 9/12

      Hier kann ein längerer Text stehen. Blindtext als Beispiel: 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

      Standard Textelement / Breite variabel 12/12

      Hier kann ein längerer Text stehen. Blindtext als Beispiel: 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

      Text zentriert

      Hier kann ein längerer Text stehen. Blindtext als Beispiel: 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

      Offene Stellen
      Ausbildung & Duales Studium
      Praktikum
      Ferienjob

      Youtube Video

      Bitte aktivieren Sie in Ihren Datenschutzeinstellungen "Präferenzen", um das Youtube Video anzuzeigen.

      Datenschutzeinstellungen öffnen

      Text Image 4/8 Blue, zweizeilig: 23 bis 45 Zeichen

      Hier kann ein längerer Text stehen. Blindtext als Beispiel: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ed 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 190 bis 390 Zeichen sind optimal

      Für das Bildmotiv wird ein Seitenverhältnis von 2:1 oder 16:9 empholen, mit einer Bildbreite von 1600px.

       

       

       

        Mehr erfahren

        Text & Image 8/4 red: Headline bis 50 Zeichen optimal

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ed 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 230 bis 501 Zeichen sind optimal

          Mehr erfahren

          Text & Image 6/6 Yellow, Headline zweizeilig, 33 bis 53 Zeichen sind optimal

          Hier kann ein längerer Text stehen. Blindtext als Beispiel: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ed 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 230 bis 501 Zeichen sind optimal

            Mehr erfahren

            Service-Center 5/7 green, Headline bis 55 Zeichen optimal

            So erreichen Sie uns.

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ed 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 230 bis 501 Zeichen sind optimal

             

            Slider one image & multiple text

            Slider multiple texts 1 (33 bis 55 Zeichen sind optimal)

            Hier kann ein längerer Text stehen. Blindtext als Beispiel: 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.

            350 bis 750 Zeichen sind optimal.

            Slider multiple texts 2 (33 bis 55 Zeichen sind optimal)

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected 350 bis 750 Zeichen sind optimal.

            1200x1200.jpg

            Interaktives Bild/Text Slider-Element (33 bis 55 Zeichen sind optimal)

            HL 1: 33 bis 55 Zeichen sind optimal

            Als familiengeführtes Unternehmen in der 4. und 5. Generation blicken wir mit Stolz auf über 140 Jahre Unternehmensgeschichte zurück.  100 bis 200 Zeichen sind optimal

            HL 1: 33 bis 55 Zeichen sind optimal

            Als familiengeführtes Unternehmen in der 4. und 5. Generation blicken wir mit Stolz auf über 140 Jahre Unternehmensgeschichte zurück.  100 bis 200 Zeichen sind optimal

            HL 1: 33 bis 55 Zeichen sind optimal

            Als familiengeführtes Unternehmen in der 4. und 5. Generation blicken wir mit Stolz auf über 140 Jahre Unternehmensgeschichte zurück.  100 bis 200 Zeichen sind optimal

            HL 1: 33 bis 55 Zeichen sind optimal

            Als familiengeführtes Unternehmen in der 4. und 5. Generation blicken wir mit Stolz auf über 140 Jahre Unternehmensgeschichte zurück.  100 bis 200 Zeichen sind optimal

            HL 1: 33 bis 55 Zeichen sind optimal

            Als familiengeführtes Unternehmen in der 4. und 5. Generation blicken wir mit Stolz auf über 140 Jahre Unternehmensgeschichte zurück.  100 bis 200 Zeichen sind optimal

            HL 1: 33 bis 55 Zeichen sind optimal

            Als familiengeführtes Unternehmen in der 4. und 5. Generation blicken wir mit Stolz auf über 140 Jahre Unternehmensgeschichte zurück.  100 bis 200 Zeichen sind optimal

            HL 1: 33 bis 55 Zeichen sind optimal

            Als familiengeführtes Unternehmen in der 4. und 5. Generation blicken wir mit Stolz auf über 140 Jahre Unternehmensgeschichte zurück.  100 bis 200 Zeichen sind optimal

            HL 1: 33 bis 55 Zeichen sind optimal

            Als familiengeführtes Unternehmen in der 4. und 5. Generation blicken wir mit Stolz auf über 140 Jahre Unternehmensgeschichte zurück.  100 bis 200 Zeichen sind optimal

            History element

            1820 bis 1830

            33 bis 55 Zeichen sind optimal

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected 85 bis 165 Zeichen sind optimal

            1820 bis 1830

            33 bis 55 Zeichen sind optimal

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected 85 bis 165 Zeichen sind optimal

            1830 bis 1840

            33 bis 55 Zeichen sind optimal

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected 85 bis 165 Zeichen sind optimal

            1850 bis 1860

            33 bis 55 Zeichen sind optimal

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected 85 bis 165 Zeichen sind optimal

            1840 bis 1850

            33 bis 55 Zeichen sind optimal

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected 85 bis 165 Zeichen sind optimal

            1820 bis 1830 (copy 1)

            33 bis 55 Zeichen sind optimal

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected 85 bis 165 Zeichen sind optimal

            1820 bis 1830 (copy 2)

            33 bis 55 Zeichen sind optimal

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected 85 bis 165 Zeichen sind optimal

            1820 bis 1830 (copy 3)

            33 bis 55 Zeichen sind optimal

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected 85 bis 165 Zeichen sind optimal

            1820 bis 1830 (copy 4)

            33 bis 55 Zeichen sind optimal

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected 85 bis 165 Zeichen sind optimal

            1820 bis 1830 (copy 5)

            33 bis 55 Zeichen sind optimal

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected 85 bis 165 Zeichen sind optimal

            1820 bis 1830 (copy 6)

            33 bis 55 Zeichen sind optimal

            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected 85 bis 165 Zeichen sind optimal

            • 1820 bis 1830
            • 1820 bis 1830
            • 1830 bis 1840
            • 1850 bis 1860
            • 1840 bis 1850
            • 1820 bis 1830 (copy 1)
            • 1820 bis 1830 (copy 2)
            • 1820 bis 1830 (copy 3)
            • 1820 bis 1830 (copy 4)
            • 1820 bis 1830 (copy 5)
            • 1820 bis 1830 (copy 6)

            Accordion Element

            Mediacenter

            Karriere bei BRUNNEN

            Lorem ipsum dolor sit amet, consetetur sadipscing