Kampagnen-Mockups

Social Posts, E-Mails und Store-Screenshots als Bilder für deine Seiten, ohne Zeichen eines Netzwerks oder Stores.

3 Components · 16 Variants

Kategorie wechseln

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Social-Post-Mockup6
E-Mail-Mockup5
Store-Screenshots5

social-post-mockup

Social Posts als Bilder für deine Seite, ohne das Zeichen eines Netzwerks. Bildbeiträge, Textbeiträge, Stories, Karussells, Video-Reels und ein Profilraster. Doppeltippen zum Liken, Speichern, Folgen, Bilder wischen und durch Stories tippen.

Bildbeitrag
Textbeitrag
Story
Karussell
Video-Reel
Profilraster

Props und Details

Bildbeitrag

Autor, Bild, Aktionen, Likes, Text und Kommentare. Das Bild setzt sich beim Hereinscrollen aus leichtem Zoom, Doppeltippen liked mit großem Herz.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/social-post-mockup

Bringt mit utils, kit, icon

Usage

<SocialPost variant="feed-post" author={{ name: "Café Mira", handle: "cafe.mira", verified: true }} media={[<img … />]} caption="…" likes={1284} comments={46} />

Source

Textbeitrag

Ein kurzer Beitrag mit verlinkter Karte und Antworten, Teilen, Liken und Speichern. Tags und Namen sind getönt, Zahlen kürzen sich je Sprache.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/social-post-mockup

Bringt mit utils, kit, icon

Usage

<SocialPost variant="text-post" author={…} caption="…" card={{ title, domain, media }} likes={842} comments={61} shares={129} />

Source

Story

Eine Story im Hochformat. Die Segmente füllen sich von selbst, sobald sie im Bild ist, links tippen geht zurück, rechts weiter, Halten pausiert.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/social-post-mockup

Bringt mit utils, kit, icon

Usage

<SocialPost variant="story" author={…} media={[<img … />, …]} overlays={["Good morning", …]} duration={5} />

Source

Karussell

Ein quadratischer Beitrag mit fünf Bildern. Wischen oder ziehen, Pfeile beim Hover oder die Pfeiltasten. Die Überschrift jedes Bildes steigt beim Ankommen auf.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/social-post-mockup

Bringt mit utils, kit, icon

Usage

<SocialPost variant="carousel" author={…} media={[…]} overlays={["5 checks before …", …]} caption="…" />

Source

Video-Reel

Ein Videobeitrag im Hochformat mit Aktionen am Rand, Text und Tonzeile. Er startet im Bild, ein Tipp in die Mitte pausiert, die Note dreht sich beim Abspielen.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/social-post-mockup

Bringt mit utils, kit, icon

Usage

<SocialPost variant="video-reel" author={…} media={[<video … />]} caption="…" likes={18400} sound="Original audio" />

Source

Profilraster

Ein Profilkopf mit Zahlen, Bio und Folgen über einem Raster aus Beiträgen. Die Kacheln steigen nacheinander auf, Hover zeigt Likes und Kommentare.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/social-post-mockup

Bringt mit utils, kit, icon

Usage

<SocialPost variant="profile-grid" author={…} bio="…" stats={[{ label: "Posts", value: 214 }, …]} media={[…]} />

Source

email-mockup

E-Mail-Mockup

E-Mails als Bilder für deine Seite. Ein Newsletter im Mailfenster, der Posteingang, in dem er ankommt, eine Bestellbestätigung, die Mail auf dem Telefon und eine Willkommensreihe. Aus JSON-Blöcken gebaut, so zeigt das Mockup deine echte Mail.

Newsletter
Ankunft im Posteingang
Bestellbestätigung
Auf dem Telefon
Willkommensreihe

Props und Details

Ein geöffneter Newsletter im Mailfenster mit Absender und Betreff. Die lange Mail wandert beim Vorbeiscrollen im Fenster nach oben.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/email-mockup

Bringt mit utils, kit, icon, motion

Usage

<EmailMockup variant="newsletter" sender={{ name, address }} subject="…" blocks={[{ type: "image", media: 0 }, { type: "heading", text: "…" }, …]} media={[<img … />]} />

Source

Ankunft im Posteingang

