Dapatkan Hosting Instan dengan Elementor dan Elementor Pro

dengan CDN, SSL dan cadangan.

Mulai hari ini

Cara Membuat Header Lengket Menggunakan Opsi Divi

Franklin Tutorial WordPress Oct 31, 2021

Kebanyakan orang yang menggunakan pembuat tema Divi mengkonfirmasi kinerjanya apakah itu dalam hal fungsionalitas situs web yang dibuat atau dalam hal opsi penyesuaian yang hampir tidak terbatas. Membuat header lengket sudah lancar sejak kedatangan pembuat tema, tetapi kami menemukan bahwa banyak orang tidak tahu cara membuatnya tanpa menggunakan kode tambahan. Namun, cukup mudah untuk melakukannya juga berkat opsi lengket Divi . Bahkan, tidak hanya lebih mudah, tetapi metode ini menawarkan lebih banyak kemungkinan untuk menyesuaikan desain.

Karena itu kami akan meluangkan waktu, dalam tutorial ini, untuk menunjukkan kepada Anda cara membuat header lengket yang sangat dipersonalisasi menggunakan pengaturan Divi. Kami akan mengatur agar tajuk ini dipersonalisasi sebagai berikut:

  • Kami akan memiliki bilah tajuk atas + bilah menu
  • Bagian yang berisi bilah menu lengket dikonfigurasi sedemikian rupa sehingga ketika Anda kembali ke atas, bilah tajuk muncul kembali
  • Gaya desain bagian lengket (dan elemennya) akan berubah setelah bagian tersebut menjadi lengket

Semua ini akan diartikulasikan di sekitar dua bagian utama: Yang pertama dikhususkan untuk pembuatan Struktur Elemen Header di dalam Template Header baru , dan yang kedua untuk penerapan Custom Sticky Effects .

1. Membangun Struktur Elemen Header dalam Template Header baru

Buat Template Header Global Baru

Langkah pertama adalah mendapatkan Global Header Template dan mendownloadnya pada tema Divi builder. Di Divi, Anda akan membuat header global atau kustom baru.

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang

Tetapkan Bagian #1

Di dalam editor template, Anda akan melihat sebuah bagian. Di sinilah kita akan mulai membuat struktur elemen dari header kita. Jadi, buka, dan mari kita mulai konfigurasi.

Latar belakang gradien

Kami pertama-tama akan menerapkan latar belakang gradien sebagai berikut:

  • Warna 1: #ffba60
  • Warna 2: #ffd6a0
  • Arah Gradien: 90 derajat
  • Posisi Awal: 50%
  • Posisi Akhir: 50%

Jarak

Anda harus menghapus semua padding atas dan bawah default berikutnya.

  • Padding Atas: 0px
  • Padding Bawah: 0px

Tambahkan Baris baru

Untuk membuat bilah header teratas, kami akan menambahkan baris baru ke bagian kami.

Struktur Kolom

Baris baru harus didefinisikan menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

  • Gunakan Lebar Talang Kustom: Ya
  • Lebar Talang: 1
  • Lebar: 95%
  • Lebar Maks: 2580px

Jarak

Pada level ini, Anda akan menambahkan beberapa bantalan atas dan bawah khusus.

  • Padding Atas: 15px
  • Padding Bawah: 15px

CSS Elemen Utama

Sekarang Anda akan menambahkan satu baris kode CSS ke elemen utama baris di tab lanjutan. Tujuannya di sini adalah untuk memastikan bahwa kolom tetap bersebelahan pada ukuran layar yang lebih kecil.

01display: flex;

Tambahkan Modul Ikuti Media Sosial ke Kolom 1

Sekarang kita dapat menambahkan modul. Mari kita mulai di kolom 1 dengan Modul Ikuti Media Sosial.

Tambahkan Jejaring Sosial Pilihan

Anda akan menambahkan jejaring sosial pilihan Anda bersama dengan tautan yang sesuai.

Kemudian, Anda harus menghapus Warna Latar Belakang Setiap Jejaring Sosial.

Pengaturan Ikon

Kembali ke pengaturan modul umum dan ubah warna ikon di tab desain.

  • Warna Ikon: #26333a

Jarak

Tambahkan beberapa margin atas.

  • Margin Atas: 5px

Tambahkan Modul Tombol ke Kolom 2

Di kolom 2, satu-satunya modul yang kita butuhkan adalah Modul Tombol. Anda pertama-tama akan menambahkan salinan pilihan Anda.

Kemudian Anda menambahkan tautan .

Setelah itu, Anda harus pergi ke tab desain dan mengubah perataan tombol.

  • Penjajaran Tombol: Kanan

Mari konfigurasikan beberapa elemen gaya untuk tombol:

  • Gunakan Gaya Kustom Untuk Tombol: Ya
  • Ukuran Teks Tombol: 14px
  • Warna Teks Tombol: #26333a
  • Lebar Perbatasan Tombol: 2px
  • Warna Batas Tombol: #26333a
  • Radius Perbatasan Tombol: 0px
  • Jarak Huruf Tombol: 4px
  • Berat Huruf Tombol: Tebal
  • Gaya Font Tombol: Huruf Besar
  • Tampilkan Tombol: Ya

Dan kita akan menyelesaikan pengaturan modul dengan menambahkan beberapa padding atas dan bawah ke pengaturan spasi.

  • Padding Atas: 10px
  • Padding Bawah: 10px

