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.
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.
3 Responses
I have purchased this access, can I get an example json template to make it easier to use?
Yes i agree, can i ?
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!