Marketing WerkzeugeContent MarketingMarketing- und Vertriebsvideos

So erstellen Sie einen Website-Screenshot mit bestimmten Abmessungen mit Google Chrome

Wenn Sie eine Agentur oder ein Unternehmen mit einem Portfolio von Websites oder Seiten sind, die Sie online teilen möchten, haben Sie sich wahrscheinlich die Mühe gemacht, einheitliche Screenshots von jeder Website zu erstellen.

Einer der Kunden, mit denen wir zusammenarbeiten, erstellt gehostete Intranet-Lösungen, die intern innerhalb der Grenzen eines Unternehmens gehostet werden können. Intranets sind unglaublich hilfreich für Unternehmen, um Unternehmensnachrichten zu kommunizieren, Marketinginformationen zu verteilen, Informationen zu Vorteilen bereitzustellen usw.

Wir haben diesem Kunden geholfen, sein Intranet-Lösungsprodukt von der Website seiner Muttergesellschaft zu migrieren. Es war ein umfangreiches Projekt, das alles umfasste, von der Erstellung neuer sozialer Profile über die Aktualisierung von Marketo bis hin zur Demontage einiger der benutzerdefinierten Entwicklungen, die sie durchgeführt hatten, um ihre Websites zu kombinieren.

Ein entscheidender Schritt war sicherzustellen, dass wir großartige Produktaufnahmen der Intranetseiten ihrer Kunden auf ihrer neuen Website hervorheben. Wir wollten sicherstellen, dass jeder Screenshot auf der gesamten Website dieselbe Breite und Höhe hat. Das kann schwierig sein … es sei denn, Sie verwenden Google Chrome.

Client-Screenshots mit Google Chrome

Sie wissen das vielleicht nicht, aber mit den integrierten robusten Entwicklertools von Google Chrome können Sie perfekte Screenshots aufnehmen. Interessanterweise ist es trotz seiner erstaunlichen Flexibilität kein sehr bekanntes Feature. Mit der Funktion können Sie auch Aufnahmen Ihrer responsiven Website für bestimmte Abmessungen und Bildschirmgrößen machen.

Hier ist ein kurzes Video-Tutorial, wie Sie mit Google Chrome einen perfekten Screenshot einer Webseite in einer bestimmten Größe erstellen:

Schritte zum Erstellen eines Screenshots mit Google Chrome

Die Entwicklertools von Google Chrome können mithilfe der Gerätesymbolleiste eine Vorschau einer Website anzeigen. Das Tool wurde entwickelt, damit Entwickler sehen können, wie die Website in verschiedenen Darstellungsgrößen auf verschiedenen Geräten aussah … aber es ist auch eine perfekte Möglichkeit, einen Screenshot einer Webseite in perfekter Größe zu erhalten.

In diesem Fall möchten wir, dass jeder der wichtigsten Kunden des Kunden aus verschiedenen Branchen, die schöne Intranet-Sites erstellt haben, einen Screenshot macht, damit wir sie alle in einem Portfolio auf ihrer Website anzeigen können. Wir möchten, dass die Seiten genau 1200 Pixel breit und 800 Pixel hoch sind. Um das zu erreichen:

  1. Wählen Sie in der Navigationsschaltfläche ganz rechts (3 vertikale Punkte) die Option aus Menü anpassen und steuern.
Entwickler-Tools-Menü mit Google Chrome
  1. Auswählen Weitere Tools> Entwicklertools
Entwicklertools mit Google Chrome
  1. Toggle die Gerätesymbolleiste um die Geräteoptionen und -abmessungen aufzurufen.
Schalten Sie die Gerätesymbolleiste mit Google Chrome um
  1. Stellen Sie die erste Option auf ein ansprechbarStellen Sie dann die Abmessungen auf 1200 x 800 ein und drücken Sie die Eingabetaste. Die Seite wird nun mit diesen Abmessungen angezeigt.
Responsive Gerätesymbolleiste Google Chrome
  1. Klicken Sie auf der rechten Seite der Gerätesymbolleiste auf die Navigationsschaltfläche (3 vertikale Punkte) und wählen Sie Erfassen Screenshot.
Screenshot mit Google Chrome aufnehmen
  1. Google Chrome macht einen perfekten Screenshot und legt ihn in Ihrem ab Download Ordner, wo Sie es anhängen und per E-Mail versenden können. Stellen Sie sicher, dass Sie keine Screenshots in voller Größe auswählen, da dies die gesamte Seitenlänge beansprucht und Ihre Höhenbeschränkung ignoriert.

Google Chrome-Tastaturkürzel für Screenshots

Wenn Sie ein Meister der Tastenkombinationen sind, können Sie mit diesen Tastenkombinationen einen ganzseitigen Screenshot erstellen. Ich mag diesen Ansatz nicht, da ich die maximale Höhe des Ansichtsfensters nicht festlegen kann … aber er ist praktisch, wenn Sie jemals den Screenshot einer ganzen Seite benötigen.

Tastenkombinationen (Mac)

1. Alt + Command + I 
2. Command + Shift + P

Tastaturkürzel (Win / Linux)

1. Ctrl + Shift + I 
2. Ctrl + Shift + P

Douglas Karr

Douglas Karr ist der Gründer der Martech Zone und anerkannter Experte für digitale Transformation. Douglas hat bei der Gründung mehrerer erfolgreicher MarTech-Startups geholfen, bei der Due Diligence von über 5 Mrd. Er ist Mitbegründer von Highbridge, ein Beratungsunternehmen für digitale Transformation. Douglas ist auch ein veröffentlichter Autor eines Dummie's Guide und eines Buches über Unternehmensführung.

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.

Verwandte Artikel