{"id":2512,"date":"2021-08-11T09:00:59","date_gmt":"2021-08-11T09:00:59","guid":{"rendered":"https:\/\/elementor.com\/resources\/?p=2512"},"modified":"2021-10-13T06:17:12","modified_gmt":"2021-10-13T06:17:12","slug":"what-is-the-rule-of-thirds","status":"publish","type":"post","link":"https:\/\/elementor.com\/resources\/glossary\/what-is-the-rule-of-thirds\/","title":{"rendered":"What is the Rule of Thirds?"},"content":{"rendered":"\n<p>The&nbsp;<strong>Rule of Thirds<\/strong>&nbsp;is a web design technique that helps designers create visually balanced grid layouts and image placements that are aesthetically appealing to viewers. <\/p>\n\n\n\n<p>The method is straightforward and involves placing a simple grid overlay that divides a design space, image, or page section into thirds \u2013 both horizontally and vertically. The resultant line intersections create nine equally shaped boxes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/elementor.com\/resources\/wp-content\/uploads\/2021\/08\/ArtTutor-GridPic-2.jpg\" alt=\"\" class=\"wp-image-2516\" width=\"351\" height=\"264\" title=\"\" srcset=\"https:\/\/elementor.com\/resources\/wp-content\/uploads\/2021\/08\/ArtTutor-GridPic-2.jpg 1024w, https:\/\/elementor.com\/resources\/wp-content\/uploads\/2021\/08\/ArtTutor-GridPic-2-300x225.jpg 300w, https:\/\/elementor.com\/resources\/wp-content\/uploads\/2021\/08\/ArtTutor-GridPic-2-768x576.jpg 768w\" sizes=\"(max-width: 351px) 100vw, 351px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Use the Rule of Thirds?<\/strong><\/h2>\n\n\n\n<p>The Rule of Thirds is used to create pleasing aesthetics and balance in images to make it easy for viewers to interact with them and, by so doing, maintain their interest.&nbsp;Used correctly, placing \u201citems of interest\u201d \u2013 or \u201csweet spots\u201d on the \u201cthirds\u201d of an image attracts user attention in a more impactful, visually appealing way. Web designers often use the Rule to ascertain some of the most essential grid and layout-related design decisions, such as:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Where to place the most important elements<\/li><li>What type of grid to use<\/li><li>What dimensions each grid element should have<\/li><li>What your image ratios should be<\/li><li>How much negative space to add around and between elements<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Element Placement and the Rule of Thirds<\/strong><\/h2>\n\n\n\n<p>As one can see from the above web design decisions, the first question is where to place the most critical elements (i.e., site logo, calls to action, etc.). The answer is generally to place them where the viewer will look first. Using the Rule of Thirds helps designers know where that is &#8211; on the intersections. The reason is that the viewer\u2019s eye path travels a predictable route. <\/p>\n\n\n\n<p>It begins at the upper left of an image (or site), moves down to the bottom left, moves onto the upper right, and ends at the bottom right. These are the exact \u201csweet spots\u201d of the lines in the Rule of Thirds grid. So, if you place your most important element on or near the upper-left grid point, you\u2019ll be more likely to make sure your viewer sees it first.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Rule of Thirds is a web design technique that helps designers create visually balanced grid layouts and image placements that are aesthetically appealing to viewers<\/p>\n","protected":false},"author":1292159,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_angie_page":false,"page_builder":"","footnotes":""},"categories":[15,29],"tags":[16],"class_list":["post-2512","post","type-post","status-publish","format-standard","hentry","category-glossary","category-web-design","tag-build"],"acf":[],"_links":{"self":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/2512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/users\/1292159"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/comments?post=2512"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/2512\/revisions"}],"predecessor-version":[{"id":2519,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/2512\/revisions\/2519"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/media?parent=2512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/categories?post=2512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/tags?post=2512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}