Video passo dopo passo
Come stampare una pagina web
A volte abbiamo bisogno di stampare il contenuto di una pagina web per averla su carta. I browser (Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari e Opera) includono una funzione per farlo che facilita questo compito. Possiamo invocare questa funzione dal browser stesso ma anche da Elementor, quindi prima di tutto vediamo come possiamo stampare una pagina web.
La scorciatoia da tastiera per stampare la pagina attiva in uno qualsiasi dei browser precedenti è CTRL+P (Windows) e Comando+P (Mac).
Come stampare una pagina web con Google Chrome?
Google Chrome è di gran lunga il browser internet più popolare, con una quota del 70% di utenti che preferiscono usare questo browser. Per stampare la pagina attiva segui questi passaggi.
- Apriamo la pagina che vogliamo stampare.
- Facciamo clic sul menu di personalizzazione di Google Chrome
e dal menu a comparsa facciamo clic su Stampa… - Si aprirà la finestra per configurare la stampa e dovremo solo fare clic sul pulsante Stampa.
Come stampare una pagina web con Edge?
Microsoft Edge è il successore di Microsoft Internet Explorer che a suo tempo fu il più usato, principalmente perché veniva integrato nel sistema operativo Windows. Microsoft Edge continua a essere predefinito nei computer che lavorano con il sistema operativo Windows 10 in poi e attualmente è il secondo browser più usato con una quota dell’8%.
Microsoft Edge ha un vantaggio di prestazioni significativo rispetto a Google Chrome, per quanto riguarda l’uso della memoria. In poche parole, Edge usa meno risorse. Chrome era noto per la poca RAM che usava, ma in questi giorni è aumentata significativamente.
Come con Google Chrome, include una funzione per stampare una pagina web ed è estremamente semplice, vediamo come si fa.
- Apriamo la pagina che vogliamo stampare.
- Facciamo clic sul menu Impostazioni e altro di Edge … e dal menu a comparsa facciamo clic su Stampa.
- Si aprirà la finestra per configurare la stampa e dovremo solo fare clic sul pulsante Stampa.
Come stampare una pagina web con Firefox?
Mozilla Firefox è un browser robusto e si distingue dagli altri per la sua sicurezza e velocità, è il mio browser preferito perché gli strumenti per sviluppatori web mi piacciono più di quelli di Chrome o Edge. Vediamo ora come possiamo stampare una pagina web.
- Apriamo la pagina che vogliamo stampare.
- Facciamo clic sul menu dell’applicazione
e dal menu a comparsa facciamo clic su Stampa… - Si aprirà la finestra per configurare la stampa e dovremo solo fare clic sul pulsante Stampa.
Aggiungere un pulsante per stampare la pagina attiva
Possiamo aggiungere un pulsante per stampare la pagina attiva, ad esempio nel template Articolo singolo o in qualsiasi pagina, così l’utente potrà invocare la funzione stampa pagina del browser premendo questo pulsante. Vediamo come farlo.
- Nel costruttore di Elementor fai clic su
cerca il widget Pulsanti di condivisione e trascinalo nella parte del documento dove vuoi inserirlo. - Nella scheda Contenuto fai clic sul pulsante +Aggiungi Elemento e in Rete seleziona Print.
- Ora puoi personalizzare il testo e gli stili del pulsante a tuo piacimento.
Creare una classe CSS per nascondere le parti che non vogliamo stampare
Gli stili della pagina per la stampa non devono essere uguali a quelli che usiamo per visualizzarla su uno schermo (computer, tablet o telefono cellulare). Può darsi che al momento di stampare vogliamo nascondere certe parti (intestazione, piè di pagina, barra laterale, …), cambiare i margini, i colori, le tipografie, ecc. Tutto questo possiamo farlo includendo la regola @media print nei nostri stili CSS personalizzati.
Possiamo cambiare molti stili, ma non ci dilungheremo e vedremo semplicemente come possiamo nascondere le parti della nostra pagina o template che non vogliamo stampare, vediamo un esempio:
@media print {
header {display: none !important;}
footer {display: none !important;}
.noimprimir {display: none !important;}
body {background: #fff !important;}
}Nell’esempio sopra vediamo come abbiamo creato all’interno della regola @media print una serie di classi CSS che verranno usate solo al momento di stampare il documento, quindi non influenzeranno il modo in cui lo visualizziamo sullo schermo. Vediamo come aggiungere questo codice al nostro CSS personalizzato nelle Impostazioni del sito:
- Avvia il costruttore di Elementor entrando in qualsiasi pagina o template.
- Fai clic sul menu Hamburger
nell’angolo in alto a sinistra. - Fai clic su Impostazioni del sito.
- Dal pannello delle opzioni fai clic sul CSS personalizzato.
- Nella casella Aggiungi qui il tuo CSS personalizzato inserisci il codice di cui hai bisogno.
Fondamentalmente abbiamo nascosto per la stampa tutto ciò che si trova all’interno dell’header e del footer, inoltre abbiamo incluso una classe .noimprimir per poterla assegnare agli elementi che non vogliamo stampare, come ad esempio il pulsante di stampa stesso, i commenti, ecc. Infine ho incluso una classe body per configurare lo sfondo bianco, questo è necessario solo se abbiamo configurato lo sfondo con qualche colore.
La regola !important viene usata per aggiungere più importanza a una proprietà/valore del normale. Infatti, se usi la regola !important, annullerai TUTTE le regole di stile precedenti per quella specifica proprietà in quell’elemento.
Dobbiamo tenere presente che affinché le classi header e footer funzionino dobbiamo aver assegnato questi tag HTML ai template di Intestazione e Piè di pagina. Vediamo come possiamo farlo:
Link di interesse
- CSS Media Queries | W3 Schools