{"id":1436,"date":"2021-10-05T15:04:22","date_gmt":"2021-10-05T08:04:22","guid":{"rendered":"https:\/\/www.jagoweb.com\/kb\/?post_type=ht_kb&p=1436"},"modified":"2022-10-31T15:19:00","modified_gmt":"2022-10-31T08:19:00","slug":"tutorial-basic-divi-builder","status":"publish","type":"ht_kb","link":"https:\/\/www.jagoweb.com\/kb\/knowledge-base-jagoweb\/tutorial-basic-divi-builder\/","title":{"rendered":"Tutorial Basic Divi Builder"},"content":{"rendered":"

Tutorial Basic Divi Builder –\u00a0<\/strong>Divi Builder hadir dalam dua bentuk: \u201cBack-end Builder\u201d standar dan \u201cVisual Builder\u201d front-end. Kedua antarmuka memungkinkan Anda membangun jenis situs web yang persis sama dengan elemen konten dan pengaturan desain yang sama. Satu-satunya perbedaan adalah antarmuka. Tampilan Back-end berada di dalam Dasbor WordPress dan dapat diakses bersama dengan semua pengaturan WordPress standar lainnya. Ini bagus untuk membuat perubahan cepat saat Anda berada di dalam dasbor, tetapi juga dibatasi oleh dasbor dan ditampilkan sebagai representasi berbasis blok dari situs web Anda. Tutorial ini akan berfokus hanya pada pembuat visual.<\/p>\n

Mengaktifkan Visual Builder<\/span><\/strong><\/h2>\n

Saat Anda masuk ke dasbor WordPress<\/a> Anda, Anda dapat menavigasi ke halaman mana pun di bagian depan situs web Anda dan mengklik tombol “Aktifkan Visual Builder” di bilah admin WordPress untuk meluncurkan pembuat visual.<\/p>\n

Jika Anda mengedit halaman Anda di back-end, Anda dapat beralih ke pembuat visual dengan mengklik tombol “Aktifkan Visual Builder” yang berada di bagian atas antarmuka Divi Builder back-end (perhatikan, Anda harus terlebih dahulu mengaktifkan Divi Builder Builder sebelum tombol visual builder akan muncul).<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Dasar-dasar Visual Builder<\/span><\/strong><\/h2>\n

Kekuatan Divi terletak pada Visual Builder, pembuat halaman seret dan lepas yang memungkinkan Anda membangun hampir semua jenis situs web dengan menggabungkan dan mengatur elemen konten.<\/span><\/p>\n

Pembangun menggunakan tiga blok bangunan utama: Bagian, Baris dan Modul.\u00a0Menggunakan ini secara bersamaan memungkinkan Anda membuat susunan tata letak halaman yang tak terhitung jumlahnya.\u00a0Bagian adalah blok bangunan terbesar, dan mereka menampung kelompok baris.\u00a0Baris duduk di dalam bagian dan digunakan untuk menampung modul.\u00a0Modul ditempatkan di dalam baris.\u00a0Ini adalah struktur setiap situs web Divi.<\/p>\n

Blok<\/h3>\n

Blok bangunan paling dasar dan terbesar yang digunakan dalam mendesain tata letak dengan Divi adalah bagian.\u00a0Ini digunakan untuk membuat grup konten yang besar, dan ini adalah hal pertama yang Anda tambahkan ke halaman Anda.\u00a0Ada tiga jenis bagian: Reguler, Khusus, dan Lebar Penuh.\u00a0Bagian reguler terdiri dari baris kolom sementara Bagian Lebar Penuh terdiri dari modul lebar penuh yang memperluas seluruh lebar layar.\u00a0Bagian khusus memungkinkan tata letak bilah sisi yang lebih canggih.\u00a0Untuk informasi lebih lanjut tentang menggunakan bagian,\u00a0<\/span>buka tutorial bagian mendalam kami.<\/span><\/p>\n

Baris<\/h3>\n

Baris duduk di dalam bagian dan Anda dapat menempatkan sejumlah baris di dalam bagian.\u00a0Ada banyak jenis kolom yang berbeda untuk dipilih.\u00a0Setelah Anda menentukan struktur kolom untuk baris Anda, Anda kemudian dapat menempatkan modul ke dalam kolom yang diinginkan.\u00a0Tidak ada batasan jumlah modul yang dapat Anda tempatkan di dalam kolom.\u00a0Untuk informasi lebih lanjut tentang menggunakan baris,\u00a0buka tutorial baris mendalam kami.<\/p>\n

Modul<\/h3>\n

Modul adalah elemen konten yang membentuk situs web Anda.\u00a0Setiap modul yang dimiliki Divi dapat masuk ke dalam lebar kolom apa pun dan semuanya sepenuhnya responsif.<\/p>\n

Membangun Halaman Pertama Anda<\/strong><\/h2>\n

Tiga blok penyusun dasar (Bagian, Baris, dan Modul) digunakan untuk membuat halaman Anda.<\/p>\n

\"\"<\/p>\n

Menambahkan Bagian Pertama Anda<\/strong><\/h3>\n

Sebelum Anda dapat menambahkan apa pun ke halaman Anda, Anda harus terlebih dahulu menambahkan bagian.\u00a0Bagian dapat ditambahkan dengan mengklik tombol biru (+).\u00a0Saat Anda mengarahkan kursor ke bagian yang sudah ada di halaman, tombol biru (+) akan muncul di bawahnya.\u00a0Saat diklik, bagian baru akan ditambahkan di bawah bagian yang saat ini Anda arahkan.<\/p>\n

Jika Anda memulai halaman baru, maka bagian pertama Anda akan ditambahkan secara otomatis.<\/p>\n

\"\"<\/p>\n

Menambahkan Baris Pertama Anda<\/h2>\n

Setelah Anda menambahkan bagian pertama Anda, Anda dapat mulai menambahkan baris kolom di dalamnya.\u00a0Bagian dapat menampung sejumlah baris, dan Anda dapat mencampur dan mencocokkan baris dari berbagai jenis kolom untuk membuat berbagai tata letak.<\/p>\n

Untuk menambahkan baris, klik tombol hijau (+) di dalam bagian kosong mana pun, atau klik tombol hijau (+) yang muncul saat mengarahkan kursor ke baris saat ini untuk menambahkan baris baru di bawahnya.\u00a0Setelah Anda mengklik tombol hijau (+) Anda akan disambut dengan daftar jenis kolom.\u00a0Pilih kolom yang Anda inginkan dan kemudian Anda siap untuk menambahkan modul pertama Anda.<\/p>\n

\"\"<\/p>\n

Menambahkan Modul Pertama Anda<\/h2>\n

Modul dapat ditambahkan di dalam baris, dan setiap baris dapat menampung sejumlah modul. Modul adalah elemen konten halaman Anda, dan Divi hadir dengan lebih dari 40 elemen berbeda yang dapat Anda gunakan untuk membuatnya. Anda dapat menggunakan modul dasar seperti Teks, Gambar, dan Tombol, atau modul yang lebih canggih seperti Slider, Galeri Portofolio, dan Toko eCommerce. Kami memiliki tutorial individual untuk setiap modul Divi, jadi jika Anda ingin mempelajari lebih lanjut tentang jenis modul yang disediakan Divi, pastikan untuk kembali ke\u00a0halaman dokumen utama\u00a0dan menelusuri bagian “Modul”.<\/p>\n

Untuk menambahkan modul, klik tombol abu-abu (+) yang ada di dalam kolom kosong mana pun atau klik tombol abu-abu (+) yang ada saat mengarahkan kursor ke modul pada halaman untuk menambahkan Modul baru di bawahnya.\u00a0Setelah Anda mengklik tombol, Anda akan disambut oleh daftar modul.\u00a0Pilih modul yang Anda inginkan dan itu akan ditambahkan ke halaman Anda dan panel pengaturan untuk modul akan muncul.\u00a0Dengan menggunakan panel pengaturan ini, Anda dapat mulai mengonfigurasi modul Anda.<\/p>\n

\"\"<\/p>\n

Mengonfigurasi Dan Menyesuaikan Bagian, Baris, dan Modul<\/h2>\n

Setiap bagian, baris, dan modul dapat disesuaikan dengan berbagai cara.\u00a0Anda dapat mengakses panel pengaturan elemen dengan mengklik ikon roda gigi yang ada saat mengarahkan kursor ke elemen mana pun di halaman.<\/p>\n

\"\"<\/p>\n

Ini akan meluncurkan panel pengaturan untuk elemen yang ditentukan. Setiap panel pengaturan dipecah menjadi tiga tab: Konten, Desain, dan Lanjutan. Setiap tab dirancang untuk membuat akses dan penyesuaian berbagai macam pengaturan Divi menjadi cepat dan mudah. Tab Content tentunya adalah tempat Anda dapat menambahkan konten seperti gambar, video, link, dan admin label. Tab Desain adalah tempat kami menempatkan semua pengaturan desain bawaan untuk setiap elemen. Tergantung pada apa yang Anda edit, Anda dapat mengontrol berbagai macam pengaturan desain dengan sekali klik; termasuk: tipografi, spasi (padding\/margin), gaya tombol, dan banyak lagi. Untuk melihat lebih dalam pada tab Desaini.\u00a0Terakhir, jika Anda menginginkan lebih banyak kontrol, Anda dapat menuju ke tab Advanced di mana Anda dapat menerapkan CSS khusus, menyesuaikan visibilitas berdasarkan perangkat, dan (bergantung pada elemen mana yang Anda edit) melakukan penyetelan yang lebih baik.<\/p>\n

Menyimpan Halaman Anda Dan Mengakses Pengaturan Halaman<\/h2>\n

Untuk mengakses pengaturan halaman umum, klik ikon dok ungu di bagian bawah layar Anda.\u00a0Ini akan memperluas bilah pengaturan dan memberi Anda berbagai opsi.\u00a0Anda dapat membuka pengaturan halaman Anda dengan mengklik ikon roda gigi.\u00a0Di sini Anda dapat menyesuaikan hal-hal seperti warna latar belakang halaman dan warna teks.\u00a0Anda juga akan menemukan tombol Simpan dan Terbitkan serta sakelar pratinjau responsif.<\/p>\n

\"\"<\/p>\n

Mulai Desain Anda dengan Tata Letak yang Sudah Dibuat<\/h2>\n

Cara yang bagus untuk memulai halaman baru Anda adalah memulai dengan tata letak yang telah dibuat sebelumnya.\u00a0Divi dikirimkan dengan lebih dari 20 tata letak pra-dibuat yang mencakup berbagai jenis halaman umum, seperti “Tentang Kami”, “Kontak”, “Blog”, “Portofolio”, dll. Anda dapat memuat ini dan kemudian menukar demo konten untuk Anda sendiri.\u00a0Halaman baru Anda akan selesai sebelum Anda menyadarinya!\u00a0Untuk mempelajari lebih lanjut tentang menggunakan tata letak pra-dibuat.<\/p>\n

\"\"<\/p>\n

Menyimpan Tata Letak Anda Sendiri ke Perpustakaan<\/h2>\n

Selain menggunakan tata letak pra-dibuat yang disertakan dengan Divi, Anda juga dapat menyimpan kreasi Anda sendiri ke Perpustakaan Divi.\u00a0Ketika sebuah desain disimpan sebagai Tata Letak Divi di Perpustakaan Divi, itu dapat dimuat ke halaman baru.\u00a0Semakin banyak Anda membangun perpustakaan dengan desain favorit Anda, semakin cepat Anda dapat membuat situs web baru.\u00a0Untuk melihat lebih dalam di Perpustakaan Divi<\/p>\n

Untuk menyimpan item ke pustaka, klik ikon pustaka yang ada saat mengarahkan kursor ke elemen apa pun dan di dalam bilah pengaturan halaman.\u00a0Setelah item ditambahkan ke perpustakaan, itu akan muncul di tab “Tambah Dari Perpustakaan” saat menambahkan tata letak, bagian, baris, dan modul Divi baru.<\/p>\n

\"\"<\/p>\n","protected":false},"author":3,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht_kb_category":[267],"ht_kb_tag":[268,85],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.jagoweb.com\/kb\/wp-json\/wp\/v2\/ht_kb\/1436"}],"collection":[{"href":"https:\/\/www.jagoweb.com\/kb\/wp-json\/wp\/v2\/ht_kb"}],"about":[{"href":"https:\/\/www.jagoweb.com\/kb\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.jagoweb.com\/kb\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jagoweb.com\/kb\/wp-json\/wp\/v2\/comments?post=1436"}],"version-history":[{"count":2,"href":"https:\/\/www.jagoweb.com\/kb\/wp-json\/wp\/v2\/ht_kb\/1436\/revisions"}],"predecessor-version":[{"id":2021,"href":"https:\/\/www.jagoweb.com\/kb\/wp-json\/wp\/v2\/ht_kb\/1436\/revisions\/2021"}],"wp:attachment":[{"href":"https:\/\/www.jagoweb.com\/kb\/wp-json\/wp\/v2\/media?parent=1436"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.jagoweb.com\/kb\/wp-json\/wp\/v2\/ht_kb_category?post=1436"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.jagoweb.com\/kb\/wp-json\/wp\/v2\/ht_kb_tag?post=1436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}