Schnell elegante Mockups aus Screenshots erstellen (kostenlos)

Einfach bild reinziehen und zwischen Screenshot-Modus, perfekten Browser-Mockups oder Geräten wie iPhone, Tablet und MacBook wählen.

Schnell elegante Mockups aus Screenshots erstellen (kostenlos)
Tool
Kostenlos
Demo Beispiel enthalten
Mit Text-Anleitung
Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?
Vorschau

shots.so ermöglicht dir, schnell elegante Mockups aus Screenshots zu erstellen (kostenlos). Einfach bild reinziehen und zwischen Screenhot-Modus, Perfekten Browser-Mockups oder Geräten wie iPhone, Tablet und MacBook wählen. Hintergründe, Schatten, Größe und sonstige Einstellungen das Erscheinungsbild betreffend können schnell individuell eingestellt werden. Danach einfach von 1x bis 3x Qualität kostenlos herunterladen.

Sehr gut geeignet, um Bilder für Social Media zu generieren. Auch für die Integration in dein Portfolio.

Die Website funktioniert nicht in allen Browsern!

Vorteile von Shots.so:

  1. Schnelle Mockuperstellung: Die Plattform ermöglicht die rasche Erstellung eleganter Mockups aus Screenshots, ohne aufwendige Software.
  2. Vielfältige Anpassungsoptionen: Hintergründe, Schatten und Größen können leicht an die individuellen Anforderungen angepasst werden, um perfekte Mockups zu erstellen.
  3. Kostenlose Nutzung: Shots.so bietet eine kostenlose Nutzung, einschließlich des Downloads von Mockups in verschiedenen Qualitäten.
  4. Ideal für Social Media und Portfolio: Die generierten Bilder eignen sich hervorragend für die Präsentation in sozialen Medien oder zur Integration in ein professionelles Portfolio.
  5. Benutzerfreundliche Oberfläche: Die intuitive Benutzeroberfläche ermöglicht eine mühelose Bedienung, auch für Nutzer ohne umfassende Designkenntnisse.

Trotz seiner beeindruckenden Funktionen sollte beachtet werden, dass die Website nicht in allen Browsern funktioniert. Shots.so ist eine leistungsstarke Plattform für schnelle und ansprechende Mockuperstellung, die die Präsentation von Bildern für verschiedenste Zwecke erleichtert.

Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?

Weitere nützliche Webflow Tricks

Erstes FAQ Accordion standardmäßig geöffnet anzeigen
Freischalten
Erstes FAQ Accordion standardmäßig geöffnet anzeigen

Zeige beim laden einer Seite das erste Element einer FAQ Liste standardmäßig geöffnet an.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Im Browser Hintergrund von Bildern entfernen und als PNG runterladen
Freischalten
Im Browser Hintergrund von Bildern entfernen und als PNG runterladen

Nutze ich häufig wenn es bei Kundenaufträgen mal schnell gehen muss. Funktioniert natürlich am besten bei Objekten, die einen neutraleren Hintergrund haben.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
SVG Linien animieren (wenn im Viewport)
Kostenlos
Freischalten
SVG Linien animieren (wenn im Viewport)

Mit nur zwei Attributen kannst du jedes SVG mit Line Paths animieren und das Timing anpassen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Mehrere 303 Redirects in Webflow auf einmal anlegen (CSV Upload)
Freischalten
Mehrere 303 Redirects in Webflow auf einmal anlegen (CSV Upload)

Mehrere 303 Redirects in Webflow auf einmal via CSV Upload hochladen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Horizontales Text / Bilder Karussell (ohne Webflow Interaktionen) | Infinite Marquee
Freischalten
Horizontales Text / Bilder Karussell (ohne Webflow Interaktionen) | Infinite Marquee

Lass Bilder, Logos und Texte mit nur zwei Zeilen CSS Code horizontal durch den Bildschirm wandern. Mit dieser Code-Vorlage musst du nur ein Attribut vergeben.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen
Highlight
Freischalten
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen

Sobald der Seitenbesucher den Info-Banner weggeklickt, wird er beim nächsten Laden der Website nicht mehr angezeigt, da die Entscheidung mit einem Cookie gespeichert wird. Über Attribute editierbar und ohne externe JS Library.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Tabellen für Rich-Text Inhalte visuell erstellen
Freischalten
Tabellen für Rich-Text Inhalte visuell erstellen

Webflow bietet keine Tabellen-Funktion in Rich Text Elementen. Mit diesem Tool kannst du Tabellen und Inhalte visuell gestalten und den Code als Embed einfügen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
SVG Code Zeichenlimit für Embed Felder in Webflow umgehen
Freischalten
SVG Code Zeichenlimit für Embed Felder in Webflow umgehen

Umgehe das 10.000 Zeichen Limit für Webflow Embed Fields und füge große SVG Bilder als Code zu deiner Website hinzu.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Bilder in Webflow in zwei Stufen groß ran zoomen
Kostenlos
Freischalten
Bilder in Webflow in zwei Stufen groß ran zoomen

Vorlage um in Webflow ein hochauflösendes Bild in zwei Stufen ran zu zoomen. Ähnlich wie der Galerie Effekt auf medium.com

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Eigenen Audio Player komplett in Webflow stylen
Kostenlos
Freischalten
Eigenen Audio Player komplett in Webflow stylen

Custom Audio-Player um auf deiner Webseite Audio-Dateien anzuziegen und zu stream. Der Player kann nach Wunsch in Webflow gestaltet werden.

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow Slider bei einem bestimmten Slide starten lassen
Highlight
Freischalten
Webflow Slider bei einem bestimmten Slide starten lassen

Entscheide welcher Slide beim laden der Seite zuerst angezeigt werden soll. Einfach über Attributes editierbar.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
CMS Rich-Text Bullet Liste mit eigenem Icon (spart dir CMS fields)
Freischalten
CMS Rich-Text Bullet Liste mit eigenem Icon (spart dir CMS fields)

Ersetze die Standard CSM Rich-Text-Bullet-Liste in Webflow mit eigenen SVG-Icons, die sich automatisch skalieren. Perfekt für individuell gestaltete Aufzählungen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung