Schritt-für-Schritt-Video
So drucken Sie eine Webseite
Manchmal müssen wir den Inhalt einer Webseite ausdrucken, um ihn auf Papier zu haben. Browser (Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari und Opera) enthalten dafür eine Funktion, die diese Aufgabe erleichtert. Wir können diese Funktion direkt im Browser aufrufen, aber auch über Elementor. Bevor wir also beginnen, sehen wir uns an, wie wir eine Webseite drucken können.
Die Tastenkombination zum Drucken der aktiven Seite in allen oben genannten Browsern ist STRG+P (Windows) und Command+P (Mac).
Wie druckt man eine Webseite mit Google Chrome?
Google Chrome ist mit Abstand der beliebteste Internetbrowser, mit einem Marktanteil von 70 % der Nutzer, die diesen Browser bevorzugen. Um die aktive Seite zu drucken, folgen Sie diesen Schritten.
- Öffnen Sie die Seite, die Sie drucken möchten.
- Klicken Sie auf das Anpassungsmenü von Google Chrome
und klicken Sie im Dropdown-Menü auf Drucken… - Es öffnet sich das Fenster zur Druckkonfiguration; anschließend müssen Sie nur noch auf die Schaltfläche Drucken klicken.
Wie druckt man eine Webseite mit Edge?
Microsoft Edge ist der Nachfolger von Microsoft Internet Explorer, der seinerzeit der meistgenutzte Browser war, vor allem weil er in das Windows-Betriebssystem integriert war. Microsoft Edge ist weiterhin als Standard auf Computern mit dem Betriebssystem Windows 10 und höher eingestellt und ist derzeit der zweitmeistgenutzte Browser mit einem Marktanteil von 8 %.
Microsoft Edge hat gegenüber Google Chrome einen deutlichen Leistungsvorteil beim Speicherverbrauch. Kurz gesagt: Edge nutzt weniger Ressourcen. Chrome war früher dafür bekannt, wenig RAM zu verbrauchen, aber in den letzten Jahren ist dieser Verbrauch deutlich gestiegen.
Wie bei Google Chrome ist die Druckfunktion für eine Webseite sehr einfach. Sehen wir uns an, wie es geht.
- Öffnen Sie die Seite, die Sie drucken möchten.
- Klicken Sie in Edge auf das Menü Einstellungen und mehr … und klicken Sie im Dropdown-Menü auf Drucken.
- Es öffnet sich das Fenster zur Druckkonfiguration; anschließend müssen Sie nur noch auf die Schaltfläche Drucken klicken.
Wie druckt man eine Webseite mit Firefox?
Mozilla Firefox ist ein robuster Browser und hebt sich durch Sicherheit und Geschwindigkeit von den anderen ab. Er ist mein bevorzugter Browser, da mir die Entwicklerwerkzeuge besser gefallen als die von Chrome oder Edge. Im Folgenden sehen wir, wie wir eine Webseite drucken können.
- Öffnen Sie die Seite, die Sie drucken möchten.
- Klicken Sie auf das Anwendungsmenü
und klicken Sie im Dropdown-Menü auf Drucken… - Es öffnet sich das Fenster zur Druckkonfiguration; anschließend müssen Sie nur noch auf die Schaltfläche Drucken klicken.
Eine Schaltfläche hinzufügen, um die aktive Seite zu drucken
Sie können eine Schaltfläche hinzufügen, um die aktive Seite zu drucken, zum Beispiel in der Vorlage Einzelbeitrag oder auf jeder beliebigen Seite. So kann der Nutzer die Druckfunktion des Browsers durch Klicken auf diese Schaltfläche aufrufen. Sehen wir uns an, wie das geht.
- Klicken Sie im Elementor-Builder auf
, suchen Sie das Widget Teilen-Buttons und ziehen Sie es an die Stelle im Dokument, an der Sie es einfügen möchten. - Klicken Sie im Tab „Inhalt“ auf die Schaltfläche +Element hinzufügen und wählen Sie unter „Netzwerk“ Print aus.
- Jetzt können Sie den Text und die Stile der Schaltfläche nach Ihren Wünschen anpassen.
Eine CSS-Klasse erstellen, um Bereiche auszublenden, die nicht gedruckt werden sollen
Die Druckstile einer Seite müssen nicht dieselben sein wie die, die wir für die Anzeige auf einem Bildschirm (Computer, Tablet oder Smartphone) verwenden. Beim Drucken möchten wir möglicherweise bestimmte Bereiche ausblenden (Header, Footer, Sidebar, …), Ränder, Farben, Schriftarten usw. ändern. All das können wir tun, indem wir die Regel @media print in unsere benutzerdefinierten CSS-Stile aufnehmen.
Wir können viele Stile ändern, aber wir werden nicht zu sehr ins Detail gehen und sehen uns einfach an, wie wir die Bereiche unserer Seite oder Vorlage ausblenden können, die nicht gedruckt werden sollen. Sehen wir uns ein Beispiel an:
@media print {
header {display: none !important;}
footer {display: none !important;}
.noimprimir {display: none !important;}
body {background: #fff !important;}
}Im obigen Beispiel sehen wir, wie wir innerhalb der Regel @media print eine Reihe von CSS-Klassen erstellt haben, die nur beim Drucken des Dokuments verwendet werden und daher die Darstellung auf dem Bildschirm nicht beeinflussen. Sehen wir uns an, wie wir diesen Code in unser benutzerdefiniertes CSS unter „Website-Einstellungen“ einfügen:
- Starten Sie den Elementor-Builder, indem Sie eine beliebige Seite oder Vorlage öffnen.
- Klicken Sie auf das Hamburger-Menü
in der oberen linken Ecke. - Klicken Sie auf Website-Einstellungen.
- Klicken Sie im Optionspanel auf Benutzerdefiniertes CSS.
- Fügen Sie im Feld Fügen Sie hier Ihr eigenes benutzerdefiniertes CSS hinzu den benötigten Code ein.
Im Grunde haben wir für den Druck alles ausgeblendet, was sich innerhalb von header und footer befindet. Außerdem haben wir eine Klasse .noimprimir hinzugefügt, die Sie Elementen zuweisen können, die nicht gedruckt werden sollen, z. B. der Druck-Button selbst, Kommentare usw. Schließlich habe ich eine Klasse body hinzugefügt, um den weißen Hintergrund festzulegen; das ist nur notwendig, wenn wir den Hintergrund mit einer Farbe konfiguriert haben.
Die Regel !important wird verwendet, um einer Eigenschaft/einem Wert mehr Bedeutung als üblich zu geben. Wenn Sie die Regel !important verwenden, überschreiben Sie tatsächlich ALLE vorherigen Stilregeln für diese spezifische Eigenschaft bei diesem Element.
Beachten Sie, dass die Klassen header und footer nur funktionieren, wenn wir diese HTML-Tags den Vorlagen für Header und Footer zugewiesen haben. Sehen wir uns an, wie wir das machen können:
Interessante Links
- CSS Media Queries | W3 Schools