Cara Membuat Hamparan Gambar dengan Desain Animasi Rana Teks Terpisah di Divi

Hamparan gambar terus menjadi aset desain yang populer saat menampilkan gambar di situs web Anda. Mereka tidak hanya menawarkan cara kreatif untuk menampilkan gambar, tetapi juga dapat membuat tampilan gambar lebih menyenangkan dan menarik bagi pengunjung, terutama saat Anda menambahkan animasi khusus saat mengarahkan atau mengeklik gambar.

Dalam tutorial ini, kami akan menunjukkan cara membuat overlay gambar dengan animasi rana teks terpisah di Divi. Pertama, kami akan menunjukkan kepada Anda bagaimana membangun overlay gambar kustom dengan jendela teks terpisah. Kemudian kami akan menunjukkan kepada Anda bagaimana Anda dapat menggunakan opsi transformasi bawaan Divi untuk membuat tiga desain animasi rana overlay gambar yang benar-benar unik. Kami bahkan akan menunjukkan beberapa contoh desain lagi untuk membuat jus kreatif mengalir.

Ayo masuk dan mulai!

Sneak Peek

Berikut ini sekilas desain overlay Gambar dari tutorial ini.

Dan ini adalah codepen yang menunjukkan desain yang sama yang digunakan dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk meletakkan tangan Anda pada overlay gambar desain animasi rana teks terpisah dari tutorial ini, Anda harus terlebih dahulu mengunduhnya menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Bagian 1: Membangun Hamparan Gambar dengan Bilah Teks Terpisah

Untuk bagian pertama dari tutorial ini, kita akan membuat pengaturan awal overlay gambar dengan jendela split text. Setelah ini selesai, kita dapat menambahkan animasi ke jendela nanti.

Baris

Untuk memulai, tambahkan baris dua kolom ke bagian reguler.

Sebelum menambahkan modul, buka pengaturan baris dan perbarui lebar talang:

• Lebar Talang: 2

Memperbarui Kolom

Kolom akan menjadi wadah utama yang akan menampung gambar kita dan elemen overlay rana. Ini juga akan menjadi target utama yang akan memulai animasi rana saat melayang. Dengan kata lain, ketika kursor bergerak di dalam kolom, animasi elemen anak (penutup jendela) akan aktif dan ketika kursor bergerak di luar kolom, animasi akan mati.

Untuk menetapkan kolom kami sebagai "kolom rana" dan untuk menganimasikannya nanti "saat melayang", tambahkan Kelas CSS berikut ke kolom:

• Kelas CSS: kolom rana saat diarahkan

Kemudian perbarui luapan menjadi tersembunyi sehingga kita tidak akan melihat elemen yang diubah setelah melampaui penampung kolom selama animasi.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Menambahkan Gambar Utama

Di dalam kolom 1, tambahkan modul gambar. Ini akan berfungsi sebagai gambar utama yang akan kita duduki di belakang overlay rana.

Unggah gambar ke modul gambar.

Kemudian atur perataan gambar ke tengah.

Membuat Rana Atas dengan Teks Terpisah

Sekarang gambar kita sudah terpasang, kita akan menambahkan rana atas menggunakan modul teks. Tambahkan modul teks baru di bawah gambar.

Perbarui konten modul teks dengan menambahkan teks "divi" ke area tubuh.

Di bawah tab desain, perbarui gaya teks sebagai berikut:

• Font Teks: Poppins
• Berat Font Teks: Berat
• Gaya Font Teks: TT
• Warna Teks Teks: #ffffff
• Ukuran Teks Teks: 200px (desktop), 30vw (tablet dan ponsel)
• Spasi Surat Teks: -0.03em
• Tinggi Baris Teks: 0em
• Perataan Teks: Tengah

Selanjutnya, perbarui opsi ukuran dan jarak:

• Lebar: 100%
• Tinggi: 50%
• Margin: 0px bawah

Di bawah tab Lanjutan, perbarui yang berikut ini:

• Kelas CSS: rana atas

Kami akan menggunakan Kelas CSS untuk mengaktifkan dan menonaktifkan animasi transformasi dengan kode kami nanti.

Kemudian tambahkan CSS khusus ini ke Elemen Utama:

display:flex;
align-items:flex-end;
justify-content:center;

Kode ini menggunakan flex untuk memastikan teks sejajar secara vertikal di bagian bawah modul. Karena teks memiliki tinggi garis 0, teks akan ditampilkan sebagai split yang hanya menampilkan bagian atas.

Untuk memposisikan rana atas, pertama-tama kita harus menyembunyikan luapan teks dan kemudian memberikannya posisi absolut sebagai berikut:

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi
• Posisi: Absolut

Ini akan memindahkan rana di atas bagian atas gambar.

