Penjualan Ulang Tahun Elemen

Nikmati diskon 60% untuk pembelian baru, pembaruan dan peningkatan.

00 Hari -hari
:
00 Jam
:
00 Menit
:
00 Detik

Beli sekarang

Cara Mendesain Bagian Pahlawan Lengket Pada Gulir Dengan Divi

Rifat Divi Tutorials Oct 19, 2021

Bagian pahlawan dianggap sebagai bagian yang memproyeksikan halaman web. Untuk itu, pemilik website menggunakan bagian ini sebagai senjata untuk menarik perhatian pengunjung. Jika Anda mencari animasi bagian pahlawan lengket interaktif di situs web Anda, Divi telah mendukung Anda. Berkat opsi Sticky Divi karena sangat mudah untuk membuat efek gulir bagian pahlawan kreatif dengannya.

Hari ini, kita akan melihat bagaimana kita dapat menggunakan efek pengguliran yang menyenangkan secara visual di bagian pahlawan situs web WordPress kita. Di bagian pertama tutorial, kita akan melihat keseluruhan desain, dan di bagian selanjutnya, kita akan menambahkan efek di sana. Jadi mari kita mulai tanpa penundaan.

Desain Ouline

Sebelum kita melanjutkan, mari kita lihat bagaimana desain akhir kita akan terlihat.

Buat Kerangka Desain

Penambahan Bagian Baru

Warna latar belakang

Pada awalnya, kami akan lebih berkonsentrasi pada pembuatan desain. Nanti di bagian kedua, kita akan menerapkan efek lengket. Sekarang, silakan buat halaman baru dan tambahkan bagian baru ke dalamnya. Buka pengaturan bagian itu dan tambahkan warna latar belakang.

Penawaran luar biasa

Ulang tahun ke -6 Elementor dengan diskon hingga 60%

Mulai sekarang
  • Warna Latar Belakang: rgba(53,44,43,0.17)

Jarak

Mari pindah ke tab desain bagian ini dan ubah nilainya sebagai berikut.

  • Padding Atas: 13vh
  • Padding Bawah 0px

Baris 1 Menambahkan

Struktur Kolom

Sekarang tambahkan baris baru menggunakan struktur kolom berikut.

Perekat

Sekarang tambahkan pengaturan baris dan pindah pada tab desain untuk mengubah pengaturan ukuran seperti di bawah ini.

  • Gunakan Lebar Talang Kustom: Ya
  • Lebar Talang: 2
  • Samakan Tinggi Kolom: 2
  • Lebar: Desktop - 80%, Tab dan Telepon - 90%
  • Lebar Maks: 2580px

Jarak

Sekarang kita akan menghapus semua padding dari atas dan bawah. Jadi, padding atas dan bawah adalah 0px.

Setting Untuk Kolom 1 (Baris 1)

Jarak

Saat ini, Buka pengaturan untuk Kolom 1 dan ubah pengaturan spasi.

  • Padding Atas - Desktop 25vh, Tab, dan Telepon 10vh
  • Padding Bawah - Desktop 25vh, Tab, dan Telepon 10vh
  • 5% Padding baik di sisi kiri dan kanan.

Setting Untuk Kolom 2 (Baris 1)

Gambar latar belakang

Selanjutnya, tambahkan gambar latar belakang ke pilihan Anda dari pengaturan kolom 2.

  • Ukuran Gambar Latar Belakang: Sampul
  • Posisi Gambar Latar Belakang: Tengah

Visibilitas

Untuk memastikan ini berfungsi pada ukuran layar tampilan yang lebih kecil, kami akan beralih ke tab lanjutan dari kolom kedua dan menonaktifkan visibilitas untuk tablet dan ponsel.

Menambahkan Modul Teks Ke Kolom 1 (Baris 1)

Konten Tajuk

Kami akan menambahkan modul sekarang. Mari kita mulai dengan modul teks di kolom 1. Tambahkan konten H1 apa pun yang Anda suka!

Pengaturan Teks H1

Sekarang ubah pengaturan teks H1 dari tab desain modul.

  • Font Judul: Teks Crimson
  • Ukuran Teks Judul: Desktop 6vh, Tablet 50px, Telepon 40px
  • Tinggi Garis Pos: 1,2 em

Penambahan Modul Pembagi Ke Kolom 1 (Baris 1)

Visibilitas

Saatnya menambahkan modul pembagi ke kolom pertama kita. Juga, aktifkan opsi pembagi acara.

Garis

Sekarang beralih ke tab desain modul dan ubah pengaturan garis.

  • Warna Garis: #35241f

Perekat

Ubah nilai pada pengaturan ukuran.

  • Berat Pembagi: 5px
  • Lebar: 21%
  • Tinggi: 5px

Deskripsi Konten

Sekarang kita akan menambahkan modul terakhir yang kita butuhkan di kolom 1 dan itu adalah modul teks lainnya. Tambahkan beberapa deskripsi di sana.

Pengaturan Teks

Ubah pengaturan teks modul sebagai berikut.

  • Font Teks: Karla
  • Ukuran Teks: 18px
  • Tinggi Baris Teks: 2.1em

Baris 2 Menambahkan

Struktur Kolom

Untuk membuat dampak ini berfungsi, Anda hanya perlu menambahkan baris baru di bawah baris utama, di bawah bagian yang sama. Baris ini akan membutuhkan warna latar belakang serta tinggi dan lebar yang cukup sehingga baris pertama bisa muat di bawahnya. Kami menggunakan struktur kolom berikut.