Eine Mailliste, in der deine Nachricht oben hereingleitet, ungelesen und als neu markiert, sobald die Liste im Bild ist. Die anderen machen Platz.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/email-mockup

Bringt mit utils, kit, icon, motion

Usage

<EmailMockup variant="inbox" sender={…} subject="…" preview="…" messages={[{ from, subject, preview, time, unread }]} />

Source

Bestellbestätigung

Ein Beleg mit einem Haken, der hereinfedert, einer Lieferleiste, die sich bis zum aktuellen Schritt füllt, Artikeln mit Bild, Summen und der nächsten Aktion.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/email-mockup

Bringt mit utils, kit, icon, motion

Usage

<EmailMockup variant="transactional" sender={…} subject="…" order={{ number, items, lines, total, steps, step, action }} media={[…]} />

Source

Auf dem Telefon

Die Mail, wie die meisten sie lesen. Erst fällt eine Mitteilung herein, die Mail darunter scrollt mit Finger oder Rad.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/email-mockup

Bringt mit utils, kit, icon, motion

Usage

<EmailMockup variant="phone" sender={…} subject="…" preview="…" blocks={[…]} media={[…]} />

Source

Willkommensreihe

Drei Mails einer Reihe als Karten mit Tag und Öffnungsrate. Sie steigen nacheinander auf und fächern leicht, Hover richtet eine auf und hebt sie an.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/email-mockup

Bringt mit utils, kit, icon, motion

Usage

<EmailMockup variant="sequence" sender={…} series={[{ day: "Day 0", subject, preview, rate: "68%" }, …]} />

Source

store-screenshots

Store-Screenshots

Die hohen Rahmen mit Überschrift und Telefon, die App-Seiten in einer Reihe zeigen, ohne Zeichen eines Stores. Überschriften, ein Panorama über alle Rahmen, geneigte Telefone, aufspringende Hinweise und breite Tablet-Rahmen. Die Reihe scrollt per Ziehen, Pfeilen und Tastatur.

Überschriften
Panorama
Geneigt
Mit Hinweisen
Tablet

Props und Details

Überschriften

Eine Überschrift auf getöntem Grund, das Telefon steigt von der Unterkante auf und zieht beim Scrollen leicht. Die Rahmen steigen nacheinander auf.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/store-screenshots

Bringt mit utils, kit, icon, motion, mockup

Usage

<StoreScreenshots variant="captions" shots={[{ title, subtitle, screen: <img … /> }, …]} />

Source

Panorama

Ein langes Bild läuft über alle Rahmen, so liest sich das Set in der Reihe als eine Szene. Die Telefone stehen abwechselnd hoch und tief und ziehen gegeneinander.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/store-screenshots

Bringt mit utils, kit, icon, motion, mockup

Usage

<StoreScreenshots variant="panorama" shots={[…]} />

Source

Geneigt

Das Telefon neigt sich leicht, abwechselnd nach links und rechts, die Überschrift steht unten. Hover oder Fokus richtet es auf.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/store-screenshots

Bringt mit utils, kit, icon, motion, mockup

Usage

<StoreScreenshots variant="tilted" tone="dark" shots={[…]} />

Source

Mit Hinweisen

Kleine Hinweise springen um das Telefon auf, sobald die Reihe ins Bild kommt, etwa eine Bewertung, ein erreichtes Ziel oder eine Neuheit.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/store-screenshots

Bringt mit utils, kit, icon, motion, mockup

Usage

<StoreScreenshots variant="badges" shots={[{ title, screen, badges: ["4.9 ★ from 12,400 reviews"] }, …]} />

Source

Tablet

Breite Rahmen mit Tablet für Sets im Querformat. Das Tablet zieht sanft, während die Reihe ins Bild scrollt.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/store-screenshots

Bringt mit utils, kit, icon, motion, mockup

Usage

<StoreScreenshots variant="tablet" viewport={640} shots={[…]} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Kampagnen-Mockups stehen.

Auf dieser Seite

Bildbeitrag

Textbeitrag

Story

Karussell

Video-Reel

Profilraster

Newsletter

Ankunft im Posteingang

Bestellbestätigung

Auf dem Telefon

Willkommensreihe

Überschriften

Panorama

Geneigt

Mit Hinweisen

Tablet

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit