Loncat ke Konten Utama

Cara membuat bagian pahlawan animasi di Divi

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Sebagian besar situs web memiliki bagian "Pahlawan", yang tidak perlu lagi membuktikan sendiri. Perannya tidak hanya menonjol, tetapi juga harus dibagi menjadi beberapa elemen yang memperkuat ajakan untuk bertindak yang ada. Bagian pahlawan konten konten terstruktur yang mudah dipahami sangat populer dan sering digunakan oleh berbagai jenis situs web.

Dan sementara membuat bagian-bagian pahlawan konten terpisah untuk desktop tampak sederhana, jangan selalu bergantung pada penampilan. Di sinilah Tutoriel akan bermanfaat. Kami akan membuat ulang bagian pahlawan pemisah seluler yang sangat interaktif yang tidak hanya akan terlihat bagus di perangkat seluler, tetapi berapa pun ukuran layarnya. Kami juga menggabungkan animasi yang luar biasa agar sesuai dengan gaya desain 2019 dengan sempurna. Kami berharap tutorial ini akan mendorong Anda untuk membuat bagian Anda sendiri dari pahlawan seluler konten terbagi.

Mari kita pergi!

penelitian

Sebelum terjun ke tutorial, mari kita lihat hasil yang bisa Anda dapatkan setelah tutorial ini.

Desain antarmuka

Tambahkan bagian baru

jarak

Mulailah dengan membuat halaman baru atau membuka yang sudah ada. Tambahkan bagian reguler baru, akses pengaturan jarak, dan hapus semua margin bantalan atas dan bawah secara 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 parameter ukuran dan biarkan garis dan itu kolom menempati seluruh lebar layar.

  • Jadikan garis ini lebar penuh: Ya
  • Gunakan lebar selokan khusus: Ya
  • Selokan lebar: 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

Akhirnya, kami akan memastikan bahwa kedua kolom muncul berdampingan di layar yang lebih kecil. Untuk melakukan ini, kita perlu menambahkan satu baris kode CSS ke tab Advanced baris.

Divi: Tema WordPress terbaik sepanjang masa!

lebih 554.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

pameran: fleksibel;

Tambahkan modul gambar ke kolom 1

Biarkan area gambar kosong

Kita sekarang akan ke semua modul yang kita 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 berikutnya, jadi Anda harus menghapus gambar yang ditambahkan secara default. Dengan demikian, kita akan dapat bermain dengan cara gambar diposisikan dan berapa banyak ruang yang ditempati di baris kita.

Tambahkan warna latar belakang

Arahkan ke pengaturan latar belakang modul gambar dan tambahkan warna latar belakang. Pada langkah berikutnya, kita akan menggabungkan warna latar belakang ini dan gambar latar belakang menggunakan efek gabungan 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: Cover
  • Posisi gambar latar: tengah
  • Ulangi gambar latar belakang: Tidak ada pengulangan
  • Blend gambar latar: 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 untuk memberikan kesan bahwa kami menggunakan struktur kolom yang berbeda. Alasan kami melakukan ini (bukan 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

Kita sekarang harus memutuskan ukuran gambar kita dalam pengaturan jarak. Kami juga menggunakan unit tampilan untuk nilai-nilai ini untuk memastikan bahwa desain kami tetap responsif sepenuhnya, terlepas dari ukuran layar.

  • Lapisan atas: 26.3vw (desktop), 48vw (tablet), 72vw (telepon)
  • Pelapis di bagian bawah: 26.3vw (desktop), 48vw (tablet), 72vw (ponsel)

animasi

Terakhir, kita akan menambahkan animasi slide ke modul Image. Setelah Anda menerapkan animasi, Anda akan melihat bahwa gambar hanya akan mulai muncul setelah memasuki kolom pertama. Warna latar belakang kolom kedua tetap di bagian atas modul gambar saat slide 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 berikutnya yang kita butuhkan di kolom 1 adalah modul tombol. Masukkan salinan pilihan Anda.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

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 mengubah 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 warna: rgba (0,0,0,0.3)

Tambahkan modul teks # 1 ke kolom 2

Tambahkan konten H1

Di kolom kedua! Modul pertama yang kita butuhkan adalah modul teks. Tambahkan konten H1 pilihan Anda.

Pengaturan Teks H1

Lalu, buka 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 berikutnya 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 kita beralih ke modul berikutnya dan terakhir yang kita butuhkan di kolom kedua! Tambahkan deskripsi pilihan Anda.

Pengaturan teks

Kemudian, akses pengaturan teks pada tab Desain dan buat beberapa perubahan 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 mengubah nilai spasi.

  • Margin atas: 9vw (desktop), 19vw (tablet), 23vw (telepon)
  • Margin bawah: 12vw (desktop), 19vw (tablet), 23vw (telepon)
  • 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
  • Waktu animasi: 1000ms
  • Animasi Mulai opacity: 0%

Pikiran terakhir

Dalam tutorial ini, kami menunjukkan kepada Anda bagaimana cara membuat bagian-bagian indah dari para pahlawan konten-terpisah Divi. Bagian pahlawan konten terpisah sangat populer dan sering digunakan di Web, tetapi juga penting untuk memastikan bahwa mereka sangat responsif. Jika Anda memiliki pertanyaan atau saran, pastikan untuk meninggalkan komentar dan merasa bebas untuk membagikannya di jejaring sosial!

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
4 saham
saham4
menciak
Register
Ada apa