Warna latar belakang

Sekarang, tambahkan warna latar belakang ke baris.

  • Warna Latar Belakang: #35241f

Perekat

Ubah nilai dalam pengaturan ukuran dari tab desain.

  • Lebar: 100%
  • Lebar Maks: 3000px

Jarak

Untuk pengaturan spasi, ubah nilai dengan cara yang sama.

  • Padding Atas: Desktop - 30vh, Tab Dan Telepon - 0vh.
  • Padding Bawah: 30vh
  • Padding Kiri: 10%
  • Padding Kanan: 10%

Modul Gambar Pada Kolom 1 (Baris 2)

Unggah Gambar (Hanya Seluler dan Tab)

Sekarang, kita akan menambahkan dan gambar modul ke kolom pertama. Ingatkah Anda bahwa kami menonaktifkan visibilitas gambar untuk Tablet dan Ponsel? Modul gambar ini akan menggantikan gambar yang digunakan pada baris pertama pada ukuran layar yang lebih kecil. Gunakan gambar hanya untuk tablet dan ponsel!

Pindah ke tampilan tablet dan seluler dan tambahkan gambar.

Jarak

Pindah ke tab desain modul dan ubah margin bawah sebagai berikut.

  • Margin Bawah: Desktop 0px, Tablet, dan Telepon 50px

Penambahan Modul Pembagi ke Kolom 1 (Baris 2)

Visibilitas

Sekarang tambahkan modul Divider baru di bawah gambar dan aktifkan opsi "Show Divider".

Garis

Beralih ke tab desain modul dan ubah warna garis.

  • Warna Garis: #ffffff

Perekat

Ubah juga pengaturan ukuran dari bagian desain.

  • Berat Pembagi: 5px
  • Tinggi: 5px

Menambahkan Modul Teks Ke Kolom 1 (Baris 2)

Konten Tajuk

Tambahkan modul teks baru dengan beberapa konten H2.

Pengaturan Teks Tajuk

Ubah pengaturan teks H2 sebagai berikut

  • Judul 2 Font: Teks Crimson
  • Judul 2 Warna Teks: #ffffff
  • Judul 2 Ukuran Teks: Desktop 6vh, Tablet 50px, Telepon 40px.

Menambahkan Modul Teks Ke Kolom 2 (Baris 2)

Deskripsi Konten

Satu-satunya modul yang akan kita tambahkan pada kolom 2 adalah modul teks di mana akan ada beberapa konten deskripsi.

Pengaturan Teks

Ubah pengaturan modul teks seperti yang diberikan di bawah ini.

  • Font Teks: Karla
  • Berat Font Teks: Reguler
  • Ukuran Teks: Desktop 30px, Tablet Dan Telepon 18px
  • Tinggi Baris Teks: 2.2em
  • Warna Teks: Cahaya

Terapkan Efek Lengket

Ubah Nilai Indeks Baris Z

Baris 1

Sekarang kita telah mengorientasikan dasar desain kita, sekarang kita akan fokus pada beberapa langkah lebih lanjut untuk membuat efek sampul pahlawan. Buka pengaturan baris pertama dan ubah indeks Z di tab lanjutan.

  • Indeks Z: 1

Baris 2

Ubah nilai indeks Z baris kedua. Nilainya harus lebih tinggi dari baris pertama.

  • Indeks Z: 2

Efek Lengket Pada Baris 1

Sekarang, Buka pengaturan baris pertama sekali lagi dan terapkan efek lengket dari tab lanjutan. Batas wajib make bottom sticky diatur ke bagian.

Pengaturan Tempel Untuk Kolom 1 (Warna Latar Belakang)

Sekarang seluruh baris telah berubah menjadi lengket, kita akan menerapkan beberapa efek lengket pada elemen anak dari baris. Buka pengaturan kolom 1 dan terapkan warna latar belakang lengket berikut.

  • Warna Latar Lengket: #edeaea

Pengaturan Lengket Untuk Kolom 1 (Skew Transformasi Lengket)

Sekarang, pindah ke tab desain dan terapkan nilai sticky skew berikut.

  • Lengket Bawah Miring: -4deg

Pengaturan Lengket Untuk Kolom 2 (Skew Transformasi Lengket)

Terapkan nilai kemiringan lengket yang sama dari pengaturan transformasi untuk kolom 2.

  • Lengket Bawah Miring: -4deg

Pengaturan Lengket Untuk Modul Teks x2 (Skew Transformasi Lengket)

Kami berada di bagian akhir dari desain kami. Kami akan menyelesaikan desain dan efek dengan mengubah nilai kemiringan bawah untuk kedua modul teks di kolom 1 dalam status lengket. Ini akan meratakan nilai kemiringan kolom lengket yang dinavigasi.

  • Kemiringan Bawah Lengket: 4 derajat

Hasil Akhir

Karena kami telah melalui semua langkah dan melakukan apa yang kami minta, produk akhir kami akan terlihat seperti ini.

Kata-kata Terakhir

Divi memiliki banyak pilihan untuk membuat situs web lebih indah daripada yang lain. Tutorial kami hari ini adalah cara yang bagus untuk menampilkan deskripsi singkat, layanan, dan banyak lagi! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar. Juga, jika Anda merasa tutorial ini bermanfaat, berbagi akan sangat bagus!