Membuat Rana Bawah dengan Teks Terpisah yang Cocok

Sekarang setelah kita menyelesaikan rana atas, kita dapat memulai pembuatan rana bawah dengan menduplikasi modul teks rana atas.

Kemudian buka modul teks duplikat dan perbarui yang berikut ini:

• Kelas CSS: rana atas

Perbarui CSS Elemen Utama dengan mengganti "flex-end" dengan "flex-start" untuk properti align-items. Berikut adalah CSS terakhir:

display:flex;
align-items:flex-start;
justify-content:center;

Dengan “flex-start” teks disejajarkan secara vertikal di bagian atas modul. Dan karena teks memiliki tinggi garis 0, teks akan ditampilkan sebagai split yang hanya menampilkan bagian bawah.

Kemudian perbarui posisi absolut dengan offset vertikal sebagai berikut:

• Offset Vertikal: 50%

Ini membawa modul teks rana untuk duduk di atas bagian bawah gambar.

Teks split pada kedua daun jendela sekarang harus disejajarkan sebagai pasangan yang sempurna.

Pada titik ini, kami telah berhasil membuat pengaturan untuk overlay gambar rana teks terpisah kami. Ini terdiri dari kolom rana sebagai wadah, gambar utama, rana atas yang berada di bagian atas gambar, dan rana bawah yang berada di bagian bawah gambar.

Kami akan menggunakan ini sebagai semacam template starter untuk beberapa contoh berikutnya yang akan menyertakan animasi efek rana menggunakan properti transformasi.

Bagian 2: Kode

Untuk menambahkan fungsionalitas animasi rana, kita memerlukan beberapa potongan CSS dan JS menggunakan modul Kode.

Tambahkan modul kode baru ke halaman. Kita dapat menambahkannya ke kolom kanan dari bagian paling atas pertama yang kita gunakan untuk pembuatan overlay awal kita.

CSS

Rekatkan CSS berikut di kotak kode dan pastikan untuk membungkusnya dengan tag gaya yang diperlukan:

  /* transition duration of shutter animation */
  .top-shutter,
  .bottom-shutter {
    transition: transform 1s;
  }
  /* disables all transform options created in
  Divi Builder for both shutters */
  .divi-transform-none .top-shutter,
  .divi-transform-none .bottom-shutter {
    transform: none;
  }
  .on-click {
    cursor:pointer;
  }

CSS ini sangat sederhana. Yang dilakukannya hanyalah menerapkan transformasi: tidak ada jendela di dalam kolom dengan kelas "divi-transform-none". Kelas ini akan diaktifkan dan dinonaktifkan dengan JS untuk membuat animasi. Transisi: transform 1s hanya mengatur durasi transisi (atau animasi) menjadi 1 detik terakhir.

JS

Setelah CSS, tambahkan JQuery berikut ke kotak kode dan pastikan untuk membungkusnya dengan tag skrip yang diperlukan:

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

Bagian pertama dari kode menambahkan fungsionalitas yang mengaktifkan animasi transformasi rana saat mengarahkan kursor setiap kali kolom memiliki kelas “shutter-column on-hover divi-transform-none”.

    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

Bagian kedua dari kode menambahkan fungsionalitas yang mengaktifkan animasi transformasi rana saat diklik setiap kali kolom memiliki kelas “shutter-column on-click divi-transform-none”.

    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });

Bagian 3: Desain Animasi Rana Teks Terpisah

Desain #1

Untuk membuat desain animasi rana pertama kami, kami akan memulai proses desain dengan menduplikasi bagian pertama. Ini akan memberi kita bagian baru dengan hamparan gambar yang sudah dibuat sebelumnya dengan jendela teks terpisah yang siap digunakan.

Tambahkan Transform Properties ke Rana Atas

Biasanya ketika Anda menggunakan CSS untuk menganimasikan sesuatu dengan properti transformasi, elemen tidak akan memiliki gaya transformasi pada awalnya, dan kemudian gaya transformasi akan diterapkan setiap kali pengguna mengarahkan atau mengklik item tersebut. Di Divi, kita akan membalik prosesnya dan mulai dengan menambahkan gaya transformasi ke elemen menggunakan Divi Builder terlebih dahulu. Ini memungkinkan kita untuk menggunakan opsi transformasi bawaan saat mengedit desain secara visual. Kemudian setelah kita selesai menambahkan semua elemen desain transformasi, kita dapat menonaktifkannya terlebih dahulu (menggunakan kelas CSS), lalu mengaktifkan dan menonaktifkannya saat pengguna berinteraksi dengan overlay.

Untuk menambahkan desain transformasi ke rana atas, buka pengaturan modul teks rana atas dan perbarui yang berikut:

• Skala Transformasi (X dan Y): 150%
• Transformasi Terjemahkan sumbu Y: -101%
• Transform Origin: tengah atas

