Sebagian besar situs web memiliki bagian “Pahlawan”, yang tidak perlu lagi dibuktikan. Perannya tidak hanya menonjol, tetapi juga dibagi menjadi beberapa elemen yang memperkuat call to action yang ada. Pahlawan bagian ke isi split dengan struktur yang mudah dipahami sangat populer dan sering digunakan oleh berbagai jenis situs web.
Dan meskipun membuat bagian pahlawan isi Terbagi karena kantor terkesan sederhana, Anda tidak harus selalu mempercayai penampilan. Di sinilah tutorial ini akan berguna. Kami akan membuat ulang bagian pahlawan split seluler yang sangat interaktif yang tidak hanya akan terlihat bagus di seluler, tetapi berapa pun ukuran layarnya. Kami juga menggabungkan animasi luar biasa agar sesuai dengan gaya desain 2019 dengan sempurna. Kami harap tutorial ini menginspirasi Anda untuk membuat bagian pahlawan seluler Anda sendiri isi membelah.
Mari kita pergi!
penelitian
Sebelum kita menyelami tutorialnya, mari kita lihat apa yang bisa Anda dapatkan setelah menyelesaikan tutorial ini.
Desain antarmuka
Tambahkan bagian baru
jarak
Mulailah dengan membuat halaman baru atau membuka yang sudah ada. Tambahkan bagian reguler baru ke dalamnya, buka pengaturan jarak dan hapus semua margin padding atas dan bawah default.
- Padding terbaik: 0px
- Bawah Pelapis: 0px
Tambahkan baris baru
Struktur kolom
Kami akan terus menambahkan baris baru dan menggunakan struktur kolom berikut:
Warna latar belakang
Tanpa menambahkan lebih banyak modul, buka pengaturan garis dan tambahkan warna latar belakang yang sepenuhnya hitam.
- Warna latar: #000000
Kolom 1 Warna Latar Belakang
Tambahkan juga warna latar belakang hitam ke kolom pertama.
- Kolom 1 Warna Latar Belakang: #000000
Kolom 2 Warna Latar Belakang
Hal yang sama untuk kolom kedua.
- Kolom 2 Warna Latar Belakang: #000000
perekat
Lalu pergi ke pengaturan ukuran dan biarkan baris dan kolomnya memenuhi seluruh lebar layar.
- Jadikan garis ini lebar penuh: Ya
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Menyamakan ketinggian kolom: Ya
jarak
Kami juga menghapus semua margin atas dan bawah default dari baris.
- Padding di atas: 0px
- Bawah Pelapis: 0px
- Jok Kanan: 1vw
pameran
Terakhir, kami akan memastikan kedua kolom muncul berdampingan di layar yang lebih kecil. Untuk melakukan ini, kita perlu menambahkan satu baris kode CSS ke tab baris Advanced.
display: flex; |
Tambahkan modul gambar ke kolom 1
Biarkan area gambar kosong
Kami sekarang memiliki semua modul yang kami butuhkan! Anda harus mulai dengan modul gambar di kolom pertama. Alih-alih mengunggah gambar ke area gambar, kami akan mengunggah gambar ke pengaturan latar belakang pada langkah selanjutnya, jadi kami perlu menghapus gambar yang ditambahkan secara default. Jadi, kita bisa bermain-main dengan cara gambar diposisikan dan berapa banyak ruang yang ditempati di baris kita.
Tambahkan warna latar belakang
Pergi ke pengaturan latar belakang modul Gambar dan tambahkan warna latar belakang. Pada langkah selanjutnya, kita akan menggabungkan warna latar belakang ini dan gambar latar belakang menggunakan efek campuran untuk menggelapkan gambar.
- Warna latar: #686868
Tambahkan gambar latar belakang
Tambahkan gambar latar belakang pilihan Anda dan ubah pengaturan latar belakang sesuai:
- Ukuran Gambar Latar Belakang: Sampul
- Posisi gambar latar belakang: tengah
- Ulangi gambar latar belakang: Tanpa pengulangan
- Campuran gambar latar belakang: kalikan
perekat
Kami menggunakan dua kolom dengan ukuran yang sama untuk baris yang sedang kami kerjakan, tetapi hasilnya tidak sama. Kami akan secara manual mengubah ukuran setiap modul yang ditambahkan agar terlihat seperti kami menggunakan struktur kolom yang berbeda. Alasan kami melakukan ini (daripada hanya memilih struktur kolom lain) adalah untuk membuat semuanya responsif.
pada layar yang lebih kecil. Akses parameter ukuran modul gambar dan ubah lebarnya.
- Lebar: 88%
- Perataan modul: kiri
jarak
Sekarang kita perlu memutuskan ukuran gambar kita di pengaturan jarak. Kami juga menggunakan unit tampilan untuk nilai-nilai ini guna memastikan bahwa desain kami tetap responsif sepenuhnya, berapa pun ukuran layarnya.
- Lapisan atas: 26.3vw (desktop), 48vw (tablet), 72vw (telepon)
- Pelapis di bagian bawah: 26.3vw (desktop), 48vw (tablet), 72vw (ponsel)
animasi
Terakhir, kami akan menambahkan animasi slide ke modul Image. Setelah Anda menerapkan animasi, Anda akan melihat bahwa gambar tidak akan mulai muncul hingga masuk ke kolom pertama. Warna latar belakang kolom kedua tetap berada di bagian atas Modul Gambar saat diseret ke kiri.
- Gaya Animasi: Slide
- Ulangi Animasi: Sekali
- Arah animasi: kiri
- Durasi Animasi: 1450ms
- Animasi Intensitas: 60%
- Animasi Mulai opacity: 100%
Tambahkan modul tombol ke kolom 1
Tambahkan salinan
Modul selanjutnya yang kita butuhkan pada kolom 1 adalah modul tombol. Masukkan salinan pilihan Anda.
Pengaturan tombol
Lalu pergi ke tab Desain dan ubah pengaturan tombol.
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran teks tombol: 1.5vw (desktop), 2.5vw (tablet), 4vw (telepon)
- Warna teks tombol: #ffffff
- Warna latar tombol: #e02b20
- Lebar batas tombol: 0px
- Radius batas tombol: 1px
- Font Tombol: Poppins
- Berat font: Tebal
jarak
Juga ubah nilai spasi.
- Margin teratas: -3.3vw (desktop), -6vw (tablet), -9.1vw (telepon)
- Padding Kiri: 8vw
- Jok Kanan: 8vw
Kotak bayangan
Dan tambahkan bayangan halus untuk membuat kedalaman pada halaman.
- Box Shadow Blur Force: 20px
- Warna bayangan: rgba (0,0,0,0.3)
Tambahkan modul teks # 1 ke kolom 2
Tambahkan konten H1
Di kolom kedua! Modul pertama yang kita perlukan adalah modul teks. Tambahkan konten H1 pilihan Anda.
Pengaturan Teks H1
Lalu pergi ke tab Desain dan ubah pengaturan teks H1.
- Font: Poppins
- Warna teks judul: #ffffff
- Ukuran Judul Teks: 4vw (desktop), 5vw (tablet), 6vw (telepon)
jarak
Ubah nilai spasi juga.
- Margin atas: 12vw
- Margin kiri: -20vw
- Margin kanan: 17vw (desktop), 15vw (tablet), 1vw (telepon)
animasi
Dan tambahkan animasi yang halus.
- Gaya Animasi: Slide
- Ulangi Animasi: Sekali
- Arah Animasi: Bawah
- Durasi Animasi: 1450ms
- Animasi Intensitas: 10%
- Animasi Mulai opacity: 100%
Tambahkan modul divisi ke kolom 2
jarak penglihatan
Modul selanjutnya yang kita butuhkan di kolom kedua adalah modul pembagian. Pastikan opsi "Tampilkan pemisah" diaktifkan.
- Show Divider: Ya
Warna
Lalu pergi ke tab Desain dan ubah warna pemisah.
- Warna: #e02b20
animasi
Tambahkan animasi ke modul pembagian selanjutnya.
- Gaya Animasi: Slide
- Ulangi Animasi: Sekali
- Arah Animasi: Benar
- Durasi Animasi: 1450ms
- Animasi Intensitas: 83%
- Animasi Mulai opacity: 100%
Tambahkan modul teks # 2 ke kolom 2
Tambahkan konten
Mari beralih ke modul berikutnya dan terakhir yang kita butuhkan di kolom kedua! Tambahkan deskripsi pilihan Anda.
Pengaturan teks
Lalu pergi ke pengaturan teks di tab Desain dan buat beberapa perubahan yang sesuai:
- Font Teks: Poppins
- Berat font teks: Ringan
- Warna teks: #919191
- Ukuran teks: 0.9vw (desktop), 1.8vw (tablet), 2.2vw (telepon)
- Spasi huruf teks: 0.1vw
- Tinggi baris teks: 2.2em
jarak
Juga ubah nilai spasi.
- Margin atas: 9vw (desktop), 19vw (tablet), 23vw (telepon)
- Margin bawah: 12vw (desktop), 19vw (tablet), 23vw (ponsel)
- Margin kiri: -3vw
- Margin kanan: 20vw (desktop), 6vw (tablet), 3vw (telepon)
animasi
Dan pada akhirnya, tambahkan animasi fade ke modul dan Anda selesai!
- Gaya Animasi: Pudar
- Ulangi Animasi: Sekali
- Durasi Animasi: 1400ms
- Penundaan animasi: 1000ms
- Animasi Mulai opacity: 0%
final pikiran
Dalam tutorial ini, kami menunjukkan cara membuat bagian pahlawan konten terpisah yang mengagumkan dengan Divi. Bagian pahlawan dengan konten terpisah sangat populer dan sering digunakan di web, tetapi penting juga untuk memastikan bahwa mereka sangat responsif. Jika Anda memiliki pertanyaan atau saran, pastikan untuk meninggalkan komentar dan jangan ragu untuk membagikannya di media sosial!
