Zwei Fotos, ein Regler – fertig. Kopiere den Block unten, tausche die zwei
Hintergrundfarben gegen background: url('dein-foto.jpg') center/cover aus.
⬆ Alles zwischen KOPIER-START und KOPIER-ENDE kopieren. JS weiter unten nicht vergessen (Abschnitt "Slider JS").
Ein Hauptfoto, Titel, Ort, Jahr. Kein JS nötig – rein HTML+CSS. Ideal als Grid-Karte wenn du viele Projekte zeigen willst.
⬆ Karte kopieren. Für ein Projekt-Grid mehrere Karten in ein display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; packen.
Das ist dein Allrounder – Slider oben, Infos + Zitat unten. Genau dieser Block wird am häufigsten auf Handwerker-Seiten eingesetzt.
⬆ Kompletten div-Block kopieren. Slider-ID ("slider-std", "std-before", "std-div") umbenennen wenn du mehrere auf einer Seite hast (z.B. slider-1, slider-2…).
Ein Hauptbild, darunter kleinere Thumbnails. Klick auf Thumbnail tauscht das Hauptbild. Kein externes Plugin nötig.
⬆ Ersetze die background-Gradienten durch background:url('foto1.jpg') center/cover. Füge beliebig viele weitere Thumbnails hinzu.
Zeigt deinen Arbeitsprozess Schritt für Schritt. Baut enormes Vertrauen, weil der Kunde weiß was auf ihn zukommt. Kein JS nötig.
Tag 1
Aufmaß & Planung
Gemeinsame Begehung, Materialauswahl, Zeitplan festlegen.
Tag 2–4
Rückbau & Installation
Alte Fliesen und Sanitär entfernen, Leitungen neu verlegen.
Tag 5–7
Fliesen & Oberflächen
Wand- und Bodenfliesen verlegen, Fugen setzen, trocknen lassen.
Tag 8
Übergabe
Gemeinsamer Rundgang, Reinigung, Dokumentation übergeben.
⬆ Jeden „Timeline-Item" div einfach kopieren und Texte anpassen. Farbe des Punktes frei wählbar.
Einzelne Bewertung – kann überall auf der Seite eingesetzt werden. Kein JS, kein Bild nötig.
„Wir haben das Bad komplett sanieren lassen. Schnell, sauber, und das Ergebnis ist einfach schön. Kann ich nur weiterempfehlen."
M. Klein
Siegen · Google Bewertung, März 2024
⬆ Für mehrere Zitate nebeneinander: wrap in display:flex; gap:16px;. Initialen + Namen anpassen.
Wenige, starke Zahlen – mehr überzeugt nicht. Kein JS nötig.
⬆ Zahlen und Labels anpassen. Einfach weitere div-Blöcke hinzufügen oder entfernen.
Funktionierender Filter – klicke auf eine Kategorie. Braucht das JS weiter unten (Filter JS).
Bad Siegen
2024
Küche Kreuztal
2024
Wohnzimmer Hilchenbach
2023
Büro Olpe
2023
Bad Netphen
2023
⬆ Filter-Buttons und data-cat="..." auf deinen Karten müssen übereinstimmen. Kategorien frei wählbar.