Loncat ke Konten Utama

Cara menampilkan spanduk 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]

Memiliki gelar yang menonjol memastikan Anda memiliki kesempatan untuk menarik perhatian pengunjung Anda. Judul biasanya tidak luput dari perhatian karena ukuran dan posisi sentral mereka, tetapi jika Anda ingin melangkah lebih jauh dan benar-benar menunjukkan judulnya, Anda berada di tempat yang tepat.

dalam hal ini Tutoriel, kita akan menggabungkan pengaturan animasi dari Divi untuk membuat judul yang menonjol dan menarik perhatian pengunjung Anda.

Hasil akhir

Bagian Satu: Desain

Konfigurasi Bagian

Warna latar belakang

Ayo mulai mendesain! Buat halaman baru dan tambahkan bagian biasa. Buka pengaturan bagian dan ubah warna latar belakang.

  • Warna latar belakang: #EEE

jarak

Lalu, buka pengaturan jarak bagian dan tambahkan margin isian khusus.

  • Lapisan bawah: 10vw

Tambahkan baris 1

Struktur kolom

Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul lagi, buka pengaturan garis dan ubah warna latar belakang garis.

  • Warna latar belakang: #DDD

perekat

Lalu pergi ke parameter ukuran dan biarkan garis mengisi lebar penuh layar.

  • Jadikan garis ini lebar penuh: Ya
  • Gunakan lebar selokan khusus: Ya
  • Selokan lebar: 1

jarak

Juga, lepaskan lapisan internal atas dan bawah default untuk saluran.

  • Padding di atas: 0px
  • Bawah Pelapis: 0px

Tambahkan modul teks

Saatnya untuk mulai menambahkan modul! Modul pertama yang kita butuhkan adalah modul teks. Masukkan bagian pertama dari judul Anda di area konten menggunakan gaya teks paragraf.

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]

Warna latar belakang

Lalu pergi ke pengaturan latar belakang modul dan tambahkan warna latar belakang.

  • Warna latar: #ccc

Pengaturan teks

Juga ubah pengaturan teks pada tab Desain.

  • Teks huruf: Didact Gothic
  • Berat font teks: tebal
  • Warna teks: #000000
  • Ukuran teks: 10vw
  • Tinggi baris teks: 0.9em
  • Orientasi Teks: Tengah

jarak

Kemudian buat bentuk pilihan Anda dengan bantalan khusus di bagian atas dan bawah.

  • Padding di atas: 10vw
  • Lapisan bawah: 3vw

animasi

Terakhir, kami akan menambahkan animasi. Penting untuk memastikan bahwa durasi animasi dan opacity awal adalah nol. Ini akan memungkinkan modul teks untuk ditampilkan dengan efek flash.

  • Gaya Animasi: Pudar
  • Ulangi Animasi: Sekali
  • Durasi Animasi: 0ms
  • Waktu animasi: 1000ms

Mengkloning modul teks x4

Setelah selesai mengedit modul teks pertama, Anda dapat melanjutkan dan mengkloningnya sebanyak yang Anda inginkan, tergantung pada panjang judul Anda. Untuk setiap bagian dari judul yang ingin Anda tampilkan dengan efek flash, Anda memerlukan modul teks terpisah. Untuk contoh ini, kita akan membutuhkan modul 4 tambahan.

Warna latar belakang

Dengan warna latar belakang.

  • Salin 1 = Warna Latar Belakang: #5900ff, Warna Teks: #FFF
  • Salin 2 = biarkan seperti itu, ubah durasi animasi (Penundaan Animasi): 1500ms
  • Salin 3 = Warna latar belakang: #ffb200, warna teks: #FFF, ubah durasi animasi: 2000ms
  • Salin 4 = Warna latar belakang: #000, warna teks #FFF, ubah durasi animasi: 2500ms

Tambahkan margin negatif ke setiap modul teks kecuali yang pertama

Setelah Anda selesai menyesuaikan semua modul teks, Anda dapat melanjutkan dan membuat tumpang tindih. Untuk membuat tumpang tindih ini, kami akan menambahkan margin atas negatif ke setiap modul teks rangkap. Dengan kata lain, kami memastikan bahwa semua modul yang mengikuti modul pertama muncul di atas modul teks pertama ini.

  • Margin atas: -31.98vw

