Panduan untuk Memahami & Menggunakan Posisi Tetap di Divi

Properti posisi tetap adalah jenis posisi penting untuk mempelajari cara menggunakan dengan benar. Elemen tetap penting untuk meningkatkan pengalaman pengguna di situs web Anda. Header tetap tetap terlihat saat menggulir halaman web, memudahkan pengguna untuk menavigasi situs. Bilah sisi tetap membuat CTA dan Email Optin tetap terlihat, meningkatkan konversi. Dan hal yang sama berlaku untuk bilah notifikasi tetap, popup, dan banyak lainnya. Setelah kami memahami bagaimana posisi tetap bekerja dan bagaimana menggunakannya dengan benar di Divi, kami akan memiliki alat desain yang kuat untuk membawa situs Divi kami ke tingkat berikutnya.

Dalam posting ini kita akan membahas:

• Gambaran Umum Empat Jenis Pemosisian Divi
• Bagaimana Posisi Tetap “Memposisikan” Elemen di Divi
• Menggunakan Opsi Posisi Tetap di Divi
• Tips yang Perlu Diingat saat Menggunakan Posisi Tetap
• 6 Cara Bermanfaat Menggunakan Posisi Tetap di Divi

Coba lihat!

Ikhtisar Empat Jenis Pemosisian Divi

Posisi tetap adalah salah satu dari empat jenis posisi yang tersedia di Opsi Posisi Divi. Berikut adalah ikhtisar singkat masing-masing di bawah ini.

Statis (Default)

Elemen statis secara teknis tidak "diposisikan" karena mereka tetap dengan aliran normal atau urutan elemen pada halaman, dan mereka tidak merespons properti atas, kanan, bawah, dan kiri seperti elemen yang diposisikan lainnya (itulah sebabnya tidak offset tersedia di Divi untuk elemen dalam posisi statis/default). Di Divi, ketika kami memilih posisi default untuk sebuah modul, kami memilih posisi statis. Perlu juga disebutkan bahwa beberapa elemen di Divi (seperti baris dan bagian) akan memiliki posisi relatif secara default (bukan posisi statis).

Relatif

Elemen yang diposisikan secara relatif adalah semacam elemen statis yang mengikuti aliran normal halaman. Perbedaan utama adalah bahwa elemen yang diposisikan secara relatif dapat diposisikan menggunakan properti atas, bawah, kiri, dan kanan. Selain itu, tidak seperti elemen statis, mereka juga dapat diposisikan menggunakan properti Z Index.

Untuk lebih lanjut, lihat panduan kami untuk memahami dan menggunakan posisi relatif di Divi.

Mutlak

Elemen yang diposisikan benar-benar keluar dari aliran dokumen normal dan oleh karena itu tidak ada ruang aktual yang dibuat pada halaman untuk elemen tersebut. Kita dapat menganggapnya sebagai elemen yang mengambang di atas elemen lain di halaman yang menempati ruang sebenarnya. Ini akan diposisikan relatif terhadap wadah induk yang diposisikan terdekat.

Untuk lebih lanjut, lihat panduan kami untuk memahami dan menggunakan posisi absolut di Divi.

Tetap

Seperti posisi absolut, elemen dengan posisi tetap akan keluar dari aliran normal halaman dan tidak memiliki ruang aktual yang dibuat di dalam halaman. Perbedaan utama antara absolut dan tetap adalah bahwa posisi tetap relatif terhadap jendela browser atau viewport. Dengan kata lain, di mana pun elemen berada dalam aliran normal halaman, setelah diberi posisi tetap, posisinya sekarang akan langsung berhubungan dengan jendela browser. Kita dapat menggunakan properti atas, bawah, kiri, dan kanan untuk memposisikan elemen di dalam viewport. Karena elemen tetap akan sering berada di belakang atau di depan elemen lain pada halaman, Z Index akan membantu mengurutkan elemen tetap di atas yang lain.

CATATAN: Ada jenis pemosisian lain di CSS yang disebut lengket. Elemen yang diposisikan lengket berperilaku seperti elemen yang diposisikan secara relatif sampai kita menggulir ke wadahnya (pada titik tertentu ditentukan oleh nilai teratas). Kemudian elemen menjadi tetap (atau macet) hingga pengguna menggulir ke ujung wadah. Namun, posisi lengket bisa sedikit tidak terduga karena faktor lain dapat menghambat fungsionalitas. Pemosisian lengket akan dibangun ke Divi dalam waktu dekat.

Bagaimana Posisi Tetap “memposisikan” elemen di Divi

