Cara menggunakan Template Website atau Premade Layouts Divi

Dedicated Hosting
Admin Tutorial
Latest posts by Admin Tutorial (see all)

Pengantar

Divi adalah Tema / Theme di WordPress yang dibuat oleh ElegantThemes, sebuah perusahaan penyedia Tema dan Plugin Premium untuk WordPress.

Fitur paling powerfull Tema Divi yaitu kemudahan dalam membuat macem-macem layout halaman di WordPress dan juga ada disediain visual builder untuk buat halaman atau page baru dengan “drag & drop” menggunakan banyak pilihan modul pembangun elemen halaman web.

Salah satu menu fiturnya adalah Premade Layouts alias Template Website. Template yang disediakan terdiri dari berbagai varian, yang tentunya akan memudahkan kamu, yang belum punya gambaran gimana bikinnya.

Nah, dipanduan ini lebih lanjut kamu akan mengetahui cara menggunakan Premade Layouts yang bisa kamu pakai untuk membuat website sederhana.

Prasyarat

  1. Punya website yang berbasis WordPress.
  2. Punya akses sebagai admin ke dasbor wp-admin.
  3. Sudah install theme atau tema Divi. Kamu bisa ikuti panduan cara install theme Divi.

Note: Versi WordPress di panduan ini 5.4 (Perbedaannya mungkin tidak terlalu signifikan)

 

Langkah 1, Mengakses Premade Layouts

Untuk mulai memakai banyak pilihan template, kamu bisa mulai dengan mengedit atau membuat page baru.

Masuk kedalam dasbor admin wordpress, buka browser lalu ketikkan :

https://namadomain.com/wp-admin , sesuaikan dengan nama domain kamu lalu masukkan user dan password adminnya.

 

Note: Panduan dibawah ini akan menggunakan setelan Bahasa Inggris untuk menghindari ambigu. Kalau wordpress kamu sudah English, ok fine lanjutin. Kamu bisa ubah bahasa melalui Pengaturan > Umum > Bahasa Situs > Pilih English (United States) > Simpan perubahan.

 

Selanjutnya pada sidebar sebelah kiri, klik Pages > Add New . Maka kamu akan diarahkan ke halaman baru, selanjutnya klik tombol Use Divi Builder.

Use divi Builder

Kemudian akan tampil tiga pilihan , karena judulnya cara pakai premade layout maka kamu pilih yang tengah ya sob, lalu klik Browse Layouts

Browse Layouts

Selanjutnya akan tampil popup “Load From Library” , tempat kamu bisa mulai memilih template.

 

Langkah 2, Premade Layouts, Saved Layouts, atau Existing Pages

Didalam popup Load From Library tersedia tiga tab. Masing masing adalah :

  • Premade Layouts : disini kamu akan menemukan semua template atau premade layouts siap pakai. Ada banyak banget sob.
  • Your Saved Layouts : Ini tempat menyimpan layout atau template, biasanya berfungsi saat kamu sudah edit-edit template, dan ingin kamu simpan hasilnya.
  • Your Existing Pages : berisi semua pages (termasuk post dan project) yang sedang ada di website kamu, yang mungkin mau kamu cloning untuk buat desain page baru.

Tiga pilihan Premade Layouts

 

Langkah 3, Menggunakan Premade Layout

Dibagian ini kamu bisa scroll kebawah dan memilih dari sekian banyak pilihan template atau premade layout yang disediakan.

Pilihan layout

Ketika kamu pilih salah satu , maka akan tampil preview semua page yang ada pada layout tersebut. Ketika kamu klik salah satu page layout sebelah kanan, maka akan tampil previewnya disebelah kiri.

Klik Live Demo, maka akan terbuka demo terkait layout tersebut di halaman baru. Kalau kamu sudah cocok kamu tinggal klik tombol “Use This Layout”.

Use this layout

Note: Jika kamu menemui kendala, muncul pop-up untuk memasukkan API Key. Artinya kamu belum memasang lisensi atau API Key divinya. Caranya kamu bisa ikuti panduan cara install dan pasang lisensi Divi.