Buat Toko Online Anda dengan mudah

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

Garis transformasi

Transform Terjemahan

Lanjutkan dengan mengubah seluruh baris, dimulai dengan parameter transformasi.

  • Bawah: -35vw

Transformasi Rotasi

Juga mengubah nilai rotasi transformasi.

  • Kiri: 320deg

Tambahkan baris 2

Struktur kolom

Di tempat kedua! Sekarang karena efek judul sudah ada, kita dapat mulai menambahkan modul yang tersisa. Tambahkan baris baru menggunakan struktur kolom berikut:

perekat

Tanpa menambahkan lebih banyak modul, buka parameter garis dan biarkan garis mengisi lebar penuh layar dalam parameter ukuran:

  • Jadikan garis ini lebar penuh: Ya
  • Gunakan lebar selokan khusus: Ya
  • Selokan lebar: 1

jarak

Menghapus isi teratas default dari baris berikutnya.

  • Lapisan atas: 0px

Tambahkan modul deskripsi teks ke kolom 2

Tambahkan konten H1

Saatnya menambahkan modul. Modul pertama akan menjadi modul teks. Anda dapat menambahkan konten yang Anda inginkan.

Pengaturan teks H1

Lalu pergi ke tab desain dan ubah pengaturan H1.

  • Font judul: Didact Gothic
  • Judul Berat: Tebal
  • Ukuran Fon: 1.8vw (Komputer), 3.8vw (Tablet), 4vw (Telepon)

jarak

Tambahkan margin khusus di bagian spasi.

  • Margin atas: -4vw
  • Margin bawah: 2vw
  • Margin kiri: 30vw
  • Margin Kanan: 30vw (Komputer), 15vw (Tablet & Telepon)

Tambahkan modul pemisah ke kolom 2

jarak penglihatan

Modul selanjutnya adalah modul splitter. Pastikan opsi "Tampilkan pembagi" diaktifkan.

  • Tampilkan Pemisah: Ya

Warna

Lalu buka tab "Desain" dan ubah warna pemisah.

  • Warna: #000000

Dimentionnement

Ubah opsi spasi juga.

  • Berat spasi: 8px
  • Lebar: 7%

jarak

Selalu dengan opsi ukuran.

  • Margin rendah: 1vw
  • Margin kiri: 30vw

Tambahkan modul teks ke kolom 2

Tambahkan konten

Modul selanjutnya adalah modul teks lain. Anda harus memberikan konten pilihan Anda.

Pengaturan teks

Maka Anda harus mengubah pengaturan teks di tab "Desain".

  • Ukuran Teks: 0.8vw (Komputer), 1.3vw (Tablet), 1.6vw (Telepon)
  • Ketinggian garis: 2.2em

jarak

Tambahkan beberapa margin di bagian spasi juga.

  • Margin rendah: 3vw
  • Margin Kiri: 30vw
  • Margin Kanan: 30vw (Komputer), 15vw (Tablet & Ponsel)

Tambahkan modul tombol ke kolom 2

Pengaturan modul tombol

Untuk modul terakhir, yang akan menjadi modul tombol. Anda akan menambahkan konten pilihan Anda dan mengubah pengaturan sebagai berikut:

  • Gunakan gaya khusus: Ya
  • Ukuran Fon: 1vw (Komputer), 1.5vw (Tablet), 2vw (Telepon)
  • Lebar batas tombol: 0px
  • Fon tombol: Poppins
  • Berat teks: Tebal
  • Gaya Huruf: Huruf Besar

jarak

Akses pengaturan jarak dan tambahkan margin luar kustom, serta margin dalam dan hanya itu.

  • Margin Eksternal Kiri: 30vw
  • Margin tinggi dalam: 1vw
  • Di dalam margin rendah: 1vw
  • Margin dalam kiri: 3vw
  • margin dalam kanan: 3vw

Selesai

Dalam tutorial ini, kami telah melihat cara mendesain judul dengan teks animasi, hanya menggunakan opsi Divi internal. Ini adalah teknik yang sangat baik yang akan memungkinkan Anda untuk menangkap perhatian pengunjung Anda dengan cara yang sangat asli.

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
8 saham
saham8
menciak
Register
Ada apa