Seperti disebutkan dalam ikhtisar, jenis posisi tetap mirip dengan posisi absolut karena elemen keluar dari aliran normal dokumen (HTML pada halaman). Keluar dari alur dokumen berarti bahwa elemen tidak akan meninggalkan ruang sebenarnya di tempat asalnya di halaman. Berikut adalah ilustrasi modul dengan posisi relatif diubah ke posisi tetap. Perhatikan bagaimana area yang awalnya dibuat/diduduki di dalam kolom sekarang hilang dan modul sekarang diperbaiki di kiri atas jendela browser.

Perbedaan besar antara tetap dan absolut adalah, tidak seperti posisi absolut yang relatif terhadap wadah induknya, posisi tetap relatif terhadap jendela browser atau viewport. Inilah sebabnya mengapa elemen tetap mengatakan dalam tampilan ketika pengguna menggulir halaman ke bawah dan elemen posisi absolut mungkin tidak.

Berikut adalah ilustrasi bagaimana tiga posisi (relatif, absolut, dan tetap) berfungsi saat menggulir halaman ke bawah. Perhatikan bahwa modul tetap tetap di tempatnya (diposisikan relatif terhadap browser) saat pengguna menggulir.

Menggunakan Opsi Posisi Tetap di Divi

Di Divi, Anda dapat memberi elemen apa pun posisi tetap dengan memilih opsi posisi tetap di grup opsi Posisi toggle di bawah tab Advanced. Anda juga akan menemukan opsi posisi tetap tambahan (lokasi, offset, indeks z) setelah posisi relatif dipilih.

Menyesuaikan Lokasi Dasar dari Posisi Tetap

Setelah Anda memilih posisi tetap, Anda dapat memilih lokasi dasar menggunakan antarmuka lokasi visual. Bergantung pada lokasi dasar mana yang Anda pilih, kontrol Offset X dan Y baru akan tersedia.

Menggunakan Offset dengan Posisi Tetap

Kontrol Offset Vertikal dan Horizontal memungkinkan Anda untuk lebih menyesuaikan lokasi dasar elemen tetap Anda di seluruh sumbu lokasinya.

Nilai Offset Origin dan Offset akan bekerja sama untuk memposisikan elemen kita di mana pun kita inginkan dalam viewport browser. Dalam contoh ini, kami memiliki modul yang memiliki posisi tetap, asal offset kiri atas, offset vertikal 50px, dan offset horizontal 50px. Perhatikan bagaimana nilai offset akan memindahkan elemen dari asal offset secara horizontal dan/atau vertikal (menjauh dari sudut kiri atas browser).

Saat menggunakan nilai offset horizontal dan vertikal di Divi (seperti properti atas, bawah, kiri, dan kanan di CSS) untuk elemen tetap, penting untuk diingat bahwa nilai tersebut akan memposisikan elemen relatif terhadap viewport browser. Properti Z Index juga berguna dengan elemen tetap. Karena sebagian besar waktu Anda ingin elemen tetap tersebut tetap berada di depan elemen lain pada halaman, Anda harus memberinya nilai Indeks Z yang tinggi (seperti 9999).

Gunakan Jangkar yang Dapat Diseret Untuk Memposisikan Ulang Elemen Tetap Di Halaman

Saat Anda mengubah posisi elemen ke Tetap, jangkar yang dapat diseret akan muncul saat Anda mengarahkan kursor ke elemen. Ini memungkinkan Anda untuk menyeret elemen untuk mengubah posisinya. Saat Anda memposisikan ulang elemen, Offset X dan Y-nya disesuaikan dalam pengaturan modul.

Beberapa Tip untuk Menggunakan Pemosisian Tetap

Sesuaikan Elemen Tetap untuk Seluler

Jangan lupa, Anda dapat mengatur posisi dan offset yang berbeda pada tampilan perangkat yang berbeda untuk desain yang responsif. Misalnya, Anda mungkin menginginkan tajuk tetap di desktop, tetapi tidak di seluler. Dan sidebar tetap masuk akal untuk desktop, tetapi tidak benar-benar mungkin pada tampilan ponsel. Untuk beralih, Anda dapat menyesuaikan opsi posisi di Divi ke Relatif di tablet dan ponsel. Ini akan mengembalikannya ke posisi semula dalam aliran dokumen.

Buat Ruang untuk Elemen Tetap

Karena posisi tetap menempatkan elemen di luar aliran dokumen, elemen tersebut berada di atas konten pada halaman. Jadi jika Anda tidak ingin elemen tetap menyembunyikan konten, Anda perlu membuat ruang untuk elemen tetap. Ini dapat dilakukan dengan beberapa cara tetapi biasanya dilakukan dengan menambahkan padding atau margin ke tata letak halaman.

Contoh yang baik adalah sidebar tetap. Jika Anda ingin menambahkan bilah sisi tetap ke templat halaman Anda di Divi, pertama-tama Anda harus memastikan lebar area konten utama dikurangi untuk menciptakan ruang yang diperlukan untuk bilah sisi tetap. Jadi, jika Anda menggunakan bagian untuk membuat bilah sisi, Anda dapat memberikan posisi tetap pada bagian tersebut, tinggi 100%, dan lebar 300px.

