Cara kreatif untuk Menggabungkan Efek Rotasi Gulir dengan Elemen Melingkar di Divi

Kami selalu mencari cara baru dan kreatif untuk menampilkan item unggulan (seperti produk dan layanan) saat mendesain situs web baru. Dan, dengan efek gulir Divi, pintu baru telah dibuka untuk membawa tata letak uraian Anda ke tingkat yang sama sekali baru. Dalam tutorial ini, kami akan menunjukkan cara membuat layout modul blurb dengan elemen melingkar berputar pada scroll. Tata letak unik ini menampilkan penggunaan kombinasi warna yang cerdas dengan beberapa elemen melingkar yang berputar di belakang uraian saat pengguna menggulir halaman ke bawah. Tidak diragukan lagi desain ini akan memiliki banyak aplikasi untuk hampir semua konten.

Menikmati!

Sneak Peek

Berikut ini sekilas tata letak uraian dengan elemen melingkar berputar yang kita buat dalam tutorial ini.

Unduh Tata Letak Blurb Elemen Melingkar Berputar secara GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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 ke halaman Anda, cukup ekstrak file zip dan seret file JSON ke 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.

Membuat Tata Letak Blurb dengan Memutar Elemen Melingkar pada Gulir di Divi

Menambahkan Baris

Pertama, tambahkan tiga baris kolom ke bagian tersebut.

Margin Bagian Sementara

Selanjutnya, tambahkan beberapa margin atas dan bawah ke bagian untuk membuat beberapa ruang untuk menggulir.

Membuat Desain Blurb Elemen Melingkar Berputar #1

Untuk desain pertama kami, kami akan membuat modul uraian dengan tiga modul pembagi warna-warni yang akan duduk di belakang uraian dan berputar saat pengguna menggulir. Desain pertama ini akan berfungsi sebagai template yang baik untuk dua desain berikutnya yang akan kita tambahkan ke kolom lainnya.

Berikut cara membangunnya.

Tambahkan modul Blurb

Di kolom 1, tambahkan modul uraian.

Blurb 1 Konten

Buka pengaturan untuk modul uraian dan perbarui konten isi dengan yang berikut:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

Kemudian tambahkan ikon pilihan Anda untuk menggantikan gambar default.

Blurb 1 Pengaturan Desain

Di bawah tab desain, perbarui yang berikut ini:

• Warna Latar Belakang: #121212
• Warna Ikon: #41828d
• Gunakan Ukuran Font Ikon: YA
• Ukuran Font Ikon: 75px
• Perataan Teks: tengah
• Judul Font: Oswald
• Judul Font Gaya: TT
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 22px
• Warna Teks Tubuh: #ffffff

Untuk membuat blurb melingkar, perbarui ukuran dan sudut membulat sebagai berikut:

• Lebar: 300px
• Lebar Maks: 300px
• Padding: 25px atas, 25px bawah, 25px kiri, 25px kanan
• Sudut Bulat: 50%

Kombinasi lebar dan tinggi yang sama dikombinasikan dengan sudut membulat inilah yang membuat blurb menjadi melingkar.

Kemudian perbarui posisi dengan offset.

• Posisi: Relatif
• Offset Vertikal: 25px
• Offset Horisontal: 25px
• Indeks Z: 1

Ini akan memusatkan uraian di dalam pembagi yang akan kita tambahkan nanti. Indeks Z akan memastikan uraian juga berada di atas pembagi lainnya.

Selanjutnya, tambahkan efek gulir berputar ke uraian.

Di bawah tab Rotating Effects…

• Aktifkan Rotasi: YA
• Rotasi Mulai: 45 derajat (pada area pandang 0%)
• Rotasi Pertengahan: 0 derajat (pada area pandang 40%-60%)
• Rotasi Akhir: -45deg (pada 100% viewport)

Ini akan memutar uraian sedikit ke posisi tegak lurus ke arah tengah halaman dan kemudian memutar 45 derajat lagi saat meninggalkan bagian atas halaman.

