Showcase Your Websites in a Live Responsive Previewer
Get Premium

Showcase Your Websites in a Live Responsive Previewer

Element.How also offers premium tutorials! Check them here:

Showcase Your Websites in a Live Responsive Previewer

Table of Contents

In this tutorial, I will show you how to very easily open any link (probably to a portfolio website) in a live, responsive iFrame preview.

Alternatively, you could use this as "lead gen" or "lead magnet" for your agency site, where you tell visitors to preview their own website to see if it's responsive.

Here is a live demo of what we are talking about. Clicking one of the portfolio item will open that item in the device previewer, or scroll down to enter any URL and get you in the previewer for that URL.

Visit the demo page directly

Features:

  • Customizable: Set things just as you want them: all the colors are editable, you can swap the icons to your own SVGs, and you can even add or remove entire viewports (So, you could add an icon for a SmartWatch, let's say, and have it all work just fine)
  • Small screen friendly: Although not ideal, this even works (and, most importantly, gives a perfectly accurate preview) on mobile, through an integrated and automatic zoom out feature. By the same token, it also works well if your visitor is on a small laptop screen, previewing a larger viewport than he has.
  • Works everywhere: This works with Elementor, but also with any WordPress website, and really, any website at all! As long as you can add custom JS and CSS to your page, this will work.*
  • Really easy to use: Any URL that you want to open in the device previewer just requires #devicePreview appended to it. https://element.how/ goes through normally, https://element.how/#devicePreview opens in the previewer.

*The instructions in the tutorial are for WordPress websites only and I won't be providing support for websites not made with WordPress.

Let's get started!

First, copy paste the code in your project

This is a premium tutorial. Purchase access to unlock the full tutorial.

Showcase Your Websites in a Live Responsive Previewer

Access tutorial

$49/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Showcase Your Websites in a Live Responsive Previewer
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 6 months money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Support not needed!Due to personal circumstances, I no longer offer support. The vast majority of customers never needed support to start with, so chances are you will be just fine, the tutorials and templates provided are complete.

    I also extended the refund window from 1 to 6 months, during which you can get a full refund for any reason.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

11 Responses

      1. Greetings Ten!

        Sorry, in this tutorial there is no point. You literally just copy paste the code on your page, in your preferred method (if it's the only page you need this, use the HTML element) and then you add #devicePreview to the links you want to open in the previewer. That's all!

        Literally just

        1. add the code
        2. add #devicePreview to the links that needs to be opened in the previewer

        Everything else is about how to set all the various settings and CSS. You will still have to go through and make your own adjustments, if you need any.

        Keep in mind this tutorial works even without Elementor. It works for all websites.

        I hope you understand.

        Cheers!

  2. Hi Maxime, I love this tutorial and how easy it was to implement! Unfortunately, after I updated my Elementor and Wordpress just now, it seems that it doesn't work. It says "The content is blocked" whenever I click on one of the images with the #devicePreview-URL. Do you have any ideas how to fix it?
    Cheers and thank you! Tizia

      1. Hi, that was a fast reply!:) Yes, of course: https://tiziamacia.com/
        It seems like Safari is on never-ending loading, Chrome privacy window IS actually working, but the logged-out (and logged-in) 'normal' Chrome window is showing the "blocked" message.
        Cheers!

      2. Update: It also seem to be "blocked content" in privacy mode in Chrome, now. Don't know why, unfortunately.

    2. Greetings Tizia!

      It looks like you have either custom security policies, or security policies that a security plugin might have added.

      I see this in the browser console:

      Refused to frame 'https://lady-nalani.de/' because it violates the following Content Security Policy directive: "frame-src 'self' *.met.vgwort.de https://webinaris.co http://www.webinaris.co [etc]".

      So somewhere, you have this Content Security Policy setup, and either you should add all your iframe links in there (i.e. the links you want to open in the device previewer) or you should get rid of it.

      Let me know if you manage!

      Cheers!

      1. Hey Maxime,

        thank you so much for your input on this issue. I looked into the depths my plug-in eco system and actually indeed found an option of whitelisting these links!
        I also activated all the perfomance relevant options in Elementor and now it seems to work (also on Safari and logged out which was still not working this morning).

        I hope it stays like that - and I thank you very much for inspecting this issue!! 🙂

Leave a Reply