{"id":10666,"date":"2022-12-27T19:41:09","date_gmt":"2022-12-28T02:41:09","guid":{"rendered":"https:\/\/www.blocksylaunch.click\/documentation\/?p=10666"},"modified":"2023-02-03T15:50:16","modified_gmt":"2023-02-03T22:50:16","slug":"responsive-preview-system","status":"publish","type":"post","link":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/","title":{"rendered":"Using the Divi Responsive Preview System"},"content":{"rendered":"

Thanks to the Divi responsive preview system, it’s no longer necessary to use a third party software to test how your webpages will render on smaller screen sizes. Mobile devices are utilized by more than 60% of all internet users, so previewing how your pages will look on smaller screens is an important part of web design. Let’s take a look at how to use the repsponsive preview system by demonstrating its capabilities using the Streamer Divi Layout Pack<\/a>.<\/p>\n

How To Access the Divi Responsive Preview System<\/h2>\n

There are two ways to access Divi’s responsive preview system. The first is by activating it at the page level. This can be accomplished by viewing the page’s back end or on the front end with the Visual Builder. The second way to activate the responsive preview system is at the module, colum, row, or section level. Let’s start off by loading the preview system at the page level.<\/p>\n

Page Level Responsive Preview Mode<\/h3>\n

To use the reponsive preview system, log in to your Divi website and click Enable Visual Builder<\/strong>.<\/p>\n

\"enable<\/p>\n

With the Visual Builder activated, click the purple ellipsis menu at the bottom center of your screen to activate the page options menu.<\/p>\n

\"enable<\/p>\n

Next, click the tablet or phone icon at the bottom left corner of your screen to activate the responsive preview system.<\/p>\n

\"Divi<\/p>\n

Module Level Responsive Preview Mode<\/h3>\n

The Divi responsive preview system can be accessed in any module, column, row, or section throughout the Visual Builder. For example, click into a text module in the Visual Builder. Click on the design tab, then scroll down to view the heading font settings. Hover over heading font to reveal the responsive view menu. Next, click the tablet or phone icon to enable the respective view.<\/p>\n

Adjusting the Divi Responsive Preview Modes<\/h2>\n

There are multiple presets available within the responsive preview system. The default preview modes are desktop view, tablet view, and mobile view. To access them, click the responsive preview menu in the lower left corner of the Visual Builder.<\/p>\n

Divi Responsive Preview on Popular Device Presets<\/h3>\n

There are also popular device presets available to you. These presets enable you to preview how your page will display based on a specific device. To access the list of devices, click on the first dropdown menu. <\/p>\n

\"device<\/p>\n

From there, you’ll be able to choose from a list that includes several Apple and Android devices.<\/p>\n

\"list<\/p>\n

Customizing the Divi Responsive Preview Widths<\/h2>\n

In addition to default and device preview presets, you can specify a custom width for your preview. Furthermore, Divi has a click and drag resizing function that will allow you to adjust the width of your preview with ease.<\/p>\n

Drag To Resize\u00a0the Divi Responsive Preview<\/h3>\n

To resize your preview, simply click and drag from the left hand side of the preview. As you drag the preview area, the width will automatically adjust in the dimension fields.<\/p>\n

Custom Size Input<\/h3>\n

An additional way to customize your responsive preview is to manually adjust the width and height to a specific dimension. To do this, simply click into the dimension field and type in your desired width. Once you have adjusted the size to your liking, you can click the make default phone view<\/strong> button to make it the default preview width. If you’d like to set dimensions for the tablet preview as well, repeat the steps outlined to create a default view for tablets. Then, click the make default tablet view<\/strong> button to save your preset.<\/p>\n

\"custom<\/p>\n

Above The Fold Indicator<\/h2>\n

The Divi responsive preview system has a handy above the fold indicator that enables you to determine how the elements on your page will be visible to your website’s visitors before scrolling. This is useful when you are placing important content at the top of your design. The above the fold indicator will change based on the device preset that you choose.<\/p>\n

\"above<\/p>\n

Portrait & Landscape Modes<\/h2>\n

Another excellent feature of the Divi responsive preview system is the ability to view your designs in either portrait or landscape mode. To access this feature, click the icon to the right of the dimension fields. Clicking the icon will switch the page orientation, enabling you to view how your page will look based on how the user is holding the device. The current orientation is indicated by the darker color.<\/p>\n

\"landscape<\/p>\n

More Resources<\/h2>\n

The Divi responsive preview system enables Divi users to preview their designs on smaller device screens quickly and effortlessly. It’s truly a great way to ensure that your content is optimized for mobile devices. <\/p>\n

To learn some great tips for responsive design, check out these posts on the Elegant Themes blog.<\/p>\n

    \n
  1. How to Use vw and vh Length Units to Design a Responsive Contact Form in Divi<\/a><\/li>\n
  2. How to Add a Responsive Logo to Your Fullwidth Menu Module in Divi<\/a><\/li>\n
  3. How to Create a Responsive Fluid Divi Module<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    Divi’s responsive preview system allows you to view what your designs will look like on a wide range of devices and viewport configurations. All without having to leave the visual builder!<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,2],"tags":[],"class_list":["post-10666","post","type-post","status-publish","format-standard","hentry","category-divi-builder","category-divi"],"yoast_head":"\nElegant Themes Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using the Divi Responsive Preview System - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"Divi's responsive preview system allows you to view what your designs will look like on a wide range of devices and viewport configurations. All without having to leave the visual builder!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-28T02:41:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-03T22:50:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/enable-Divi-visual-builder.jpg\" \/>\n<meta name=\"author\" content=\"Deanna McLean\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Deanna McLean\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/responsive-preview-system\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/responsive-preview-system\\\/\"},\"author\":{\"name\":\"Deanna McLean\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/f6c87e48544b98456f4464ec353ee9f9\"},\"headline\":\"Using the Divi Responsive Preview System\",\"datePublished\":\"2022-12-28T02:41:09+00:00\",\"dateModified\":\"2023-02-03T22:50:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/responsive-preview-system\\\/\"},\"wordCount\":825,\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/responsive-preview-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/enable-Divi-visual-builder.jpg\",\"articleSection\":[\"Divi Builder Plugin Documentation\",\"Divi Theme Documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/responsive-preview-system\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/responsive-preview-system\\\/\",\"name\":\"Using the Divi Responsive Preview System - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/responsive-preview-system\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/responsive-preview-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/enable-Divi-visual-builder.jpg\",\"datePublished\":\"2022-12-28T02:41:09+00:00\",\"dateModified\":\"2023-02-03T22:50:16+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/f6c87e48544b98456f4464ec353ee9f9\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/responsive-preview-system\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/responsive-preview-system\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/responsive-preview-system\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/enable-Divi-visual-builder.jpg\",\"contentUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/enable-Divi-visual-builder.jpg\",\"width\":2200,\"height\":1191},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/responsive-preview-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using the Divi Responsive Preview System\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/f6c87e48544b98456f4464ec353ee9f9\",\"name\":\"Deanna McLean\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f41cd730952a1e04ca0c5791d97991cc39b0deb4fb02adc27fd587097ab3f8b0?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f41cd730952a1e04ca0c5791d97991cc39b0deb4fb02adc27fd587097ab3f8b0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f41cd730952a1e04ca0c5791d97991cc39b0deb4fb02adc27fd587097ab3f8b0?s=96&d=mm&r=g\",\"caption\":\"Deanna McLean\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/","og_locale":"en_US","og_type":"article","og_title":"Using the Divi Responsive Preview System - Elegant Themes Documentation","og_description":"Divi's responsive preview system allows you to view what your designs will look like on a wide range of devices and viewport configurations. All without having to leave the visual builder!","og_url":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2022-12-28T02:41:09+00:00","article_modified_time":"2023-02-03T22:50:16+00:00","og_image":[{"url":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/enable-Divi-visual-builder.jpg","type":"","width":"","height":""}],"author":"Deanna McLean","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Deanna McLean","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/#article","isPartOf":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/"},"author":{"name":"Deanna McLean","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/f6c87e48544b98456f4464ec353ee9f9"},"headline":"Using the Divi Responsive Preview System","datePublished":"2022-12-28T02:41:09+00:00","dateModified":"2023-02-03T22:50:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/"},"wordCount":825,"image":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/enable-Divi-visual-builder.jpg","articleSection":["Divi Builder Plugin Documentation","Divi Theme Documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/","url":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/","name":"Using the Divi Responsive Preview System - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/#primaryimage"},"image":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/enable-Divi-visual-builder.jpg","datePublished":"2022-12-28T02:41:09+00:00","dateModified":"2023-02-03T22:50:16+00:00","author":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/f6c87e48544b98456f4464ec353ee9f9"},"breadcrumb":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/#primaryimage","url":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/enable-Divi-visual-builder.jpg","contentUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2022\/12\/enable-Divi-visual-builder.jpg","width":2200,"height":1191},{"@type":"BreadcrumbList","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/responsive-preview-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.blocksylaunch.click\/documentation\/"},{"@type":"ListItem","position":2,"name":"Using the Divi Responsive Preview System"}]},{"@type":"WebSite","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#website","url":"https:\/\/www.blocksylaunch.click\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.blocksylaunch.click\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/f6c87e48544b98456f4464ec353ee9f9","name":"Deanna McLean","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f41cd730952a1e04ca0c5791d97991cc39b0deb4fb02adc27fd587097ab3f8b0?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f41cd730952a1e04ca0c5791d97991cc39b0deb4fb02adc27fd587097ab3f8b0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f41cd730952a1e04ca0c5791d97991cc39b0deb4fb02adc27fd587097ab3f8b0?s=96&d=mm&r=g","caption":"Deanna McLean"}}]}},"_links":{"self":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/10666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/comments?post=10666"}],"version-history":[{"count":29,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/10666\/revisions"}],"predecessor-version":[{"id":15515,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/10666\/revisions\/15515"}],"wp:attachment":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/media?parent=10666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/categories?post=10666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/tags?post=10666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}