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 ButtonSpalte 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 rechtssection-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 ButtonSpalte 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 rechtssection-standard bg-secondaryNEWS
Keine Einträge vorhanden.
section-breakout-right bg-primary inner-padding > boxes-1-2 media-lastMustertitel
Mustertext
section-standard boxes-1-2Mustertitel
Mustertext Anriss.
Mustertext Fliesstext.
section-breakout-left bg-secondary > boxes-2-1 media-firstMustertitel
Mustertext
section-standard bg-primary > boxes-1-1Mustertitel
Mustertext
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
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 |
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 anfragenTitel 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 anfragenTitel 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 anfragenWarum 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.
Vorteil 3
Kurzer Text, der den Vorteil konkret macht.
Vorteil 4
Kurzer Text, der den Vorteil konkret macht.
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.
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.
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.
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.
Strukturierte Daten
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>