# 27 bố cục Portfolio URL: https://canvaswp.com/vi/templates/portfolio/ Updated: 2026-11-03 Mẫu Lưới và masonry. Kiểu lọc và tải nội dung. Cùng các bố cục dự án đơn lẻ đi kèm. [Mở bản trình diễn trực tiếp](https://demos.canvaswp.com/classic/) [Duyệt các bản demo](https://canvaswp.com/vi/demos/) Cập nhật 3 tháng 11, 2026 - Lưới - Masonry - Tải kiểu dáng - Dự án đơn lẻ - Bố cục ## Lưới 5 Mỗi lưới ở đây đều là một khối Canvas Posts với Layout đặt là Portfolio. Columns quyết định có bao nhiêu dự án nằm trên một hàng, còn Portfolio Gutter đặt khoảng cách giữa các dự án, xuống đến không có khoảng cách nào. Phiên bản một cột bật Alternating Split Cards, nên mỗi dự án nằm cạnh phần mô tả và hình ảnh đổi bên trên mỗi thẻ thứ hai. - [1 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-1/) - [2 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-2/) - [3 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-3/) - [5 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-5/) - [6 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-6/) ## Masonry 6 Cùng một khối, nhưng Grid Engine khác. Chọn chế độ masonry và các thẻ sẽ giữ chiều cao riêng, xếp thành các cột mà không cần tuân theo đường hàng nào. Card Shape là nguồn tạo nhịp điệu: cắt mọi ảnh về cùng một hình dạng, hoặc để mỗi dự án giữ hình riêng. Phiên bản kết hợp cũng chuyển tiêu đề vào lớp phủ khi di chuột. - [Cột hỗn hợp (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-mixed-masonry/) - [2 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-2-masonry/) - [3 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-3-masonry/) - [4 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-masonry/) - [5 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-5-masonry/) - [6 cột (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-6-masonry/) ## Các kiểu đang tải 5 Các thiết lập này quyết định cách khách truy cập tìm đến phần còn lại trong portfolio của bạn. Pagination Style cung cấp bộ phân trang phía client và cuộn vô hạn trong các lựa chọn. Open Projects In-Page tải dự án phía trên lưới mà không rời khỏi trang, còn Open Project In có thể hiển thị dự án trong modal lightbox. Filter Styles bố trí khối Canvas Grid Filter, hàng nút danh mục, theo từng kiểu của nó, có hoặc không có nút Shuffle. - [Phân trang jQuery (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-jpagination/) - [Cuộn vô hạn (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-infinity-scroll/) - [AJAX trong trang (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-ajax/) - [AJAX In Modal (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-ajax-in-modal/) - [Kiểu bộ lọc (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-filter-styles/) ## Dự án đơn 5 Trang dự án lấy bố cục từ một mẫu mà bạn chọn trong cài đặt Mẫu khi chỉnh sửa dự án. Các mẫu bao gồm bốn loại phương tiện: ảnh lớn, trình chiếu thư viện ảnh, lưới ảnh thu nhỏ và video. Mỗi mẫu đi kèm thanh bên ở một bên hoặc cả hai bên, toàn chiều rộng, hoặc nằm dưới hero tràn viền. Các trang được liên kết ở đây là một mẫu tiêu biểu trong bộ này. - [Parallax Image (mở trong tab mới)](https://demos.canvaswp.com/classic/projects/portfolio-single-fullwidth/) - [Slider Gallery (mở trong tab mới)](https://demos.canvaswp.com/classic/projects/portfolio-single-gallery-full/) - [HTML5 Video (mở trong tab mới)](https://demos.canvaswp.com/classic/projects/portfolio-single-video-fullwidth-left-sidebar/) - [Ảnh thu nhỏ dạng masonry (mở trong tab mới)](https://demos.canvaswp.com/classic/projects/portfolio-single-thumbs-right-sidebar/) - [Nhúng video (mở trong tab mới)](https://demos.canvaswp.com/classic/projects/portfolio-single-video-both-sidebar/) ## Bố cục 6 Vị trí lưới trên trang. Các phiên bản thanh bên đặt cùng khối này vào cột chính bên cạnh thanh bên gồm các widget, chẳng hạn như bài viết gần đây và biểu mẫu liên hệ nhanh. Chiều rộng 100% chạy lưới từ mép đến mép, không có khoảng cách. Parallax Cards bật hiệu ứng parallax, biến mỗi hình ảnh thành một lớp nền chuyển động theo khi trang cuộn. - [Mặc định (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-nomargin/) - [Thanh bên phải (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-1-alt-right-sidebar/) - [Thanh bên trái (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-3-left-sidebar/) - [Hai thanh bên (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-2-both-sidebar/) - [Chiều rộng 100% (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-fullwidth-notitle/) - [Parallax (mở trong tab mới)](https://demos.canvaswp.com/classic/portfolio-parallax/) Mỗi liên kết mở ra một trang thật trên trang trình diễn trực tiếp, được dựng bằng chính giao diện và các khối bạn cài đặt. Trên trang web của riêng bạn ## Tạo bất kỳ dạng nào trong số này chỉ từ một khối Phần trưng bày này để bạn xem. Các khối và mẫu đằng sau đều đi kèm Canvas, nên mọi bố cục ở trên đều có thể được dựng lại trên website của bạn. ### Dự án là các bản ghi Nội dung của bạn nằm trong loại nội dung portfolio, mỗi dự án là một bản ghi, với các danh mục mà Grid Filter đọc để tạo nút lọc. Thêm một dự án và mọi lưới trên trang web hiển thị danh mục đó sẽ tự động cập nhật dự án mới. Bản thân trang không bao giờ cần chỉnh sửa. ### Lưới được điều chỉnh bằng cài đặt Chèn Canvas Posts, chọn bố cục Portfolio, rồi làm lần lượt qua các panel Layout và Pagination bằng đúng tên trên trang này. Với chính trang dự án, Canvas thêm 8 khối portfolio, từ tiêu đề và danh sách meta đến các dự án liên quan. ### Hoặc nhập một bản demo hoàn chỉnh 21 trong số 88 bản demo website có sẵn các dự án portfolio khi nhập, được bố cục cho agency, nhiếp ảnh gia hoặc họa sĩ minh họa. Bắt đầu từ một trong số đó, bạn chỉnh sửa dự án chứ không phải bố cục. - [So sánh các bản demo Portfolio](https://canvaswp.com/vi/wordpress-themes/portfolio/) ### Mọi gói, mọi bố cục Không có tiện ích bổ sung portfolio. Các lưới, bộ lọc, kiểu tải và mẫu cho từng dự án đơn đều có trong gói Hằng năm như trong gói Trọn đời, vì mọi gói đều đi kèm mọi khối. - [So sánh các gói](https://canvaswp.com/vi/pricing/) Cách chọn ## Bố cục portfolio nào phù hợp với công việc của bạn Bắt đầu từ hình ảnh, vì bố cục tồn tại để làm nổi bật chúng. Ảnh chụp theo cùng một hướng hợp với lưới đều, nơi các hàng thẳng hàng. Tập hợp tác phẩm vừa dọc vừa ngang nên dùng masonry, nơi mỗi thẻ có thể giữ đúng hình dạng của ảnh. Các nghiên cứu điển hình được trình bày khác nhau. Khi mỗi dự án cần một đoạn bối cảnh, lưới thẻ chia đôi một cột có đủ chỗ cho điều đó, còn phiên bản có thanh bên phù hợp với agency muốn đặt thông tin liên hệ cạnh các tác phẩm. Đừng quên tính cả số lượng dự án của bạn. Một danh mục tác phẩm nhỏ vừa vặn trên một màn hình, với bộ lọc ở phía trên. Khi có vài hàng trở lên, hãy chọn kiểu tải nội dung để trang mở nhanh: phân trang cho khách muốn biết mình đang ở đâu, cuộn vô hạn cho người thích lướt xem. Với một dự án đơn lẻ, hãy chọn mẫu theo phương tiện trước: trình chiếu thư viện ảnh cho buổi chụp hình hoặc video cho phim, và quyết định thanh bên sau cùng. Thêm mẫu ## Phần còn lại của thư viện - [Mẫu trang 13](https://canvaswp.com/vi/templates/page-templates/) - [Shortcode và Phần tử 57](https://canvaswp.com/vi/templates/shortcodes/) - [Bố cục blog 35](https://canvaswp.com/vi/templates/blog/) - [Bố cục cửa hàng 9](https://canvaswp.com/vi/templates/shop/)