Tambahkan Pembagi Melingkar #1

Sekarang kita akan menambahkan pertama dari tiga modul pembagi yang akan membentuk desain elemen melingkar berputar kita.

Tambahkan modul pembagi di bawah modul uraian.

Pembagi 1 Pengaturan

Buka pengaturan pembagi dan perbarui yang berikut:

• Tampilkan Pembagi: TIDAK
• Warna Kiri Gradien Latar Belakang: #311847
• Warna Kanan Gradien Latar Belakang: #ec4067
• Posisi Awal: 50%
• Posisi Akhir: 50%

Dan sekarang kita membuatnya melingkar sebagai berikut:

• Lebar: 350px
• Lebar Maks: 350px
• Tinggi: 350px
• Sudut Bulat: 50%

Perhatikan bahwa pembagi sedikit lebih besar dari modul uraian sehingga kita dapat melihat tepi luar pembagi setelah diposisikan di belakang uraian.
Sekarang kita cukup memperbarui posisi pembagi menjadi absolut dan itu akan duduk sempurna di belakang uraian.

• Posisi: Absolut

Jika pembagi Anda berada di atas uraian, pastikan Anda telah memperbarui indeks uraian uraian ke 1.

Selanjutnya, tambahkan efek gulir berikut ke pembagi:

Di bawah tab efek Rotating…

• Aktifkan Rotasi: YA
• Rotasi Mulai: 0 derajat (pada area pandang 0%)
• Rotasi Pertengahan: 45 derajat (pada area pandang 50%)
• Rotasi Akhir: -180 derajat (pada 100% viewport)

Tambahkan Pembagi Melingkar 2

Untuk membuat pembagi lingkaran kedua, buka kotak lapisan dengan mengklik ikon lapisan di menu pengaturan. Kemudian duplikat modul pembagi untuk membuat yang baru.

Perbarui pembagi 2 Pengaturan Desain

Untuk pembagi ini, mari kita beri warna latar belakang gradien yang berbeda sebagai berikut:

• Warna Kiri Gradien Latar Belakang: rgba(160,26,125,0.5)
• Warna Kanan Gradien Latar Belakang: rgba(255,255,255,0)

CATATAN: Penting untuk menggunakan warna semi-transparan di sini untuk mengekspos latar belakang di belakangnya. Ini menciptakan kombinasi warna yang indah.

Selanjutnya, perbarui efek gulir sebagai berikut:

Di bawah tab efek Rotating…

• Rotasi Pertengahan: 90 derajat (pada area pandang 50%)
• Rotasi Akhir: 180 derajat (pada 100% viewport)

Tambahkan Pembagi Melingkar 3

Lanjutkan proses yang sama untuk membuat pembagi ketiga dan terakhir dengan menduplikasi pembagi 2.

Perbarui pembagi 3 Pengaturan Desain

Untuk pembagi ini, mari kita juga memberikan warna latar belakang gradien yang berbeda sebagai berikut:

• Warna Kiri Gradien Latar Belakang: rgba(255,255,255,0)
• Warna Kanan Gradien Latar Belakang: rgba(41.196.169,0.5)

Kemudian perbarui Scroll Effects sebagai berikut:

Di bawah tab efek Rotating…

• Rotasi Pertengahan: 180 derajat (pada area pandang 50%)
• Rotasi Akhir: 360 derajat (pada 100% viewport)

Di bawah tab Scaling Up and Down…

• Aktifkan Penskalaan Naik dan Turun: YA
• Skala Awal: 110% (pada 0% viewport)
• Skala Menengah: 110% (pada area pandang 50%)
• Skala Akhir: 100% (pada 100% viewport)

Membuat Desain Blurb Elemen Melingkar Berputar #2

Karena kita sudah memiliki desain yang lengkap di kolom 1, mari kita mulai desain kedua dengan menduplikasi seluruh kolom pertama. Ini akan membawa empat modul juga. Anda harus menghapus salah satu kolom kosong untuk mempertahankan tata letak tiga kolom.

