Cara Menyematkan Galeri Divi ke Toggles untuk Membuat Menu Restoran Kustom

Menggunakan sakelar di halaman web Anda adalah cara yang bagus untuk mengatur konten Anda dengan cara yang bersih dan ringkas. Ini dapat membantu meningkatkan pengalaman pengguna dengan mengurangi pengguliran dan memberi pengguna lebih banyak kontrol atas apa yang ingin mereka lihat di halaman Anda. Menu restoran online adalah contoh yang baik di mana matikan dapat bekerja dengan baik. Pengguna dapat dengan mudah menemukan item menu yang mereka sukai dan mengklik item tersebut untuk informasi lebih lanjut.

Dalam tutorial ini, saya akan menunjukkan kepada Anda cara membuat beberapa sakelar intuitif dan ramah seluler untuk menu restoran Anda menggunakan sakelar Divi. Saya bahkan akan menunjukkan cara mengoptimalkan sakelar Anda untuk seluler dan menyematkan galeri gambar Divi di dalam konten sakelar Anda untuk menampilkan foto hidangan tertentu yang menakjubkan.

Mari kita mulai.

Sebelum dan Setelah

Berikut ini adalah sneak peek sebelum dan sesudah untuk desain menu restoran yang akan kita buat.

Sebelum

Setelah

Mulai

Mengganti Tampilan Galeri WordPress dengan Tampilan Galeri Divi

Divi memungkinkan Anda untuk mengganti tampilan Galeri WordPress default dengan tampilan Galeri Divi. Jadi setiap kali Anda membuat galeri WordPress dan menyematkannya ke halaman Anda, galeri akan ditampilkan seperti galeri menggunakan Modul Galeri Divi. Ini memungkinkan Anda untuk menambahkan galeri gambar Divi ke modul apa pun di Divi Builder (lebih lanjut tentang ini nanti). Untuk menerapkan perubahan ini, navigasikan ke Divi > Opsi Tema. Di bawah tab Umum, klik untuk mengaktifkan opsi Galeri Divi.

Mengatur Warna Aksen Tema Anda (opsional)

Karena kami akan memasukkan galeri Divi ke dalam modul sakelar, warna ikon yang muncul saat Anda mengarahkan kursor ke gambar di galeri akan secara otomatis mewarisi warna aksen yang telah Anda tetapkan untuk tema Divi. Anda dapat mengatur warna aksen tema dari Dashboard WordPress Anda dengan menavigasi ke Divi > Theme Customizer > General Settings > Layout Settings. Di bawah Pengaturan Tata Letak, perbarui warna akses tema ke yang berikut ini:

Warna Aksen Tema: #a06d51

Ini adalah warna yang akan cocok dengan Tata Letak Menu Roti yang akan kita gunakan untuk tutorial ini.

Memperbarui Ukuran Ikon Toggle Default di Penyesuai Modul (opsional)

Untuk desain ini, saya pikir akan sangat membantu untuk menampilkan ikon sakelar yang lebih besar saat menggunakan modul Divi Toggle. Anda dapat mengubah ukuran default Modul Toggle dengan menavigasi ke Divi > Module Customizer. Kemudian pilih Modul Toggle dari daftar dan perbarui ukuran ikon sebagai berikut:

Beralih Ukuran Ikon: 32

Menyiapkan Halaman Baru Anda dengan Tata Letak Halaman Menu Roti

Sebagai permulaan, Anda perlu membuat halaman baru, memberi judul pada halaman Anda, dan menggunakan Divi Builder. Pilih opsi “Choose a Premade Layout”.

Dari popup load from library, pilih Bakery Layout Pack dan kemudian klik untuk menggunakan Bakery Menu Page Layout.

Setelah tata letak dimuat ke halaman, publikasikan halaman Anda. Kemudian klik tombol “Build on Front End”. dan kemudian mempublikasikan halaman Anda. Kemudian klik untuk membangun di ujung depan.

Setelah selesai, Anda siap untuk mulai mendesain menu!

Menerapkan Desain Menu Restoran Kustom dengan Divi Toggles dan Galeri Gambar

Merancang Item Menu Toggle

Dengan Divi Builder aktif di ujung depan, tambahkan modul Toggle di bawah modul teks dengan subjudul yang bertuliskan "Sweet Tooth".

Untuk saat ini, Anda dapat membiarkan konten tiruan default yang digunakan untuk Konten Judul dan Isi. Namun, Anda perlu menambahkan harga untuk item menu di dalam isi isi tab. Klik tab Teks (bukan Visual) dan tambahkan html berikut di bawah teks default saat ini.

<h5>$8.00</h5>

Kemudian mulai perbarui pengaturan sakelar sebagai berikut:

• Warna Ikon: #a06d51
• Buka Toggle Text Color: #333333
• Warna Teks Beralih Tertutup: #333333
• Warna Latar Toggle Tertutup: #ffffff

