{"id":379,"date":"2021-12-30T20:17:48","date_gmt":"2021-12-30T20:17:48","guid":{"rendered":"https:\/\/enlitly.com\/blog\/?post_type=docs&#038;p=379"},"modified":"2022-03-25T22:44:26","modified_gmt":"2022-03-25T22:44:26","slug":"working-with-element-blocks","status":"publish","type":"docs","link":"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/","title":{"rendered":"Working with Element blocks"},"content":{"rendered":"\n<p>In this article, we will cover how to use element blocks while building or editing a site in Enlitly.<\/p>\n\n\n\n<p>Click on &#8216;All block&#8217;-<img loading=\"lazy\" width=\"51\" height=\"38\" class=\"wp-image-421\" style=\"width: 51px;\" src=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-54.png\" alt=\"\"> or click on <img loading=\"lazy\" width=\"30\" height=\"24\" class=\"wp-image-422\" style=\"width: 30px;\" src=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-55.png\" alt=\"\"> to add a new block,<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"975\" height=\"289\" src=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-57.png\" alt=\"\" class=\"wp-image-424\" srcset=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-57.png 975w, https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-57-300x89.png 300w, https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-57-768x228.png 768w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<p>Select the block tagged as &#8220;Element&#8221;. Drag it onto the page. Wait till it gets added on the main page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"973\" height=\"308\" src=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-58.png\" alt=\"\" class=\"wp-image-425\" srcset=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-58.png 973w, https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-58-300x95.png 300w, https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-58-768x243.png 768w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<p>Once the block is added, you have the ability to add \u2018row\u2019 as shown below,<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"973\" height=\"55\" src=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-59.png\" alt=\"\" class=\"wp-image-426\" srcset=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-59.png 973w, https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-59-300x17.png 300w, https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-59-768x43.png 768w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<p>Red color depicts control for the row.  By default, the system adds one column to along with the row. Once the row is added to the block, click on \u2018add column\u2019 to add more columns to the rows.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"973\" height=\"75\" src=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-60.png\" alt=\"\" class=\"wp-image-427\" srcset=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-60.png 973w, https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-60-300x23.png 300w, https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-60-768x59.png 768w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<p>Blue color depicts control for the column. You can add 6 columns in a row.<\/p>\n\n\n\n<p>Once you decide the number of columns to add, click on \u2018Add elements\u2019 to add elements to the column. This will open a list of elements that you can add to the column.<\/p>\n\n\n\n<p>From the list of available elements, drag the one that you want. A red line on the page will indicate the location where you are about to drop the element.<\/p>\n\n\n\n<p> In this case, we will add two columns &#8211; one column with image and the other with text,<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"972\" height=\"81\" src=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-61.png\" alt=\"\" class=\"wp-image-428\" srcset=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-61.png 972w, https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-61-300x25.png 300w, https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-61-768x64.png 768w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<p>Once elements are added, you can modify elements according to your need. Green color outline depicts elements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"975\" height=\"276\" src=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-62.png\" alt=\"\" class=\"wp-image-429\" srcset=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-62.png 975w, https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-62-300x85.png 300w, https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-62-768x217.png 768w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will cover how to use element blocks while building or editing a site in Enlitly. Click on &lsquo;All block&rsquo;- or click on to add a new block, Select the block tagged as &ldquo;Element&rdquo;. Drag it onto the page. Wait till it gets added on the main page. Once the block is &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Working with Element blocks&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[13],"doc_tag":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Working with Element blocks - Enlitly<\/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:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Working with Element blocks - Enlitly\" \/>\n<meta property=\"og:description\" content=\"In this article, we will cover how to use element blocks while building or editing a site in Enlitly. Click on &lsquo;All block&rsquo;- or click on to add a new block, Select the block tagged as &ldquo;Element&rdquo;. Drag it onto the page. Wait till it gets added on the main page. Once the block is &hellip; Continue reading &quot;Working with Element blocks&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"Enlitly\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-25T22:44:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-54.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/enlitly.com\/blog\/#website\",\"url\":\"https:\/\/enlitly.com\/blog\/\",\"name\":\"Enlitly\",\"description\":\"Enlighten Minds with Enlitly!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/enlitly.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-54.png\",\"contentUrl\":\"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-54.png\",\"width\":51,\"height\":38},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/#webpage\",\"url\":\"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/\",\"name\":\"Working with Element blocks - Enlitly\",\"isPartOf\":{\"@id\":\"https:\/\/enlitly.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/#primaryimage\"},\"datePublished\":\"2021-12-30T20:17:48+00:00\",\"dateModified\":\"2022-03-25T22:44:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/enlitly.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Help Center\",\"item\":\"https:\/\/enlitly.com\/blog\/docs\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Working with Element blocks\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Working with Element blocks - Enlitly","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:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/","og_locale":"en_US","og_type":"article","og_title":"Working with Element blocks - Enlitly","og_description":"In this article, we will cover how to use element blocks while building or editing a site in Enlitly. Click on &lsquo;All block&rsquo;- or click on to add a new block, Select the block tagged as &ldquo;Element&rdquo;. Drag it onto the page. Wait till it gets added on the main page. Once the block is &hellip; Continue reading \"Working with Element blocks\"","og_url":"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/","og_site_name":"Enlitly","article_modified_time":"2022-03-25T22:44:26+00:00","og_image":[{"url":"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-54.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/enlitly.com\/blog\/#website","url":"https:\/\/enlitly.com\/blog\/","name":"Enlitly","description":"Enlighten Minds with Enlitly!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/enlitly.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/#primaryimage","inLanguage":"en-US","url":"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-54.png","contentUrl":"https:\/\/enlitly.com\/blog\/wp-content\/uploads\/2021\/12\/image-54.png","width":51,"height":38},{"@type":"WebPage","@id":"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/#webpage","url":"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/","name":"Working with Element blocks - Enlitly","isPartOf":{"@id":"https:\/\/enlitly.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/#primaryimage"},"datePublished":"2021-12-30T20:17:48+00:00","dateModified":"2022-03-25T22:44:26+00:00","breadcrumb":{"@id":"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/enlitly.com\/blog\/docs\/working-with-element-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/enlitly.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Help Center","item":"https:\/\/enlitly.com\/blog\/docs\/"},{"@type":"ListItem","position":3,"name":"Working with Element blocks"}]}]}},"_links":{"self":[{"href":"https:\/\/enlitly.com\/blog\/wp-json\/wp\/v2\/docs\/379"}],"collection":[{"href":"https:\/\/enlitly.com\/blog\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/enlitly.com\/blog\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/enlitly.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/enlitly.com\/blog\/wp-json\/wp\/v2\/comments?post=379"}],"version-history":[{"count":4,"href":"https:\/\/enlitly.com\/blog\/wp-json\/wp\/v2\/docs\/379\/revisions"}],"predecessor-version":[{"id":508,"href":"https:\/\/enlitly.com\/blog\/wp-json\/wp\/v2\/docs\/379\/revisions\/508"}],"wp:attachment":[{"href":"https:\/\/enlitly.com\/blog\/wp-json\/wp\/v2\/media?parent=379"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/enlitly.com\/blog\/wp-json\/wp\/v2\/doc_category?post=379"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/enlitly.com\/blog\/wp-json\/wp\/v2\/doc_tag?post=379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}