Preview

Getting Started
System Requirements Installation & Update Dashboard Settings Role Manager License Key
Canvas
The Infinite Canvas Kirki Main Menu Pages and Layers Overview Build Using the Element Island Base Elements Design Responsively With Breakpoints
Building Your Pages
Starting From Templates Starting From Pre-Built Blocks
Pages
Pages in Kirki Login Registration Forgot Password
Elements
Elements Overview Section Div Block Stack Heading Paragraph Button Image Video SVG Icon Lottie Files Map  Lightbox Navigation Slider Tabs Code  Collection Element Dropdown Form Elements
Layers Panel
Layers
Customizing Your Pages
Right Panel Overview Classes Position Layout Flex Grid  Sizing Style Background Color Settings Borders Shadow Effects Glass Effect Transform Transition Spring Transition Visibility Conditions Values and Units
Text and Typography
How to Add & Edit Text Reusable Text Styles Adding Custom Fonts Variable Fonts Typography Properties Open Type Feature Properties
Variables
Variables
Symbols
Symbols
Dynamic Data Basics
Collection Element Connect Elements To Dynamic Fields Creating Dynamic User Lists and Single User Templates  Filter WordPress Posts Using Collection
Content Manager
Overview  Collections Collection Fields Collection Items Displaying Dynamic Content Collection References Collection Search & Filter
Interactions
Interactions Text Animations
Form Builder
Form Elements Form Actions Form Data
Pop-up Builder
Pop-up Builder
Collaboration
Real-Time Collaboration Comments  Versions
Media Manager
Media Manager
API Integrations
API Integrations 
Review and Publish
Audit SEO & OpenGraph Preview Save & Publish
Migration
Migrating from Droip to Kirki
Tutorials
How to Translate a Kirki Website With Weglot 
Getting Started
System Requirements Installation & Update Dashboard Settings Role Manager License Key
Canvas
The Infinite Canvas Kirki Main Menu Pages and Layers Overview Build Using the Element Island Base Elements Design Responsively With Breakpoints
Building Your Pages
Starting From Templates Starting From Pre-Built Blocks
Pages
Pages in Kirki Login Registration Forgot Password
Elements
Elements Overview Section Div Block Stack Heading Paragraph Button Image Video SVG Icon Lottie Files Map  Lightbox Navigation Slider Tabs Code  Collection Element Dropdown Form Elements
Layers Panel
Layers
Customizing Your Pages
Right Panel Overview Classes Position Layout Flex Grid  Sizing Style Background Color Settings Borders Shadow Effects Glass Effect Transform Transition Spring Transition Visibility Conditions Values and Units
Text and Typography
How to Add & Edit Text Reusable Text Styles Adding Custom Fonts Variable Fonts Typography Properties Open Type Feature Properties
Variables
Variables
Symbols
Symbols
Dynamic Data Basics
Collection Element Connect Elements To Dynamic Fields Creating Dynamic User Lists and Single User Templates  Filter WordPress Posts Using Collection
Content Manager
Overview  Collections Collection Fields Collection Items Displaying Dynamic Content Collection References Collection Search & Filter
Interactions
Interactions Text Animations
Form Builder
Form Elements Form Actions Form Data
Pop-up Builder
Pop-up Builder
Collaboration
Real-Time Collaboration Comments  Versions
Media Manager
Media Manager
API Integrations
API Integrations 
Review and Publish
Audit SEO & OpenGraph Preview Save & Publish
Migration
Migrating from Droip to Kirki
Tutorials
How to Translate a Kirki Website With Weglot 

Preview

Before publishing, Kirki lets you preview your page in a full-screen environment that closely mimics how it will look and behave for real visitors.

Opening Preview

Click the play icon at the top of the canvas to enter Preview mode.

Preview Mode

Preview mode opens your page in a full-screen environment, stripping away the editor UI so you can see your page as visitors would.

From here you can:

Switch Between Device Presets

Use the device switcher at the top to toggle between:

  • Desktop
  • Tablet
  • Landscape Mobile
  • Portrait Mobile

Manually Adjust Screen Dimensions

Enter values in the W (width) and H (height) fields, or adjust the zoom level using the % Control.

Resize Freely

Drag the handles on the left, right, and bottom edges of the preview frame to toggle the screen size up or down.

Open in Browser

Click the external link icon at the top-right to view the page in a new browser tab.

Exit Preview 

Click the X icon at the top-right to return to the editor.

Was this page helpful?

Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.