Divi pasti salah satunya Tema WordPress paling populer saat ini. Salah satu elemen yang menjadi kekuatan dari tema ini adalah pembangunnya (Divi Builder), yang banyak mengingatkan kita pada Visual Composer.

Divi Builder hadir dalam dua bentuk: standar “Back-end Builder” dan “Visual Builder”. Kedua antarmuka memungkinkan Anda membangun jenis situs web yang persis sama dengan konten yang sama dan parameter desain yang sama. Satu-satunya perbedaan adalah antarmuka. Builder back-end berada di dalam dasbor WordPress dan dapat diakses dengan semua pengaturan WordPress standar lainnya.

Itu berada di dalam antarmuka pengguna WordPress dan menggantikan editor posting WordPress standar. Ini bagus untuk membuat perubahan cepat saat Anda berada di dalam dasbor, tetapi juga dibatasi oleh dasbor dan ditampilkan sebagai representasi kotak-kotak dari situs web Anda. Tutorial ini hanya akan fokus pada pembuat visual.

Unduh Tema DIVI WordPress

divi builder.jpeg

Visual Builder baru, di sisi lain, memungkinkan Anda membangun halaman Anda di bagian depan situs web Anda! Ini adalah pengalaman yang luar biasa dan memungkinkan desain yang lebih cepat. Saat Anda menambahkan konten atau menyesuaikan pengaturan desain di dalam pembuat visual, perubahan Anda langsung muncul.

Anda dapat mengklik pada halaman dan mulai mengetik. Anda dapat menyorot teks dan menyesuaikan font dan gayanya. Anda dapat menambahkan konten baru, membangun halaman Anda dan melihat semua yang terjadi di depan mata Anda.

penggunaan-visual-builder.jpg

Cara mengaktifkan Visual Builder

Saat Anda masuk ke dasbor WordPress, Anda dapat menavigasi ke halaman mana pun di bagian depan situs web Anda dan mengklik tombol "Aktifkan Pembuat Visual" di bilah admin WordPress untuk meluncurkan pembuat. visual.

cara mengaktifkan builder.jpeg visual

Jika Anda mengedit halaman di dasbor, Anda dapat beralih ke pembuat visual dengan mengklik tombol "Aktifkan Visual Builder" yang ada di bagian atas antarmuka back-end Divi Builder (perhatikan bahwa Anda harus terlebih dahulu aktifkan Divi Builder sebelum tombol pembuat visual muncul).

gunakan pembangun visual Divi.jpeg

Dasar-dasar dari Visual Builder

Kekuatan Divi terletak pada Visual Builder, pembuat halaman yang bekerja dengan "Drag And Drop" yang memungkinkan Anda membangun hampir semua jenis situs web dengan menggabungkan dan mengatur potongan-potongan konten.

Pembuatnya menggunakan tiga blok penyusun utama: bagian, baris, dan modul. Menggunakannya secara bersamaan memungkinkan Anda membuat tata letak yang tak terhitung jumlahnya. Bagian adalah blok bangunan terbesar dan mereka menampung kelompok baris. Baris berada di dalam bagian dan digunakan untuk menampung modul. Modul ditempatkan di dalam baris. Ini adalah struktur dari setiap situs Divi.

bagian

Blok bangunan paling dasar dan terbesar yang digunakan dalam mendesain tata letak dengan Divi adalah beberapa bagian. Mereka digunakan untuk membuat kelompok besar konten, dan ini adalah hal pertama yang Anda tambahkan ke halaman Anda. Ada tiga jenis bagian: Reguler, Khusus, dan Lebar Penuh.

Bagian biasa terdiri dari baris kolom sedangkan bagian lebar penuh terdiri dari modul lebar penuh yang memperlebar seluruh lebar layar. Bagian khusus memungkinkan tata letak samping yang lebih maju.

baris

Baris berada di dalam bagian dan Anda dapat menempatkan sejumlah baris di dalam bagian. Ada banyak jenis kolom yang dapat dipilih. Setelah Anda menentukan struktur kolom untuk baris Anda, Anda kemudian dapat menempatkan modul di kolom yang diinginkan. Tidak ada batasan jumlah modul yang dapat Anda tempatkan di kolom.

Modul

Modul adalah bagian dari konten yang membentuk situs web Anda. Setiap modul Divi dapat beradaptasi dengan lebar kolom apa pun dan semuanya sepenuhnya responsif.

Bangun halaman pertama Anda

Tiga blok bangunan dasar (bagian, garis, dan modul) digunakan untuk membangun halaman Anda.

pembangunan halaman Divi.jpg

Menambahkan bagian pertama Anda

Sebelum Anda dapat menambahkan apa pun ke halaman Anda, Anda harus menambahkan bagian terlebih dahulu. Bagian dapat ditambahkan dengan mengklik tombol biru (+). Saat Anda mengarahkan kursor ke bagian yang sudah ada di halaman, tombol biru (+) akan muncul di bawah. Saat Anda mengklik, bagian baru akan ditambahkan di bawah bagian yang saat ini Anda arahkan.

Jika Anda memulai halaman baru, bagian pertama Anda akan ditambahkan secara otomatis.

daftar bagian divi.jpg

Menambahkan baris pertama Anda

Setelah Anda menambahkan bagian pertama Anda, Anda dapat mulai menambahkan baris kolom di dalamnya. Bagian dapat berisi berapa pun baris, dan Anda dapat mencampur dan mencocokkan baris dari berbagai jenis kolom untuk membuat berbagai tata letak.

Untuk menambahkan baris, klik tombol hijau (+) di dalam bagian kosong, atau klik tombol hijau (+) yang muncul saat mengarahkan kursor ke baris saat ini untuk menambahkan baris baru di bawah. Setelah Anda mengklik tombol hijau (+), Anda akan disambut dengan daftar tipe kolom. Pilih kolom pilihan Anda dan Anda siap untuk menambahkan modul pertama Anda.

cara memasukkan baris Divi.jpeg

Menambahkan modul pertama Anda

Modul dapat ditambahkan di dalam baris, dan setiap baris dapat berisi sejumlah modul. Modul adalah elemen konten halaman Anda, dan Divi hadir dengan lebih dari 40 elemen berbeda yang dapat Anda gunakan untuk membuat.

Anda dapat menggunakan modul dasar seperti Teks, Gambar dan Tombol, atau modul yang lebih canggih seperti Slider, Galeri Portofolio, dan eCommerce Toko.

Untuk menambahkan modul, klik tombol abu-abu (+) yang ada di dalam kolom kosong atau klik tombol abu-abu (+) yang ada saat Anda mengarahkan kursor ke modul pada halaman untuk menambahkan modul baru di bawah . Setelah Anda mengklik tombol tersebut, Anda akan disambut dengan daftar modul.

Pilih modul pilihan Anda dan itu akan ditambahkan ke halaman Anda dan panel kontrol modul akan muncul. Dengan menggunakan panel kontrol ini, Anda dapat mulai mengkonfigurasi modul Anda.

masukkan modul DIVI.jpeg

Itu saja untuk tutorial ini. Dengan apa yang telah Anda pelajari hari ini, Anda akan dapat membuat tata letak dengan Divi. Kami akan kembali dengan tutorial lanjutan tentang masalah ini. Anda sudah dapat mengunduh Tema Divi.

[vc_row center_row = "ya"] [vc_column width = "1/2 ] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] UNDUH TEMA DIVI [/ vcex_button] [/ width_column] [»vc_column] [ » 1/2 ] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] UNDUH TEMPLATE DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Tutorial Divi lainnya