Selecting printable parts of a web page with CSS

> Site settings

How to print a web page

Sometimes we need to print the content of a web page to print it on paper. The browsers(Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari and Opera) include a function for this that facilitates this task. We can invoke this function from the browser itself but also from Elementor, so first of all let’s see how we can print a web page.

Compatible with Google Chrome Compatible with Microsoft EdgeCompatible with Mozilla Firefox Compatible with SafariCompatible with Opera

The keyboard shortcut to print the active page in any of the above browsers is CTRL+P (Windows) and Command+P (Mac).

How to print a web page with Google Chrome?

Google Chrome is by far the most popular Internet browser, with a 70% share of users preferring to use this browser. To print the active page follow these steps.

Print a page with Google Chrome
  1. We open the page we want to print.
  2. Click on the Google Chrome customization menu Google Chrome menu and from the pop-up menu click on Print….
  3. The window to configure the printout will open and all we have to do is click on the Print button.

How to print a web page with Edge?

Microsoft Edge is the successor to Microsoft Internet Explorer, which at the time was the most widely used, mainly because it was integrated into the Windows operating system. Microsoft Edge continues to be the default on computers running Windows 10 and above and is currently the second most used browser with an 8% share.

Microsoft Edge has a significant performance advantage over Google Chrome in terms of memory usage. Simply put, Edge uses fewer resources. Chrome used to be known for how little RAM it used, but these days, it has increased significantly.

As with Google Chrome includes a function to print a web page is extremely simple, let’s see how it’s done.

Print a page with Microsoft Edge
  1. We open the page we want to print.
  2. Click on the Edge Settings & More… menu and from the pop-up menu click on Print.
  3. The window to configure the printout will open and all we have to do is click on the Print button.

How to print a web page with Firefox?

Mozilla Firefox is a robust browser and stands out from the others for its security and speed, it is my preferred browser as I like the web developer tools better than Chrome or Edge. Here is how we can print a web page.

Print a page with Mozilla Firefox
  1. We open the page we want to print.
  2. Click on the application menu Firefox menu and from the pop-up menu click on Print….
  3. The window to configure the printout will open and all we have to do is click on the Print button.

Add a button to print the active page

We can add a button to print the active page, for example in the Single Entry template or on any page, so that the user can invoke the browser’s print page function by clicking this button. Let’s see how to do it.

Insert Elementor print page button
  1. In the Elementor builder click on Widgets
  2. Find the Share Buttons widget and drag it to the part of the document where you want to insert it.
  3. In the Content tab click the +Add Item button and under Network select Print.
  4. Now you can customize the text and styles of the button to your liking.

Create a CSS class to hide the parts that we do not want to be printed.

The styles of the page for printing do not have to be the same as the ones we use to display it on a screen (computer, tablet or cell phone). When printing we may want to hide certain parts (header, page request, sidebar, …), change margins, colors, typographies, etc. We can do all that by including the @media print rule in our custom CSS styles.

We can change many styles, but we are not going to extend and we will simply see how we can hide the parts of our page or template that we do not want to be printed, let’s see an example:

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

In the example above we see how we have created within the @media print rule a series of CSS classes that will only be used when printing the document, so they will not affect the way it is displayed on the screen. Let’s see how to add this code to our custom CSS in Site Settings:

Insert custom CSS
  1. Start the Elementor builder by entering any page or template.
  2. Click on the Hamburger menu Elementor Editor hamburger menu in the upper left corner.
  3. Click on Site Settings.
  4. From the Options panel click on the Custom CSS.
  5. In the Add your own custom CSS here box insert the code you need.

Basically we have hidden for printing everything that is inside the header and footer, in addition we have included a class .noimprimir to be able to assign to elements that we want that they are not printed, like for example, the own button of printing, the comments, etc. Finally I have included a body class to configure the white background, this is only necessary if we have configured the background with some color.

The !important rule is used to add more importance to a property/value than normal. In fact, if you use the !important rule, you will override ALL previous style rules for that specific property on that element.

We must take into account that for the header and footer classes to work we must have assigned these HTML tags to the Header and Footer templates. Let’s see how we can do it:

Assign header tag to the Header

Links of interest

Suscríbete a Elementor Academy

Subscribe and receive notices of new content

Related topics

No related topics found
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
Scroll to Top

Generate effective SEO texts with AI to rank your website on Google

Generating effective SEO texts is essential to position our website in Google. It is important to follow the rules and create original and interesting content, both in text and video, and to have branded profiles on social networks. We must also pay attention to the structure of the content and links, as well as the spelling quality. With keyword research, copywriting and optimization of the URL, title and meta description we can create a good SEO text. The generation of internal and external links and the analysis of results are also key to improve our strategy.

Importance of SEO positioning in Google

