Add Website Thumbnail like a screenshot

Website Thumbnail for Elementor free version allows you to add a local or distant website page like a screenshot.

Taking screenshots of your website is probably the most commonly done task to promote or showcase your website.

This gives your visitors an idea of what your website is all about before they visit it.

You can add a link to the page and customize the rendering.

The Site thumbnail is built on the fly, no data is saved in the database and no external API is used.

You must understand that:

The remote or local page is physically loaded in the current page, it is not a picture.

The component uses an iframe to hold the web page you want to “simulate” a screenshot of.
With too many displays, the page load time can be very slow.

Some websites block the display of their pages in an Iframe

Introducing the component Website Thumbnail

The ‘Elementor‘ plugin is installed and active.

The ‘EAC components‘ plugin is installed and active.
From the panel settings you have to drag & drop the ‘Site thumbnail‘ icon on the panel preview.

Display sites thumbnail

elementor-addon-components.com

Lea Verou

css-tricks.com

Create a page thumbnail of a remote or local site

Nothing special in this interface. You can add a link to the original page and illustrate the page with a caption.

We encourage you to use Copy / Paste to enter the URL or the caption, because for each character entered the component reloads.

Of course you can use dynamic tags, especially ACF if the plugin is installed.

Then you can customize the final rendering with the controls under the ‘Style’ tab.

Customize the responsivity

Because the thumbnail content is not responsive, if you display more than two thumbnails on the same line, thumbnails will overlap with mobiles.
Therefore you need to apply some css.

To do this select the properties of the section, under the ‘Advanced’ tab enter the following css code in the ‘EAC custom CSS’ control.

Evently you can modify the min, max-with for your own purpose and add new rules.

@media screen and (max-width:1024px) {
    selector .elementor-column {
        width:  50%;
    }
}
@media screen and (max-width:767px) {
    selector .elementor-column {
        width:  100%;
    }
}