{"id":4744,"date":"2017-08-24T08:27:13","date_gmt":"2017-08-24T08:27:13","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=4744"},"modified":"2017-08-24T08:27:13","modified_gmt":"2017-08-24T08:27:13","slug":"website-layout-design","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/website-layout-design\/","title":{"rendered":"Website Layout Design: Best Practices For Creating Sections"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4744\" class=\"elementor elementor-4744\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ahsijsc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ahsijsc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-jmjimnv\" data-id=\"jmjimnv\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-aimc7tc elementor-widget elementor-widget-text-editor\" data-id=\"aimc7tc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It might surprise you but people don\u2019t visit websites for the design. They visit websites for content. And it\u2019s a designer\u2019s job to present the content in the most intuitive and useful manner.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-864of7y elementor-widget elementor-widget-text-editor\" data-id=\"864of7y\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>In this piece, we\u2019ll explore how to:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-219rww3 elementor-widget elementor-widget-text-editor\" data-id=\"219rww3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ol><li><b>Make a certain section stand out<\/b> (create a point of focus)<\/li><li><b>Convey dual importance<\/b> (present two main pieces of content that are equally important)<\/li><li><b>Create an easy-to-scan layout<\/b> of multiple related items.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0151312 elementor-widget elementor-widget-heading\" data-id=\"0151312\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/blog\/create-website-with-wordpress\/\" target=\"_blank\">Learn to design a beautiful WordPress website with Elementor <\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9l6dwi elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"b9l6dwi\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6xufo2m elementor-widget elementor-widget-heading\" data-id=\"6xufo2m\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Make The Section Stand Out<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-iwz4slc elementor-widget elementor-widget-text-editor\" data-id=\"iwz4slc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Making a certain section\/element the most prominent thing on the page is quite a common task when designers craft:<\/p><p>Landing or promo page. Designers often try to make certain elements such as call-to-action buttons the most noticeable on the page.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-wsy91m6 elementor-widget elementor-widget-image\" data-id=\"wsy91m6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image49-r4q72p3o4upcxymtgkhs02tl0gu8mm129elrfwqa3w.png\" title=\"image49\" alt=\"image49\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aek2ley elementor-widget elementor-widget-text-editor\" data-id=\"aek2ley\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><i>Mailchimp\u2019s <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/landing-page-builder\/\"   title=\"landing page\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"2325\">landing page<\/a><\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-rpke3sx elementor-widget elementor-widget-text-editor\" data-id=\"rpke3sx\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Product details page for <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/ecommerce\/\"   title=\"ecommerce\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"3400\">ecommerce<\/a> website. Usually, the most noticeable element is a product image.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fxidk6a elementor-widget elementor-widget-image\" data-id=\"fxidk6a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image2-1-r4q6x14oxsy4ykv3jmbqh0ak3url8ajb5d1eav4psi.png\" title=\"image2-1\" alt=\"image2-1\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-uxsjikl elementor-widget elementor-widget-text-editor\" data-id=\"uxsjikl\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><i>Adidas product page<\/i><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-wycfak5 elementor-widget elementor-widget-text-editor\" data-id=\"wycfak5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>How to achieve<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9gxpbx3 elementor-widget elementor-widget-text-editor\" data-id=\"9gxpbx3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Designers often rely on two techniques to make a certain section stand out:<\/p><ul><li><strong><i> Whitespace<\/i><\/strong>. As Jan Tschichold said, \u201c<i> Whitespace is to be regarded as an active element, not a passive background<\/i> .\u201d Using plenty of whitespace is great if you want to create a point of focus because the lack of other elements will only make existing elements stand out more. By removing distractions, you force users to focus only on what\u2019s immediately visible.<\/li><li><strong><i> Size<\/i><\/strong>. This one is simple enough: <i> people read bigger things first<\/i> . Size is the easiest way to create a hierarchy between elements. Proper hierarchy clarifies for the visitors the order of importance of the elements, so they can distinguish what are the more important elements of the page.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-hc1w0op elementor-widget elementor-widget-text-editor\" data-id=\"hc1w0op\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Example 1: Creating a balanced symmetrical layout using whitespace<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eeddnkd elementor-widget elementor-widget-text-editor\" data-id=\"eeddnkd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Using whitespace you draw visitors eyes onto certain page elements. The more white space around an object, the more the eye is drawn to it. But, as designers, we still need to create a balanced layout \u2014 a specific content should stand out without disrupting scanning flow. One possible way to achieve a balance is having the text on one side with images on the opposing side.<\/p><p>Let\u2019s recreate a slightly modified <a href=\"https:\/\/www.apple.com\/iphone\/\"> Apple iPhone<\/a> layout using Elementor.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-nh48x4u elementor-widget elementor-widget-image\" data-id=\"nh48x4u\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image33-r4q74g2uur3kju3c8tps54xgta7tybz2u2balg4weu.png\" title=\"image33\" alt=\"image33\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-mbe1ahk elementor-widget elementor-widget-text-editor\" data-id=\"mbe1ahk\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>First, we need to create a new section. We\u2019ll use a 2 column structure for this section.<\/li><li>Next, we need to add a <i> Heading<\/i> widget for the first column and an <i> Image<\/i> widget for the second column.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-70c1vy4 elementor-widget elementor-widget-image\" data-id=\"70c1vy4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"308\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=308\/blog\/wp-content\/uploads\/2017\/09\/image38-1024x394.png\" class=\"attachment-large size-large wp-image-5430\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2017\/09\/image38-1024x394.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2017\/09\/image38-300x116.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2017\/09\/image38-768x296.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1999\/blog\/wp-content\/uploads\/2017\/09\/image38.png 1999w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5fkfg9g elementor-widget elementor-widget-text-editor\" data-id=\"5fkfg9g\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>For the <i> Heading <\/i> widget, we should change the font family (we&#8217;ll use Helvetica which is quite similar to Apple&#8217;s San Francisco font), text color (use <i> #00000<\/i> ) as well as font size (select 48px). Also, we need to add more whitespace above and below the object. We also need another heading with a description below the title.<\/li><li>If you compare our section with description to original Apple page you\u2019ll notice that in our example text weight is too <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"bold\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"6790\">bold<\/a>. We should change the Weight to 200.<\/li><li>Another problem with our section \u2014 text in section looks too tight and this can have a negative impact on readability. To increase readability we need to adjust line-height for the section. As a general rule, line-height should be about 25 to 30 percent more than the character height for good readability. In our case, we can use 1.5 for line height.<\/li><li>Finally, we need to add one last element \u2014 a link for more information. Once again, we&#8217;ll duplicate a widget and change its properties.<\/li><\/ul><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-henv4od elementor-widget elementor-widget-text-editor\" data-id=\"henv4od\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Example 2: Draw attention using size<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-p93huae elementor-widget elementor-widget-text-editor\" data-id=\"p93huae\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you saw in the previous example, symmetry creates harmony, but sometimes we want to place more focus on one particular element (either text or image). There\u2019s one simple technique that can help us with that: <i> size<\/i> . People read bigger things first. Bigger element stands out against other surrounding elements.<\/p><p>We\u2019ll use <a href=\"http:\/\/curtsspecialrecipe.com\/\"> Curts special recipe<\/a> as an example of asymmetrical layout. The layout uses different font sizing to create visual hierarchy. The first thing visitors notice in this layout is text section \u201cExtraordinary Ingredients.\u201d<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-36ocsrl elementor-widget elementor-widget-image\" data-id=\"36ocsrl\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image24-r4q6yt1pujdmw2a96dyd6k5wi20jrpl225eexohxvk.png\" title=\"image24\" alt=\"image24\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ourb1f5 elementor-widget elementor-widget-text-editor\" data-id=\"ourb1f5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>Add a new section and select a simple one column structure for it.<\/li><li>Select a background image for the section. We can do it in <i> Style <\/i> tab (<i> Background<\/i> property).<\/li><li>Add a text overlays over the image. We\u2019ll use 3 <i> Heading <\/i> widgets and one <i> Text Editor<\/i> widget for that. Let&#8217;s drag-n-drop them to the section<\/li><\/ul><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-jxnbv7o elementor-widget elementor-widget-image\" data-id=\"jxnbv7o\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image20-r4q73qp7q84tud47d0qurtc0rvox6i6bqkp6mz6iiu.png\" title=\"image20\" alt=\"image20\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-hneir16 elementor-widget elementor-widget-text-editor\" data-id=\"hneir16\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>Fill them with a text taken from the Curts special recipe homepage.<\/li><li>As you can see, text sections require attention. The most obvious problem is the color \u2014 it should be contrasting to support readability. Let\u2019s change the <i> Text Color<\/i> property in <i> Style <\/i> tab (we\u2019ll use #ededee for each widget).<\/li><li>Customize font size for each text section. Let\u2019s select 36px for the first <i> Heading <\/i> widget, 112px for second and third, and 17px for the <i> Text Editor<\/i> widget.<\/li><li>Most probably you\u2019ve noticed that the body text in the last section is a way too long. Ideal line length for comfortable reading on desktop is around 60 characters per line. This means that we need to adjust the length of the last section.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-hw8lsop elementor-widget elementor-widget-image\" data-id=\"hw8lsop\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image43-r4q78d2nbwgkxcejdintj5clx2ww0xitdg64kybuxm.png\" title=\"image43\" alt=\"image43\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-r1y20ev elementor-widget elementor-widget-text-editor\" data-id=\"r1y20ev\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>Limit the max-width for Text Editor section. For that we\u2019ll go to Advanced tab and add a right padding equal to 538px<\/li><li>Add more padding to the top and bottom for the widgets. We will also add a left padding.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-zkcnhnq elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"zkcnhnq\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8rdu9wf elementor-widget elementor-widget-heading\" data-id=\"8rdu9wf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Convey Dual Importance<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-yvx84r8 elementor-widget elementor-widget-text-editor\" data-id=\"yvx84r8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In some cases, the goal is to present a variety of information as equally important. Equal importance to both elements allows the user to choose between them quickly. This required when:<\/p><p>You have two equally important messages to deliver or things to promote.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ncxdm27 elementor-widget elementor-widget-image\" data-id=\"ncxdm27\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image34-r4q731bklp634w52h7rxehqkqh60eodkn332oi86pu.jpg\" title=\"image34\" alt=\"image34\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-xe0my7g elementor-widget elementor-widget-text-editor\" data-id=\"xe0my7g\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><em>Peugeot website<\/em><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cp2f4vr elementor-widget elementor-widget-text-editor\" data-id=\"cp2f4vr\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In some cases, theYou have to place two completely different but equally important navigation options.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-kb4phk0 elementor-widget elementor-widget-image\" data-id=\"kb4phk0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image9-r4q6y4lwwug6i79r53e2dqbx21d07kw1asfsghi6h8.png\" title=\"image9\" alt=\"image9\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-j9mczoc elementor-widget elementor-widget-text-editor\" data-id=\"j9mczoc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><em>Dropbox website<\/em><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c3v3sw elementor-widget elementor-widget-text-editor\" data-id=\"0c3v3sw\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>How to achieve<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8l9gkle elementor-widget elementor-widget-text-editor\" data-id=\"8l9gkle\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Designers often rely on<i> split screen <\/i> technique to give two main pieces equal consideration. Basically, split screen is two vertical panels placed side by side. Each side features a separate contained element, such as a photo, text block, or illustration. This type of layout is particularly well suited to navigation on a large screen or on a tablet, but it can be also good for mobile devices: when it comes to smaller screens, the panels can be stacked.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3t4kjl7 elementor-widget elementor-widget-text-editor\" data-id=\"3t4kjl7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Example: Creating two completely different but equally important navigation options<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aug642m elementor-widget elementor-widget-text-editor\" data-id=\"aug642m\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For our example, we\u2019ll recreate a part of the <a href=\"http:\/\/www.62models.com\/\"> 62models<\/a> homepage visual design. As you can see, it features 2 different categories \u2014 products for women and men.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-g8win85 elementor-widget elementor-widget-image\" data-id=\"g8win85\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image11-r4q78d2nbwgkxcejdintj5clx2ww0xitdg64kybup0.png\" title=\"image11\" alt=\"image11\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-u8su53z elementor-widget elementor-widget-text-editor\" data-id=\"u8su53z\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>Create a new 4 column section: 2 section with <i> Image <\/i> widgets, and 2 sections with <i> Heading <\/i> widget.<\/li><li>To reduce the amount of work required, we&#8217;ll customize the properties of <i> Heading <\/i> and <i> Image <\/i> widgets and duplicate them.<\/li><li>Let&#8217;s start with <i> Heading <\/i> widget. We need to change the Title to \u201cWomen\u201d and customize color and <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"typography\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5220\">typography<\/a> properties in <i> Style<\/i> section \u2014 properties like font size, family and weight will be custom.<\/li><li>Align the Heading widget to the center (change <i> Alignment<\/i> property in section <i> Content<\/i> ) and add a padding to it.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-yp5g254 elementor-widget elementor-widget-image\" data-id=\"yp5g254\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image31-r4q76he9ntvxpf4ucpeojmff5c6gmq2545761145qq.png\" title=\"image31\" alt=\"image31\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5l2i5kd elementor-widget elementor-widget-text-editor\" data-id=\"5l2i5kd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>That\u2019s all for Heading. Now it\u2019s time to change our Image widget properties. In this case, all we need to do is to select our image and make Image Size property equal to 100% (since we want our image to take the maximum available size).<\/li><li>Now we can copy these two widgets and place them to empty spots.<\/li><li>Let\u2019s not forget that our images are interactive elements and we need to add a clear visual signifier of clickability for the visitors. We\u2019ll use a hover animation for that. Let\u2019s choose Grow in Style tab for both images. Now when user hovers the mouse over the image, it\u2019ll grow and show that it\u2019s clickable.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56hok4w elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"56hok4w\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-jfpjqo6 elementor-widget elementor-widget-heading\" data-id=\"jfpjqo6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Create an Easy-to-Scan Layout Of Multiple Related Items<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ulzkt2 elementor-widget elementor-widget-text-editor\" data-id=\"2ulzkt2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When we have a content-heavy page that requires displaying all primary items with equal hierarchy. A <a href=\"https:\/\/elementor.com\/blog\/website-layout-ideas\/\">common example of such layouts<\/a> is a gallery of objects, images or videos (Youtube, Flickr, Etsy)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-vpt949m elementor-widget elementor-widget-image\" data-id=\"vpt949m\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Screen-Shot-2017-09-06-at-11.00.13-AM-r4q72dtluu9x2n37afm965o1vudu28sa7urxol70tm.png\" title=\"Website Layout Design\" alt=\"Website Layout Design\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-shnkgu3 elementor-widget elementor-widget-text-editor\" data-id=\"shnkgu3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>How to achieve<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-whmvydv elementor-widget elementor-widget-text-editor\" data-id=\"whmvydv\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>One of the easiest ways to achieve an organized design is to apply a grid system. A grid system displays your content in two or more columns of cells arrayed in a vertical and horizontal layout. Grids are the invisible scaffolding that gives a design coherence.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-x3ruzl3 elementor-widget elementor-widget-image\" data-id=\"x3ruzl3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image7-r4q77dcs473oo5uf637zwed3cfsxwfl0kjdocfsw0w.png\" title=\"image7\" alt=\"image7\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a1uklpd elementor-widget elementor-widget-text-editor\" data-id=\"a1uklpd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Designers use a grid system to keep everything in balance:<\/p><p><strong>A grid structure makes browsing easier.<\/strong> We use this column-based structure to place text, images, and functions in a consistent way throughout the design.<\/p><p><strong>The grid is <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"responsive\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"7169\">responsive<\/a>.<\/strong> Thanks to grid system designers can provide a consistent experience across multiple devices with different screen sizes.<\/p><p>Elementor includes a semi-automatically generated grid system. By using sections, columns and the various spacing settings like column gap, padding and margin, you get a faster workflow, never worrying about placing each widget in the exact point. You drag and drop any widget, it clicks into place, and then you can make any needed adjustment by using the many spacing controls.<\/p><p>Using Elementor&#8217;s grid enables you to get a symmetrical and <a href=\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/\">well-structured layout<\/a> almost automatically and with the least amount of effort needed.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-od04sfz elementor-widget elementor-widget-text-editor\" data-id=\"od04sfz\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Example 1: Creating an easy-to-scan grid system<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5r6d5ff elementor-widget elementor-widget-text-editor\" data-id=\"5r6d5ff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Grid provides users an interruptive scanning format, making it best suited for <i> visual comprehension<\/i> and <i> differentiating<\/i> between similar data types. User\u2019s attention tends to be spread evenly between each grid cell: user can jump from one image to another without worrying about order or continuity.<\/p><p>Grids can vary in size, spacing, and the number of columns. For our example, we\u2019ll use YouTube grid system.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-05ictot elementor-widget elementor-widget-image\" data-id=\"05ictot\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image15-r4q76qsnk68sxir6ttgy8k2136w4rp3ghfq0tsq9p2.png\" title=\"image15\" alt=\"image15\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ontiw8n elementor-widget elementor-widget-text-editor\" data-id=\"ontiw8n\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In Elementor you can choose how each section divides into columns. Let\u2019s add a new section and select a 4 column structure for it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-kdikrtg elementor-widget elementor-widget-image\" data-id=\"kdikrtg\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image40-r4q70fbpm9levvxlq358h5ghby1b0y0ey5uiou3i2w.png\" title=\"image40\" alt=\"image40\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2go6v8i elementor-widget elementor-widget-text-editor\" data-id=\"2go6v8i\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now it&#8217;s time to fill the first spot with data. We&#8217;ll use a familiar for you <i> Image Box<\/i> widget. Simply drag-n-drop it from the widget panel and you&#8217;ll see the following layout.<\/p><p>First, we&#8217;ll adjust image size \u2014 let&#8217;s make it 100%<\/p><p>After that, we should adjust typography both for title and description. Enable <i> Typography <\/i> settings (use Typography switch to make it possible to adjust typography properties) and \u00a0change color for the title (use #167ac6), font size (make it 13px) and font family (select Roboto from the list). We also need to adjust typography for description \u2014 we\u2019ll make the font size equal to 11px and line height equal to 1.3 em (30 percent more than the character height).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-v7qngvu elementor-widget elementor-widget-image\" data-id=\"v7qngvu\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image6-r4q75a5oxg8qvcvnd6pucxc7tm3ksnahm76tyawavg.png\" title=\"image6\" alt=\"image6\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-vgtbtbg elementor-widget elementor-widget-text-editor\" data-id=\"vgtbtbg\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Finally, you need to choose an image for the Image Box and fill the Title &amp; Description with a relevant information.<\/p><p>We can duplicate the properties of our<i> Image Box, and s<\/i> imply adjust the image and title &amp; description for each piece.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fjnqr6 elementor-widget elementor-widget-text-editor\" data-id=\"0fjnqr6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Example 2: Playing with column gaps<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5h42syq elementor-widget elementor-widget-text-editor\" data-id=\"5h42syq\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Finally, you need to choose an image for the Image Box and fill the Title &amp; Description with a relevant information.<\/p><p>We can duplicate the properties of our<i> Image Box, and s<\/i> imply adjust the image and title &amp; description for each piece.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bufjair elementor-widget elementor-widget-image\" data-id=\"bufjair\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image16-r4q6zjd75wdnx580wpbx4dit4uetr8hjhro0dfex7q.jpg\" title=\"image16\" alt=\"image16\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-wte9yfe elementor-widget elementor-widget-text-editor\" data-id=\"wte9yfe\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Pay attention to white space (or lack-there-of, as with <a href=\"http:\/\/www.jam3.com\/work\/\"> Jam3<\/a> in example below) because it influences how users browse. Ample space is slower, but with more attention placed on each item.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-o0fm5d0 elementor-widget elementor-widget-image\" data-id=\"o0fm5d0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"462\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=462\/blog\/wp-content\/uploads\/2017\/09\/image42-1024x591.jpg\" class=\"attachment-large size-large wp-image-5450\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2017\/09\/image42-1024x591.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2017\/09\/image42-300x173.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2017\/09\/image42-768x443.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1400\/blog\/wp-content\/uploads\/2017\/09\/image42.jpg 1400w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ohohhx6 elementor-widget elementor-widget-text-editor\" data-id=\"ohohhx6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In Elementor we can vary gaps using <i> Columns Gap <\/i> property. To demonstrate how it works we\u2019ll create a simple 3\u00d73 layout.<\/p><p>And fill it with images using <i> Image <\/i> widgets.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5on2yfz elementor-widget elementor-widget-image\" data-id=\"5on2yfz\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image25-r4q77mr60jgjw9grn7a9lbzpaaim1embxtwj57euo4.png\" title=\"image25\" alt=\"image25\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-911fqzc elementor-widget elementor-widget-text-editor\" data-id=\"911fqzc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Select layout properties and click <i> Column Gap<\/i> properties. Choose <i> No Gap<\/i> option to get the images close together.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-h8wo4q2 elementor-widget elementor-widget-text-editor\" data-id=\"h8wo4q2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Example 3: Using Columns to create Multi-column Sections<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-smo9uh1 elementor-widget elementor-widget-text-editor\" data-id=\"smo9uh1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Elementor includes a columns widget, the adds the ability to add another level of sub-columns. This widget makes the editor much more powerful, because you can create an intricate hierarchy and sub-division within the same section.<\/p><p>An example of this can be seen in the <a href=\"https:\/\/library.elementor.com\/landing-page-chiropractor\/\"> Chiropractic landing page template<\/a> , which includes a sub division of 2 columns inside the right column of the services section:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fcszq4a elementor-widget elementor-widget-image\" data-id=\"fcszq4a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image14-3-r4q76nz4zo4xyovaaa92j2rnb1a14ls9h1rkdyufyu.png\" title=\"image14-3\" alt=\"image14-3\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-n7iheh9 elementor-widget elementor-widget-text-editor\" data-id=\"n7iheh9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>How to achieve<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-jg0rpdz elementor-widget elementor-widget-text-editor\" data-id=\"jg0rpdz\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>Start with creating 2 column\u00a0layout:\u00a0one for the image and the other one for content.<\/li><li>The content area has a heading, for that we&#8217;ll use heading widget.<\/li><li>Below it, we drag the Columns widget.<\/li><li>We have 2 columns, inside which we place the Icon Box widget.<\/li><li>Let&#8217;s start with the first one. Select an icon, give it a title and description and customize the color and typography.<\/li><li>After completing the design for one icon box, we can duplicate the widget and get 2 icon boxes inside one column.<\/li><li>Now let&#8217;s duplicate the entire column, so we get 4 icon boxes with the same design.<\/li><li>Finally, all that&#8217;s left to do is choose a different icon for each box, as well as customize the title and description.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-rua5ydq elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"rua5ydq\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0lnhyf9 elementor-widget elementor-widget-heading\" data-id=\"0lnhyf9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-u6h6mnr elementor-widget elementor-widget-text-editor\" data-id=\"u6h6mnr\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As I mentioned earlier, content is what provides value for most websites. Whether it\u2019s a social feed, news site, web-based dashboard, it\u2019s why people are there \u2014 for the content! That\u2019s why it\u2019s critical to consider how we present our content. The layout we create has a huge impact on an entire journey a user takes along the website, it\u2019s one of the core aspects of what will be the user experience of your site.<\/p><p>But mastering creating layouts isn\u2019t an easy task. As a designer, you have to make a lot of decisions about where you place text or how you integrate visual and interactive elements into the flow of your design. That\u2019s why it\u2019s essential to have a powerful, flexible, and an easy to use tool that makes it possible to create different types of layouts without too much effort.<\/p><p>We recommend you check out the two other in-depth fundamental Elementor tutorials we published up to now:<\/p><ul><li><a href=\"https:\/\/elementor.com\/blog\/website-background-images\/\">Website background images<\/a><\/li><li><a href=\"https:\/\/elementor.com\/blog\/image-design\/\">Mastering image design<\/a><\/li><\/ul><p>These series of articles are the basic tutorials that are most crucial to learn how to properly design in Elementor.<\/p><p><strong>We want to know what you think about this tutorial. Let us know in the comments!<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Becoming an expert in <a href=\"https:\/\/elementor.com\/blog\/website-layout-ideas\/\">website layout<\/a> design is a crucial skill for any web designer. Luckily, acquiring this skill is much easier with a tool like Elementor.<\/p>\n","protected":false},"author":8813,"featured_media":4837,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79],"marketing_persona":[],"marketing_intent":[],"class_list":["post-4744","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Website Layout Design: Best Practices For Using Elementor<\/title>\n<meta name=\"description\" content=\"In this piece, we\u2019ll explore how to make a certain section stand out, convey dual importance and create an easy-to-scan layout of multiple related items.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/website-layout-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Layout Design: Best Practices For Using Elementor\" \/>\n<meta property=\"og:description\" content=\"In this piece, we\u2019ll explore how to make a certain section stand out, convey dual importance and create an easy-to-scan layout of multiple related items.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/website-layout-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-24T08:27:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2017\/08\/layout-fin2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nick Babich\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2017\/09\/layout-fin2.png\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nick Babich\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/website-layout-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-layout-design\/\"},\"author\":{\"name\":\"Nick Babich\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda\"},\"headline\":\"Website Layout Design: Best Practices For Creating Sections\",\"datePublished\":\"2017-08-24T08:27:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-layout-design\/\"},\"wordCount\":2297,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-layout-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/layout-fin2.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/website-layout-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/website-layout-design\/\",\"url\":\"https:\/\/elementor.com\/blog\/website-layout-design\/\",\"name\":\"Website Layout Design: Best Practices For Using Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-layout-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-layout-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/layout-fin2.png\",\"datePublished\":\"2017-08-24T08:27:13+00:00\",\"description\":\"In this piece, we\u2019ll explore how to make a certain section stand out, convey dual importance and create an easy-to-scan layout of multiple related items.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-layout-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/website-layout-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/website-layout-design\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/layout-fin2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/layout-fin2.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/website-layout-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Website Layout Design: Best Practices For Creating Sections\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda\",\"name\":\"Nick Babich\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g\",\"caption\":\"Nick Babich\"},\"description\":\"Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.\",\"sameAs\":[\"http:\/\/babich.biz\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/nickb\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Website Layout Design: Best Practices For Using Elementor","description":"In this piece, we\u2019ll explore how to make a certain section stand out, convey dual importance and create an easy-to-scan layout of multiple related items.","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:\/\/elementor.com\/blog\/website-layout-design\/","og_locale":"en_US","og_type":"article","og_title":"Website Layout Design: Best Practices For Using Elementor","og_description":"In this piece, we\u2019ll explore how to make a certain section stand out, convey dual importance and create an easy-to-scan layout of multiple related items.","og_url":"https:\/\/elementor.com\/blog\/website-layout-design\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2017-08-24T08:27:13+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2017\/08\/layout-fin2.png","type":"image\/png"}],"author":"Nick Babich","twitter_card":"summary_large_image","twitter_image":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2017\/09\/layout-fin2.png","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Nick Babich"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/website-layout-design\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/website-layout-design\/"},"author":{"name":"Nick Babich","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda"},"headline":"Website Layout Design: Best Practices For Creating Sections","datePublished":"2017-08-24T08:27:13+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/website-layout-design\/"},"wordCount":2297,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/website-layout-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/layout-fin2.png","keywords":["Build"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/website-layout-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/website-layout-design\/","url":"https:\/\/elementor.com\/blog\/website-layout-design\/","name":"Website Layout Design: Best Practices For Using Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/website-layout-design\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/website-layout-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/layout-fin2.png","datePublished":"2017-08-24T08:27:13+00:00","description":"In this piece, we\u2019ll explore how to make a certain section stand out, convey dual importance and create an easy-to-scan layout of multiple related items.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/website-layout-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/website-layout-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/website-layout-design\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/layout-fin2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/08\/layout-fin2.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/website-layout-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"Website Layout Design: Best Practices For Creating Sections"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda","name":"Nick Babich","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g","caption":"Nick Babich"},"description":"Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.","sameAs":["http:\/\/babich.biz"],"url":"https:\/\/elementor.com\/blog\/author\/nickb\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/4744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/8813"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=4744"}],"version-history":[{"count":8,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/4744\/revisions"}],"predecessor-version":[{"id":93829,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/4744\/revisions\/93829"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/4837"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=4744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=4744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=4744"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=4744"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=4744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}