Perbarui Desain Modul Blurb

Untuk desain ini kita akan menggunakan latar belakang blurb putih sehingga kita dapat menggunakan efek filter layar untuk menunjukkan warna bergerak di belakang teks blurb. Kami juga akan menambahkan efek gulir penskalaan untuk membuat pembagi belakang lebih besar.

Berikut cara melakukannya.

Buka pengaturan modul uraian di kolom 2 dan perbarui yang berikut:

• Latar belakang: #ffffff

Kemudian ubah Title dan Body Text Color menjadi hitam.

• Judul Teks warna: #000000
• Warna Teks Tubuh: #000000

Kemudian tambahkan mode campuran berikut:

• Mode Campuran: Layar

Perbarui Pembagi 1 Efek Gulir

Buka pengaturan modul pembagi langsung di bawah modul uraian di kolom 2 dan perbarui efek gulir berikut:
Di bawah tab efek Scaling Up and Down…

• Aktifkan Penskalaan Naik dan Turun: YA
• Skala Awal: 100% (pada 0% viewport)
• Skala Menengah: 120% (pada area pandang 40%-60%)
• Skala Akhir: 100% (pada 100% viewport)

Ini akan menyebabkan pembagi tumbuh sebesar 20% dari ukuran aslinya di tengah-tengah saat pengguna menggulir halaman ke bawah.

Membuat Desain Blurb Elemen Melingkar Berputar #3

Untuk desain terakhir ini, kita akan membuat blurb melingkar yang berputar mirip dengan yang ada di kolom 1. Namun, kita akan menambahkan mode campuran yang berbeda untuk menunjukkan warna melalui teks putih pada latar belakang gelap.

Berikut cara melakukannya.

Kolom Duplikat 1

Karena kita sudah memiliki desain yang lengkap di kolom 1, mari kita mulai desain ketiga dengan menduplikasi seluruh kolom pertama dan memindahkannya ke penempatan kolom ketiga menggunakan kotak layer. Kemudian hapus kolom ekstra kosong.

Perbarui Pengaturan Modul Blurb

Pertama, mari tambahkan mode campuran multiply untuk menunjukkan warna pembagi melalui teks putih sebagai berikut:

• Mode Campuran: banyak

Kemudian perbarui warna ikon menjadi putih juga.

• Warna Ikon: #ffffff

Perbarui Pengaturan Pembagi 3

Sekarang mari kita keluarkan efek scaling scroll pada pembagi terakhir (ketiga) di kolom 3.
Buka pengaturan untuk pembagi ketiga dan perbarui yang berikut:

Di bawah tab Scaling Up and Down Effects…

• Aktifkan Scaling Up and Down: TIDAK

Sesuaikan Posisi Kolom 2 di Ponsel

Saat ini tiga desain uraian akan sejajar di sebelah kiri layar pada tampilan tablet dan ponsel. Untuk menyeimbangkan desain, kita dapat memindahkan kolom tengah ke kanan dengan mudah menggunakan skala transformasi.

Buka pengaturan untuk kolom 2 dan perbarui yang berikut ini:

Transform Scale X Axis: 40% (di tablet), 15% (di ponsel)

Hasil Akhir

Itu dia! Mari kita lihat hasil akhirnya di halaman langsung.

Berikut adalah desain di desktop saat pengguna menggulir melalui tata letak.

Berikut adalah desain pada tablet.

Dan ini dia di telepon.

Pikiran Akhir

Salah satu fitur terbaik dari tata letak ini adalah seberapa kreatif Anda bisa mendapatkan efek gulir dan kombinasi warna, yang masing-masing dapat dengan mudah diubah menggunakan opsi bawaan Divi. Dan begitu Anda mendapatkan pegangan yang lebih baik tentang cara menggabungkan efek filter, semuanya benar-benar mulai muncul. Semoga ini akan memberi Anda beberapa inspirasi untuk tata letak blurb berikutnya yang Anda buat.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!