How to Live Preview a Theme Builder Template in Sky Addons for Elementor
The Live Preview in Sky Addons gives you a real Elementor template preview of any Theme Builder template, on its own, without leaving your dashboard. Click the eye icon on a template card and it opens full screen in a frame, drawn live at that moment rather than pulled from a saved thumbnail. A device switcher shows the same design at desktop, tablet and mobile widths, and a reload button refreshes it after you save in Elementor. Because the preview shows one template with nothing around it, you can judge a header or footer properly before switching it on for visitors. This documentation covers opening the preview, reading what it tells you, and where it deliberately differs from the live site.
Features:
- One-click access: An eye icon on every card in Sky Addons → Theme Builder opens the preview.
- Real render, not a screenshot: The template is drawn fresh on every open, so the preview can never go stale.
- Three device widths: Genuine layout widths, so your responsive rules actually fire.
- Isolated view: No theme header or footer, and no other template wrapped around the design.
- Sample content: Single templates preview against a stand-in post, so dynamic widgets have real data.
- Reload, open in a tab, edit: Refresh after saving, open the render as a full page, or jump into Elementor.
Requirements
- Elementor installed and active.
- At least one saved Theme Builder template of any type.
- An administrator account — the Sky Addons dashboard is limited to users who can manage site options.
Where to Find the Elementor Template Preview
The preview control sits on the template card itself. Every card ends with an action row, and the eye icon there is the one you want.
- Go to WordPress Dashboard → Sky Addons → Theme Builder.
- Find the template, using the search box or type filter pills if you have many — the grid is covered in managing Theme Builder templates.
- Look along the bottom of the card: Settings on the left, four small icon buttons on the right.
- Click the eye icon, labelled Live preview on hover. Press Esc, the ×, or the dimmed background to close it again.
What Opens: Inside the Preview Window
The window has a toolbar at the top, the rendered template in the middle, and a note at the bottom reminding you the template rendered on its own.
- Title block: the template’s name, plus its type, current device and exact width — Header · Tablet · 768px, for example.
- Device switcher: three buttons for desktop, tablet and mobile. On a narrow browser window it is hidden and the preview stays at desktop width.
- Reload preview: redraws the frame after you save in Elementor.
- Edit Design: opens the template in the Elementor editor.
The Desktop, Tablet and Mobile Widths
The switcher does something more honest than shrinking a box. The frame is laid out at the full device width, then scaled down visually to fit your screen, so the document still believes it is that wide and your media queries fire as they would on a real display.
| Device | Width used | What it is good for |
|---|---|---|
| Desktop | 1440px | Wide-screen spacing, full navigation, multi-column footers. |
| Tablet | 768px | Where menus collapse and columns start to stack. |
| Mobile | 375px | Logo size, burger menu, tap targets, text wrapping. |
A Live Render, Not a Stored Screenshot
Nothing about this Elementor template preview is cached. Each time the window opens, the frame requests the template’s own front-end address and WordPress draws it there and then — no thumbnail to fall out of date, no previews to regenerate.
One consequence matters: what you see is the template as it is currently saved, the same version your visitors would receive. Unsaved editor work does not appear. The workflow is: click Update in Elementor, switch back, press Reload preview.
Who Can Open a Preview
The preview address is only handed to a user allowed to edit that particular template; for anyone else it comes back empty and the dashboard has no preview to offer. In practice that means administrators, since Theme Builder as a whole is restricted to users who can manage site options. The preview page also refuses to be framed by any site other than your own.
How the Preview Differs From the Real Front End
The preview is one template with everything else stripped away — excellent for judging a design, poor for judging how it fits.
| Aspect | In the Live Preview | On your real site |
|---|---|---|
| Display conditions | Ignored. | Applied; shows only where they match. |
| Enabled / disabled status | Ignored; disabled templates still preview. | A disabled template renders nowhere. |
| Theme header and footer | Not rendered at all. | Replaced by your template on supported themes. |
| Other templates | None injected around the preview. | All matching templates render together. |
| Post and query context | Sample post for Single, stand-in query for Archive. | The visitor’s actual post or archive query. |
| Admin bar | Hidden. | Visible to logged-in users. |
For Single templates you choose which post stands in: open the template in Elementor and use the Preview Post control under Sky Preview Settings. Leave it empty and the most recent published post is used; visitors always see their own post. The Single Post documentation covers that build in full.
Example: Checking a Header Across Three Device Widths
You have designed a new header — logo left, five-item menu centre, a “Book a Call” button right — and you do not want visitors to see it until it behaves.
- Leave the card’s status toggle off. A disabled template renders nowhere on the site, but still previews.
- Click the eye icon. The window opens at Desktop · 1440px: check the logo is not stretched and the button is centred.
- Click tablet. At 768px the menu should have collapsed to a burger; five items still colliding with the button is your first fix.
- Click mobile. At 375px check the logo height, whether the burger is big enough to tap, and whether “Book a Call” wraps onto two lines.
- Click Edit Design, reduce the mobile logo width, raise the burger size, shorten the mobile button text to “Book”, and click Update. Back in the preview, press Reload preview and step through the widths again.
- Happy? Close the window, open Settings, set the display conditions you want — Entire Site, for instance — and flip the status toggle on. Then load a real page to confirm the fit.
What to Check Before Going Live
- Does it break at 768 and 375? Menus, multi-column footers and inline buttons are where designs usually fall apart.
- Is anything empty? A blank strip where a logo should be usually means a deleted image or a dynamic tag with nothing to read.
- Is the height sensible? A header 400px tall in isolation pushes your page content a long way down.
- Do custom fonts and icons load? A font that falls back in the preview will fall back on the site too.
Why a Template Can Look Right in Preview and Wrong on the Site
- Display conditions. The preview ignores them. A perfect template with no conditions set renders nowhere — the card flags that in amber. See display conditions.
- Theme CSS. The preview shell is bare; a real page also loads your theme’s stylesheet, which may impose a container width, margin or link colour. Set an explicit value in the widget.
- Caching. The preview is never cached; your site probably is. Clear full-page and CDN caches after changing a template or its conditions.
- Theme support. If your theme’s own header refuses to step aside, that is a compatibility question — see theme compatibility.
Best Practices
- Build with the template disabled and preview as you go — nothing you preview reaches visitors.
- Treat Reload preview as part of saving, or you are looking at the previous version.
- Point Preview Post at a typical post — long title, real featured image, several categories. A thin sample hides layout problems.
- Always finish with one look at a real page. The preview confirms the design; only the site confirms the fit.
Troubleshooting
- The preview shows an older version. The render reads the saved template. Confirm you clicked Update in Elementor, then press Reload preview.
- A Single template previews as an empty skeleton. Its dynamic widgets have no post to read. Set Preview Post, or publish at least one post of the type the template targets.
- It looks fine in preview but never appears on the site. The preview checks neither conditions nor status. Open Settings, confirm the display conditions and the status toggle, then clear your cache.
- The device switcher is missing. It is hidden when the browser window is too narrow — widen it, or use Open in a new tab instead.
Frequently Asked Questions
Does the Elementor template preview show my unsaved changes?
No. It renders the template as currently saved — the same version visitors would receive. Save in Elementor first, then press the reload button in the preview toolbar.
Do I need Elementor Pro to preview Theme Builder templates?
No. Sky Addons Theme Builder and its Live Preview are entirely free, for every template type. Elementor itself is the only requirement.
Why does my header preview with nothing underneath it?
Because the preview shows one template on its own. There is no page content and no footer below it, so a header preview is a strip of design followed by empty space.
Can I preview a template that is switched off?
Yes, and it is the recommended way to work. The preview checks neither status nor display conditions, so you can review a replacement header in private and enable it only when satisfied.
Can a client or an editor open the preview?
Only if they can edit the template, and Theme Builder is limited to users who can manage site options. Anyone else is never given a preview address. To show a client a design, use Open in a new tab, or enable the template on a staging site.
Conclusion
Live Preview turns a Theme Builder card into a working Elementor template preview: one click, a live render at three real device widths, and no chance of looking at a stale picture. Use it to catch responsive problems before a template goes live, remember that it ignores display conditions and theme chrome by design, and finish with a look at a real page. For switching templates on, renaming or duplicating them see managing Theme Builder templates, and start with the Header Builder or Footer Builder guides if this is your first. If the preview does not match what you expect, our team is happy to help at https://wowdevs.com/support/.
