Khối bìa wordpress có chiều rộng đầy đủ
|
Jumbotron là một trong những thành phần phổ biến trong Bootstrap framework. Nó cho phép bạn tạo các phần anh hùng và tiêu đề có chiều rộng đầy đủ sẽ thu hút người dùng. Không dễ để tạo jumbotron có chiều rộng đầy đủ như vậy trong WordPress. Có nhiều plugin trình tạo trang có sẵn cho WordPress cung cấp loại tính năng này. Tuy nhiên, các plugin này sẽ sử dụng JavaScript nặng và kéo theo tốc độ trang web của bạn Show Ngoài ra, bạn chỉ nên sử dụng các plugin trình tạo trang cho trang chứ không phải trên các bài đăng trên blog. Ngày trước, bạn phải sử dụng các plugin trình tạo trang này để tạo các phần có chiều rộng đầy đủ. Giờ đây, bạn có thể tạo các phần có chiều rộng đầy đủ trong WordPress bằng trình chỉnh sửa khối Gutenberg. Và chúng tôi sẽ giải thích cách thực hiện điều này trong hướng dẫn này Học WordPress. Xem hơn 500 hướng dẫn WordPress miễn phí Tạo các phần có chiều rộng đầy đủ trong WordPressCó ba cách khác nhau để bạn có thể tạo các phần có chiều rộng đầy đủ hoặc chiều rộng trong WordPress bằng trình chỉnh sửa Gutenberg
1. Khối nhóm GutenbergWordPress đã giới thiệu Gutenberg với việc giới thiệu phiên bản 5. 0. Nó là một trình chỉnh sửa khối mà bạn có thể dựa vào thay vì các plugin trình tạo trang. Có các khối mới được thêm vào trình chỉnh sửa với các bản phát hành mới. Khối nhóm đã được thêm vào trình chỉnh sửa trong phiên bản 5. 3. Do đó, hãy chắc chắn rằng bạn có phiên bản 5. 3 trở lên để tạo các phần có chiều rộng đầy đủ bằng trình chỉnh sửa Gutenberg Trước khi tạo phần có chiều rộng đầy đủ, trước tiên hãy quyết định các thành phần bạn muốn đưa vào bên trong phần. Hãy để chúng tôi lấy một ví dụ rằng một phần có chiều rộng đầy đủ chứa một tiêu đề và một đoạn văn. Sau khi áp dụng màu nền, chúng tôi muốn phần này trông như bên dưới  Nhóm các khối với NhómBước đầu tiên là chèn tiêu đề và khối đoạn văn và thêm nội dung của bạn. Bây giờ, giữ phím shift và chọn hai khối bằng chuột. Nhấp vào biểu tượng “Nhóm” và chuyển đổi hai khối thành một nhóm Ngoài ra, trước tiên bạn có thể thêm một khối Nhóm, sau đó chèn các khối tiêu đề và đoạn văn bên trong khối Nhóm Có liên quan. Làm cách nào để tạo trang thị sai CSS có chiều rộng đầy đủ bằng Bootstrap jumbotron? Tạo toàn bộ chiều rộngBây giờ bạn đã nhóm hai khối, hãy nhấp vào tùy chọn biểu tượng “Thay đổi căn chỉnh” của khối Nhóm. Chọn tùy chọn “Toàn bộ chiều rộng”. Nếu cần, chọn “Wide width” để tạo phần có chiều rộng thay vì toàn bộ chiều rộng Bạn có thể thấy các khối được nhóm lại được chuyển thành phần có chiều rộng đầy đủ Thay đổi màu nềnSau khi chọn khối Nhóm, hãy xem các tùy chọn có sẵn trên thanh bên phải. Khối nhóm có hai tùy chọn tùy chỉnh để thay đổi màu sắc và thêm lớp CSS nâng cao Thiết lập văn bản và màu nền cho phần chiều rộng đầy đủ của bạn Bây giờ, bạn đã hoàn tất. Xem trước trang để xem phần chiều rộng đầy đủ Tùy chỉnh phần chiều rộng đầy đủKhi bạn sử dụng phần có chiều rộng đầy đủ, hãy đảm bảo rằng bạn đang sử dụng bố cục trang có chiều rộng đầy đủ. Điều này phụ thuộc vào chủ đề bạn sử dụng. Trong hầu hết các trường hợp, phần này có thể không được căn chỉnh chính xác do CSS của chủ đề của bạn
Thêm hình nền vào phần có chiều rộng đầy đủTại thời điểm này, Khối nhóm không cung cấp tùy chọn hình nền. Tuy nhiên, bạn có thể dễ dàng thêm bằng tùy chọn CSS tùy chỉnh. Trước tiên, thêm hai lớp CSS tùy chỉnh trong phần “Nâng cao” của khối Nhóm. Hãy đặt tên cho các lớp này là fullwidthsection và bgimage Sao chép mã CSS bên dưới và đảm bảo thay thế hình nền bằng hình nền của riêng bạn. Bạn cũng có thể điều chỉnh chiều cao và các thông số khác khi cần .fullwidthsection { .bgimage{ Bạn cần thêm mã CSS tùy chỉnh trong phần “Giao diện > Tùy chỉnh > CSS bổ sung” Bây giờ, bạn đã thêm nền hình ảnh vào phần chiều rộng đầy đủ của mình. Xem trước hoặc xuất bản để xem phần có chiều rộng đầy đủ với hình nền. Nó sẽ giống như dưới đây 2. Toàn bộ chiều rộng và chiều rộng với các yếu tốPhiên bản Gutenberg mới nhất có hỗ trợ chiều rộng đầy đủ và chiều rộng cho các phần tử. Thay vì nhóm các khối, bạn có thể tạo phần có chiều rộng đầy đủ với một phần tử. Ví dụ: sau khi thêm hình ảnh, bạn có thể chọn căn chỉnh theo chiều rộng đầy đủ hoặc chiều rộng Hãy nhớ rằng, các tùy chọn căn chỉnh bổ sung sẽ chỉ khả dụng cho một số khối nhất định như hình ảnh. Bạn sẽ không thấy các tùy chọn này cho các khối như đoạn văn. Nếu bạn không nhìn thấy các tùy chọn chiều rộng đầy đủ/rộng cho hình ảnh, thì có thể chủ đề của bạn không hỗ trợ các tính năng. Đừng lo lắng, bạn có thể thêm đoạn mã dưới đây vào hàm. php để kích hoạt chiều rộng đầy đủ/rộng cho các khối được hỗ trợ add_theme_support('align-wide');3. Sử dụng khối bìaTùy chọn cuối cùng là sử dụng khối Cover để tạo các phần anh hùng có chiều rộng đầy đủ. Điều này thường phù hợp với các phần tiêu đề của bố cục trang. WordPress cũng cung cấp các mẫu được xác định trước cho khối bìa mà bạn có thể dễ dàng chèn vào bất kỳ đâu trên trang web của mình Sử dụng lại các phần có chiều rộng đầy đủƯu điểm lớn của trình chỉnh sửa Gutenberg là bạn có thể chuyển đổi bất kỳ khối nào thành khối có thể tái sử dụng. Điều đó có nghĩa là bạn có thể chèn khối có thể tái sử dụng ở bất kỳ đâu trên trang web của mình và chuyển đổi nó thành khối cục bộ để thêm nội dung cụ thể. Bạn cũng có thể di chuyển các phần lên hoặc xuống và tạo nhiều phần để có bố cục đẹp mắt. Kiểm tra trang trực tiếp được tạo với các phần có chiều rộng đầy đủ Từ cuối cùngNhư bạn có thể thấy, Gutenberg cung cấp nhiều cách để tạo các phần có chiều rộng đầy đủ trong WordPress. Bạn có thể sử dụng khối nhóm để kết hợp nhiều phần tử và tạo bố cục có chiều rộng đầy đủ cho trang web của mình. Ngoài ra, sử dụng bìa hoặc hình ảnh để tạo một phần tử có chiều rộng đầy đủ hoặc rộng |
