Full width wordpress theme hướng dẫn
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 themeNế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.
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 pluginNế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.
Trong đó:
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. :) Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé. Reader InteractionsBạn có muốn tạo một trang full width trong WordPress hay không? Nhiều theme WordPress cung cấp sẵn cho bạn template trang full width và một số theme khác thì không. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng tạo một trang full width trong WordPress. Phương pháp 1: Sử dụng template full width có sẵn trong theme WordPress của bạnNếu theme của bạn đi kèm với template trang full width thì tại sao bạn lại không tận dụng tính năng này. Trước tiên, bạn cần truy cập Pages » Add New chỉnh sửa một trang hoặc tạo một trang mới. Trên màn hình chỉnh sửa trang, chọn Full width dưới mục Template của bạn trong hộp Page Attributes Sau đó, bạn chỉ cần lưu lại trang của mình, tiếp tục chỉnh sửa trang để thêm nội dung hoặc nhấp vào nút Preview để xem thử trang của bạn. Nếu bạn không nhìn thấy tùy chọn template full width trên màn hình chỉnh sửa trang của mình, nghĩa là theme của bạn không có sẵn template full width. Đừng lo lắng, chúng tôi sẽ chỉ cho bạn cách dễ dàng tạo một trang full width mà không cần phải thay đổi theme WordPresse yêu thích của bạn. Phương pháp 2: Tạo template trang full width thủ côngPhương pháp này yêu cầu phải chỉnh sửa một số file theme WordPress vì thế bạn cần có một số hiểu biết cơ bản về PHP, CSS và HTML. Nếu bạn chưa từng làm điều này trước đây, hãy xem thêm hướng dẫn của chúng tôi về cách sao chép và dán code trong WordPress . Trước khi tiếp tục, bạn nên tạo bản sao lưu WordPress hoặc ít nhất là bản sao lưu theme hiện tại của bạn. Điều này sẽ giúp bạn dễ dàng khôi phục trang web của bạn nếu có sự cố. Trước tiên, bạn cần mở một trình soạn thảo văn bản đơn giản như Notepad và dán đoạn code sau vào một file trống:
Bây giờ bạn cần lưu file này trên máy tính của bạn với tên full-width.php. Code này chỉ đơn giản là xác định tên của file template. Bạn sẽ cần bổ sung thêm phần nội dung của code. Hãy kết nối với trang web của bạn bằng FTP client (hoặc trình quản lý file trong cPanel) và sau đó truy cập /wp-content/themes/your-theme-folder/. Bây giờ bạn cần xác định vị trí file có tên page.php. Đây là file template mặc định của theme của bạn. Sao chép mọi thứ sau dòng get_header() và dán nó vào file full-width.php mà bạn vừa tạo ở bước trên. Sau đó, kiểm tra file full-width.php của bạn, tìm và xóa dòng code sau đây: Dòng code này có tác dụng tải sidebar (thanh bên) và hiển thị nó trên trang của bạn. Xóa nó sẽ làm cho theme của bạn dừng tải sidebar và hiển thị ở chế độ full width. Bạn có thể thấy dòng này xuất hiện nhiều hơn một lần trong theme của bạn. Nếu theme của bạn có nhiều sidebar (khu vực widget chân trang cũng được gọi là sidebar), bạn sẽ thấy mỗi sidebar được tham chiếu một lần trong đoạn code này. Bạn cần phải quyết định những sidebar nào bạn muốn giữ lại. Nếu theme của bạn không hiển thị sidebar trên các trang, bạn có thể không tìm thấy đoạn mã đó trong file của mình. Dưới đây là code của tập tin full-width.php sau khi chỉnh sửa. Code của bạn có thể sẽ hơi khác một chút tùy thuộc vào Theme WordPress của bạn.
Tiếp theo, bạn cần tải lên file full-width.php vào thư mục theme của mình bằng FTP client. Vậy là, bạn đã tạo thành công và tải lên một template full width tùy chỉnh vào theme của bạn. Bước tiếp theo là sử dụng template này để tạo một trang full width. Chuyển đến khu vực admin WordPress, tiến hành chỉnh sửa hoặc tạo một trang mới. Trên màn hình chỉnh sửa trang, hãy tìm Page attributes trong mega box và nhấp vào menu thả xuống bên dưới tùy chọn ‘Template‘. Bạn sẽ thấy template Full-Width của bạn. Hãy chọn nó và lưu trang của bạn. Bây giờ bạn có thể truy cập trang web của mình để xem thể, các sidebar đã biến mất, bố cục trang của bạn lúc này chỉ có một cột. Mặc dù nó có thể chưa phủ hết toàn bộ chiều rộng của màn hình, nhưng bạn có thể dễ dàng điều chỉnh lại. Bạn cần sử dụng các công cụ Inspect để tìm kiếm class quy định bố cục của nội dung trong Theme của mình. Sau khi tìm thấy, bạn hãy sử dụng CSS để điều chỉnh độ rộng của trang thành 100%. Chúng tôi đã sử dụng mã CSS sau trong trang web thử nghiệm của mình:
Đây là giao diện trên trang demo của chúng tôi với theme Twenty Sixteen. Phương pháp 3: Tạo trang full width bằng cách sử dụng plugin Page BuilderPhương pháp này dễ dàng hơn và được khuyến nghị cho tất cả người dùng. Đây là phương pháp giúp bạn dễ dàng chỉnh sửa trang full width cũng như tạo được nhiều bố cục khác nhau cho trang web của bạn. Với phương pháp này, bạn sẽ cần một plugin page builder WordPress. Chúng tôi sẽ sử dụng Beaver Builder để minh họa cho hướng dẫn này. Đây là một trong những plugin page builder kéo và thả tốt nhất, giúp bạn dễ dàng tạo bố cục trang mà không cần viết bất kỳ đoạn code nào. Đầu tiên bạn cần cài đặt và kích hoạt plugin Beaver Builder. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress . Sau khi kích hoạt, bạn có thể bắt đầu chỉnh sửa trang hiện có hoặc tạo trang mới. Trên màn hình chỉnh sửa trang, trong phần thuộc tính trang Page attributes, bạn cần chọn template full width. Nếu theme của bạn không có template full width, bạn có thể tạo một template bằng cách làm theo các hướng dẫn được đề cập trong phương pháp thứ hai. Sau khi chọn template, bạn click vào Save draft để lưu trang của bạn. Lúc này, bạn có thể sử dụng plugin page builder để tạo bố cục của mình. Hãy click vào tab Page builder phía trên page editor. Thao tác này sẽ khởi chạy giao diện page builder. Trong gia điện này, bạn có thể xem bản xem trước trang của mình với các tùy chọn trong page builder. Bạn có thể bắt đầu bằng cách click vào nút Templates ở phía trên. Beaver Builder cung cấp cho bạn một số template được thiết kế chuyên nghiệp, giúp bạn có thể bắt đầu một cách nhanh chóng. Bạn có thể click chọn bất kỳ template nào mà bạn thích và page builder sẽ tải nó cho bạn, bao gồm cả bố cục, hình ảnh và nội dung. Bạn cũng có thể click vào template trống để bắt đầu tạo một bố cục mới theo ý thích của mình. Beaver Builder xây dựng bố cục gồm các hàng và mô-đun. Mỗi hàng có thể có nhiều cột và bên trong mỗi hàng bạn có thể thêm các mô-đun nội dung và widget. Để chỉnh sửa một hàng hoặc một mô-đun trong bố cục của nó, bạn chỉ cần trỏ và click vào đó. Beaver Builder sẽ bật lên một cửa sổ, tại đó, bạn có thể tiến hành chỉnh sửa cài đặt. Bạn có thể thay đổi màu sắc, phông chữ, thêm ảnh nền, thay đổi văn bản,… Bạn có thể thêm các mô-đun và widget bất cứ lúc nào tùy thích vào bố cục của bạn. Beaver Builder đi kèm với nhiều mô-đun nội dung cơ bản và nâng cao mà bạn chỉ cần kéo và thả vào trang của mình. Sau khi chỉnh sửa xong, bạn có thể nhấp vào nút ‘Done‘ ở trên cùng. Một cửa sổ khác bật lên, bạn cần chọn lưu hoặc xuất bản trang của bạn. Bây giờ bạn có thể truy cập trang của mình để xem bố cục trang của bạn. Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng tạo một trang full width trong WordPress. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách thêm background toàn màn hình trong WordPress. Nếu bạn thích bài viết này, vui lòng đăng ký YouTube Channel của chúng tôi để xem thêm các hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook. |