• Cómo imprimir una página web
• ¿Cómo imprimir una página web con Google Chrome?
• ¿Cómo imprimir una página web con Edge?
• ¿Cómo imprimir una página web con Firefox?
• Añadir un botón para imprimir la página activa
• Crear una clase CSS para ocultar las partes que no queremos que se impriman

Cómo imprimir una página web

Algunas veces necesitamos imprimir el contenido de una página web para tanerla impresa en papel. Los navegadores (Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari y Opera) incluyen una función para ello que facilita esta labor. Podemos invocar esta función desde el propio navegador pero también desde Elementor, así que antes de nada vamos a ver como podemos imprimir una página web.

El atajo de teclado para imprimir la página activa en cualquiera de los navegadores anteriores es CTRL+P (Windows) y Comando+P (Mac).

¿Cómo imprimir una página web con Google Chrome?

Google Chrome es con diferencia el navegador de internet más popular, con una cuota del 70% de usuarios que prefieren usar este navegador. Para imprimir la página activa sigue estos pasos.

1. Abrimos la página que queremos imprimir.
2. Hacemos clic en el menú de personalización de Google Chrome y del menú emergente hacemos clic en Imprimir…
3. Se nos abrirá la ventana para configurar la impresión ya solo tendremos que hacer clic en el botón Imprimir.

¿Cómo imprimir una página web con Edge?

Microsoft Edge es el sucesor de Microsoft Internet Explorer que en su momento fue el más usado, principalmente porque venía integrado en el sistema operativo Windows. Microsoft Edge sigue estando como predeterminado en computadoras que trabajen con el sistema operativo Windows 10 en adelante y actualmente es el segundo navegador más usado con una cuota del 8%.

Microsoft Edge tiene una ventaja de rendimiento significativa con respecto a Google Chrome, en cuanto al uso de memoria. En pocas palabras, Edge usa menos recursos. Chrome solía ser conocido por la poca RAM que usaba, pero en estos días, ha aumentado significativamente.

Al igual que con Google Chrome incluye una función para imprimir una págian web es sumamente sencillo, vamos como se hace.

1. Abrimos la página que queremos imprimir.
2. Hacemos clic en el menú Configuración y más de Edge … y del menú emergente hacemos clic en Imprimir.
3. Se nos abrirá la ventana para configurar la impresión ya solo tendremos que hacer clic en el botón Imprimir.

¿Cómo imprimir una página web con Firefox?

Mozilla Firefox es un navegador robusto y destaca de los demás por su seguridad y rapidez, es mi navegador preferido ya que las herramientas para desarrolladores web me gustan más que las de Chrome o Edge. A continuación vemos como podemos imprimir una página web.

1. Abrimos la página que queremos imprimir.
2. Hacemos clic en el menú de la aplicación y del menú emergente hacemos clic en Imprimir…
3. Se nos abrirá la ventana para configurar la impresión ya solo tendremos que hacer clic en el botón Imprimir.

Añadir un botón para imprimir la página activa

Podemos añadir un botón para imprimir la página activa, por ejemplo en la plantilla Entrada individual o en cualquier página, así el usuario podrá invocar la función imprimir página del navegador pulsando este botón. Veamos como hacerlo.

1. En el constructor de Elementor haz clic en
2. Busca el widget Botones de compartir y arrástralo a la parte del documento donde quieras insertarlo.
3. En la pestaña Contenido haz clic en el botón +Añadir Elemento y en Red selecciona Print.
4. Ahora puedes personalizar el texto y estilos del botón a tu gusto.

Crear una clase CSS para ocultar las partes que no queremos que se impriman

Los estilos de la página para impresión no tienen por qué ser igual que los que usamos para visualizarla en una pantalla (computadora, tablet o teléfono móvil). Puede que la hora de imprimir queramos ocultar ciertas partes (cabecera, pide de página, barra lateral, …), cambiar los márgenes, colores, tipografías, etc. Todo eso podemos hacerlo incluyendo la regla @media print en nuestros estilos CSS personalizados.

Podemos cambiar muchos estilos, pero no nos vamos a extender y simplemente vamos a ver como podemos ocultar las partes de nuestra página o plantilla que no queramos que se impriman, veamos un ejemplo:

@media print {
     header {display: none !important;}
     footer {display: none !important;}
     .noimprimir {display: none !important;}
     body {background: #fff !important;}     
}

En el ejemplo de arriba vemos como hemos creado dentro de la regla @media print una serie de clases CSS que solo se usarán a la hora de imprimir el documento, por lo tanto no afectarán a la forma en que la visualizamos en pantalla. Vamos a ver como añadir esté código a nuestro CSS personalizado en Ajustes del sitio:

1. Inicia el constructor de Elementor entrando en cualquier página o plantilla.
2. Haz clic en el menú Hamburguesa en la esquina superior izquierda.
3. Haz clic en Ajustes del sitio.
4. Del panel de ociones haz clic en el CSS personalizado.
5. En el cuadro Añade aquí tu propio CSS personalizado inserta el código que necesites.

Básicamente hemos ocultado para impresión todo lo que esté dentro del header y el footer, además hemos incluido una clase .noimprimir para poder asignar a elementos que queramos que no se impriman, como por ejemplo, el propio botón de imprimir, los comentarios, etc. Por último he incluido una clase body para configurar el fondo blanco, esto solo es necesario si hemos configurado el fondo con algun color.

La regla !important se usa para agregar más importancia a una propiedad/valor de lo normal. De hecho, si usas la regla !important, anularás TODAS las reglas de estilo anteriores para esa propiedad específica en ese elemento.

Debemos tener en cuenta que para que las clases header y footer funcionen debemos haber asignado estas etiquetas HTML a las plantillas de Cabecera y Pie de página. Veamos como podemos hacerlo:

Enlaces de interés

• CSS Media Queries | W3 Schools