Menggunakan Premade Layout merupakan langkah awal aja sob, jika kedepannya kamu mau edit lagi page ini, bisa dilakukan dengan cara akses page tersebut dari browser, lalu klik Enable Visual Builder.

Enable visual builder

 

Langkah 4, Menambahkan Layout atau Ganti Seluruhnya

Selain untuk membuat page baru yang masih kosongan, premade layout bisa kamu gunakan untuk menambahkan ke page yang sudah aktif.

Jika kamu tambahkan ke page yang aktif, kamu bisa scroll ke bawah untuk melihat penambahan layout yang ada.

Atau kamu bisa mengganti seluruh isi dari page kamu demgan menggunakan fitur “Replace Existing Content”. Setelah kamu memilih layout, kamu bisa mencentang jika ingin mengganti layout lama dengan layout yang baru kamu pilih.

Replace content

 

Langkah 5, Lakukan Editing Layout

Setelah template atau layout berhasil kamu terapkan. Kamu bisa melakukan edit semau kamu. Contohnya kamu suka layout tertentu, tapi ada bagian yang tidak kamu perlukan, kamu hanya perlu lakukan klik icon sampah pada bagian itu dan seketika section terkait akan hilang.

Atau kamu bisa melakukan edit di kata-kata yang tertera pada layout. Kamu tinggal arahkan kursor kamu ke area terkait, dan pilihan setting akan muncul. Kamu tinggal klik dan pilih text yang ingin kamu ubah.

 

Nah, sementara itu dulu ya sob, ini materi tutorial pakai divi buildernya masih kita bangun. Kalo kamu gak sabaran, kamu bisa cek di websitenya langsung.

 

Penutup

Premade Layouts alias Template Website terdiri dari berbagai varian layout atau tampilan, yang tentunya akan memudahkan kamu untuk mulai membuat sebuah website menggunakan Divi.

Berikutnya kamu bisa cek tutorial - tutorial berikut ini :

  1. Cara klaim Tema atau Theme Divi di JagoanHosting
  2. Cara Install Tema atau Theme Divi di WordPress
  3. Penjelasan Lengkap Opsi Tema atau Theme Options Divi
  4. Penjelasan Theme Builder Divi
  5. Penjelasan Penyesuai Tema atau Theme Customizer Divi
  6. Membuat website blog mirip medium menggunakan Divi

Sumber referensi

Get Free Divi Theme

Gratis Divi Theme Builder senilai $249 setiap pembelian hosting paket apapun di Jagoan Hosting.

 1532 total desain layout website
 208 total contoh jenis website
 Drag & Drop website builder
 Tidak perlu pengetahuan coding

Apakah artikel ini membantu, Sob?

Berikan rating buat artikel ini!

Rata-rata rating 3.5 / 5. Dari total vote 6

Pertamax, Sob! Jadilah pertama yang memberi vote artikel ini!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Related Posts
Tutorial Mengatasi CSS yang Tidak Terbaca di WP Admin

Hai, Sob! Pernahkah kamu mengalami permasalahan dengan dashboard administrator tampil tanpa CSS? Seperti semua link tidak tertata seperti seharusnnya, contohnya Read more

Tutorial WordPress – Mengatasi Warning: Cannot modify header information

Halo, Sob! Pernahkah kamu mengalami pesan peringatan seperti ini saat instalasi pertama WordPress maupun upgrade WordPress kamu? Warning: Cannot modify Read more

Cara Atasi Fatal Error Allowed Memory Size of Bytes Exhausted

Pengantar Pernahkah kamu mengalami pesan "Fatal error: Allowed memory size of 33554432 bytes exhausted" saat kamu mencoba upload sebuah gambar Read more

Tutorial Mengatasi Fatal Error Undefined Function Is_network_admin()

Pernahkah kamu mengalami error seperti di bawah ini? "Fatal error undefined function is_network_admin()" Biasanya error ini muncul saat kamu melakukan Read more