Tạo trang full-width cho website WordPress

Tạo trang full-width để làm landing page cho website WordPress một cách đơn giản.

tao-trang-full-width-landing-cho-website-wordpress

Bạn đã bao giờ sử dụng các loại page builder (Beaver Builder, Elementor, Thrive Architect…) để xây dựng landing page nhưng lại bị giới hạn thiết kế bởi theme chưa? Một số thành phần cứng đầu như header, sidebar, footer… của theme có thể khiến cho các mẫu giao diện có sẵn (của page builder) mà bạn import vào trông không hoàn hảo giống như demo. Để khắc phục tình trạng này, thông thường chúng ta sẽ cần phải sự trợ giúp của các template full-width.

Tham khảo thêm:

  • Ẩn sidebar trong giao diện mobile của Genesis
  • Ẩn hiện các widget trong WordPress một cách đơn giản

Template full-width là gì?

Hiểu một cách đơn giản thì full-width là những trang có chiều rộng (chiều ngang) tối đa. Nội dung có thể tràn ra sát mép màn hình, không bị giới hạn bởi sidebar hay các thành phần khác. Nó đặc biệt phù hợp để xây dựng các landing page giới thiệu sản phẩm hoặc dịch vụ của bạn.

vi-du-ve-trang-full-width

Một số template full-width còn loại bỏ cả header và footer mặc định của theme, cho phép bạn tự thiết kế trang theo ý thích mà không có bất cứ giới hạn nào cả.

Tạo trang full-width với theme

Nếu theme của bạn hỗ trợ sẵn template full-width thì tất cả những gì bạn cần làm là lựa chọn nó khi tạo trang. Tên của nó thường là “Landing”, “Landing Page”, “Full-Width”… và nằm trong mục Template.

  • Đối với Block Editor (Gutenberg):

chon-template-landing-page

  • Đối với Classic Editor:

chon-template-landing-page-trong-classic-editor

Sau khi lưu lại, các bạn có thể sử dụng bất cứ loại builder nào (Beaver Builder, Elementor, Thrive Architect…) để xây dựng trang.

Tạo trang full-width với plugin

Nếu theme của bạn không hỗ trợ sẵn template full-width hoặc template full-width có sẵn chưa đáp ứng được nhu cầu của bạn, hãy thử sử dụng plugin của bên thứ ba.

Tất cả những gì bạn cần làm là cài đặt và kích hoạt một plugin có tên là Fullwidth Templates for Any Theme & Page Builder (download).

cai-dat-va-kich-hoat-plugin-full-width-templates-for-any-theme-page-builder

Tiếp theo, truy cập trình soạn thảo trang của bạn. Lựa chọn một trong các loại template được bắt đầu bằng chữ FW.

  • Đối với Block Editor (Gutenberg):

lua-chon-template-full-width-trong-block-editor

  • Đối với Classic Editor:

lua-chon-template-full-width-trong-classic-editor

Trong đó:

  • FW Fullwidth: chiều rộng tối đa, nội dung có thể tràn ra sát mép ngang của màn hình.
  • FW Fullwidth No Header Footer: chiều rộng tối đa, nội dung có thể tràn ra sát mép ngang của màn hình. Ngoài ra, loại bỏ luôn cả phần header và footer. Nói một cách dễ hiểu thì bạn sẽ có 1 trang trắng tinh với chiều rộng và chiều cao tối đa.
  • FW No Sidebar: chỉ loại bỏ sidebar, vẫn giữ nguyên chiều rộng mặc định của theme.

Tùy theo nhu cầu của bạn mà lựa chọn template cho phù hợp. Sau khi lưu lại, các bạn có thể sử dụng bất cứ loại builder nào (Beaver Builder, Elementor, Thrive Architect…) để xây dựng trang mà không sợ bị giới hạn thiết kế bởi theme nữa. Thật tuyệt vời phải không nào? Chúc các bạn thành công!

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)

Tìm kiếm