Baukasten

Alle Sections und Inhalts-Elemente der Vorlage auf einer Seite – zum Nachschlagen und zum Prüfen nach Änderungen an Farben, Schrift oder Rundung.

Sections und Raster Inhalts-Elemente Farbtest Strukturierte Daten

Sections und Raster

Section-Arten (standard, breakout, full) mit inner-padding und den Rastern boxes-1-1, boxes-1-2, boxes-2-1, boxes-1-1-1 und boxes-1-1-1-1. Der Titel jeder Section nennt die Klassen.

section-standard bg-primary > boxes-1-1-1Titel

Spalte 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Spalte 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Ein Button

Spalte 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Ein Button angepasst und rechts

section-standard > small > boxes-1-1-1Titel

Spalte 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Spalte 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Ein Button

Spalte 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Ein Button angepasst und rechts

section-standard bg-secondaryNEWS

Keine Einträge vorhanden.

section-breakout-right bg-primary inner-padding > boxes-1-2 media-lastMustertitel

Mustertext

Musterbild WebP gross anzeigen

section-standard boxes-1-2Mustertitel

Mustertext Anriss.

Mustertext Fliesstext.

Musterbild gross anzeigen
Musterbild gross anzeigen

section-breakout-left bg-secondary > boxes-2-1 media-firstMustertitel

Mustertext

section-standard bg-primary > boxes-1-1Mustertitel

Mustertext

Musterbild gross anzeigen

section-standard bg-dark > boxes-1-1Mustertitel

Mustertext Lead

Mustertext Fliesstext.

section-standard bg-light > boxes-1-1Mustertitel

Mustertext Lead

Mustertext

section-breakout-right bg-secondary > boxes-2-1 media-lastMustertitel

Mustertext

Musterbild gross anzeigen

section-standard bg-primary / Liste mit 4 SpaltenBild mit Fancybox

Mustertext

Fancybox Docs
Musterbild gross anzeigen

section-breakout-left bg-secondary > boxes-1-2 media-firstMustertitel

Mustertext

section-standardEinfache Tabelle

Text

Titel 1 Titel 2 Titel 3
Content 1 Content 2 Content 3
Content 1 Content 2 Content 3
Content 1 Content 2 Content 3
Content 1 Content 2 Content 3

section-banner has-blurHell getönt

Wie eine weisse Section mit Struktur – für kurze Inhalte mit Akzent: Vorteile, Intro, Zitat.

Ein Button Ein Button

section-banner has-blur bg-primaryIn der Hauptfarbe getönt

Wie bg-primary mit Tiefe – für den Aufruf zur Kontaktaufnahme.

Ein Button Ein Button

Inhalts-Elemente

Karten, Leistungsliste, Icon-Badges, Zitat auf Bildbanner und Akkordeon — so wie sie auf der Startseite eingesetzt sind.

Unsere Leistungen

Kurze Einleitung, was das Angebot im Kern ausmacht und welches Problem damit gelöst wird.

Leistung 1

Kurze Beschreibung der ersten Leistung: was ist enthalten, für wen ist sie gedacht.

ab CHF 00.–

Leistung 2

Kurze Beschreibung der zweiten Leistung: was ist enthalten, für wen ist sie gedacht.

ab CHF 00.–

Leistung 3

Kurze Beschreibung der dritten Leistung: was ist enthalten, für wen ist sie gedacht.

ab CHF 00.–

Unsere Leistungen

Kurze Einleitung, was das Angebot im Kern ausmacht und welches Problem damit gelöst wird.

Titel Leistung 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ab CHF 00.–

Termin anfragen

Titel Leistung 2

Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis.

Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.

ab CHF 00.–

Termin anfragen

Titel Leistung 3

Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget.

Sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.

ab CHF 00.–

Termin anfragen

Warum wir

3 bis 6 Vorteile, die den Betrieb von anderen abheben – z.B. persönlich, regional, langjährige Erfahrung, nachhaltig.

Vorteil 1

Kurzer Text, der den Vorteil konkret macht.

Vorteil 2

Kurzer Text, der den Vorteil konkret macht.

3

Vorteil 3

Kurzer Text, der den Vorteil konkret macht.

Vorteil 4

Kurzer Text, der den Vorteil konkret macht.

Hier könnte noch ein Zitat stehen

Häufige Fragen

Einleitung...

Kurze, klare Antwort auf die erste häufig gestellte Frage.

Kurze, klare Antwort auf die zweite häufig gestellte Frage.

Kurze, klare Antwort auf die dritte häufig gestellte Frage – ggf. mit Verweis auf die Preisliste.

Kurze, klare Antwort auf die vierte häufig gestellte Frage – ggf. mit Verweis auf Telefon/WhatsApp.

Farbtest

Typografie, Buttons, Icon-Badges, Kontakt und Akkordeon auf allen Section-Farben. Alles passt sich automatisch an.

SectionWeiss

Lead-Text in h5-Grösse, darunter normaler Fliesstext mit einem Inhaltslink und gedämpftem Text.

Zwischentitel h3

Folgt ein Titel auf einen Absatz, bekommt er automatisch Abstand davor.

Zwischentitel h4

Zitat, Listen und Kontaktlinks erben die Schriftfarbe der Section.

btn-cta btn-alt link-more

1

081 256 50 00

info@firma.ch

Antwort in der Schriftfarbe der Section.

Sectionbg-primary

Lead-Text in h5-Grösse, darunter normaler Fliesstext mit einem Inhaltslink und gedämpftem Text.