Kemudian Anda perlu memberi bagian lain yang memegang modul konten posting (area konten utama halaman) margin kiri 300px untuk mengakomodasi lebar bilah sisi di sisi kiri halaman.

Gunakan Indeks Z Lebih Tinggi untuk Elemen Tetap

Kecuali elemen tetap telah diberi ruang yang cukup untuk itu di halaman Anda, itu akan tumpang tindih dengan konten lain di halaman. Dalam kebanyakan kasus, Anda ingin elemen tetap tetap terlihat (di atas) karena bertabrakan dengan elemen lain di halaman saat menggulir. Untuk melakukan ini, Anda dapat menambahkan Indeks Z yang lebih tinggi ke elemen tetap Anda untuk memastikannya tetap berada di atas semua konten lain di ruang Z. Jika Anda tidak tahu nilai apa yang harus diberikan, Anda dapat menambahkan angka besar seperti 9999.

6 Cara Menggunakan Posisi Tetap

#1 Header Tetap

Salah satu penggunaan terbaik dari opsi posisi tetap baru adalah pembuatan header tetap. Menggunakan Divi Theme Builder, Anda dapat membuat header yang sepenuhnya khusus dan membuat seluruh bagian diperbaiki.

Cara Posting

Berikut adalah posting tentang cara membuat tajuk tetap di Divi:

• Cara Membuat Header Tetap dengan Opsi Posisi Divi

#2 Bilah Footer Tetap

Sama seperti header tetap, beberapa situs web juga mendapat manfaat dari footer atau bilah footer tetap. Ini memungkinkan pengguna untuk menyimpan info yang menonjol di garis depan di lokasi yang lebih halus. Bilah footer tetap sangat bagus untuk ponsel karena sangat dekat dengan ibu jari yang gatal untuk mengklik tombol.

Cara Posting

Berikut adalah beberapa posting tentang cara membuat bilah footer tetap di Divi:

• Cara Membuat Bilah Footer Tetap untuk Tema Divi Anda
• Cara Membuat Bilah Footer Seluler Tetap dengan Divi
• Cara Membuat Bilah Kontak Seluler (tetap) di Divi

#3 Memperbaiki Sidebar/Menu Vertikal

Bilah sisi tetap membuat hal-hal seperti menu, keikutsertaan email, dan CTA tersedia bagi pengunjung saat mereka menavigasi situs Anda. Dan jika Anda mau, Anda dapat menambahkan gulir overflow ke bilah sisi tetap untuk memiliki bilah sisi tetap yang dapat digulir dengan banyak konten.

Cara Posting

Berikut adalah posting tentang cara membangun bilah sisi tetap di Divi:

• Cara Membuat Bilah Sisi Tetap yang Responsif dengan Tautan Jangkar Pengguliran Halus dengan Divi
• Cara Membuat Menu Navigasi Vertikal (tetap) untuk Situs Web Divi Anda

#4 Memperbaiki Tombol Kembali-ke-Atas

Tombol Back-to-Top biasanya dipasang di kanan bawah situs web, selalu tersedia bagi pengguna untuk mengklik untuk mengirim mereka kembali ke bagian atas halaman.

Berikut adalah posting tentang cara membuat tombol back-to-top tetap di Divi:

• Cara Membuat Desain Lengket Kustom (Tetap) Kembali ke Atas dengan Divi

#5 Menu Tetap

Sebagian besar menu yang digeser atau munculan memiliki posisi tetap. Ini bagus untuk seluler juga.

Berikut adalah posting tentang cara membuat menu tetap di Divi:

• Cara Membuat Menu Slide-In Responsif dengan Pembuat Tema Divi

#6 Memperbaiki kotak Pemberitahuan, Ajakan Bertindak, Keikutsertaan Email, dll…

Berikut adalah posting tentang cara membuat kotak notifikasi tetap di Divi:

• Cara Menambahkan Ajakan Bertindak Slide-In yang Dapat Ditutup ke Setiap Sudut Template Halaman Anda di Divi

Pikiran Akhir

Anda tidak akan terlalu jauh dalam pengembangan web sebelum menghadapi kebutuhan untuk menggunakan posisi tetap. Ini digunakan dalam banyak elemen kunci yang membentuk sebuah situs web. Di Divi, posisi tetap hanya dengan sekali klik, tetapi penting untuk memahami cara kerjanya untuk menggunakannya dengan baik. Semoga artikel ini membantu Anda memahami cara menggunakan posisi tetap di Divi dengan lebih baik sehingga Anda dapat membawa proyek berikutnya ke tingkat yang lebih tinggi.

Apa pengalaman Anda dengan jenis posisi tetap?

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!