Cara Membuat Postingan Tanda 3D dengan Efek Arahkan Arah di Divi

Kita semua tahu bahwa situs web yang baik memudahkan pengunjung menemukan apa yang mereka cari dengan cepat dan efisien. Dan, selalu membantu jika Anda dapat membuat konten Anda lebih menarik. Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana merancang sebuah sign post 3D yang akan melibatkan pengguna dan memudahkan mereka untuk menemukan apa yang mereka cari dengan cara yang unik. Untuk melakukan ini, kita akan menggunakan opsi transformasi Divi dan properti css perspektif pada beberapa modul uraian untuk membuat efek 3D dari tanda yang diputar pada sebuah pos.

Mari kita mulai!

Sneak Peek

Unduh Layout Posting Tanda 3D GRATIS

Untuk mendapatkan desain Posting Tanda 3D 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?

Berlangganan Saluran Youtube Kami

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda memerlukan yang berikut ini:

1. Pastikan Anda telah menginstal dan mengaktifkan Tema Divi di situs WordPress Anda.
2. Jika Anda ingin membuat gambar posting Anda sendiri, Anda memerlukan editor foto seperti Photoshop, Gimp, atau Sketch. Atau Anda dapat menggunakan gambar yang disediakan dalam unduhan tata letak gratis untuk desain ini di atas.
3. Selain itu, kami akan membangun semuanya dari awal di ujung depan Divi Builder.

Membuat Gambar untuk Sign Post

Cara termudah untuk membuat posting tanda untuk desain ini adalah dengan membuat blok gambar kecil berulang yang dapat kita tambahkan sebagai gambar latar belakang yang berulang secara vertikal ke bawah bagian atau baris halaman. Jika Anda ingin melewati langkah ini, Anda dapat mengimpor tata letak json yang disertakan dalam unduhan gratis di atas untuk memulai. Tetapi jika Anda ingin membuatnya sendiri dengan warna kustom pilihan Anda, berikut adalah cara melakukannya.

Untuk contoh ini, saya akan menggunakan Photoshop, tetapi prosesnya sangat mirip dengan editor foto populer lainnya.

Di Photoshop, klik untuk membuat dokumen baru dengan tinggi dan lebar khusus 25px.

