# Placeholder Service — Anwendungsbeispiele > Praxisnahe Durchläufe mit dem Placeholder Service: Standard-Platzhalter, Markenfarben mit Text, Einbau in HTML und CSS, Social-Media-Mockups und reine Farbflächen. Source: https://www.jpkc.com/db/tools/ph/examples/ Zurück zur Übersicht: [Placeholder Service](https://www.jpkc.com/db/tools/ph/) · Tool live öffnen: [www.jpkc.com/tools/ph/](https://www.jpkc.com/tools/ph/) Das [Manual](https://www.jpkc.com/db/tools/ph/manual/) erklärt jede Option und das vollständige URL-Schema im Detail. Diese Seite ergänzt das um **konkrete Arbeitsabläufe**: typische Aufgaben Schritt für Schritt, mit dem fertigen Markup zum Übernehmen. Die Oberfläche des Tools ist auf Englisch — Karten- und Button-Namen stehen deshalb in ihrer englischen Original-Schreibweise. ## Beispiel 1: Der Standard-Platzhalter — 600 × 400 in Grau Der Klassiker: ein neutrales graues Rechteck in einer festen Größe, das die Maße anzeigt. 1. Öffne den [Placeholder Service](https://www.jpkc.com/tools/ph/). Setz in **Dimensions** die Breite auf `600` und die Höhe auf `400`. 2. In **Colors** wählst du einen hellen Hintergrund (z. B. `cccccc`) und eine dunklere Textfarbe (z. B. `333333`). 3. Lass **Custom Text** leer — dann zeigt das Bild automatisch seine Maße als „600 x 400". 4. Klick auf **Update Preview**, um die Vorschau zu laden, und kopier dir aus **Direct URL** die Adresse oder aus **Generated Code** den fertigen ``-Tag. Die direkte URL sieht dann so aus — du kannst sie sogar von Hand tippen, ohne die Oberfläche: ``` https://www.jpkc.com/tools/ph/?600x400-cccccc-333333/ ``` Den passenden Bild-Tag liefert das Tool gleich mit: ```html 600x400 placeholder ``` ## Beispiel 2: Markenfarben plus eigener Text Für ein Mockup, das schon nach „deiner" Seite aussieht, gibst du Platzhalter in den Markenfarben aus und beschriftest sie. 1. Maße einstellen (z. B. `800 × 600`). 2. In **Colors** die Markenfarbe als **Background Color** setzen (z. B. das dunkle `264653`) und eine kontrastreiche **Text Color** (z. B. das warme `e9c46a`). Die Swatches im Farbwähler bieten dafür eine fertige Palette. 3. In **Text Options** unter **Custom Text** einen Begriff eintippen, etwa `Hero Image`. Erlaubt sind Buchstaben, Zahlen und Leerzeichen. 4. Lass **Show resolution** aktiv, wenn du Text **und** Maße willst — dann rendert das Bild zweizeilig: oben „Hero Image", darunter „800 x 600". Die URL kodiert das Leerzeichen als `+`: ``` https://www.jpkc.com/tools/ph/?800x600-264653-e9c46a-Hero+Image/ ``` ## Beispiel 3: Platzhalter direkt in HTML einbinden Du musst nichts herunterladen — die URL gehört direkt ins `src`-Attribut. Setz immer `width` und `height`, damit das Layout nicht springt (das Tool schreibt sie automatisch mit): ```html
Platzhalter für das Titelbild
Titelbild folgt
``` Weil der Server ein langes Cache-Header mitschickt, lädt derselbe Platzhalter beim zweiten Aufruf aus dem Browser-Cache. Brauchst du mehrere gleich große Dummys, variier einfach den Text — `…-Bild+1/`, `…-Bild+2/` — und behalt Maße und Farben bei. ## Beispiel 4: Als CSS-Hintergrund über die SVG-Data-URI Für einen Platzhalter, der **keinen** externen Request auslöst und verlustfrei skaliert, nimmst du die SVG-Ausgabe. 1. Stell Maße, Farben und Text wie gewünscht ein. 2. Geh zur Karte **SVG Output** und öffne den Tab **Data URI (CSS)**. 3. Kopier die fertige Zeile und setz sie in dein Stylesheet: ```css .placeholder { background-image: url('data:image/svg+xml,...'); background-size: cover; } ``` Den vollständigen Data-URI-String liefert das Tool — er enthält die komplette SVG-Grafik inline. Alternativ holst du dir im Tab **IMG Tag** ein `` mit eingebettetem SVG, das ebenfalls ohne externe Datei auskommt, oder lädst die Grafik per **Download SVG** als Datei herunter. ## Beispiel 5: Social-Media-Mockup über ein Preset Für ein Vorschaubild in exakt der richtigen Plattform-Größe musst du die Maße nicht nachschlagen. 1. Öffne in **Dimensions** das Preset-Dropdown **Social Media** und wähle z. B. **Instagram Square** (1080 × 1080) oder **YouTube Thumbnail** (1280 × 720). Breite und Höhe werden sofort gesetzt. 2. Farben und Text nach Wunsch anpassen — etwa `Thumbnail` als Custom-Text in großer Schrift. 3. Über **Text Size** auf `large` oder `xlarge` stellen, damit die Beschriftung auch in der Verkleinerung lesbar bleibt. Die feste Textgröße landet als Query-Parameter in der URL: ``` https://www.jpkc.com/tools/ph/?1280x720-993366-eeeeee-Thumbnail/&size=xlarge ``` ## Beispiel 6: Reine Farbfläche oder nur Text Manchmal willst du gar keine Beschriftung — oder nur deinen Text, ohne die Maße. - **Nur Farbe, kein Text:** Schalte **Show text on image** aus. Das Bild wird eine glatte Fläche — gut als farbiger Block in einem Layout. In der URL erscheint `¬ext=1`: ``` https://www.jpkc.com/tools/ph/?300x250-2a9d8f-2a9d8f/¬ext=1 ``` - **Nur Text, ohne Maße:** Trag einen **Custom Text** ein und schalte **Show resolution** aus. Jetzt zeigt das Bild allein deinen Text (einzeilig), die „W x H"-Zeile entfällt. In der URL steht `&nodim=1`: ``` https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Sale/&nodim=1 ``` Beachte: Die Maße lassen sich nur ausblenden, wenn ein Custom-Text gesetzt ist — sonst hätte das Bild gar keinen Text mehr, und der Schalter bleibt deaktiviert. --- Noch tiefer: die [Übersicht](https://www.jpkc.com/db/tools/ph/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/ph/manual/) für das vollständige URL-Schema und gesammelte [Tipps & Tricks](https://www.jpkc.com/db/tools/ph/tips/). Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/ph/).