device-mockup

Szablon obrazka OG: Makieta urządzenia

Zrzut ekranu w telefonie, tablecie, laptopie albo oknie przeglądarki narysowanym w CSS, lekko obróconym na długim, miękkim cieniu, z nagłówkiem obok.

Użyj tego szablonu — zacznij za darmo Dokumentacja
Szablon obrazka Open Graph „Makieta urządzenia” wyrenderowany przez Shareglint
Szablon Makieta urządzenia w rozmiarze square (1080×1080)
Szablon Makieta urządzenia w rozmiarze portrait (1080×1350)
Szablon Makieta urządzenia w rozmiarze story (1080×1920)
Szablon Makieta urządzenia w rozmiarze pinterest (1000×1500)
Szablon Makieta urządzenia w rozmiarze youtube (1280×720)

To prawdziwe rendery z API z przykładowymi wartościami z tabeli niżej. Przełącz rozmiar wyżej: ten sam szablon układa się w każdym z 6 rozmiarów — wyślij size albo sizes w zapytaniu.

Dla marketingu aplikacji i SaaS, premier i wpisów w changelogu, które pokazują sam produkt. Ramkę wybierasz polem device; second_screenshot dodaje telefon przed tabletem lub laptopem, drugi telefon za pierwszym albo drugie okno za przeglądarką. Bez zrzutu ekran pokazuje narysowaną aplikację w kolorze akcentu, bez logo nazwa produktu dostaje monogram, a długi nagłówek zmniejsza się, aż się zmieści. W szerokich kadrach nagłówek stoi po lewej, a urządzenie po prawej; w kwadratowych i pionowych nagłówek idzie na górę, a urządzenie dostaje resztę miejsca — tablet w pionie staje pionowo.

Pola

Każde pole jest opcjonalne. Za długi tekst zmniejsza się, zamiast wychodzić poza kadr; pole obrazka przyjmuje publiczny adres URL, który pobieramy po naszej stronie.

Pole Typ Opis Przykład
headline tekst Główny tekst obok urządzenia albo nad nim. domyślnie: Your product, in a frame Every render, queue and cache hit on one dashboard
subheadline tekst Jedno–dwa zdania pod nagłówkiem; dłuższy tekst kończy się wielokropkiem po trzech wierszach. Northwind Studio shows what your templates cost and how fast they render, live.
product tekst Nazwa produktu obok logo nad nagłówkiem. Northwind Studio
device tekst Ramka wokół zrzutu: phone, tablet, laptop albo browser. jedna z wartości: phone | tablet | laptop | browser domyślnie: laptop laptop
background tekst Tło karty w hex, np. #1e1b4b; tekst sam przełącza się na czarny albo biały. Puste zostawia tło motywu. #1e1b4b
screenshot adres obrazka Zrzut ekranu na urządzeniu; wypełnia ekran od górnej krawędzi. https://example.com/images/dashboard.png
second_screenshot adres obrazka Opcjonalny drugi ekran: telefon przed tabletem lub laptopem, drugi telefon albo drugie okno przeglądarki. https://example.com/images/phone-app.png
logo adres obrazka Logo produktu, kwadratowe. https://example.com/images/logo-northwind.png
accent kolor Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #818cf8 #818cf8
theme dark | light Schemat kolorów: dark albo light. —

Wyrenderuj go jednym żądaniem

Slug podajesz jako template. W odpowiedzi dostajesz adres gotowego PNG; ?wait=true trzyma połączenie, aż obrazek będzie gotowy.

curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "device-mockup",
    "modifications": {
        "headline": "Every render, queue and cache hit on one dashboard",
        "subheadline": "Northwind Studio shows what your templates cost and how fast they render, live.",
        "product": "Northwind Studio",
        "device": "laptop",
        "background": "#1e1b4b",
        "screenshot": "https://example.com/images/dashboard.png",
        "second_screenshot": "https://example.com/images/phone-app.png",
        "logo": "https://example.com/images/logo-northwind.png"
    }
}'

Albo wklej podpisany adres w og:image

Dla stron statycznych, Webflow, Shopify i narzędzi no-code: pola idą w query stringu, a całość podpisujesz swoim sekretem. Pierwsze żądanie renderuje obrazek, każde kolejne to przekierowanie na gotowy plik. Jak policzyć podpis.

<meta property="og:image" content="https://shareglint.com/i/acc_YOUR_ACCOUNT_ID/device-mockup.png?background=%231e1b4b&device=laptop&headline=Every%20render%2C%20queue%20and%20cache%20hit%20on%20one%20dashboard&product=Northwind%20Studio&subheadline=Northwind%20Studio%20shows%20what%20your%20templates%20cost%20and%20how%20fast%20they%20render%2C%20live.&s=YOUR_SIGNATURE">

Dopasuj do siebie

accent i theme zmieniasz w każdym żądaniu. Jeśli chcesz więcej, skopiuj szablon na swoje konto: dostajesz zwykły szablon HTML z tymi samymi polami, który edytujesz w panelu albo przez API. Jeśli slug jest na Twoim koncie wolny, kopia go przejmuje — Twoje integracje przechodzą na Twoją wersję bez zmiany jednej linijki.

curl -X POST "https://shareglint.com/v1/templates/library/device-mockup/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"
Użyj tego szablonu — zacznij za darmo

Więcej szablonów: Produkt i SaaS

Szablon obrazka Open Graph „changelog / wydanie” wyrenderowany przez Shareglint Changelog / wydanie Szablon obrazka Open Graph „zapowiedź funkcji” wyrenderowany przez Shareglint Zapowiedź funkcji Szablon obrazka Open Graph „porównanie (A vs B)” wyrenderowany przez Shareglint Porównanie (A vs B) Szablon obrazka Open Graph „Plan rozwoju produktu” wyrenderowany przez Shareglint Plan rozwoju produktu Szablon obrazka Open Graph „Aplikacja w sklepie” wyrenderowany przez Shareglint Aplikacja w sklepie Szablon obrazka Open Graph „Dzień premiery” wyrenderowany przez Shareglint Dzień premiery Szablon obrazka Open Graph „Plany cenowe” wyrenderowany przez Shareglint Plany cenowe Szablon obrazka Open Graph „Komunikat o awarii” wyrenderowany przez Shareglint Komunikat o awarii Szablon obrazka Open Graph „Tabela porównawcza funkcji” wyrenderowany przez Shareglint Tabela porównawcza funkcji

Wszystkie szablony w kategorii Produkt i SaaS (11) →  ·  Wszystkie szablony →