Zwischentitel h3

Folgt ein Titel auf einen Absatz, bekommt er automatisch Abstand davor.

Zwischentitel h4

Zitat, Listen und Kontaktlinks erben die Schriftfarbe der Section.

btn-cta btn-alt link-more

1

081 256 50 00

info@firma.ch

Antwort in der Schriftfarbe der Section.

Sectionbg-secondary

Lead-Text in h5-Grösse, darunter normaler Fliesstext mit einem Inhaltslink und gedämpftem Text.

Zwischentitel h3

Folgt ein Titel auf einen Absatz, bekommt er automatisch Abstand davor.

Zwischentitel h4

Zitat, Listen und Kontaktlinks erben die Schriftfarbe der Section.

btn-cta btn-alt link-more

1

081 256 50 00

info@firma.ch

Antwort in der Schriftfarbe der Section.

Sectionbg-gradient-brand (Verlauf)

Lead-Text in h5-Grösse, darunter normaler Fliesstext mit einem Inhaltslink und gedämpftem Text.

Zwischentitel h3

Folgt ein Titel auf einen Absatz, bekommt er automatisch Abstand davor.

Zwischentitel h4

Zitat, Listen und Kontaktlinks erben die Schriftfarbe der Section.

btn-cta btn-alt link-more

1

081 256 50 00

info@firma.ch

Antwort in der Schriftfarbe der Section.

Sectionhas-blur (Bild hell getönt)

Lead-Text in h5-Grösse, darunter normaler Fliesstext mit einem Inhaltslink und gedämpftem Text.

Zwischentitel h3

Folgt ein Titel auf einen Absatz, bekommt er automatisch Abstand davor.

Zwischentitel h4

Zitat, Listen und Kontaktlinks erben die Schriftfarbe der Section.

btn-cta btn-alt link-more

1

081 256 50 00

info@firma.ch

Antwort in der Schriftfarbe der Section.

Sectionhas-blur bg-primary (Bild in Hauptfarbe)

Lead-Text in h5-Grösse, darunter normaler Fliesstext mit einem Inhaltslink und gedämpftem Text.

Zwischentitel h3

Folgt ein Titel auf einen Absatz, bekommt er automatisch Abstand davor.

Zwischentitel h4

Zitat, Listen und Kontaktlinks erben die Schriftfarbe der Section.

btn-cta btn-alt link-more

1

081 256 50 00

info@firma.ch

Antwort in der Schriftfarbe der Section.

Strukturierte Daten

Google Doc

ItemList

Übersichtsseite mit mehreren Detailseiten vom gleichen Structured Data Typ. Die Details können auch direkt in die Liste gesetzt werden, wenn es keine Detailseite gibt. Darstellung als Karussell.

<script type="application/ld+json">
{
    "@context":"https://schema.org",
    "@type":"ItemList",
    "itemListElement":[
        {
            "@type":"ListItem",
            "position":1,
            "url":"https://example.com/peanut-butter-cookies.html"
        },
        {
            "@type":"ListItem",
            "position":2,
            "url":"https://example.com/triple-chocolate-chunk.html"
        },
        {
            "@type":"ListItem",
            "position":3,
            "url":"https://example.com/snickerdoodles.html"
        }
    ]
}
</script>
        

FAQPage

FAQs werden direkt unter dem Suchergebnis als Accordion dargestellt.

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [{
        "@type": "Question",
        "name": "How to find an apprenticeship?",
        "acceptedAnswer": {
            "@type": "Answer",
            "text": "<p>We provide an official service to search through available apprenticeships. To get started, create an account here, specify the desired region, and your preferences. You will be able to search through all officially registered open apprenticeships.</p>"
        }
    }, {
        "@type": "Question",
        "name": "Whom to contact?",
        "acceptedAnswer": {
            "@type": "Answer",
            "text": "You can contact the apprenticeship office through our official phone hotline above, or with the web-form below. We generally respond to written requests within 7-10 days."
        }
    }]
}
</script>
        

JobPosting

Jobs werden in Google Jobs angezeigt.

<script type="application/ld+json">
{
    "@context" : "https://schema.org/",
    "@type" : "JobPosting",
    "title" : "Software Engineer",
    "description" : "<p>Google aspires to be an organization that reflects the globally diverse audience that our products and technology serve. We believe that in addition to hiring the best talent, a diversity of perspectives, ideas and cultures leads to the creation of better products and services.</p>",
    "identifier": {
        "@type": "PropertyValue",
        "name": "Google",
        "value": "1234567"
    },
    "datePosted" : "2024-01-18",
    "validThrough" : "2024-03-18T00:00",
    "employmentType" : "CONTRACTOR",
    "hiringOrganization" : {
        "@type" : "Organization",
        "name" : "Google",
        "sameAs" : "https://www.google.com",
        "logo" : "https://www.example.com/images/logo.png"
    },
    "jobLocation": {
        "@type": "Place",
        "address": {
        "@type": "PostalAddress",
            "streetAddress": "1600 Amphitheatre Pkwy",
            "addressLocality": "Mountain View",
            "addressRegion": "CA",
            "postalCode": "94043",
            "addressCountry": "US"
        }
    },
    "baseSalary": {
        "@type": "MonetaryAmount",
        "currency": "USD",
        "value": {
            "@type": "QuantitativeValue",
            "value": 40.00,
            "unitText": "HOUR"
        }
    }
}
</script>