# 27 Layout Portofolio URL: https://canvaswp.com/id/templates/portfolio/ Updated: 2026-11-03 Templat Grid dan masonry. Gaya filter dan pemuatan. Ditambah tata letak satu proyek di baliknya. [Buka showcase langsung](https://demos.canvaswp.com/classic/) [Jelajahi situs demo](https://canvaswp.com/id/demos/) Diperbarui 3 November 2026 - Grid - Masonry - Memuat gaya - Proyek Tunggal - Tata letak ## Grid 5 Setiap grid di sini adalah satu blok Canvas Posts dengan Layout diatur ke Portfolio. Columns menentukan berapa banyak proyek yang berbagi satu baris, dan Portfolio Gutter mengatur jarak di antara proyek, bahkan tanpa jarak sama sekali. Versi satu kolom mengaktifkan Alternating Split Cards, sehingga setiap proyek berada di samping deskripsinya dan gambar berpindah sisi pada setiap kartu kedua. - [1 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-1/) - [2 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-2/) - [3 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-3/) - [5 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-5/) - [6 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-6/) ## Masonry 6 Blok yang sama, Grid Engine yang berbeda. Pilih mode masonry dan kartu mempertahankan tingginya sendiri, tersusun dalam kolom tanpa garis baris yang harus diikuti. Card Shape menentukan ritme: potong setiap gambar menjadi satu bentuk, atau biarkan setiap proyek mempertahankan bentuknya sendiri. Versi campuran juga memindahkan judul ke dalam overlay hover. - [Kolom Campuran (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-mixed-masonry/) - [2 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-2-masonry/) - [3 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-3-masonry/) - [4 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-masonry/) - [5 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-5-masonry/) - [6 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-6-masonry/) ## Memuat Gaya 5 Pengaturan ini menentukan cara pengunjung menjangkau sisa karya Anda. Pagination Style menawarkan paginator sisi klien dan infinite scroll di antara pilihannya. Open Projects In-Page memuat proyek di atas grid tanpa meninggalkan halaman, dan Open Project In dapat menampilkannya dalam modal lightbox. Filter Styles mengatur blok Canvas Grid Filter, deretan tombol kategori, dalam setiap gayanya, dengan atau tanpa tombol Shuffle. - [jQuery Pagination (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-jpagination/) - [Gulir Tanpa Batas (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-infinity-scroll/) - [AJAX Dalam Halaman (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-ajax/) - [AJAX In Modal (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-ajax-in-modal/) - [Filter Gaya (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-filter-styles/) ## Proyek Tunggal 5 Halaman proyek mengambil tata letaknya dari templat yang Anda pilih di pengaturan Template saat Anda menyunting proyek. Templat mencakup empat jenis media: gambar besar, slider galeri, grid thumbnail, dan video. Masing-masing dilengkapi sidebar di salah satu sisi atau keduanya, lebar penuh, atau di bawah hero selebar penuh. Halaman yang ditautkan di sini adalah contoh dari kumpulan tersebut. - [Parallax Image (membuka di tab baru)](https://demos.canvaswp.com/classic/projects/portfolio-single-fullwidth/) - [Slider Gallery (membuka di tab baru)](https://demos.canvaswp.com/classic/projects/portfolio-single-gallery-full/) - [HTML5 Video (membuka di tab baru)](https://demos.canvaswp.com/classic/projects/portfolio-single-video-fullwidth-left-sidebar/) - [Masonry Thumbs (membuka di tab baru)](https://demos.canvaswp.com/classic/projects/portfolio-single-thumbs-right-sidebar/) - [Sematkan Video (membuka di tab baru)](https://demos.canvaswp.com/classic/projects/portfolio-single-video-both-sidebar/) ## Tata letak 6 Posisi grid pada halaman. Versi sidebar menempatkan blok yang sama di kolom utama di samping sidebar berisi widget, seperti postingan terbaru dan formulir kontak cepat. Lebar 100% menjalankan grid dari tepi ke tepi tanpa celah. Parallax mengaktifkan Parallax Cards, yang mengubah setiap gambar menjadi lapisan latar belakang yang bergerak saat halaman di-scroll. - [Default (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-nomargin/) - [Sidebar Kanan (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-1-alt-right-sidebar/) - [Sidebar Kiri (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-3-left-sidebar/) - [Sidebar di Kedua Sisi (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-2-both-sidebar/) - [Lebar 100% (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-fullwidth-notitle/) - [Parallax (membuka di tab baru)](https://demos.canvaswp.com/classic/portfolio-parallax/) Setiap tautan membuka halaman sungguhan di showcase langsung, dibangun dengan tema dan blok yang sama dengan yang Anda pasang. Di situs Anda sendiri ## Bangun salah satu dari ini dengan satu blok Etalase ini untuk dilihat. Blok dan templat di baliknya dikirim bersama Canvas, sehingga setiap tata letak di atas dapat dibangun ulang di situs Anda. ### Proyek adalah rekaman Karya Anda tersimpan di tipe konten portofolio, satu rekaman per proyek, dengan kategori yang dibaca Grid Filter untuk membuat tombolnya. Tambahkan proyek dan setiap grid di situs yang mencantumkan kategori itu akan menampilkannya. Halaman itu sendiri tidak pernah perlu diedit. ### Grid diatur melalui pengaturan Sisipkan Canvas Posts, pilih tata letak Portofolio, lalu atur panel Layout dan Pagination dengan mengikuti nama-nama di halaman ini. Untuk halaman proyek itu sendiri, Canvas menambahkan 8 blok portofolio, mulai dari judul dan daftar meta hingga proyek terkait. ### Atau impor yang sudah jadi 21 dari 88 situs web demo dapat diimpor dengan proyek portofolio yang sudah tersedia, ditata untuk agensi, fotografer, atau ilustrator. Mulai dari salah satunya, lalu Anda cukup mengedit proyeknya, bukan tata letaknya. - [Demo portofolio, dibandingkan](https://canvaswp.com/id/wordpress-themes/portfolio/) ### Setiap paket, setiap tata letak Tidak ada add-on Portofolio. Grid, filter, gaya pemuatan, dan templat satu proyek tersedia di paket Tahunan sama seperti di paket Seumur hidup, karena setiap paket menyertakan setiap blok. - [Bandingkan paket](https://canvaswp.com/id/pricing/) Memilih ## Tata letak portofolio mana yang cocok untuk karya Anda Mulailah dari gambarnya, karena tata letak ada untuk menampilkannya. Foto yang diambil dalam satu orientasi cocok ditampilkan dalam grid yang rapi, tempat barisnya sejajar. Campuran karya potret dan lanskap lebih cocok dalam masonry, tempat setiap kartu dapat mempertahankan bentuk gambarnya. Studi kasus terlihat berbeda. Saat setiap proyek memerlukan paragraf konteks, grid satu kolom berisi kartu terbagi dua memberinya ruang, dan versi sidebar cocok untuk agensi yang ingin detail kontaknya berada di samping karya. Perhatikan juga jumlah proyek Anda. Kumpulan karya kecil muat dalam satu layar dengan filter di atasnya. Jika sudah lebih dari beberapa baris, pilih gaya pemuatan agar halaman tetap cepat dibuka: paginasi untuk pengunjung yang ingin tahu posisi mereka, atau gulir tak terbatas untuk pengunjung yang suka menjelajah. Untuk satu proyek, pilih templat berdasarkan medianya terlebih dahulu: slider galeri untuk sesi pemotretan atau video untuk film, dan tentukan sidebar paling akhir. Templat lainnya ## Koleksi lainnya - [Templat Halaman 13](https://canvaswp.com/id/templates/page-templates/) - [Shortcode dan Elemen 57](https://canvaswp.com/id/templates/shortcodes/) - [Tata Letak Blog 35](https://canvaswp.com/id/templates/blog/) - [Tata Letak Toko 9](https://canvaswp.com/id/templates/shop/)