Atur warna foreground menjadi hitam (#000000) atau warna apa pun yang Anda inginkan.

Kemudian pilih alat ember cat dan klik di dalam lapisan persegi kosong untuk mengecat persegi hitam.

Kemudian simpan gambar Anda sebagai jpeg ke komputer Anda. Ini adalah gambar yang akan kita gunakan dalam desain untuk membuat posting untuk desain sign post 3D kita.

Menerapkan Desain Posting Tanda 3D di Divi

Setelah Anda siap, pastikan untuk membuat halaman baru, memberi Anda judul halaman, dan menyebarkan Divi Builder di bagian depan. Pilih opsi "Bangun Dari Awal".

Kanvas kosong Anda menunggu!

Sekarang buat bagian reguler baru dengan baris satu kolom.

Menyesuaikan Baris

Sebelum kita menambahkan modul, buka pengaturan baris dan perbarui yang berikut:

Gambar Latar Belakang: [masukkan gambar persegi khusus untuk posting]
Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
Pengulangan Gambar Latar Belakang: Ulangi Y (vertikal)

Kemudian perbarui yang berikut ini:

Lebar Talang: 1
Lebar Maks: 980px
Padding Kustom: 2vw atas, 2vw bawah

Kemudian kita perlu menambahkan CSS kustom berikut ke Elemen Utama Kolom sebagai berikut:

perspective: 1000px;

Properti css perspektif ini diperlukan untuk mendapatkan efek 3D dari tanda (atau uraian) setiap kali kita memutarnya dengan opsi transformasi.

Untuk info lebih lanjut tentang ini, lihat cara kerja perspektif dengan opsi transformasi Divi.

Membuat Tanda dengan Modul Blurb

Untuk membuat sign pertama kita pada sign post 3D, kita akan menggunakan modul blurb. Silakan dan tambahkan modul uraian ke baris.

Kemudian buka pengaturan blurb dan perbarui konten blurb sebagai berikut:

Kurangi konten tiruan untuk menyertakan hanya beberapa baris teks.

Gunakan Ikon: YA
Ikon: panah kiri (lihat tangkapan layar)

Warna Latar Belakang: #1a233f

Warna Ikon: #9eb3c2
Penempatan Gambar/Ikon: Kiri
Gunakan Ukuran Font Ikon: YA
Ukuran Font Ikon: 80px

Orientasi Teks: tengah
Judul Font: Tampilan Playfair
Warna Teks Judul: #9eb3c2
Judul Teks Ukuran: 38px (desktop), 26px (ponsel)
Lebar Maks: 600px
Penyelarasan Modul: Pusat
Padding Kustom: 5% atas, 5% bawah, 5% kiri, 5% kanan

Sudut Bulat: 20px

Lebar Perbatasan: 3px
Warna Batas: #21335e

Itu menangani gaya modul uraian kami, tetapi untuk mendapatkan efek 3D kami, kami perlu menggunakan opsi transformasi untuk memutar modul uraian kami. Untuk melakukan pembaruan ini, berikut ini:

Transformasi Putar X Sumbu: 20 derajat

Gandakan Baris untuk Lebih Banyak Tanda

Sekarang setelah salah satu desain tanda kami selesai, kami dapat menduplikasi baris untuk membuat lebih banyak. Setiap kali kita menduplikasi baris, kita hanya perlu memperbarui rotasi transformasi sehingga tanda-tanda berputar pada derajat yang berbeda di sekitar pos.

Lanjutkan dan duplikat baris dan perbarui modul uraian di baris baru sebagai berikut:

Transformasi Putar X Sumbu: -30deg

Gandakan baris untuk membuat tanda ketiga dan perbarui modul uraian di baris baru itu sebagai berikut:

Transform Putar Sumbu X: 40deg

Mengubah Arah Tanda Kedua

Saat ini semua panah menunjuk ke arah yang sama. Untuk mengubah arah dari kiri ke kanan, kita perlu sedikit memperbarui pengaturan modul blurb.

Buka pengaturan modul uraian di baris kedua (yang tengah) dan perbarui yang berikut:

Ikon: panah kanan (lihat tangkapan layar)

Orientasi Teks: Kiri

Kita dapat membalik urutan konten blurb sehingga teks berada di sebelah kiri dan ikon berada di sebelah kanan. Untuk melakukan ini, kita perlu menambahkan satu baris CSS khusus ke Elemen Utama sebagai berikut:

direction: rtl;

Sekarang konten uraian terbalik dan Anda memiliki tanda yang menunjuk ke arah yang baru!

Putar Tanda kembali ke Keadaan Asli saat Melayang

Salah satu hal keren tentang pengaturan ini adalah Anda dapat dengan mudah menambahkan status melayang untuk membawa modul yang diputar kembali ke rotasi awal (0 derajat). Ini memungkinkan pengguna untuk terlibat dengan konten dan memiliki pandangan yang jelas tentang teks saat mengarahkan kursor ke modul.

Karena kita ingin menambahkan status hover yang sama ke ketiga modul uraian, gunakan multiselect untuk memilih ketiga modul uraian dan buka pengaturan salah satu modul untuk membuka modal pengaturan elemen. Kemudian perbarui yang berikut ini:

Transform Rotate X Axis (arahkan kursor): 0deg

Simpan pengaturan dan hanya itu!

Sekarang Lihat desain dan fungsionalitasnya sejauh ini.

Menyesuaikan Bagian kami dengan Gambar Latar Belakang

Untuk langkah terakhir kami, kami dapat menambahkan gambar latar belakang baru ke bagian kami. Ini opsional tentu saja, tetapi gambar yang tepat dapat terlihat sangat keren terutama jika Anda menggunakan efek paralaks.

Buka bagian dan tambahkan gambar latar belakang baru. (Saya menggunakan gambar dari Paket Tata Letak Agensi kami)

Kemudian perbarui yang berikut ini:

Gunakan Efek Paralaks: YA
Padding Kustom: 0px atas, 0px bawah

Hasil Akhir

Pikiran Akhir

Membuat posting tanda 3D benar-benar menambahkan elemen desain yang kreatif dan menarik ke situs Anda yang benar-benar dapat membuat konten Anda menonjol (secara harfiah). Dan efek hover memungkinkan pengguna untuk melihat konten tanpa efek 3D untuk fallback yang bagus. Jangan lupa Anda dapat dengan mudah menambahkan URL tautan ke modul uraian sehingga dapat berfungsi sebagai elemen navigasi yang dapat diklik jika Anda mau. Bagaimanapun, saya harap ini memberi Anda beberapa inspirasi untuk proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!