{"id":18045,"date":"2024-01-10T09:14:17","date_gmt":"2024-01-10T02:14:17","guid":{"rendered":"https:\/\/www.makewebeasy.com\/en\/blog\/?post_type=manual-4&#038;p=18045"},"modified":"2024-01-10T09:14:17","modified_gmt":"2024-01-10T02:14:17","slug":"add-section","status":"publish","type":"manual-4","link":"https:\/\/www.makewebeasy.com\/en\/blog\/manual-4\/add-section\/","title":{"rendered":"Add Section"},"content":{"rendered":"<p><b>Content section\u00a0<\/b>is the section that displays information about each type of content. The content will be changed according to the page or menu. In MakeWebEasy system, you will be given a variety of formats to choose from. You can choose the layout of text, images, or videos yourself. There are two methods for adding website content.<\/p>\n<ul>\n<li aria-level=\"1\">How to add a blank section<\/li>\n<li aria-level=\"1\">How to add a preset section<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><b>How to add a blank section<\/b><\/p>\n<ol>\n<li><span class=\"\">Click on the button <\/span><b><span class=\"\">\u201c<span style=\"color: #00ffff;\">Add Section<\/span>\u201d<\/span><\/b> . <span class=\"\">Users can press the Add Section button in 2 places: the Add Section button on the side or on the Render, the blue Add Section button<\/span><br \/>\n<img loading=\"lazy\" class=\"alignnone size-medium wp-image-21795 lazyautosizes lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E1-1-620x280.jpg\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-620x280.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-920x415.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1.jpg 1269w\" alt=\"\" width=\"620\" height=\"280\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-620x280.jpg\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-620x280.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-920x415.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1.jpg 1269w\" data-sizes=\"auto\" \/><\/li>\n<\/ol>\n<p>2. Select <b>\u201c<span style=\"color: #00ffff;\">Blank Section<\/span>\u201d<br \/>\n<img loading=\"lazy\" class=\"alignnone size-medium wp-image-21794 lazyautosizes lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E2-620x277.png\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e2-620x277.png 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e2-920x410.png 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e2.png 1269w\" alt=\"\" width=\"620\" height=\"277\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e2-620x277.png\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e2-620x277.png 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e2-920x410.png 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e2.png 1269w\" data-sizes=\"auto\" \/><\/b><\/p>\n<p>3. Select the desired layout<br \/>\n<img loading=\"lazy\" class=\"alignnone wp-image-21793 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E3.png\" alt=\"\" width=\"619\" height=\"276\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e3.png\" \/><\/p>\n<p>4. The system will allow users to add widgets to customize website content. How to add each type of widget can be found at <a href=\"https:\/\/www.makewebeasy.com\/en\/blog\/manual-4\/add-widget\/\">Add Widget<\/a>.<br \/>\n<img loading=\"lazy\" class=\"alignnone size-medium wp-image-22698 lazyautosizes lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.40.49-620x312.jpg\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.40.49-620x312.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.40.49-920x462.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.40.49-1536x772.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.40.49.jpg 1920w\" alt=\"\" width=\"620\" height=\"312\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.40.49-620x312.jpg\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.40.49-620x312.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.40.49-920x462.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.40.49-1536x772.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.40.49.jpg 1920w\" data-sizes=\"auto\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><b>How to add a preset section<\/b><\/p>\n<p><b>Example of how to add a content section (<\/b><b>Text &amp; image<\/b><b>)<br \/>\n<\/b>1. Click on Button<b>\u00a0\u201c<span style=\"color: #00ffff;\">Add Section<\/span>\u201d. <\/b>\u00a0Users can press the Add Section button in 2 places: the Add Section button on the side or on the Render, the blue Add Section button<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-21795 lazyautosizes ls-is-cached lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E1-1-620x280.jpg\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-620x280.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-920x415.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1.jpg 1269w\" alt=\"\" width=\"620\" height=\"280\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-620x280.jpg\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-620x280.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-920x415.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1.jpg 1269w\" data-sizes=\"auto\" \/><\/p>\n<p>2. Select <b>\u201c<\/b><b><span style=\"color: #00ffff;\">Text &amp; image<\/span>&#8220;<\/b><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-22702 lazyautosizes lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.44.16-620x311.jpg\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.44.16-620x311.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.44.16-920x462.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.44.16-1536x771.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.44.16.jpg 1920w\" alt=\"\" width=\"620\" height=\"311\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.44.16-620x311.jpg\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.44.16-620x311.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.44.16-920x462.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.44.16-1536x771.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.44.16.jpg 1920w\" data-sizes=\"auto\" \/><\/p>\n<p>3. Select the desired Preset.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-22703 lazyautosizes lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.02-620x311.jpg\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.02-620x311.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.02-920x461.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.02-1536x770.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.02.jpg 1920w\" alt=\"\" width=\"620\" height=\"311\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.02-620x311.jpg\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.02-620x311.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.02-920x461.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.02-1536x770.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.02.jpg 1920w\" data-sizes=\"auto\" \/><\/p>\n<p>4. The system displays the selected Preset. Users can further customize images and text.<br \/>\n<img loading=\"lazy\" class=\"alignnone size-medium wp-image-22705 lazyautosizes lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-620x311.jpg\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-620x311.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-920x462.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-1536x771.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45.jpg 1919w\" alt=\"\" width=\"620\" height=\"311\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-620x311.jpg\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-620x311.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-920x462.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-1536x771.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45.jpg 1919w\" data-sizes=\"auto\" \/><\/p>\n<p><b>Example of how to add a product section<\/b><\/p>\n<p>1.Click on the button<b>\u00a0\u201c<span style=\"color: #00ffff;\">Add Section<\/span>\u201d<\/b>\u00a0Users can press the Add Section button in 2 places: the Add Section button on the side Beside or on the Render, the blue Add Section button<br \/>\n<img loading=\"lazy\" class=\"alignnone wp-image-21787 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E9.png\" alt=\"\" width=\"596\" height=\"269\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e9.png\" \/><\/p>\n<p>2. Select <b>\u201c<span style=\"color: #00ffff;\">Product<\/span>\u201d<\/b><b><br \/>\n<img loading=\"lazy\" class=\"alignnone wp-image-21786 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E10.png\" alt=\"\" width=\"592\" height=\"264\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e10.png\" \/><br \/>\n<\/b><\/p>\n<p>3. Select the desired Preset.<br \/>\n<img loading=\"lazy\" class=\"alignnone wp-image-21813 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E51.png\" alt=\"\" width=\"581\" height=\"259\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e51.png\" \/><\/p>\n<p>4. The system pulls out the products and displays them according to the selected format.<br \/>\n<img loading=\"lazy\" class=\"alignnone wp-image-21809 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E50.png\" alt=\"\" width=\"571\" height=\"239\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e50.png\" \/><\/p>\n<p>5.In case of clicking the button\u00a0<b>\u201c<span style=\"color: #00ffff;\">Add Section<\/span>\u201d &gt; \u201c<span style=\"color: #00ffff;\">Product<\/span>\u201d <\/b>and there is no product information. The system displays the following message image for users to add products<br \/>\n<img loading=\"lazy\" class=\"alignnone wp-image-21785 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E11.png\" alt=\"\" width=\"570\" height=\"182\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e11.png\" \/><\/p>\n<p><b>How to set up and customize the content section (Add Section)<\/b><\/p>\n<p>When the user has finished adding content to the website, Users can further customize portions of website content. The customization of content is divided into 5 parts as follows:<\/p>\n<ul>\n<li aria-level=\"1\">Stretch to full width<\/li>\n<li aria-level=\"1\">Section Background<\/li>\n<li aria-level=\"1\">Content overlap<\/li>\n<li aria-level=\"1\">Section divider<\/li>\n<li aria-level=\"1\">Section margin<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-21784 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E12-1.png\" alt=\"\" width=\"582\" height=\"266\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e12-1.png\" \/><\/p>\n<p><b>1. Customize the Stretch to full width<\/b><\/p>\n<p>1. Click\u00a0<b>\u201c<span style=\"color: #00ffff;\">Section<\/span>\u201d\u00a0\u00a0<\/b><\/p>\n<p>2. Go to <b>\u201c<\/b><b><span style=\"color: #00ffff;\">Content Layout<\/span>&#8221;<br \/>\n<\/b>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<img loading=\"lazy\" class=\"alignnone size-full wp-image-21819 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E52.png\" alt=\"\" width=\"351\" height=\"390\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e52.png\" \/><br \/>\n3. Turn on <b>\u201c<span style=\"color: #00ffff;\">Stretch to full width<\/span>\u201d<br \/>\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-21818 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E53.png\" alt=\"\" width=\"362\" height=\"476\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e53.png\" \/><br \/>\n<\/b>\u00a0 \u00a0 \u00a0 4. Users can further adjust the side distance<br \/>\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-21820 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E54.png\" alt=\"\" width=\"362\" height=\"481\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e54.png\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21779 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E17.png\" alt=\"\" width=\"554\" height=\"672\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e17.png\" \/><\/p>\n<p><i>Example of display when Stretch to full width is turned on<\/i><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21778 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E18-1.png\" alt=\"\" width=\"554\" height=\"672\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e18-1.png\" \/><\/p>\n<p><i>Example of display when Stretch to full width is turned off<\/i><\/p>\n<p><i><br \/>\n<\/i><b>2. Customize Section Background <\/b>in 5 formats as follows:<\/p>\n<p><b>2.1<\/b>\u00a0<b>Transparent<\/b>\u00a0Based mainly on the website&#8217;s background<\/p>\n<p><b>\u00a0\u00a0\u00a0\u00a02.2\u00a0<\/b><b>Color<\/b>\u00a0Color can be customized as desired\u00a0\u00a0<b><\/b><\/p>\n<p><b>2.3\u00a0 Gradient <\/b>you\u00a0can choose to adjust the color from dark to light. and adjust the gradient position<\/p>\n<p><b>2.4 Image<\/b>\u00a0You can adjust the image scale, position, and color.<\/p>\n<p><b>\u00a02.5<\/b>\u00a0<b>Youtube<\/b>\u00a0Can paste the url link of the clip to play in the background like Aotuplay<\/p>\n<p><b>Example of Section Background Color<\/b><\/p>\n<p>1. Click\u00a0<b>\u201c<span style=\"color: #00ffff;\">Section<\/span>\u201d<\/b><\/p>\n<p>2. Go to\u00a0<b>\u201c<span style=\"color: #00ffff;\">Section Background<\/span>\u201d<\/b><\/p>\n<p><b><img loading=\"lazy\" class=\"alignnone size-full wp-image-21847 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E55.png\" alt=\"\" width=\"361\" height=\"414\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e55.png\" \/><br \/>\n3. Select the background color for the pattern \u201c<span style=\"color: #00ffff;\">Color<\/span>\u201d<br \/>\n<\/b><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21846 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E56.png\" alt=\"\" width=\"361\" height=\"463\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e56.png\" \/><\/p>\n<p>4. Click on <b>\u201c<span style=\"color: #00ffff;\">Color Box<\/span>\u201d\u00a0<\/b>to select the desired background color<b><\/b><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21845 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E57.png\" alt=\"\" width=\"375\" height=\"468\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e57.png\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21773 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E23.png\" alt=\"\" width=\"554\" height=\"211\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e23.png\" \/><\/p>\n<p><i>Example display of changing the background color of a section<\/i><\/p>\n<p><i><br \/>\n<\/i><b>3. Adjust Content overlap<\/b>\u00a0from bottom to top. To add display features to the page<\/p>\n<p>1. Click\u00a0<b>\u201c<span style=\"color: #00ffff;\">Section<\/span>\u201d<\/b><\/p>\n<p>2. Go to<b> \u201c<\/b><b><span style=\"color: #00ffff;\">Content overlap<\/span>&#8220;<\/b><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21848 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E58.png\" alt=\"\" width=\"365\" height=\"557\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e58.png\" \/><\/p>\n<p>3. Resize\u00a0<b>\u201c<span style=\"color: #00ffff;\">Overlap Previous Section<\/span>\u201d <\/b>as needed<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21769 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E27-1.png\" alt=\"\" width=\"554\" height=\"328\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e27-1.png\" \/><\/p>\n<p><i>\u00a0\u00a0\u201dExample of displaying overlapping content of sections<\/i><\/p>\n<p>&nbsp;<\/p>\n<p><b>4. Customize Section divider<\/b><\/p>\n<p>1. Click\u00a0<b>\u201c<span style=\"color: #00ffff;\">Section<\/span>\u201d<\/b><\/p>\n<p>2. Go to <b>\u201c<span style=\"color: #00ffff;\">Section divider<\/span>\u201d<\/b> to adjust the upper or lower segmentation. and can choose the format Height resizing and colors as desired<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21767 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E29.png\" alt=\"\" width=\"239\" height=\"417\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e29.png\" \/><img loading=\"lazy\" class=\"size-medium wp-image-22705 aligncenter lazyautosizes ls-is-cached lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-620x311.jpg\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-620x311.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-920x462.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-1536x771.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45.jpg 1919w\" alt=\"\" width=\"620\" height=\"311\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-620x311.jpg\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-620x311.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-920x462.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-1536x771.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45.jpg 1919w\" data-sizes=\"auto\" \/><\/p>\n<p><i>Example display of customizing the shape of a section divider<\/i><\/p>\n<p><b>5. Adjust Section margin<\/b>\u00a0You can adjust the distance between the margins between the sections, both top and bottom. From the example you can see. There will be a blue bar to indicate the specified margin distance.<\/p>\n<p>1. Click\u00a0<b>\u201c<span style=\"color: #00ffff;\">Section<\/span>\u201d<\/b><\/p>\n<p>2. Go to\u00a0\u201c<b><span style=\"color: #00ffff;\">Section margin<\/span>\u201d<\/b>\u00a0To adjust the margin of the section as per the need. By default, the system has a top margin of 40 and a bottom margin of 40.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-22707 ls-is-cached lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.49.56.png\" alt=\"\" width=\"340\" height=\"115\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.49.56.png\" \/><\/p>\n<p><img loading=\"lazy\" class=\"size-medium wp-image-22705 aligncenter lazyautosizes ls-is-cached lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-620x311.jpg\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-620x311.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-920x462.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-1536x771.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45.jpg 1919w\" alt=\"\" width=\"620\" height=\"311\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-620x311.jpg\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-620x311.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-920x462.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45-1536x771.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.45.45.jpg 1919w\" data-sizes=\"auto\" \/><\/p>\n<p><i>Example of default section margins<\/i><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-22708 lazyautosizes lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.52.01-620x311.jpg\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.52.01-620x311.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.52.01-920x462.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.52.01-1536x771.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.52.01.jpg 1917w\" alt=\"\" width=\"620\" height=\"311\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.52.01-620x311.jpg\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.52.01-620x311.jpg 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.52.01-920x462.jpg 920w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.52.01-1536x771.jpg 1536w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/Screen-Shot-2566-11-16-at-10.52.01.jpg 1917w\" data-sizes=\"auto\" \/><\/p>\n<p><i>Example of customizing section margins<\/i><\/p>\n<p><b>How to Customize Grid &amp; Cell<br \/>\n<\/b>1. Click on <b>\u201c<span style=\"color: #00ffff;\">Grid<\/span>\u201d<\/b>\u00a0that you want<\/p>\n<p>2. The system displays Site Settings, customizing grid and cell sections in all 4 sections as follows.<\/p>\n<ul>\n<li aria-level=\"1\">Content Alignment<\/li>\n<li aria-level=\"1\">Cell Background<\/li>\n<li aria-level=\"1\">Cell Padding<\/li>\n<li aria-level=\"1\">Grid Settings<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21761 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E35.png\" alt=\"\" width=\"554\" height=\"235\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e35.png\" \/><\/p>\n<p><b>1. Content Alignment <\/b>There are 2 parts that can be set: Vertical Align and Horizontal Align. Able to position conten tin the cell as desired<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21873 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E60.png\" alt=\"\" width=\"314\" height=\"516\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e60.png\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-21759 lazyautosizes lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E37-620x314.png\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e37-620x314.png 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e37.png 692w\" alt=\"\" width=\"620\" height=\"314\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e37-620x314.png\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e37-620x314.png 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e37.png 692w\" data-sizes=\"auto\" \/><\/p>\n<p><i>Example of displaying top-aligned content within cells<\/i><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-21758 lazyautosizes lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E38-620x311.png\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e38-620x311.png 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e38.png 692w\" alt=\"\" width=\"620\" height=\"311\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e38-620x311.png\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e38-620x311.png 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e38.png 692w\" data-sizes=\"auto\" \/><\/p>\n<p><i>Example of displaying centered content alignment within cells<\/i><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-21757 lazyautosizes lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E39-620x307.png\" sizes=\"620px\" srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e39-620x307.png 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e39.png 692w\" alt=\"\" width=\"620\" height=\"307\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e39-620x307.png\" data-srcset=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e39-620x307.png 620w, https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e39.png 692w\" data-sizes=\"auto\" \/><\/p>\n<p><i>Example of displaying the content positioned within the cell at the bottom.<\/i><\/p>\n<p><i><br \/>\n<\/i><b>2. Cell Background <\/b>can be selected in 4 formats<\/p>\n<ul>\n<li aria-level=\"1\">Transparent is based mainly on the background of the website.<\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\">Color can be customized as desired.<\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\">Gradient can choose to adjust the color from dark to light. and can adjust the gradient position<\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\">Image scale, position, and color can be adjusted.<\/li>\n<\/ul>\n<p><b>Example of how to adjust cell background color format\u00a0<\/b><b>\u201cColor\u201d\u00a0<\/b><\/p>\n<p>1. Click\u00a0<b>\u201c<span style=\"color: #00ffff;\">Grid<\/span>\u201d\u2019<\/b><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21756 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E40.png\" alt=\"\" width=\"554\" height=\"200\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e40.png\" \/><\/p>\n<p>2. Choose format <b>\u201c<span style=\"color: #00ffff;\">Color<\/span>\u201d\u00a0<\/b><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21755 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E41.png\" alt=\"\" width=\"265\" height=\"463\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e41.png\" \/><\/p>\n<p>3. Click on<b>\u00a0\u201c<span style=\"color: #00ffff;\">Color Box<\/span>\u201d<\/b><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21754 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E42.png\" alt=\"\" width=\"554\" height=\"496\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e42.png\" \/><\/p>\n<p>4. Can adjust<b> \u201c<span style=\"color: #00ffff;\">Border Radius<\/span><\/b>&#8221; according to your needs<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21753 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E43.png\" alt=\"\" width=\"302\" height=\"621\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e43.png\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21752 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E44.png\" alt=\"\" width=\"554\" height=\"287\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e44.png\" \/><\/p>\n<p><i>Example display of adjusting cell background color<\/i><\/p>\n<p><b>3. Adjust Cell Padding <\/b>You can set the distance of the edges, top, right, bottom, and left, by specifying the number of spacing within the cell as needed or by placing the mouse on the dotted line. You can also click and hold and drag up and down as desired.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21751 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E45.png\" alt=\"\" width=\"302\" height=\"441\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e45.png\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21750 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E46.png\" alt=\"\" width=\"554\" height=\"165\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e46.png\" \/><\/p>\n<p><i>Example of default cell spacing<\/i><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21749 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E47.png\" alt=\"\" width=\"554\" height=\"163\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e47.png\" \/><\/p>\n<p><i>Example of customizing cell spacing<\/i><\/p>\n<p>&nbsp;<\/p>\n<p><b>4. Customize Grid Settings <\/b>There will be a section between cells and the distance of the grid. We can set the height of the top and bottom sections\u00a0<b>\u00a0<\/b><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21748 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E48.png\" alt=\"\" width=\"287\" height=\"437\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e48.png\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-21747 lazyloaded\" src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E49.png\" alt=\"\" width=\"554\" height=\"280\" data-src=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e49.png\" \/><\/p>\n<p><i>Example of customizing Cell Gap<\/i><\/p>\n","protected":false},"featured_media":0,"template":"","manual_category_v4":[1796],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v14.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Add Section - MakeWebaEasy Blog<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.makewebeasy.com\/en\/blog\/manual-4\/add-section\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Add Section - MakeWebaEasy Blog\" \/>\n<meta name=\"twitter:description\" content=\"Content section\u00a0is the section that displays information about each type of content. The content will be changed according to the page or menu. In MakeWebEasy system, you will be given a variety of formats to choose from. You can choose the layout of text, images, or videos yourself. There are two methods for adding website [&hellip;]\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.makewebeasy.com\/th\/blog\/wp-content\/uploads\/2023\/07\/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E1-1-620x280.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@makewebeasy\" \/>\n<meta name=\"twitter:site\" content=\"@makewebeasy\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual-4\/18045"}],"collection":[{"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual-4"}],"about":[{"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/types\/manual-4"}],"wp:attachment":[{"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/media?parent=18045"}],"wp:term":[{"taxonomy":"manual_category_v4","embeddable":true,"href":"https:\/\/www.makewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual_category_v4?post=18045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}