Sorotan Plugin Divi – Kisi Portofolio Divi

Divi menyertakan modul portofolio yang menampilkan portofolio Anda dalam lebar penuh atau tata letak kotak dan mencakup semua fungsi dasar yang Anda harapkan dari modul Divi – latar belakang, font, warna, batas, overlay, ikon, dll. Bagaimana jika Anda menginginkan tata letak yang berbeda, seperti desain multi-kolom, atau fitur baru seperti tombol yang dapat disesuaikan? Anda mungkin tertarik dengan plugin pihak ketiga yang disebut Divi Portfolio Grid.

Divi Portfolio Grid adalah plugin pihak ketiga dari Divi Theme Store. Ini tidak hanya memberi Anda fitur modul Divi standar, tetapi juga menyediakan tata letak kolom 2, 3, dan 4 dengan fitur gaya baru sehingga Anda dapat membuat portofolio unik. Itu juga menambahkan tombol dengan teks dan efek hover untuk mengubah warna.

Dalam ikhtisar ini kita akan melihat Divi Portfolio Grid menggunakan contoh portofolio yang saya buat. Semua gambar yang digunakan dalam portofolio dan latar belakang diambil dari Unsplash.com.

Memasang Plugin Divi Portofolio Grid

Sebelum Anda dapat mengunggah plugin, Anda harus membuka zip file unduhan. Di dalam file zip Anda akan menemukan file plugin zip bersama dengan panduan cepat PDF. Panduan cepat adalah dokumen untuk memandu Anda melalui penginstalan dan gambaran umum tentang cara menggunakan modul. Unggah file plugin zip yang ada di dalam file unduhan, instal, dan aktifkan seperti biasa.

Fitur Modul Portofolio Kustom

Plugin menambahkan modul baru ke Divi Builder yang disebut Modul Portofolio Kustom. Modul ini berfungsi seperti modul Divi Builder lainnya dari backend – sehingga Anda dapat menarik dan melepasnya di dalam baris mana pun, dan menyesuaikan konten, desain, dan pengaturan lanjutan.

Sesuaikan warna latar belakang, pilih gambar latar belakang, pilih tata letak, buat teks tombol khusus, pilih jumlah posting yang akan ditampilkan, pilih kategori, tampilkan meta, pilih warna, dll.

Semua fitur desain standar juga ada di sini. Sesuaikan warna, font, tombol, ikon, overlay, dan lainnya.

Contoh – Menggunakan Modul Portofolio Kustom Divi

Untuk contoh saya, saya membuat halaman, menambahkan latar belakang untuk memberikan beberapa suar visual, membuat baris lebar penuh, dan menambahkan Portfolio Grid Module. Sebelum kita melihatnya, mari kita lihat sekilas modul portofolio Divi Building standar untuk perbandingan.

Modul Portofolio Divi Standar

Berikut adalah tampilan halaman menggunakan modul portofolio Divi standar. Saya telah mengaturnya ke tata letak kotak dan mengatur warna font menjadi terang. Semua fitur lainnya disetel ke default. Ini juga termasuk overlay hover dengan ikon (dalam mode grid), perbatasan, latar belakang, meta, dan gaya font.

Gambar unggulan proyek ditampilkan dengan judul dan kategori proyek di bawah gambar. Mengklik judul akan membawa Anda ke proyek. Mengklik judul kategori akan membuka halaman kategori untuk kategori tersebut. Ini juga mencakup efek hover dengan warna overlay dan opsi ikon saat menggunakan tata letak grid.

Contoh Modul Portofolio Kustom

Ini mencakup tiga tata letak untuk dipilih, sehingga Anda dapat mengatur portofolio Anda dalam 2, 3, atau 4 kolom. Mari kita lihat masing-masing tata letak dengan berbagai penyesuaian dan fitur.

Berikut adalah tampilan tata letak 2 kolom. Ini menampilkan gambar unggulan proyek, termasuk judul dan kategori yang dapat diklik di bilah di bawah gambar, dan menempatkan tombol dengan teks di atas gambar dan bilah. Ini adalah fitur dan warna default.

Gambar menyertakan efek hover yang sama dengan modul portofolio standar, tetapi tombolnya juga menyertakan efek hover. Anda dapat melihat dalam contoh ini pengaturan tombol default mengubah latar belakang ungu menjadi merah.

