Showcase Your Websites in a Live Responsive Previewer

Showcase Your Websites in a Live Responsive Previewer

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

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.

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
  • 30 day 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.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • 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.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
* 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 2737 Elements right here:

Checkout the Elementor Addon Finder directly

Leave a Reply