Dapatkan Hosting Instan dengan Elementor dan Elementor Pro

dengan CDN, SSL dan cadangan.

Mulai hari ini

Cara Mendesain Menu Restoran Lengket Menggunakan Divi

Rifat Divi Tutorials Oct 20, 2021

Menu makanan adalah bagian yang sangat penting dari sebuah website restoran. Karena memberikan pelanggan gambaran keseluruhan tentang harga makanan. Sekarang, jika Anda ingin membuat menu restoran kreatif untuk situs web Anda, Anda harus melihat ke dalam Divi .

Hari ini, kami akan mengarahkan Anda ke desain menu restoran yang menarik yang memiliki efek lengket - dengan menggunakan opsi tempel bawaan Divi. Desain kami akan memisahkan seluruh menu ke dalam kategori yang berbeda dan memungkinkan pengunjung untuk melihat kategori mana mereka berada! Jadi, mari kita lakukan.

Sekilas Desain Akhir Kami

Mari kita lihat sekilas hasil akhir dari desain kita hari ini.

Tampilan Desktop

Tampilan Seluler

Membuat Struktur Elemen

Menambahkan Bagian Baru

Warna latar belakang

Tambahkan halaman baru dari dasbor Anda dan buka dengan Divi builder. Pergi dengan "Bangun Dari Awal." Sekarang, buka pengaturan bagian dan tambahkan warna latar belakang.

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang
  • Warna Latar Belakang: rgba(255.252.244,0.6)

Gambar latar belakang

Sekarang, gunakan gambar pola sebagai latar belakang. Ada banyak gambar pola yang tersedia di google, jadi pilih salah satu pilihan Anda.

  • Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
  • Posisi Gambar Latar Belakang: Tengah Atas
  • Pengulangan Gambar Latar Belakang: Ulangi X (horizontal)

Jarak

Ubah nilai spasi.

  • Padding Atas: 150px
  • Padding Bawah: 150px

Menambahkan Baris Baru

Struktur Kolom

Tambahkan baris baru di bawah gambar menggunakan struktur kolom berikut. Pilih "Biasa" dari tab "Bagian Baru".

Sekarang pilih struktur kolom berikut.

Perekat

Sekarang buka pengaturan baris dan ubah nilainya seperti yang diberikan di bawah ini.

  • Gunakan Lebar Talang Kustom: Ya
  • Lebar Talang: 1
  • Lebar: Desktop Dan Tablet: 80%, Telepon: 95%
  • Lebar Maks: 1580px
  • Penjajaran Baris: Pusat

Tambahkan Modul Teks 1 Ke Kolom 1

Tambahkan Konten H3

Nah, sekarang kita akan menambahkan modul ke struktur kita. Mari kita mulai dengan modul teks di kolom 1. Tambahkan beberapa konten H3 sesuai keinginan Anda.

Pengaturan Teks H3

Buka tab desain modul dan ubah pengaturan berikut.

  • Judul 3 Font: Karla
  • Judul 3 Berat Font: Tebal
  • Judul 3 Ukuran Teks: Desktop Dan Tablet: 45px, Telepon: 35px
  • Spasi Judul 3 Huruf: -2px
  • Pos 3 Tinggi Baris: 1.2em

Jarak

Mari tambahkan beberapa padding atas dan bawah.

  • Padding Atas: 25px
  • Padding Bawah: 25px

Tambahkan Modul Teks 2 Ke Kolom 1

Tambah isi

Tambahkan modul teks di bawah modul sebelumnya dan tambahkan beberapa kata dari pilihan Anda.

Pengaturan Teks

Ubah pengaturan modul.

  • Font Teks: Crimson Pro
  • Warna Teks: #3a3a3a
  • Ukuran Teks: 32px

Jarak

Selesaikan pengaturan modul dengan mengubah nilai spasi.

  • Margin Atas: 20px
  • Margin Bawah: 50px
  • Padding Kiri: 5%
  • Padding Kanan: 5%

Tambahkan Modul Gambar Ke Kolom 1

Unggah Gambar

Elemen terakhir yang kita butuhkan di kolom 1 adalah gambar. Tambahkan modul gambar, lalu tambahkan gambar pilihan Anda.

Perekat

Tambahkan lebar maksimum dari pengaturan ukuran.

Jarak

Sekarang selesaikan pengaturan modul dengan menerapkan perubahan berikut pada spasi.

  • Margin Bawah: Tablet: 80px, Telepon: 50px
  • Padding Kiri: 5%
  • Padding Kanan: 5%

Tambahkan Modul Blurb Ke Kolom 2

Menambahkan Konten

