Cara Membuat Template Halaman 404 dengan Pembuat Tema Divi

Pembuat Tema Divi dan opsi desain bawaan telah membuka banyak pintu baru. Lebih dari sebelumnya, Anda sekarang dapat menyesuaikan setiap halaman yang dikunjungi pelanggan Anda. Ini termasuk menyiapkan halaman 404. Dalam tutorial ini, kami akan menunjukkan cara membuat template halaman 404 yang indah dan menerapkannya ke situs web Anda segera. Kami hanya akan menggunakan opsi bawaan Divi dan Anda juga dapat mengunduh file template JSON secara gratis. Semoga tutorial ini menginspirasi untuk berkreasi dengan desain halaman 404 Anda berikutnya.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Halaman 404 GRATIS

Untuk mendapatkan template halaman 404 gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Berlangganan Saluran Youtube Kami

1. Buka Divi Theme Builder & Buat Template Baru

Pergi ke Divi Theme Builder

Untuk mulai membuat template halaman 404, buka Divi Theme Builder di pengaturan Divi Anda.

Buat Template Baru

Klik 'Tambahkan Template Baru' dan siapkan template baru untuk halaman 404 Anda.

• Gunakan Pada: 404 Halaman

Sembunyikan Area Header & Footer

Lanjutkan dengan menyembunyikan header dan footer khusus halaman 404 Anda dengan mengklik ikon mata.

Bangun Tubuh Global

Setelah Anda menyelesaikan semua langkah sebelumnya, Anda dapat mulai membuat isi halaman 404 dengan memilih 'Build Custom Body'.

2. Mulai Membangun Badan Halaman 404

Tambahkan Bagian Baru

Warna latar belakang

Setelah Anda berada di dalam editor template, Anda akan melihat bagian di halaman Anda. Buka bagian ini dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #FFFFFF

Pembagi Bawah

Pindah ke tab desain bagian dan tambahkan pembagi bawah:

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #ffee00
• Tinggi Pembagi: 25vw (Desktop), 77vw (Tablet), 90vw (Telepon)
• Flip Pembagi: Vertikal
• Pengaturan Pembagi: Isi Bagian Bawah

Jarak

Tambahkan beberapa nilai padding khusus di berbagai ukuran layar berikutnya.

• Padding Atas: 4.6vw (Desktop), 23vw (Tablet), 25vw (Telepon)
• Padding Bawah: 4.6vw (Desktop), 13vw (Tablet), 11vw (Telepon)

Tambahkan Baris #1

Struktur Kolom

Setelah Anda menyelesaikan pengaturan bagian, Anda dapat menambahkan baris pertama. Pilih struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Ubah nilai padding atas dan bawah baris berikutnya.

• Padding Atas: 2vw
• Padding Bawah: 2vw

Tambahkan Modul Teks 1 ke Kolom

Tambah isi

Saatnya mulai menambahkan modul! Modul pertama yang kita perlukan adalah Modul Teks. Masukkan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Monoton
• Warna Teks: #000000
• Ukuran Teks: 24vw (Desktop), 35vw (Tablet & Ponsel)
• Tinggi Baris Teks: 1em
• Perataan Teks: Tengah

Tambahkan Modul Teks #2 ke Kolom

Tambah isi

Ke modul berikutnya, yang merupakan Modul Teks lainnya. Tambahkan beberapa konten pilihan Anda.

Pengaturan Teks

Ubah pengaturan teks modul yang sesuai:

• Font Teks: Montserrat
• Warna Teks: #000000
• Ukuran Teks: 1.2vw (Desktop), 2.6vw (Tablet), 3vw (Telepon)
• Tinggi Baris Teks: 1.8em
• Perataan Teks: Tengah

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa margin atas dan bawah kustom.

• Margin Atas: 2vw
• Margin Bawah: 6vw

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris dan sesuaikan pengaturan ukuran sebagai berikut:

• Lebar: 32vw (Desktop), 50vw (Tablet & Ponsel)
• Lebar Maks: 100%

Jarak

Ubah juga pengaturan spasi.

• Margin Atas: 7vw (Desktop), 22vw (Tablet), 59vw (Telepon)
• Padding Atas: 0vw
• Padding Bawah: 0vw

Pengaturan Kolom 1 & 2

Warna Latar Default

Setelah Anda menyelesaikan pengaturan baris umum, Anda dapat membuka setiap kolom satu per satu dan membuat beberapa perubahan, dimulai dengan warna latar belakang.

• Warna Latar Belakang: #FFFFFF

Arahkan Warna Latar Belakang

Ubah warna latar belakang saat melayang.

• Warna Latar Belakang: #fffa00

Berbatasan

Tambahkan beberapa sudut membulat juga.

• Sudut Bulat: 20px (Semua Sudut)

Bayangan Kotak Default

Pindah ke pengaturan bayangan kotak dan terapkan perubahan berikut:

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba(0,0,0,0)

Arahkan Bayangan Kotak

Ubah warna bayangan saat melayang.

• Warna Bayangan: rgba (0,0,0,0.12)

Skala Transformasi Default

Kemudian, masuk ke pengaturan skala transformasi dan pastikan nilai default tetap '100%'.

• Kanan: 100%
• Bawah: 100%

Arahkan Skala Transformasi

Ubah nilai skala transformasi saat mengarahkan kursor:

• Kanan: 110%
• Bawah: 110%

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Setelah Anda menyelesaikan pengaturan baris dan kolom, tambahkan Modul Teks ke kolom 1 dengan beberapa konten paragraf pilihan Anda.

Tambahkan Tautan

Tambahkan tautan ke modul berikutnya.

• URL Tautan Modul: #
• Target Tautan Modul: Di Jendela yang Sama

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Montserrat
• Berat Font Teks: Tebal
• Gaya Font Teks: Huruf Besar
• Warna Teks: #000000
• Ukuran Teks: 0.8vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Spasi Huruf Teks: 1px
• Tinggi Baris Teks: 1.8em
• Perataan Teks: Tengah

Jarak

Kemudian, buka pengaturan spasi dan terapkan beberapa nilai padding atas dan bawah khusus di berbagai ukuran layar.

• Padding Atas: 2vw (Desktop), 3vw (Tablet), 4vw (Telepon)
• Padding Bawah: 2vw (Desktop), 3vw (Tablet), 4vw (Telepon)

Modul Teks Klon & Tempatkan Duplikat di Kolom 2

Setelah Anda menyelesaikan Modul Teks dan semua pengaturannya, Anda dapat mengkloning seluruh modul dan menempatkan duplikatnya di kolom 2.

Ubah Konten

Pastikan Anda mengubah konten modul duplikat.

Ubah Tautan

Ganti linknya juga.

3. Simpan Perubahan Pembuat Tema

Setelah desain Anda selesai, Anda dapat menyimpan semua pengaturan template. Itu dia!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara mengatur dan membuat template halaman 404. Pembuat tema dan opsi desain bawaan Divi memungkinkan Anda menyentuh setiap halaman situs web Anda menggunakan templat yang disesuaikan. Kami harap Anda menikmati semua tutorial Divi Theme Builder! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.