Tạo bố cục bài viết tùy chỉnh trên WordPress? Nghe có vẻ khá điên rồ, phải không?
Mình biết, hầu hết các bạn đã quá quen với việc phụ thuộc thiết kế mặc định của theme WordPress trong nhiều năm trời.
Khi bạn chọn một theme WordPress làm Website thì mặc định phải chấp nhận bố cục bài viết Blog mà nhà thiết kế của họ đã xây dựng.
Ví dụ: Khi bạn dùng theme trên Mythemeshop, bạn sẽ không thể tùy biến trang bố cục bài viết.
Chắc chắn, đôi khi bạn sẽ cảm thấy bực bội.
Đơn giản như những lúc bạn thấy một website có giao diện bài viết tuyệt đẹp và bạn muốn bắt chước họ nhưng lại không có kinh nghiệm viết mã.
Không sao!
Một công cụ hàng đầu như Elementor Pro có thể sẽ giúp cho bạn một cách dễ dàng.
Trong hướng dẫn này mình sẽ hướng dẫn bạn cách tạo một bố cục bài viết tùy chỉnh cho Blog. Mình đảm bảo bạn sẽ thấy Blog của mình chuyên nghiệp và bắt mắt hơn hẳn.
Tại sao bố cục trang bài viết Blog lại quan trọng?
Có lẽ bạn khó từ chối với mình:
Bài viết Blog là một mạch máu của một doanh nghiệp trực tuyến trong thời buổi cạnh tranh này.
Nó được các SEOer dành hết tâm huyết của họ nhằm đạt được những thứ hạng cao với các từ khóa tương ứng. Cuối cùng dẫn đên mục đích nhận được nhiều traffic miễn phí từ Google.
Xem thêm: SEO là gì? Hướng dẫn làm SEO WordPress
Vì vậy, một giao diện bài viết mang các ý nghĩa:
- Tạo ấn tượng cho người dùng
- Nhấn mạnh sự chuyên nghiệp của Blog
- Tạo nên trải nghiệm đọc hoàn hảo cho khách truy cập
- Gia tăng thời gian trên trang (on-time)
- Cải thiện tỷ lệ chuyển đổi
Mình đã từng mất không ít thời gian để theo đuổi sự hoàn hảo của một trang bài viết. Thậm chí ngay cả trang giao diện bạn đang đọc cũng tiêu tốn hơn cả năm trời của mình.
Đó là một khoảng thời gian gian không hề ngắn cho một yếu tố trên trang web.
Vì vậy bây giờ bạn muốn như mình nhưng không phải lãng phí thời gian học tập?
Đó là lý do tại sao hôm nay mình sẽ chỉ cho bạn cách tạo một trang bài viết hoàn chỉnh bằng Elementor Pro.
Còn nếu bạn hỏi tại sao lại là Elementor Pro mà không phải là plugin khác thì mình có lý do chính đáng:
Elementor Pro là plugin có khả năng tạo ra các bố cục khác nhau trên WordPress tốt nhất thời điểm này.
Hơn nữa, với trình tạo trang kéo thả này bạn có thể sử dụng đơn giản mà không quan tâm về viết mã.
Action: Cách tạo một bố cục trang bài viết
Để tạo một bố cục bài viết, trước tiên bạn cần phải có chút kinh nghiệm về Elementor Pro.
May mắn là mình đã có đề cập trong một đánh giá Elementor Pro, bạn có thể đọc sau đó quay lại bài viết này.
1 – Kích hoạt Single post template
Bây giờ bạn để tạo bố cục bài viết tùy chỉnh bạn hãy đi đến menu quản trị chọn Templates -> Add New.
Tiếp tục chọn mục Single Post -> Đặt tên -> Create Template.
Lúc này, bạn sẽ thấy Elementor Pro chu đáo đến mức nào, thậm chí bạn không cần xây dựng lại từ đầu. Thay vào đó, họ cung cấp một số mẫu dựng sẵn cho bạn lựa chọn.
(Nếu thích bạn hãy nhấn Insert để nhập)
Lưu ý: Để nhập các mẫu này bạn cần phải Active Elementor Pro bằng license chính thức từ nhà cung cấp. Đừng có dại mà mua mấy cái giá rẻ rồi than không nhập được nhé!).
Trong trường hợp hướng dẫn này mình mình muốn bắt tay xây dựng một bố cục từ đầu hơn.
Vì vậy mình nhấn close để đóng nó lại.
Bây giờ bạn sẽ thấy một vùng trống dưới header, đó là nơi bạn làm việc để thiết kế một trang bố cục bài viết tùy chỉnh.
2 – Tạo bố cục bài viết
Phần này rất quan trọng vì nó quyết định đến hình dạng và cách bài viết của bạn hiển thị trên trình duyệt.
Đầu tiên hãy chọn loại Section.
Cá nhân mình thì thích loại không có thanh bên (no sidebar) nên chỉ chọn loại 1 cột.
Còn nếu bạn muốn dạng một bên có nội dung bài viết một bên có sidebar để đặt quảng cáo thì hãy chọn loại 2/3+1/3.
Nhân tiện mình quy định luôn kích thước chiều rộng của nội dung, lý tưởng nhất với mình thường tầm 960px. Còn muốn biết lý do tại sao thì ib mình giải thích cho (về cơ bản nó liên quan đến UX/UI).
Trong một số trường hợp bạn cũng có thể bổ sung thêm một section như form đăng ký Email.
3 – Bổ sung phần tử
Lúc này hãy nhìn bên trái, bạn sẽ thấy một số widget hiển thị.
Đây là các widget động và nó sẽ thay đổi theo nội dung bài viết của bạn hoặc một số tính năng toàn cầu.
- Post title: Lấy từ tiêu đề của một bài viết trong phần Posts.
- Post except: Lấy từ phần trích (rất ít dùng).
- Post content: Lấy từ nội dung của bài viết.
- Featured image: Lấy giá trị tuwff hình ảnh đặc trưng của bài viết
- Table of content: Tự động tạo mục lục cho bài viết
- Author box: Lấy giá trị từ phần Profile hoặc có thể tùy chỉnh
- Post comment: Thêm khung bình luận cho bài viết
- Post Navigation: Phần điều hướng bài viết cũ/mới
- Post info: Bổ sung thông tin bài viết như tên tác giả, ngày đăng, thời gian, chuyên mục,…
Trên thực tế bạn không cần dùng hết, thay vào đó mình đã cố tình đánh dấu cho bạn những mục cần thiết ở trên bằng cách in đậm.
Ví dụ: Mình đã kết hợp những mục trên.
Có vẻ hơi xấu, phải không?
Đừng lo! Bạn cần phải làm đẹp nó ngay bây giờ.
4 – Tùy chỉnh thiết kế
Việc tùy chỉnh đẹp hay xấu lúc này phụ thuộc khá nhiều vào kỹ năng thiết kế của bạn hoặc ít ra bạn cần có một bản sao để làm tương tự.
Chẳng hạn như mình đã cho title và post info căn giữa.
Hoặc thêm một đường viền xung quanh hình ảnh của tác giả.
Bạn cũng có thể thêm một yếu tố như đường chia để ngăn cách một số phần tử.
5 – Xem thử kết quả
Để chắc chắn thiết kế của bạn hoàn hảo, bây giờ hãy nhấn vào biểu tượng con mắt, chọn settings.
Ở mục Preview dynamic Content as hay chọn -> Posts.
Tiếp tục gõ vài chữ đầu của bài viết cần kiểm tra ở dòng dưới.
Nhấn nút Apply & Preview để xem.
Nếu bạn thấy hài lòng hãy tiếp tiến hành bước cuối cùng.
6. Xuất bản thiết kế bố cục bài viết
Elementor Pro đi kèm với tính năng kiểm soát hiển thị khá mạnh mẽ, vì vậy bạn cần nhắm mục tiêu để áp dụng các thiết kế.
Giờ hãy nhấn nút Update bên dưới màn hình.
Tiếp tục chọn add Conditional để thêm điều kiện.
Theo mặc định nó sẽ để tất cả. Tuy nhiên mình khuyên bạn nên chọn Post -> All Post để nó chỉ áp dụng cho tất cả định dạng bài viết.
Nhấn Save & close để kết thúc.
Bây giờ bạn đã có một trang bố cục hoàn toàn mới theo ý muốn của mình mà không bị trói buộc thiết kế mặc định của theme.
Phần kết luận
Bố cục bài viết là một trong những chìa khóa hoàn hảo để tăng trải nghiệm người dùng và kết nối bạn với khách hàng.
Và đôi khi nó cũng tạo ra một không gian thoải mái để bạn có cảm hứng và tập trung viết những bài đăng chất lượng cho Blog.
Hoặc ít ra bạn sẽ không phải chật vật tìm cách sao chép những thiết kế đẹp của những website khác.
Thậm chí bây giờ, nếu bạn thích bố cục bài viết như Blog của mình thì bạn vẫn thừa khả năng làm được với sự hỗ trợ của Elementor Pro.
Mình hy vọng bạn có được một trang bố cục bài post ưng ý nhất, và mình sẽ rất vui nếu như bạn chia sẻ thiết kế của bạn cho mình và người khác cùng thấy.
Cho mình biết câu trả lời của bạn hoặc bất kỳ câu hỏi liên quan khác trong bình luận bên dưới.
