{"id":998,"date":"2020-08-08T00:19:49","date_gmt":"2020-08-08T00:19:49","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/?p=998"},"modified":"2020-08-19T20:46:22","modified_gmt":"2020-08-19T20:46:22","slug":"skeleton-screens","status":"publish","type":"post","link":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/2020\/08\/08\/skeleton-screens\/","title":{"rendered":"Skeleton Screens"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">What is Skeleton Screens<\/h4>\n\n\n\n<p>Skeleton screens are blank pages that are progressively populated with content, such as text and images, as they become available. Grey or neutral-toned filled shapes, called placeholders, meet the user instantly upon user interaction with calls to action or links. The placeholders which we call as &#8220;Skeleton Screens&#8221; are then replaced with the actual site content after page loading is finshed and it is ready to display.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"474\" src=\"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-1-1024x474.jpg\" alt=\"\" class=\"wp-image-984\" srcset=\"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-1-1024x474.jpg 1024w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-1-300x139.jpg 300w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-1-768x355.jpg 768w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-1-1536x711.jpg 1536w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-1-600x278.jpg 600w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-1.jpg 1904w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-2-1024x498.jpg\" alt=\"\" class=\"wp-image-986\" srcset=\"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-2-1024x498.jpg 1024w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-2-300x146.jpg 300w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-2-768x374.jpg 768w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-2-1536x747.jpg 1536w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-2-600x292.jpg 600w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/skeleton-2.jpg 1904w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<div class=\"notice-info\">NOTE:<br>You can decrease page loading time up to 90 or 95 percent using skeleton screens.<\/div>\n\n\n<h4 class=\"wp-block-heading\">How to enable Skeleton Screens<\/h4>\n\n\n\n<p>Navigate to &nbsp;<strong><code>Molla &gt; Theme Options &gt; General &gt; Skeleton Screens<\/code><\/strong> section and check option.<\/p>\n\n\n\n<p>Skeleton screens are available in shop page, product page, product quickview and blog pages.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">How to customize skeletons<\/h4>\n\n\n\n<p>Each skeleton is drawn using css &#8220;background-image: linear-gradient&#8221;. You can find its code in &#8220;Skeleton screen&#8221; section in skeleton.scss.<br>If you want to change default product skeleton in shop pages, you can use following css selector.<br><strong>.skeleton-body<\/strong> <strong>.skel-pro:before { background-image: linear-gradient&#8230; }<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is Skeleton Screens Skeleton screens are blank pages that are progressively populated with content, such as text and images, as they become available. Grey or neutral-toned filled shapes, called placeholders, meet the user instantly upon user interaction with calls to action or links. The placeholders which we call as &#8220;Skeleton Screens&#8221; are then replaced [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,27],"tags":[],"featured_image_src":{"landsacpe":false,"list":false,"medium":false,"full":false},"categories_name":["12 - How tos \/ Guides","General"],"author_name":"John Doe","comment_count":{"approved":0,"awaiting_moderation":0,"spam":0,"trash":0,"post-trashed":0,"all":0,"total_comments":0},"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/posts\/998"}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/comments?post=998"}],"version-history":[{"count":2,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/posts\/998\/revisions"}],"predecessor-version":[{"id":1534,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/posts\/998\/revisions\/1534"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/media?parent=998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/categories?post=998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/tags?post=998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}