Elementor Tutorial

Preview Elementor Draft

Learn how to preview your draft pages in Elementor. This is especially helpful if you are not yet ready to publish your page live to the internet.

Get help with Elementor and learn more about what tools and tips you need to build faster through the other tutorials and lessons.

How To Preview Your Elementor Page

Personally, I use preview-draft mode in Elementor at least a dozen times before I actually press publish. Whenever I start creating a page within Elementor, I want to make sure that the layout looks nice, is ready for mobile and has all the information necessary. 

Here’s a video tutorial on how to preview your draft page (or perhaps you’ve already published it but want to make changes before sending those to the live page). Either way, learn how to here:

Step 1. Navigate To Your Page

Navigate to the the page that you would like to either start creating or make changes to. This can either be a draft page or a live page (the process to preview the page is the same).

Step 2. Save Your Draft Page

I recommend saving your page as a draft version (whether it’s live or not) before previewing the link, otherwise you risk missing out viewing some content that might have been added after the last save. The video above also walks you through a visual of what I mean.

To save your page as a draft in Elementor, click the small (too small in my opinion) up arrow in the bottom left corner of your screen. This will show a new popup menu with two options, click on the save draft option.

how to preview page in elementor

Step 3. Click On Preview Mode

Once you have saved your page draft, click on the eyeball icon that is located directly next to the publish button. Your page will then open in a new browser tab (or refresh in the same tab if you already have a preview open). 

click on elementor preview icon

When you are ready to publish the changes and happy with the layout, click on the publish button and your changes and layout will be published to the live URL.

Step 3. For Mobile

If you want to preview or edit changes on a mobile device within Elementor, click on the device icon in the bottom left  menu. This will make a new menu bar appear at the top of your screen. This new top menu bar will allow you to cycle through your device of choice, by default desktop version is what starts off in the editing window. 

mobile responsiveness elementor preview

(mobile preview mode)

(select your device)

Stuck With Elementor?

Get tailored help to your website and don’t waste money on agencies. Learn to build and manage your own site.

Get In Touch

Questions and Conversations

Submit Your Project Info

Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.