Jika Anda melakukannya dengan benar, rana atas tidak akan lagi terlihat seperti yang kita inginkan karena kita ingin seluruh gambar utama terekspos setelah transisi animasi.

Tambahkan Transform Properties ke Rana Bawah

Untuk Rana Bawah, perbarui opsi desain transformasi berikut:

• Skala Transformasi (X dan Y): 150%
• Transformasi Terjemahkan sumbu Y: 101%
• Transform Origin: tengah bawah

Tambahkan Kelas untuk Menonaktifkan Desain Transform Awalnya

Seperti yang saya sebutkan sebelumnya, setelah kami selesai menambahkan desain transformasi yang diperlukan untuk animasi rana kami, kami dapat menonaktifkan desain transformasi tersebut pada awalnya dengan menambahkan Kelas CSS.

Karena kode CSS khusus yang kami tambahkan sebelumnya, desain akan muncul tanpa desain transformasi apa pun.

Tambahkan Fungsionalitas Saat Diklik dengan Satu Kelas

Untuk mendapatkan animasi yang sama terpicu saat klik alih-alih saat mengarahkan kursor, yang perlu kita lakukan hanyalah mengganti satu kelas di kolom.

Pertama, duplikat kolom 1 dengan contoh kerja pertama kami di hover. Kemudian hapus kolom yang kosong. Sekarang Anda harus memiliki dua kolom identik dengan kelas dan konten yang sama.

Buka pengaturan untuk kolom 2 dan ganti kelas "on-hover" dengan kelas "on-click". Inilah yang seharusnya menjadi tiga kelas terakhir:

• Kelas CSS: kolom rana saat klik divi-transform-none

Hasil

Membalikkan Animasi Rana saat Melayang

Jika Anda ingin gambar utama yang ditampilkan tidak tertutup pada awalnya dan kemudian menambahkan overlay saat mengarahkan kursor ke gambar (kebalikan dari cara kerjanya sekarang), Anda dapat menghapus kelas "divi-transform-none" di kolom yang digunakan untuk rana . Ini akan memberi Anda efek berikut.

Desain #2

Untuk membuat animasi rana kedua, kita dapat menggunakan duplikat bagian sebelumnya dengan animasi rana pertama kita.

Perbarui Shutters

Kemudian gunakan multiselect untuk memilih modul teks rana atas dan rana bawah. Kemudian buka pengaturan elemen untuk keduanya dan perbarui yang berikut:

• Latar belakang: #ffffff
• Warna Teks Teks: #000000
• Mode Campuran: Layar

Hasil

Desain #3

Untuk membuat desain overlay gambar animasi rana ketiga, duplikat bagian sebelumnya.

Tambahkan Gambar Baru

Kemudian perbarui modul gambar dengan gambar baru.

Perbarui Shutters

Gunakan multipilih untuk memilih modul teks rana atas dan rana bawah dan buka pengaturan elemen untuk keduanya guna memperbarui hal berikut:

• Isi Tubuh: d

• Latar belakang: rgba(0,0,0,0.9)
• Warna Teks Teks: #ffffff
• Teks Ukuran Teks: 450px (desktop), 70vw (tablet dan ponsel)
• Mode Campuran: Kalikan

Buka pengaturan modul teks rana atas dan perbarui opsi transformasi berikut:

• Skala Transform (X dan Y): 100% (default)
• Transformasi Terjemahkan sumbu Y: -101%
• Transformasi Putar sumbu Z: -45deg
• Transform asal: kiri atas

Kemudian perbarui pengaturan modul teks rana bawah dan perbarui opsi transformasi berikut:

• Skala Transform (X dan Y): 100% (default)
• Transformasi Terjemahkan sumbu Y: 101%
• Transformasi Putar sumbu Z: -45deg
• Transform asal: kanan bawah

Hasil

Lebih Banyak Contoh dan Kemungkinan

Berikut beberapa contoh desain menggunakan teknik yang sama.

Ini adalah salah satu yang mirip dengan desain #2 tetapi tanpa skala transformasi pada daun jendela. Ini juga menunjukkan bagaimana efek lightbox masih bekerja pada gambar.

Dan berikut adalah contoh lain yang menggunakan transform translate untuk menggeser daun jendela secara horizontal.

Hasil Akhir

Pikiran Akhir

Membuat overlay gambar dengan animasi rana teks terpisah di Divi dapat menjadi pendekatan yang efektif untuk membuat gambar Anda menonjol dan menarik pengunjung dengan cara yang baru.

Mudah-mudahan, ini akan memicu kreativitas Anda untuk menambahkan desain Anda sendiri dan mengubah efek animasi menggunakan berbagai warna, font, mode campuran, dll. Kemungkinannya tampaknya tidak terbatas.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!