Cara Membuat Bagian Tumpang Tindih Di Elementor

Rifat elemen Jan 11, 2023

Di Elementor , elemen yang tumpang tindih dapat memberikan tampilan yang khas, ahli, dan modis. Selain itu, ini memungkinkan Anda menjejalkan lebih banyak informasi ke dalam ruang yang ringkas tanpa membuatnya terlihat steril atau tidak menarik.

Kabar baiknya adalah menggunakan Elementor membuatnya sesederhana tumpang tindih gambar, teks, dan elemen lainnya. Kami akan menunjukkan cara membuat bagian yang tumpang tindih di Elementor dalam tutorial hari ini.

Buat Bagian Elementor yang Tumpang Tindih

Buka halaman di dasbor Anda dan luncurkan halaman apa pun menggunakan Elementor. Kemudian pilih Edit Dengan Elementor.

Setel Tata Letak Halaman ke Kanvas Elemen di bawah Pengaturan Halaman setelah halaman Anda dimuat. lalu tekan tanda tambah (+) untuk menambahkan bagian baru dengan satu kolom.

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang

Di bagian baru Anda, tambahkan widget; klik ikon widget’s dan dalam pencarian, ketik pembagi untuk mendapatkan widget pembagi, seret ke bagian Anda.

Atur Tinggi ke Tinggi Min 400 piksel di jendela Edit Bagian di sebelah kanan setelah memilih bagian. Beri warna backdrop di bawah Style (pilihan saya merah). Berikan pembagi latar belakang putih di bawah Style setelah memilih pembagi.

Sekarang pilih bagian dan gandakan.

Sekarang beri gaya pada bagian klon secara terpisah dari yang sebelumnya dan berikan warna latar belakang yang berbeda.

Langkah selanjutnya adalah tumpang tindih dua bagian Anda setelah Anda memilikinya.

Saya akan mulai dengan mendemonstrasikan cara menumpuk bagian biru dan merah.

Anda akan membutuhkan Elementor Navigator untuk ini. Simbol navigasi ada di sebelah kiri, di dekat bagian bawah Bagian Edit Anda.

Navigator Anda muncul saat Anda mengklik ikon navigasi. Anda dapat dengan cepat mengakses bagian Anda dengan navigator, yang juga membantu navigasi melaluinya. Selain itu, sebagian disembunyikan saat Anda mengklik "mata" di sebelahnya.

Pilih bagian biru, pilih Lanjutan dari menu Edit Bagian di sebelah kiri, lalu di bawah Margin, beri margin Atas -100 piksel. Ini akan membawa bagian biru ke (di atas) bagian pertama.

Pilih bagian merah, pilih Advanced, pilih Z-index, dan sesuaikan ke 10 agar bagian merah muncul di atas bagian biru. Hasilnya, bagian merah secara otomatis ditempatkan di atas bagian biru.

Awalnya, bagian biru lebih besar dari bagian merah karena diprioritaskan. Jika bagian biru memiliki indeks-Z 1, itu di atas jika bagian merah memiliki indeks-Z 0. Intinya, bagian dengan indeks-Z lebih tinggi secara otomatis meluncur di atas bagian bawah.

Bayangkan Anda memiliki lebih dari dua bagian.

Anda harus membuat bagian lain untuk melihat bagaimana fungsinya.

Pilih bagian biru dan duplikat. Kemudian pilih bagian yang dikloning dan atur Z-index dan Margins ke 0 piksel di bawah Advanced. Anda dapat mengubah warnanya di bawah Gaya.

Overlap Sections in Elementor

Misalnya, Anda perlu memberi bagian biru indeks-Z yang lebih tinggi daripada bagian merah dan hijau jika Anda ingin berada di atas kedua bagian.

Misalnya, area hijau dan bagian merah keduanya memiliki indeks-Z 1. (default). Putuskan untuk memberi bagian biru indeks-Z 3 dan kemudian memilihnya.

Pilih bagian hijau dan beri Margin -20 di bawah Lanjutan sehingga dapat berpindah ke bagian atas untuk melihat dengan jelas modifikasi ini. Bagian biru kemudian terlihat berada di atas kedua area.

Overlap Sections in Elementor with Z index

Bahkan dalam pengaturan responsif, efek yang tumpang tindih ini berfungsi. Misalnya, Anda dapat memilih perangkat seluler dari menu Mode Responsif dan memutuskan untuk meningkatkan indeks-Z bagian apa pun yang ingin Anda lihat terlebih dahulu.

Membungkus

Di Elementor , Anda dapat melakukannya untuk tumpang tindih area, dan tumpang tindih tersebut bahkan akan berfungsi pada perangkat yang berbeda.

Gunakan bagian di bawah ini untuk komentar atau pertanyaan apa pun. Juga, sebarkan berita ini ke kenalan Anda dan terus ikuti CodeWatchers.

Divi WordPress Theme