{"id":19428,"date":"2023-11-16T09:56:22","date_gmt":"2023-11-16T02:56:22","guid":{"rendered":"https:\/\/www.makewebeasy.com\/id\/blog\/?post_type=manual-4&#038;p=19428"},"modified":"2023-11-16T12:20:24","modified_gmt":"2023-11-16T05:20:24","slug":"tambah-bagian-section","status":"publish","type":"manual-4","link":"https:\/\/www.makewebeasy.com\/id\/blog\/manual-4\/tambah-bagian-section\/","title":{"rendered":"Tambah Bagian (Section)"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Section adalah bagian yang menampilkan informasi tentang setiap jenis konten. Section berubah sesuai dengan halaman atau menu. Sistem MakeWebEasy menawarkan beragam format untuk dipilih. Anda dapat memilih sendiri layout teks, gambar, atau video.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">Ada dua metode untuk menambahkan section situs web:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Cara tambah section blank<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Cara menambahkan section preset<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400\">Cara Tambah Section Blank<\/span><\/h3>\n<p><span style=\"font-weight: 400\">1. Klik tombol \u201c<\/span><strong><span style=\"color: #00ffff\">Add Section<\/span><\/strong><span style=\"font-weight: 400\">\u201d, Pengguna dapat menekan tombol Add Section di 2 tempat: tombol Add Section di samping atau Render, dan tombol Add Section berwarna biru.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19429\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-920x415-2.jpg\" alt=\"\" width=\"920\" height=\"415\" srcset=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-920x415-2.jpg 920w, https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-920x415-2-620x280.jpg 620w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/>2. Klik \u201c<strong><span style=\"color: #00ffff\">Blank<\/span><\/strong>\u201d<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19430\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e2-920x410-1.png\" alt=\"\" width=\"920\" height=\"410\" srcset=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e2-920x410-1.png 920w, https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e2-920x410-1-620x276.png 620w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/>3. Pilih layout yang diinginkan<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19431 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e3.png\" alt=\"\" width=\"554\" height=\"247\" \/>4. Setelah itu, pengguna dapat menambahkan widget untuk menyesuaikan section situs web. Cara menambahkan setiap jenis widget dapat ditemukan di <span style=\"color: #00ffff\">Add Widget<\/span>.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400\">Cara menambahkan section <strong>Preset<\/strong> ke bagian yang telah ditentukan sistem. Ikuti langkah dibawah:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><b>Contoh Cara Menambahkan Teks &amp; Gambar<\/b><\/p>\n<p><span style=\"font-weight: 400\">1. Klik pada tombol \u201c<\/span><strong><span style=\"color: #00ffff\">Add Section<\/span><\/strong><span style=\"font-weight: 400\">\u201d, pengguna dapat melakukan 2 tombol Add Section, yaitu tombol Add Section di sisi atau tombol Render, dan tombol Add Section berwarna biru.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19468\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-920x415-1-1.jpg\" alt=\"\" width=\"920\" height=\"415\" srcset=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-920x415-1-1.jpg 920w, https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-920x415-1-1-620x280.jpg 620w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/p>\n<p>2. Klik \u201c<span style=\"color: #00ffff\"><strong>Text &amp; Image<\/strong><\/span>\u201d<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19469\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.44.16-920x462-1.jpg\" alt=\"\" width=\"920\" height=\"462\" srcset=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.44.16-920x462-1.jpg 920w, https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.44.16-920x462-1-620x311.jpg 620w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/p>\n<p>3. Pilih Preset yang diinginkan<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19470\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.45.02-920x461-1.jpg\" alt=\"\" width=\"920\" height=\"461\" srcset=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.45.02-920x461-1.jpg 920w, https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.45.02-920x461-1-620x311.jpg 620w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/p>\n<p>4. Sistem menampilkan Preset yang dipilih. Pengguna dapat menyesuaikan lebih lanjut gambar dan teks.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19471\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.45.45-920x462-1.jpg\" alt=\"\" width=\"920\" height=\"462\" srcset=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.45.45-920x462-1.jpg 920w, https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.45.45-920x462-1-620x311.jpg 620w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><b>Cara Menambahkan Section Produk<\/b><\/p>\n<p>1. Klik tombol \u201c<strong><span style=\"color: #00ffff\">Add Section<\/span><\/strong>\u201d, Pengguna dapat menekan tombol Add Section di dua tempat: tombol Add Section di samping atau Render, dan tombol Add Action berwarna biru.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19435 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e9.png\" alt=\"\" width=\"554\" height=\"250\" \/><br \/>\n2. Pilih \u201c<strong><span style=\"color: #00ffff\">Product<\/span><\/strong>\u201d<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19436 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e10.png\" alt=\"\" width=\"554\" height=\"247\" \/><br \/>\n3. Pilih Preset yang diinginkan.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19437 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e51.png\" alt=\"\" width=\"554\" height=\"247\" \/><br \/>\n4. Sistem mengeluarkan produk dan menampilkannya sesuai format yang dipilih.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19438 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e50.png\" alt=\"\" width=\"554\" height=\"232\" \/><br \/>\n5. Jika tombol \u201c<strong><span style=\"color: #00ffff\">Add Section\u201d &gt; \u201cProduct<\/span><\/strong>\u201d diklik dan tidak ada informasi produk, sistem akan menampilkan pesan seperti berikut untuk menambahkan produk.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19439 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e11.png\" alt=\"\" width=\"554\" height=\"177\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><b>Cara Mengatur Section<\/b><\/p>\n<p><span style=\"font-weight: 400\">Ketika pengguna telah selesai menambahkan section ke website. Pengguna selanjutnya dapat menyesuaikan section tersebut. Kustomisasi section dibagi menjadi 5 bagian sebagai berikut.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Stretch to full width<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Section Background<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Content overlap<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Section divider<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Section margin<\/span><\/li>\n<\/ul>\n<p><strong>1. Sesuaikan format section (Stretch to full width)<\/strong><\/p>\n<p>1. Klik &#8220;<strong><span style=\"color: #00ffff\">Section<\/span><\/strong>&#8221;<br \/>\n2. Buka &#8220;<b><span style=\"color: #00ffff\">Content Layout<\/span>&#8220;<\/b><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19442 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e52.png\" alt=\"\" width=\"351\" height=\"390\" \/><\/p>\n<p>3. Nyalakan toggle &#8220;<b><span style=\"color: #00ffff\">Stretch to full width<\/span><\/b><span style=\"color: #00ffff\"><span style=\"color: #000000\">&#8220;<\/span><\/span><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-19443 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e53.png\" alt=\"\" width=\"362\" height=\"476\" \/><\/p>\n<p>4. Pengguna selanjutnya dapat mengatur jarak pada sisi-sisinya.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19444 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e54.png\" alt=\"\" width=\"362\" height=\"481\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19445 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e17.png\" alt=\"\" width=\"554\" height=\"672\" \/><\/p>\n<p style=\"text-align: center\"><span style=\"font-size: 10pt\">Contoh tampilan <i>Stretch to full width<\/i><\/span><\/p>\n<p>&nbsp;<\/p>\n<p>2. <strong>Sesuaikan latar belakang bagian (Section Background)<\/strong> dalam 5 format yang tersedia sebagai berikut.<\/p>\n<ul style=\"list-style-type: circle\">\n<li style=\"text-align: left\"><strong>Transparent <\/strong>didasarkan pada latar belakang website.<\/li>\n<li style=\"text-align: left\"><strong>Color<\/strong>\u00a0dapat menyesuaikan warna sesuai keinginan.<\/li>\n<li style=\"text-align: left\"><strong>Gradient<\/strong>\u00a0dapat memilih untuk mengatur warna dari gelap ke terang. dan dapat mengatur posisi gradien<\/li>\n<li style=\"text-align: left\"><strong>Image <\/strong>dapat sesuaikan skala gambar, posisi, dan warna dapat disesuaikan.<\/li>\n<li style=\"text-align: left\"><strong>Youtube<\/strong>\u00a0dapat menempelkan tautan url klip untuk diputar di latar belakang seperti Aotuplay.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Contoh penyesuaian warna section background<\/strong><\/p>\n<p>1. Klik pada \u201c<strong><span style=\"color: #00ffff\">Section<\/span><\/strong>\u201d<\/p>\n<p>2. Buka &#8220;<b><span style=\"color: #00ffff\">Section Background<\/span>&#8220;<\/b><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19446 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e55.png\" alt=\"\" width=\"361\" height=\"414\" \/><\/p>\n<p>3. Pilih jenis latar belakang &#8220;<span style=\"color: #00ffff\"><strong>Color<\/strong><\/span>&#8221;<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19447 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e56.png\" alt=\"\" width=\"361\" height=\"463\" \/><\/p>\n<p>4. Klik pada \u201c<span style=\"color: #00ffff\"><strong>Kotak Warna<\/strong><\/span>\u201d untuk memilih warna latar belakang yang diinginkan.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19448 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e57.png\" alt=\"\" width=\"375\" height=\"468\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19449 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e23.png\" alt=\"\" width=\"554\" height=\"211\" \/><\/p>\n<p style=\"text-align: center\"><span style=\"font-size: 10pt\">Contoh tampilan warna latar background<\/span><\/p>\n<p>3. <strong>Sesuaikan efek Content Overlap<\/strong> dengan atur tindih section ke section bawahnya.<\/p>\n<p>1. Klik pada \u201c<strong><span style=\"color: #00ffff\">Section<\/span><\/strong>\u201d<\/p>\n<p>2. Buka &#8220;<strong><span style=\"color: #00ffff\">Content Overlap<\/span><\/strong>&#8221;<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19450 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e58.png\" alt=\"\" width=\"365\" height=\"557\" \/><\/p>\n<p>3. Sesuaikan ukuran \u201c<span style=\"color: #00ffff\"><b>Overlap Previous section<\/b><\/span>\u201d sesuai keinginan.<\/p>\n<p><strong>4. Atur pembatas dengan Section divider<\/strong><\/p>\n<p>1. Klik &#8220;<span style=\"color: #00ffff\"><strong>Section<\/strong><\/span>&#8221;<\/p>\n<p>2. Buka \u201c<strong><span style=\"color: #00ffff\">Section divider<\/span><\/strong>\u201d untuk menyesuaikan pemisah bagian atas atau bawah. Atur format dan ukuran tinggi dan warna sesuai keinginan.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-19451 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e29.png\" alt=\"\" width=\"239\" height=\"417\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19472\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.45.45-920x462-1-1.jpg\" alt=\"\" width=\"920\" height=\"462\" srcset=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.45.45-920x462-1-1.jpg 920w, https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.45.45-920x462-1-1-620x311.jpg 620w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/p>\n<p style=\"text-align: center\"><span style=\"font-size: 10pt\">Contoh tampilan dengan <em>section divider<\/em><\/span><\/p>\n<p>5. <strong>Atur Section Margin.<\/strong> Anda dapat mengatur jarak margin antar section, atas maupun bawah. dari contoh terlihat terdapat bar berwarna biru yang menandakan jarak margin yang telah diatur.<\/p>\n<p>1. Klik &#8220;<strong><span style=\"color: #00ffff\">Section<\/span><\/strong>&#8221;<\/p>\n<p>2. Buka \u201c<span style=\"color: #00ffff\"><strong>Section margin<\/strong><\/span>\u201d untuk menyesuaikan margin bagian sesuai kebutuhan. Secara default sistem telah menetapkan margin atas sebesar 40 dan margin bawah sebesar 40.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19473\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.45.45-920x462-2.jpg\" alt=\"\" width=\"920\" height=\"462\" srcset=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.45.45-920x462-2.jpg 920w, https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.45.45-920x462-2-620x311.jpg 620w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19474\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.52.01-920x462-1.jpg\" alt=\"\" width=\"920\" height=\"462\" srcset=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.52.01-920x462-1.jpg 920w, https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/Screen-Shot-2566-11-16-at-10.52.01-920x462-1-620x311.jpg 620w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/p>\n<p style=\"text-align: center\"><span style=\"font-size: 10pt\">Contoh penyesuaian <em>Section margin<\/em><\/span><\/p>\n<p><strong>Cara menyesuaikan section Grid &amp; Sel<\/strong><br \/>\n1.Klik pada \u201c<span style=\"color: #00ffff\"><strong>Grid<\/strong><\/span>\u201d yang diinginkan<\/p>\n<p>2. Sistem menampilkan Site Settings, menyesuaikan bagian grid dan sel dengan empat bagian sebagai berikut.<\/p>\n<ul>\n<li>Meratakan konten di dalam sel (Content Alignment)<\/li>\n<li>Sesuaikan warna latar belakang sel (Cell Background)<\/li>\n<li>Menyesuaikan jarak dalam sel (Cell Padding)<\/li>\n<li>Sesuaikan pengaturan grid (Grid Settings)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19452 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e35.png\" alt=\"\" width=\"554\" height=\"235\" \/><\/p>\n<p>1. <strong>Perataan isi sel (Content Alignment)<\/strong>. Ada 2 bagian yang bisa diatur yaitu vertikal Vertical Align dan Horizontal Align. Anda dapat meratakan isi sel sesuai kebutuhan.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19453 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e60.png\" alt=\"\" width=\"314\" height=\"516\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19454 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e37.png\" alt=\"\" width=\"692\" height=\"350\" srcset=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e37.png 692w, https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e37-620x314.png 620w\" sizes=\"(max-width: 692px) 100vw, 692px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-19455 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e38.png\" alt=\"\" width=\"692\" height=\"347\" srcset=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e38.png 692w, https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e38-620x311.png 620w\" sizes=\"(max-width: 692px) 100vw, 692px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19456 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e39.png\" alt=\"\" width=\"692\" height=\"343\" srcset=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e39.png 692w, https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e39-620x307.png 620w\" sizes=\"(max-width: 692px) 100vw, 692px\" \/><\/p>\n<p style=\"text-align: center\"><span style=\"font-size: 10pt\">Contoh penampilan content alignment (atas, tengah, bawah)<\/span><\/p>\n<p>2. <strong>Sesuaikan latar belakang sel (Cell Background)<\/strong>\u00a0dalam 4 format.<\/p>\n<ul>\n<li>Transparent : didasarkan pada latar belakang situs web.<\/li>\n<li>Color : bisa custom sesuai keinginan.<\/li>\n<li>Gradient : dapat memilih untuk mengatur warna dari gelap ke terang. dan dapat mengatur posisi gradien<\/li>\n<li>Image : Skala gambar, posisi, dan warna dapat disesuaikan.<\/li>\n<\/ul>\n<p><strong>Contoh Cara Mengatur Warna Latar Belakang Sel &#8220;<span style=\"color: #00ffff\">Color<\/span>&#8220;<\/strong><\/p>\n<p>1. Klik \u201c<span style=\"color: #00ffff\"><strong>Grid<\/strong><\/span>\u201d&#8217;<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19457 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e40.png\" alt=\"\" width=\"554\" height=\"200\" \/><\/p>\n<p>2. Pilih format &#8220;<span style=\"color: #00ffff\"><strong>Warna<\/strong><\/span>&#8221;<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19458 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e41.png\" alt=\"\" width=\"265\" height=\"463\" \/><\/p>\n<p>3. Klik &#8220;<span style=\"color: #00ffff\"><strong>kotak warna<\/strong><\/span>&#8221;<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19459 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e42.png\" alt=\"\" width=\"554\" height=\"496\" \/><\/p>\n<p>4. Anda dapat mengatur tepi membulat &#8220;<strong><span style=\"color: #00ffff\">Border Radius<\/span><\/strong>&#8221; sesuai keinginan.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-19460 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e43.png\" alt=\"\" width=\"302\" height=\"621\" \/><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-19461 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e44.png\" alt=\"\" width=\"554\" height=\"287\" \/><\/p>\n<p style=\"text-align: center\"><span style=\"font-size: 10pt\">Contoh tampilan penyesuaian warna background cell<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>3. <strong>Mengatur jarak dalam sel (Cell Padding)<\/strong> ke atas, kanan, bawah, dan kiri dengan menentukan jumlah spasi di dalam sel atau dengan mengarahkan mouse pada garis putus-putus. Anda juga dapat mengklik dan menahan serta menarik ke atas dan ke bawah sesuai kebutuhan.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19462 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e45.png\" alt=\"\" width=\"302\" height=\"441\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19463 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e46.png\" alt=\"\" width=\"554\" height=\"165\" \/><\/p>\n<p style=\"text-align: center\"><span style=\"font-size: 10pt\">Contoh spasi sel default<\/span><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-19464 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e47.png\" alt=\"\" width=\"554\" height=\"163\" \/><\/p>\n<p style=\"text-align: center\"><span style=\"font-size: 10pt\">Contoh penyesuaian spasi sel<\/span><\/p>\n<p>4. <strong>Sesuaikan pengaturan grid (Grid Settings)<\/strong>, akan ada bagian jarak antar sel dan jarak grid, Anda dapat mengatur tinggi bagian atas dan bawah.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19465 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e48.png\" alt=\"\" width=\"287\" height=\"437\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-19466 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e49.png\" alt=\"\" width=\"554\" height=\"280\" \/><\/p>\n<p style=\"text-align: center\"><span style=\"font-size: 10pt\">Contoh pengaturan jarak antar sel (Cell Gap)<\/span><\/p>\n","protected":false},"featured_media":0,"template":"","manual_category_v4":[1982],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v14.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tambah Bagian (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\/id\/blog\/manual-4\/tambah-bagian-section\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Tambah Bagian (Section) - MakeWebaEasy Blog\" \/>\n<meta name=\"twitter:description\" content=\"Section adalah bagian yang menampilkan informasi tentang setiap jenis konten. Section berubah sesuai dengan halaman atau menu. Sistem MakeWebEasy menawarkan beragam format untuk dipilih. Anda dapat memilih sendiri layout teks, gambar, atau video.\u00a0 Ada dua metode untuk menambahkan section situs web: Cara tambah section blank Cara menambahkan section preset &nbsp; Cara Tambah Section Blank 1. [&hellip;]\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.makewebeasy.com\/id\/blog\/wp-content\/uploads\/2023\/11\/\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e1-1-920x415-2.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\/id\/blog\/wp-json\/wp\/v2\/manual-4\/19428"}],"collection":[{"href":"https:\/\/www.makewebeasy.com\/id\/blog\/wp-json\/wp\/v2\/manual-4"}],"about":[{"href":"https:\/\/www.makewebeasy.com\/id\/blog\/wp-json\/wp\/v2\/types\/manual-4"}],"wp:attachment":[{"href":"https:\/\/www.makewebeasy.com\/id\/blog\/wp-json\/wp\/v2\/media?parent=19428"}],"wp:term":[{"taxonomy":"manual_category_v4","embeddable":true,"href":"https:\/\/www.makewebeasy.com\/id\/blog\/wp-json\/wp\/v2\/manual_category_v4?post=19428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}