Tạo trang full-width để làm landing page cho website WordPress một cách đơn giản.
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:
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.
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):
- Đối với 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).
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):
- Đối với 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. :)
hơn 1 tuần Mò CSS với ng ko chuyên môn, trước khi đọc dc bài viết này, tks admin
Rất vui vì đã giúp được bạn. 😄
Bạn làm thế nào để Việt hóa Fixed Table of Content? Mình dùng Loco Translate mà không chuyển thành chữ Mục lục được.
Cái này trong phần cài đặt của plugin có mà bạn. Bạn vào Settings => Fixed TOC => mục Fixed Headers.
À. Chết. Mình nhầm. Vào Appearance => Customize => Fixed TOC Plugin => Contents Header => Title nhé.
Sau khi mình cài Thrive Comment, phần Sidebar bị kéo tụt dưới phần bình luận. Còn phần bình luận thì mở rộng sang tận sidebar. Bạn có biết cách khắc phục không?
Mình không dùng Thrive Comments nên không rõ đâu bạn ạ. :)
À, mình tìm ra rồi. Nguyên nhân là vì mình cài theme Writer của Mythemeshop. Sau đó cài plugin Add widget after post. Plugin này gây xung đột. Mĩnh gỡ bỏ và cài plugin Mts Post in Ad là Ok.
Trước giờ ngồi mò mẫm chỉnh css để full width làm gì không biết, dùng cái này tiện quá trời luôn. Cảm ơn bạn!
Mình chọn phương án dùng plugin này và plugin với tính năng tương tự cho tiện, không cần phải chỉnh sửa thêm bớt vào theme, mệt người ^^
Nhiều người chọn WordPress vì kho plugin quá phong phú mà. Nếu plugin hỗ trợ sẵn thì tội gì không dùng. :D
Có plugin này tiện quá anh hé, lúc trước để thiết kế Landing page em phải css từa lưa hêt làm file css child theme rối hết cả lên :D