Divi: Cara membuat tajuk global yang lengket

Apakah Anda ingin membuat tajuk lengket dengan Divi ?

Membuat tajuk lengket telah berjalan lancar sejak kedatangan tema, tetapi kami menemukan bahwa banyak orang tidak tahu cara membuatnya tanpa menggunakan kode tambahan. Namun, itu juga cukup mudah dilakukan berkat opsi sticky dari Divi.

Bahkan, tidak hanya lebih mudah, tetapi metode ini menawarkan lebih banyak kemungkinan untuk menyesuaikan desain.

Oleh karena itu kami akan meluangkan waktu, dalam tutorial ini, untuk menunjukkan kepada Anda cara membuat header tempel yang sangat dipersonalisasi menggunakan parameter Divi.

penelitian

Sebelum kita menyelami tutorial ini, mari kita lihat hasil yang ingin kita capai.

Bangun struktur elemen header

Buat template tajuk global baru

Akses Divi Theme Builder dan mulailah membuat header global atau kustom baru.

Bagian 1 Parameter

Latar belakang gradien

Setelah berada di editor template, kita akan mulai dengan membangun struktur elemen header kita. Di bagian kedua dari tutorial ini, kita akan fokus pada penerapan berbagai pengaturan sticky untuk menyelesaikan desain sticky header.

Di editor template, Anda akan melihat bagian. Buka bagian ini dan terapkan latar belakang gradien.

Warna 1: #ffba60
Warna 2: #ffd6a0
Arah gradien: 90 derajat
Posisi awal: 50%
Posisi akhir: 50%

jarak

Kemudian hapus semua margin internal (Atas dan Bawah) secara default.

Inner Margin Vertex: 0px
Margin Internal Bawah: 0px

Tambahkan baris baru

Struktur kolom

Untuk membuat bilah tajuk teratas kami, kami akan menambahkan baris baru ke bagian kami menggunakan struktur kolom berikut:

perekat

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

Gunakan Lebar Talang Kustom: Ya
Jarak kolom: 1
Lebar maksimum: 95%
Lebar maksimum: 2 piksel

jarak

Juga tambahkan margin internal (Atas dan Bawah) khusus.

Inner Margin Vertex: 15px
Margin Internal Bawah: 15px

Elemen utama CSS

Dan untuk memastikan kolom tetap bersebelahan pada ukuran layar yang lebih kecil, kami akan menambahkan baris kode CSS ke elemen baris utama di tab lanjutan.

display: flex;

Tambahkan modul 'Ikuti kami di media sosial' ke kolom 1

Tambahkan jejaring sosial pilihan

Saatnya menambahkan modul, dimulai dengan modul 'Ikuti kami di media sosial' di kolom 1. Tambahkan jejaring sosial pilihan Anda beserta tautan terkaitnya.

Hapus warna latar belakang dari setiap jejaring sosial

Lanjutkan dengan menghapus setiap warna latar belakang dari jejaring sosial satu per satu.

Pengaturan ikon

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

Warna ikon: #26333a

jarak

Tambahkan juga margin atas.

Margin Atas: 5 piksel

Tambahkan modul Tombol ke kolom 2

Tambahkan teks ke tombol

Di kolom 2, satu-satunya modul yang kita butuhkan adalah modul Button. Tambahkan teks pilihan Anda.

Menambahkan link

Kemudian tambahkan tautan.

Perataan tombol

Selanjutnya, beralih ke tab Style dan ubah perataan tombol.

Penjajaran tombol: kanan

Pengaturan tombol

Kami juga menyesuaikan tombol.

Gunakan gaya khusus untuk Tombol: Ya
Ukuran Teks Tombol: 14px
Warna Teks Tombol: #26333a
Lebar Perbatasan Tombol: 2px
Warna Batas Tombol: #26333a
Radius Perbatasan Tombol: 0 piksel

Tombol Spasi Huruf: 4px
Tombol Soft Light: Teks tebal
Salin tombol gaya: huruf besar
Tampilkan tombol: ya

jarak

Dan kami akan menyelesaikan pengaturan modul dengan menambahkan margin internal (Atas dan Bawah) ke pengaturan spasi.

Inner Margin Vertex: 10px
Margin Internal Bawah: 10px