Konfigurasi bagian 1 sekarang selesai. Sekarang kita akan menambahkan bagian khusus kedua ke menu, yang akan menjadi lengket di bagian kedua dari tutorial ini.

Tambahkan Bagian #2

Bagian 2 yang didedikasikan untuk menu akan ditambahkan tepat di bawah yang sebelumnya. Seperti pada bagian 1, pertama-tama kita akan mengkonfigurasi Gradient Background .

  • Warna 1: #ffffff
  • Warna 2: #f7f7f7
  • Tipe Gradien: Linier
  • Arah Gradien: 90 derajat
  • Posisi Awal: 25%
  • Posisi Akhir: 25%

Pindah ke tab desain bagian dan hapus semua padding atas dan bawah default.

  • Padding Atas: 0px
  • Padding Bawah: 0px

Tambahkan Baris baru

Kita perlu menggunakan struktur kolom berikut:

Kemudian, pindah ke tab desain baris dan ubah pengaturan ukuran sebagai berikut:

  • Gunakan Lebar Talang Kustom: Ya
  • Lebar Talang: 1
  • Lebar Maks: 2580px

Hapus semua padding atas dan bawah default berikutnya.

  • Padding Atas: 10px
  • Padding Bawah: 10px

Tambahkan Modul Menu ke Kolom

Anda harus menambahkan Modul Menu ke kolom baris dan memilih menu dinamis pilihan Anda.

Unggah logo berikutnya.

Setelah itu, Anda dapat menghapus warna latar belakang putih default modul.

Pindah ke tab desain dan gaya pengaturan teks menu juga.

  • Berat Font Menu: Tebal
  • Warna Teks Menu: #002d4c
  • Ukuran Teks Menu: 15px
  • Spasi Huruf Menu: 4px
  • Perataan Teks: Kanan

Sekarang, buat beberapa perubahan pada pengaturan menu dropdown.

  • Warna Latar Menu Dropdown: #ffffff
  • Warna Garis Menu Dropdown: #002d4c

Seiring dengan pengaturan ikon.

  • Warna Ikon Keranjang Belanja: #002d4c
  • Warna Ikon Pencarian: #002d4c
  • Warna Ikon Menu Hamburger: #002d4c

Dan selesaikan pengaturan modul dengan menambahkan tinggi maksimum logo ke pengaturan ukuran.

  • Tinggi Maks Logo: 60px

Dan berikut adalah Struktur Elemen Header yang didesain secara lengkap dalam Template Header Baru. Yang tersisa untuk dilakukan adalah menerapkan Efek Lengket khusus.

2. Penerapan Efek Lengket Kustom

Saatnya untuk mengubah bagian kedua kita menjadi lengket dan mengubah gaya desainnya dan elemennya dalam keadaan lengket.

Buat Bagian #2 lengket

Untuk itu, Anda perlu membuka pengaturan bagian kedua dan beralih ke tab lanjutan. Di sana, buka pengaturan efek gulir dan terapkan opsi tempel berikut:

  • Posisi Lengket: Menempel ke Atas
  • Offset Atas Lengket: 0px
  • Batas Lengket Bawah: Tidak Ada
  • Offset Dari Elemen Lengket Sekitarnya: Ya
  • Default Transisi dan Gaya Lengket: Ya

Setelah bagian menjadi lengket, opsi tambahan akan muncul di dalam pengaturan bagian, baris, dan modul kami: Opsi Tempel
Dengan mengklik opsi ini, gaya alternatif baru akan dibuat untuk semua elemen yang ingin Anda buat lengket.

Ubah Latar Belakang Gradien Bagian dalam Keadaan Lengket

Buka pengaturan latar belakang bagian kedua dan terapkan latar belakang gradien lengket berikut:

  • Warna 1: #26333a
  • Warna 2: #1e272f

Peregangan Baris dalam Keadaan Lengket

Selanjutnya, buka baris yang berisi Modul Menu dan ubah lebar dalam status lengket.

  • Lebar: 95%

Ubah Warna Teks Menu dalam Status Lengket

Cukup konfigurasikan Menu Warna Teks berikut:

  • Warna Teks Menu: #ffbd68

Ubah Warna Ikon Menu dalam Status Lengket

Seiring dengan warna ikon.

  • Warna Ikon Keranjang Belanja: #ffffff
  • Warna Ikon Pencarian: #ffffff
  • Warna Ikon Menu Hamburger: #ffffff

Hapus Tinggi Logo dalam Status Lengket

Anda harus menghapus logo dengan mengurangi ukuran maksimumnya menjadi 0. Jadi ketika pengaturan lengket bagian diaktifkan, logo akan dihapus dari header kita.

  • Tinggi Maks Logo: 0px

Itu semuanya! Pastikan Anda menyimpan semua perubahan Divi Theme Builder setelah Anda menyelesaikan desain header dan mempratinjaunya di situs web Anda.

Pratinjau

Sekarang kita akan melihat hasil pekerjaan kita pada ukuran layar yang berbeda.

Desktop

Seluler

Pikiran Akhir

Kami harap artikel ini akan membantu Anda membuat header lengket dengan mudah menggunakan Divi dan opsi yang disediakan. Opsi lengket Divi memberi Anda banyak kemungkinan untuk meningkatkan pengalaman pengguna dan desain yang Anda buat. Anda harus bisa menangani semuanya tanpa hambatan.

Jika Anda tertarik dengan lebih banyak konten, kami sarankan Anda mengikuti kami di Facebook dan Twitter .