Apakah Anda ingin membuat header global samping dengan Divi?
Dalam tutorial ini, kami akan menunjukkan cara membuat header yang diputar secara global yang muncul di sisi kiri halaman dan postingan Anda. Warna latar belakang header benar-benar transparan, sehingga memungkinkan isi dari halaman/postingan.
Kami memastikan bahwa tajuk global tetap berada di sisi kiri saat menggulir dan kami juga menjadikan menu versi yang ramah seluler.
Dalam tutorial ini, kami akan menunjukkan cara membuat ulang desain dari awal!
Mari kita pergi.
penelitian
Sebelum masuk ke tutorial, mari kita lihat sekilas hasil yang ingin kita capai.
Buka pembuat tema Divi dan mulailah membuat tajuk global
Dari dasbor WordPress, buka Divi > Pembuat Tema
Klik “Tambahkan Tajuk Global”
Sélectionnez “Bangun Tajuk Global”.
Mulai buat tajuk sisi global
Tambahkan bagian baru
Warna latar belakang
Setelah berada di editor template, Anda dapat membuka bagian yang sudah ada dan mengubah warna latar belakang pada ukuran layar yang berbeda.
- Warna latar belakang: rgba(0,0,0,0) (Desktop), #FFFFFF (Tablet dan Ponsel)
perekat
Buka tab Mendesain, tarik ke bawah opsi Perekat dan kemudian ubah parameter ukuran bagian.
- Lebar: 5vw (Desktop), 100% (Tablet dan Ponsel)
- Tinggi Min: 100 vw (Desktop), otomatis (Tablet dan Ponsel)
jarak
Kemudian tarik ke bawah opsi Spasi dan ubah pengaturan sebagai berikut:
- Padding (Atas dan Bawah): 2vw
Kotak bayangan
Lalu pergi ke Bayangan Kotak dan tambahkan bayangan kotak khusus pada ukuran layar yang berbeda.
- Posisi Horizontal Box Shadow: 32px (Desktop), 0px (Tablet dan Ponsel)
- Kekuatan Buram Bayangan Kotak: 49px
- Spread Strength: 0px (Desktop), 19px (Tablet dan Ponsel)
- Warna Bayangan: rgba (0,0,0,0.12)
Menambahkan CSS Khusus
Kami juga akan memastikan bahwa header sisi global tetap berada di sisi kiri dengan menambahkan beberapa baris kode CSS ke elemen bagian utama.
position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
Saat melayang di atas bagian
Pastikan juga untuk menambahkan baris kode CSS ini ke elemen utama saat mengarahkan kursor ke bagian tersebut.
position: fixed;
top: 0;
Visibilitas default
Kemudian naikkan z-index pada parameter posisi.
- Indeks Z: 99999
Arahkan visibilitas
Pastikan nilai yang sama berlaku saat melayang.
- Indeks Z: 99999
Tambahkan baris baru
Struktur kolom
Setelah Anda menyelesaikan pengaturan bagian, lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul apa pun, buka pengaturan garis dan ubah pengaturan ukuran.
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
jarak
Hapus juga semua margin default.
- Padding (Atas dan Bawah): 0px
Parameter kolom
Menambahkan CSS khusus (tablet dan ponsel)
Di tablet dan ponsel, kami memilih tampilan yang sama sekali berbeda. Kami akan menempatkan tiga modul yang berbeda di samping satu sama lain. Untuk melakukan ini, kita perlu menambahkan beberapa kode CSS.
Buka pengaturan kolom, buka tab Advanced dan masukkan baris kode CSS berikut di ruang: Elemen Utama untuk tablet dan ponsel:
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
Tambahkan modul Gambar ke kolom
Unduh logo
Saatnya untuk mulai menambahkan modul! Modul pertama yang kita butuhkan adalah modul Image. Unggah file gambar logo semi-transparan pilihan Anda.
perekat
Lalu pergi ke tab Mendesain dan ubah lebar pada ukuran layar yang berbeda.
- Lebar: 4 vw (Desktop), 12 vw (Tablet), 16 vw (Telepon)
Skala transformasi
Tingkatkan ukuran modul dengan mengubah pengaturan skala transformasi sesudahnya.
- Kanan: 170% (Desktop), 100% (Tablet dan Ponsel)
- Rendah: 170% (desktop), 100% (tablet dan ponsel)
"Terjemahkan Terjemahkan"
Dan dorong modul ke kanan dengan memodifikasi parameter berikut:
- Bawah: 1vw (Desktop), 0vw (Tablet dan Telepon)
Tambahkan modul Menu ke kolom
Pilih menu untuk ditambahkan
Modul selanjutnya yang kita butuhkan adalah modul Menu. Pilih menu pilihan Anda.
Hapus warna latar belakang
Kemudian hapus warna latar belakang dari modul.
ketentuan
Lalu pergi ke tab Mendesain dan mengubah pengaturan tata letak.
- Gaya: Terpusat
- Arah Menu Dropdown: Ke Bawah
Pengaturan teks menu
Ubah juga pengaturan teks menu.
- Warna Tautan Aktif: #cecece
- Font Menu: Montserrat
- Berat Font Menu: Tebal
- Warna Teks: #000000
- Ukuran Teks Menu: 0,9 vw (Desktop), 2 vw (Tablet), 2,5 vw (Telepon)
Teks menu saat melayang
Ubah warna teks menu saat mengarahkan kursor.
- Warna teks menu: #afafaf
Menu tarik-turun
Kami juga membuat beberapa perubahan pada pengaturan menu drop-down.
- Warna Garis Menu Dropdown: #000000
- Warna Teks Menu Dropdown: #000000
ikon
Kemudian ubah warna ikon menu hamburger.
- Warna Ikon Menu Hamburger: #000000
jarak
Dan tambahkan nilai margin khusus pada ukuran layar yang berbeda.
- Margin (Atas dan Bawah): 18 vw (Desktop), 0 vw (Tablet dan Telepon)
- Margin (Kiri dan Kanan): -13vw (Desktop), 0vw (Tablet dan Telepon)
Transformasi Rotasi
Sekarang, untuk membuat efek rotasi, kita akan bermain-main dengan nilai rotasi transformasi modul.
- Kiri: 270 derajat (Desktop), 0 derajat (Tablet dan Ponsel)
Tambahkan modul "Ikuti Media Sosial" ke kolom
Tambahkan jejaring sosial
Mari kita beralih ke modul “Social Media Follow”, yang merupakan modul berikutnya dan terakhir yang kita perlukan untuk menyelesaikan header pivoted global kita. Tambahkan beberapa jejaring sosial pilihan Anda.
Setel ulang gaya ikon media sosial
Lanjutkan dengan mengatur ulang pengaturan untuk setiap jejaring sosial satu per satu. Ini akan membantu kita menghilangkan warna latar belakang mereka.
penjajaran
Kemudian beralih ke tab Mendesain modul dan mengubah perataan modul pada ukuran layar yang berbeda.
- Modul penyelarasan: Kiri (Desktop), Kanan (Tablet dan Ponsel)
Pengaturan ikon
Terakhir, ubah juga pengaturan ikon.
- Warna Ikon: #000000
- Gunakan Ukuran Ikon Kustom: YA
- Ukuran Font Ikon: 2,1 vw
Simpan perubahan konstruktor dan lihat hasilnya
Setelah Anda menyelesaikan semua modul, Anda dapat menyimpan model, keluar dari pembuat tema Divi dan memvisualisasikan hasilnya pada Anda situs jaringan !
penelitian
Sekarang kita telah melalui semua langkah, mari kita lihat hasilnya.
Biro
Unduh DIVI sekarang!!!
Kesimpulan
Pada artikel ini, kami menunjukkan cara membuat header global yang diputar. Kecuali Anda memilih sebaliknya, tajuk global yang kami buat akan muncul di semua posting dan halaman Anda.
Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Lihat juga sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