• Judul Font: Patua One
• Judul Font Berat: Tebal
• Judul Font Gaya: TT
• Spasi Huruf Judul: 1px
• Judul Baris Tinggi: 4em
• Padding Kustom: 0px atas, 0px bawah

Untuk meningkatkan area judul toggle yang dapat diklik, tinggi baris judul ditingkatkan dan padding atas dan bawah dihilangkan.

Sekarang mari tambahkan batas kiri ke sakelar kita.

• Lebar Batas Kiri: 5px
• Warna Batas Kiri: #a06d51

Menambahkan Galeri Gambar ke Modul Toggle

Seperti yang disebutkan sebelumnya, ketika Anda mengaktifkan opsi Galeri Divi di Opsi Tema Divi, penyematan Galeri WordPress akan mengambil gaya Galeri Divi. Ini memungkinkan Anda untuk menyematkan galeri gambar bergaya Divi ke modul apa pun. Untuk contoh ini, kami ingin menambahkan beberapa gambar di dalam modul toggle untuk menampilkan beberapa gambar item menu restoran tertentu. Untuk melakukan ini, buka pengaturan sakelar dan klik tombol Tambahkan Media di atas kotak konten.

Di popup Perpustakaan Media, pilih tab Buat Galeri di sebelah kiri. Kemudian pilih gambar yang ingin Anda gunakan untuk galeri dan klik "Buat Galeri Baru".

Pada bagian Edit Galeri dari popup, abaikan pengaturan galeri karena gaya Galeri Divi akan menimpa pengaturan Galeri WordPress ini. Kemudian klik tombol Sisipkan Galeri.

Ini menempatkan kode pendek galeri di dalam konten modul sakelar. Jika Anda ingin galeri ditampilkan setelah teks isi saat ini, pastikan untuk menempatkan kode pendek setelah konten.

Menyesuaikan Baris Padding untuk Smartphone

Konten akan menjadi sangat ketat dengan jarak tata letak premade saat ini. Kami perlu memperbarui pengaturan baris untuk membuat lebih banyak ruang di ponsel cerdas. Untuk melakukan ini, buka pengaturan baris yang berisi sakelar menu restoran Anda dan perbarui yang berikut:

• Padding Kustom (telepon): 0px kiri, 0px kanan

Gandakan Toggle sesuai Kebutuhan

Untuk menambahkan lebih banyak Item Menu, cukup duplikat modul Toggle dan perbarui konten dengan teks dan galeri gambar baru sesuai kebutuhan. Setelah itu, Anda dapat menghapus item menu asli yang disertakan dengan tata letak yang telah dibuat sebelumnya.

Hasil Akhir

Sekarang Mari kita periksa hasil akhir dari desain.

Mengubah Jumlah Kolom di Galeri

Secara default, galeri memiliki tata letak yang tetap menjadi tiga kolom di semua lebar dan perangkat browser. Namun, dengan efek lightbox, pengguna akan dapat melihat versi yang lebih besar saat mengklik item galeri. Jadi, gambar yang lebih kecil masih bisa berfungsi. Namun, jika Anda ingin mengubah jumlah kolom, Anda selalu dapat menambahkan potongan kecil CSS. Untuk contoh ini, saya akan mengubah galeri untuk menampilkan gambar menjadi dua kolom. Untuk melakukan ini, pertama buka pengaturan sakelar dan tambahkan Kelas CSS khusus sebagai berikut:

Kelas CSS: two-col-gal

Kemudian buka pengaturan halaman dan tambahkan CSS Kustom berikut:

.two-col-gal .et_gallery_item {
width: 50%;
padding: 2%;
margin: 0;
clear: none !important;
}

Mengubah warna hamparan Galeri Gambar di Penyesuai Modul

Jika Anda ingin mengubah warna overlay kursor item galeri Anda tanpa harus menggunakan CSS khusus, Anda dapat mengubah pengaturan default untuk Modul Galeri di Penyesuai Modul. Untuk melakukan ini, navigasikan ke Divi > Module Customizer. Kemudian klik Modul Galeri dan ubah warna hamparan kursor ke apa pun yang Anda inginkan.

Pikiran Akhir

Semoga tutorial ini memberikan inspirasi bagaimana menggunakan Modul Divi Toggle untuk membuat beberapa menu restoran yang mengagumkan. Sebagai bonus, Anda mungkin telah mempelajari trik baru untuk menyematkan beberapa galeri Divi ke modul apa pun yang Anda inginkan (bukan hanya matikan). Satu-satunya batasan adalah menyesuaikan jumlah kolom yang ingin Anda tampilkan di embed galeri Anda. Namun, Anda dapat menambahkan potongan kecil CSS khusus untuk menempatkan Anda di jalur yang benar.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!