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

Ändere die standard Browser Hintergrundfarbe wenn Text markiert wird
Freischalten
Ändere die standard Browser Hintergrundfarbe wenn Text markiert wird

Passe die Standard-Hintergrundfarbe des Browsers an, wenn Text markiert ist, und steuere diese mit deinen Webflow Variablen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
DSGVO konforme Alternative zu Webflow Forms
Freischalten
DSGVO konforme Alternative zu Webflow Forms

Mit einem Kostenlosen Plan von 250 Absendungen pro Monat, sehr einfacher Integration und du kannst weiterhin die Webflow Form-Komponente verwenden.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Scrollen der Seite verhindern wenn eine Webflow Navigation geöffnet ist
Highlight
Freischalten
Scrollen der Seite verhindern wenn eine Webflow Navigation geöffnet ist

Dieser einfache Code, stoppt das Scrollen des Hintergrunds, wenn das Webflow mobile Menü geöffnet ist. Funktioniert auch auf Desktop.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Zahlen animiert hochzählen mit ease-out Effekt (wenn im Viewport)
Freischalten
Zahlen animiert hochzählen mit ease-out Effekt (wenn im Viewport)

Mit diesem JavaScript-Code kannst du Zahlen auf deiner Website animiert hochzählen lassen, und das mit einem sanften "ease-out" Effekt.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Automatisch nofollow zu externen Links in Webflow hinzufügen (Rich-Text, Blog etc)
Freischalten
Automatisch nofollow zu externen Links in Webflow hinzufügen (Rich-Text, Blog etc)

Automatisiert 'rel=nofollow' Attribut bei allen Links in Richt-Text-Elementen hinzufügen. Spart Zeit und verbessert SEO.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Hunderte Device Mockups mit Menschen schnell kostenlos erstellen
Freischalten
Hunderte Device Mockups mit Menschen schnell kostenlos erstellen

Falls man für eine Präsentation oder zum einbinden auf der Website mal ein schnelles Mockup braucht (kostenlos). Einfach Screenshot hochladen und High-Res Bild wieder runterladen.

Tool
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
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 SEO Checkliste (mehrere zusammengefasst)
Freischalten
Webflow SEO Checkliste (mehrere zusammengefasst)

Ich habe dir einige wichtige Punkte von verschiedenen SEO Beiträgen in diesem Beitrag zusammengefasst.

Allgemein
Text-Anleitung
Demo Beispiel
Video-Anleitung
Overflow auto (horizontal scrollen) mit vor und zurück Button
Highlight
Freischalten
Overflow auto (horizontal scrollen) mit vor und zurück Button

Wenn du mit horizontal scrollbaren Sektionen arbeitest, solltest du vorwärts und rückwärts Button hinzufügen, die der User als Backup klicken kann, da nicht jede Maus horizontal scrollen kann.

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
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