Anda juga dapat melihat efek hover yang bagus yang menciptakan bayangan di belakang kartu yang Anda arahkan. Judul ditampilkan sebagai tooltip. Overlay hover juga merupakan fitur default, jadi tidak harus diaktifkan. Transisi efek hover menampilkan bayangan yang lebih berat hingga transisi selesai.

Berikut adalah tampilan tata letak 3 kolom. Dalam contoh ini saya telah mengubah warna latar belakang tombol dan teks, dan mengubah teks untuk menampilkan pesan saya sendiri.

Tombol ini juga menyertakan efek bayangan melayang. Dalam contoh ini saya hanya mengarahkan kursor ke tombol, sehingga gambar tidak menampilkan efek melayangnya. Latar belakang tombol dan teks telah berubah warna.

Contoh ini menggunakan tata letak 4 kolom. Saya telah mengatur radius tombol ke 0 dan mengubah semua gaya font.

Efek hover menempatkan overlay biru dengan opacity 47% (maaf tentang angka ganjil tapi di situlah mouse saya berhenti jadi saya melakukannya), dan ikon kotak centang berwarna merah. Tombol berubah dari abu-abu gelap dengan teks tab terang menjadi putih pudar dengan teks abu-abu gelap.

Dalam contoh ini saya telah menambahkan latar belakang yang menunjukkan di balik judul dan meta. Saya telah menambahkan batas merah dengan lebar 2 piksel (jadi mudah dilihat di gambar). Saya telah menyesuaikan semua font dan warna, dan mengubah warna latar belakang tombol, warna hover, dan warna ikon. Saya meninggalkan warna overlay hover default untuk menunjukkan kontras antara area gambar unggulan dan gambar latar belakang di belakang judul dan bagian meta.

Tombol hanya ditampilkan jika Anda menunjukkan judul. Contoh ini hanya menampilkan kategori.

Contoh ini hanya menampilkan judul proyek. Karena judul ditampilkan, tombol juga ditampilkan.

Dalam contoh ini saya telah menempatkan overlay merah dengan opacity 66. Saya telah mengubah ikon hover dan menyesuaikan tombol dan efek hover-nya. Gambar latar belakang (langit abu-abu) ditempatkan di belakang judul. Yang ini menggunakan kategori proyek yang berbeda. Radius tombol diatur ke 10.

Kisi Portofolio Divi – Responsif

Pluginnya responsif. Berikut tata letak 3 kolom di iPad (diemulasikan di Alat Pengembang Chrome) dalam mode potret. Untuk mempelajari lebih lanjut tentang alat Pengembang Google Chrome, lihat artikel Mengapa Anda Harus Mulai Menggunakan Alat Pengembang Chrome Sekarang.

Ini adalah tata letak yang sama dalam mode lansekap.

Ini adalah tata letak yang sama pada Galaxy S5 dalam mode potret.

Dan berikut tata letak menggunakan Galaxy S5 adalah mode landscape.

Lisensi, Pembaruan, dan Dokumentasi

Lisensi mencakup penggunaan tanpa batas dan mencakup pembaruan seumur hidup. Dokumentasi disediakan dalam file PDF yang ada di folder zip. Ini adalah dokumen pendek dan menyediakan panduan dengan gambar untuk membantu Anda memulai. Ini adalah plugin yang mudah digunakan dan menurut saya semuanya intuitif. Jika Anda terbiasa menggunakan modul Divi, Anda akan merasa betah dengan modul ini.

Divi Portfolio Grid dapat dibeli di Divi Theme Store.

Pikiran Akhir

Divi Portfolio Grid mudah digunakan dan menyediakan fitur tambahan yang cukup di atas modul portofolio Divi standar yang akan dianggap penting oleh banyak pengguna. Ini mencakup 2, 3, dan 4 tata letak kolom, menambahkan tombol dengan efek hover, overlay dengan ikon, dan semua gaya modul yang Anda harapkan termasuk fitur CSS lanjutan sehingga Anda dapat menyesuaikan gaya dengan kode Anda sendiri. Jika Anda menginginkan portofolio dengan fitur di luar modul portofolio Divi standar, Divi Portfolio Grid mungkin modul yang Anda butuhkan.

Kami ingin mendengar dari Anda! Sudahkah Anda mencoba Divi Portofolio Grid? Beri tahu kami tentang pengalaman Anda di komentar di bawah.

Gambar Unggulan melalui 2RAL / shutterstock.com