Tambahkan beberapa konten pilihan Anda pada modul uraian baru di kolom 2. Modul ini adalah modul berbasis teks yang memberikan lebih banyak info tentang topik individu.

Warna latar belakang

Tambahkan warna latar belakang putih dari tab konten.

  • Warna Latar Belakang: #ffffff

Pengaturan Teks Judul

Sekarang pindah ke bagian desain dan ubah nilai berikut.

  • Judul Font: Karla
  • Judul Font Berat: Tebal
  • Warna Teks Judul: #3a3a3a
  • Judul Teks Ukuran: Desktop: 40px, Tablet: 35px, Dan Telepon: 30px
  • Spasi Huruf Judul: -2px
  • Tinggi Baris Judul: 1.2em

Pengaturan Teks Tubuh

Edit pengaturan teks isi seperti yang disebutkan di bawah ini.

  • Judul Font: Karla
  • Warna Teks Judul: #3a3a3a
  • Judul Teks Ukuran: Desktop: 18px, Tablet: 25px, Dan Telepon: 20px
  • Spasi Huruf Judul: -0.5px
  • Tinggi Baris Judul: 2em

Perekat

Sekarang ubah ukurannya.

  • Lebar Konten: 100%

Jarak

Pindah ke pengaturan spasi dan ubah nilainya sesuai.

  • Margin Bawah: 30px
  • Padding Atas: 40px
  • Padding Bawah: 40px
  • Padding Kiri: 8%
  • Padding Kanan: Desktop: 25%, Tablet Dan Telepon: 8%

Berbatasan

Saatnya untuk menerapkan pengaturan perbatasan.

  • Lebar Batas Kiri: 3px
  • Warna Batas Kiri: #000000

Bayangan Kotak

Kami juga menggunakan bayangan kotak.

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

Blurb Judul CSS

Untuk menyelesaikan pengaturan modul, kita perlu menambahkan baris kode CSS berikut ke kotak CSS judul uraian di tab lanjutan.

margin-bottom: 20px;

Modul Blurb Klon

Sekarang restoran Anda mungkin memiliki berbagai item untuk sarapan. Anda tidak perlu membuat setiap bagian dari awal karena Divi memungkinkan Anda untuk menyalin modul Anda sebanyak yang Anda butuhkan. Jadi, clone modul blurb sesuai dengan item Anda.

Dan, kemudian ubah konten di dalam item.

Terapkan Efek Lengket

Modul Teks 1 Di Kolom 1

Karena kami memiliki semua elemen yang terstruktur, tidak, kami akan fokus untuk menambahkan efek lengket. Untuk itu, buka modul teks pertama di kolom 1.

Jadikan Modul Lengket

Beralih ke tab lanjutan dan buat pengaturan tempel berikut:

  • Posisi Lengket: Menempel ke Atas
  • Batas Lengket Bawah: Baris
  • Offset Elemen Lengket Sekitarnya: Ya
  • Default Transisi dan Gaya Lengket: Ya

Gaya Lengket Untuk Modul

Warna latar belakang

Karena kita sekarang memiliki modul sticky, kita dapat menerapkan gaya sticky padanya. Pertama-tama, pilih hitam sebagai warna latar belakang yang lengket.

  • Warna Latar Lengket: #000000

Warna teks

Kemudian, ubah warna teks sticky H3 menjadi putih.

  • Sticky Heading 3 Warna Teks: #ffffff

Jarak

Dan akhiri gaya lengket dengan menambahkan nilai bantalan lengket responsif berikut:

  • Padding Kiri Lengket: 5%
  • Padding Kanan Lengket: 5%

Klon Seluruh Baris Untuk Digunakan Kembali

Setelah Anda selesai dengan efek lengket dari bagian sarapan, Anda mungkin ingin menambahkan bagian makan siang dan makan malam. Jadi, duplikat seluruh baris untuk digunakan kembali.

Ubah Semua Konten Untuk Baris Kedua

Pastikan Anda telah mengubah konten untuk baris detik.

Hasil Akhir

Jadi desain akhir kami terlihat seperti ini.

Tampilan Desktop

Tampilan Seluler

Kesimpulan

Hari ini di posting ini, kami mencoba menunjukkan kepada Anda betapa kreatifnya Anda dapat menyesuaikan menu situs web Anda berikutnya dengan opsi lengket Divi . Ini adalah cara interaktif yang bagus untuk menampilkan makanan kepada pelanggan. Jika Anda memiliki saran atau permintaan tutorial, silakan bagikan pemikiran Anda di kotak komentar. Jika Anda menemukan artikel ini bermanfaat, berbagi akan menyenangkan.