Positioning in Google is fundamental in any digital strategy. It is important to note that there are two different types of results: SEM results and SEO results, the latter generating an ROI of 20%.

SEM vs SEO Results

SEM results are those achieved through advertising on Google, while SEO results are those achieved by optimizing the website to appear in Google’s top search results.

20% ROI

The fact of achieving a 20% ROI thanks to SEO actions is an indicator that this strategy is very efficient compared to others.

Google standards and creativity in content creation

It is important to follow Google’s rules when creating content, however, we must not neglect creativity and originality in the creation of interesting and valuable content to improve our SEO.

Content creation for SEO

The creation of interesting and original content is key to improve the positioning of our website in Google. Here are some keys to creating effective content on different platforms.

Video content on YouTube and Instagram

Video content is becoming more and more relevant in SEO content strategy. YouTube and Instagram are two of the most widely used platforms for sharing branded videos, although each has its own particularities. It is important to take these differences into account and adapt the content according to our needs. On YouTube, for example, videos should be longer and more detailed, while on Instagram, shorter and more eye-catching videos can be used.

Brand profiles in social networks

Having a presence in social networks is essential to maintain a good SEO positioning strategy. These brand profiles must be consistent with the content of our website and be active with regular publications. In addition, it is important to use keywords in the biography and use attractive content to invite users to visit our website.

Content structure, internal links and spelling

Content structure is one of the most important elements when creating content for SEO. The title hierarchy from H1 to H4 must be taken into account and follow a logical order in the content structure. It is also essential to include both internal and external links to improve the navigation and authority of our website. Finally, we must not neglect the spelling and grammar of the content, as they can negatively affect the quality of our website and therefore harm the positioning in search engines.

Keys to good SEO copywriting

To achieve a good SEO positioning in Google and improve the traffic to our website, we must take into account certain keys in the writing of our contents. These include:

Keyword research

Before writing SEO copy it is important to do keyword research. We must choose those words that are related to our content and that have a high search volume but at the same time have low competition. This will help us to better position our content in search results.

Text structure and linkbuilding

The structure of the text is key in writing a good SEO text. We must structure it with H2, H3 and H4 subtitles and use internal links that redirect to other contents of our website and external links to other sources of information related to our sector. This will contribute to increase the authority of our website and improve our positioning.

URL, title and meta description writing and optimization

The wording of the URL, the title and the meta description of our content are also important factors in SEO positioning. We must create a simple and descriptive URL, a catchy title and a meta description that summarizes the content clearly and concisely. In addition, we must include in them our keywords in a natural and coherent way.

We should not be overly obsessed with optimization per se, but focus on creating valuable, interesting and compelling content for our audience. All this will help us to improve our SEO positioning in Google and to generate quality visits to our website.

Internal and external link generation and results analysis

The generation of internal and external links is essential to improve the SEO of our website. Internal links help to distribute the value of the pages of our website, which improves the SEO of all of them, while quality external links bring authority and relevance to our website, which helps it to rank better.

Analysis through tools such as Google Analytics and Search Console

To measure the success of our SEO strategy we must analyze the data obtained through tools such as Google Analytics and Search Console. These tools allow us to know the traffic of our website, its origin, the keywords used by users, the average duration of the visit, among other aspects. In this way, we can detect and correct possible errors that are affecting our position in Google. In addition to these tools, there are other advanced options that allow us to improve the efficiency of our SEO strategy. Some of them are Ahrefs, Moz or SEMrush, which offer detailed statistics on the performance of our page and allow us to know in depth the competition.

SEO content writing services

If you don’t have enough time or resources to create quality SEO content, there are SEO content writing services that can help. These services have teams of professionals who are responsible for creating SEO-optimized content that meets all standards and is attractive to users. In addition, these services can help you research keywords, generate links and optimize your URLs, titles and meta descriptions, among other things. With the help of these services, you can significantly improve the position of your website in Google and increase traffic and quality visits.

Tips to improve the SEO positioning of our website

To improve the SEO positioning of our website, it is important to follow certain tips to achieve greater success in Google:

Think SEO when writing texts

It is essential to keep keywords and SEO optimization techniques in mind when writing any type of content, never forget this.

Knowing our target audience

It is important to know our target audience in depth, to know their needs, their interests and their behavior, so we can create content that is attractive to them.

Image optimization

Images are an important factor in SEO positioning, as they can attract users and improve the duration of their visit on our website. It is necessary to optimize the images in terms of size and weight and choose appropriate file names with the keywords of our niche.

Quality design and content

We must take care of the design of our website so that it is attractive and easy to use for the user, so that they spend more time on it. In addition, the content must be interesting and relevant to have a chance of being shared on social networks.

This is a pop-up message

Elementor has a popup message builder that you can find in the Templates menu.

Plantillas > Mensajes emergentes


Enter your access data