6 Bước Sử Dụng Dynamic Content Trong Elementor

Dynamic Content trong Elementor là bộ công cụ độc đáo cho Elementor để tạo các trang Web mạnh mẽ và nội dung chuyên nghiệp. Dynamic Content ( nội dung động ) đóng một vai trò quan trọng trong việc tạo các mẫu Theme. Trong bài đăng này, tôi sẽ cùng bạn tìm hiểu về Dynamic Content trong Elementor và cách sử dụng.

1.Breadcrumbs Widget (Pro)

Breadcrumbs Widget của Elementor hoạt động với Plugin Yoast SEO. Vì vậy, để sử dụng tiện ích này, bạn cần cài đặt Yoast SEO ngay.

Trong Elementor, bạn tìm Breadcrumbs Widget. Trong mục Content, bạn có thể dễ dàng căn chỉnh và chọn một thẻ HTML. Tôi muốn lưu ý với bạn rằng các cài đặt bổ sung có sẵn trong Yoast SEO Breadcrumbs Panel, do đó hãy tận dụng nhé.

Tiếp đến, bạn chuyển sang mục Style để thiết kế kiểu chữ bằng cách sử dụng các tùy chọn thiết kế của Elementor. Bên cạnh đó, bạn chọn màu cho văn bản, liên kết,…

2.Posts Widget (Pro)

Với Posts Widget, bạn có thể hiển thị danh sách bất kỳ loại bài đăng nào theo nhiều cách và bố cục khác nhau. Với tôi, tiện ích này rất thiết thực, được sử dụng để hiển thị các bài đăng từ một danh mục cụ thể hoặc phân loại khác, các bài đăng gần đây,…

Classic Skin:

Giao diện cổ điển là một mẫu Layer hoàn toàn có thể tùy chỉnh được áp dụng cho Posts Widget. Thông qua đó, bạn có thể tạo cho bài đăng một thiết kế mang phong cách cổ điển, truyền thống.

Content: Tại đây, bạn có thể chọn giao diện thiết kế, đặt số lượng cột sẽ được hiển thị (từ 1 đến 6), đặt số lượng bài đăng chính xác được hiển thị, vị trí hình ảnh,…

Tab Style: Nó cho phép bạn, căn chỉnh nội dung trong tiện ích, tùy chỉnh khoảng cách giữa các hàng, cột, đặt chiều rộng, chọn màu nền của hộp bài đăng, bộ lọc CSS,…

word image 4

3.Post Comments Widget

Dynamic Content trong Elementor bao gồm cả các nhận xét của người dùng. Để khác truy cập có thể để lại nhận xét, bạn cần sử dụng Post Comments Widget. 

Tại Tab Nội dung => mục Bình luận, bạn hiệu chỉnh như sau:

Skin: Bạn chọn một loại giao diện Theme Comments. Đây là Theme được thiết kế để hiển thị biểu mẫu nhận xét và các nhận xét của người dùng.

Nguồn (Source): Tại đây, bạn chọn nguồn nhận xét của người dùng. Bạn có thể chọn Bài đăng hiện tại hoặc Tùy chỉnh. Nếu chọn Tùy chỉnh, các tùy chọn sau sẽ khả dụng: 

Tìm kiếm & Chọn (Search & Select): Khi bạn bắt đầu nhập tên cụ thể của một bài đăng, bạn sẽ nhận được tên đầy đủ của bài đăng. Các bình luận từ bài viết đã chọn sẽ được hiển thị.

Tôi lưu ý với bạn rằng tiện ích Post Comments sẽ chỉ hoạt động nếu trang bạn cho phép nhận xét. Cài đặt này được kiểm soát thông qua WordPress Discussion Settings.

word image 5Post Info Widget

Post Info Widget là một phần tử Theme. Nó là một trong những tiện ích Mẫu Bài đăng Đơn có sẵn được sử dụng để hiển thị động dữ liệu Meta của bài đăng hiện tại. Ví dụ như thông tin tác giả, ngày, giờ và nhận xét.

Bạn tìm Post Info Widget trong Elementor, chọn Tab Nội dung => Click vào Metadata. Sau đó, tại phần bố cục, bạn chọn hiển thị các mục thông tin bài đăng theo chiều dọc hoặc chiều ngang.

Các tùy chọn tiếp theo được hiển thị dưới dạng danh sách tất cả các dữ liệu meta có sẵn. Bạn có thể thay đổi thứ tự của chúng bằng thao tác kéo và thả đơn giản. Bạn nhấp vào nút Thêm mục để thêm mục thông tin bài đăng tùy chỉnh vào danh sách.

Bạn có thể sao chép hoặc xóa nhanh các mục bằng cách nhấp vào biểu tượng Sao chép hoặc Xóa của một mục. Tôi thường dùng mẹo này khi dùng Widget, bạn có thể áp dụng nếu thấy hữu ích.

5.Post Content Widget

Với tôi, để tận dụng tốt nhất Dynamic Content trong Elementor, bạn không thể bỏ qua tiện ích Post Content. Widget này cũng là một Theme Element được sử dụng để hiển thị động nội dung của bài đăng hiện tại.

Tôi cũng muốn nhấn mạnh rằng, tiện ích này là yếu tố bắt buộc trên Mẫu Single Post. Nếu tiện ích này không được thêm vào Mẫu Single Post, trình chỉnh sửa Elementor sẽ không tải.

Tại Tab Style, bạn có thể căn chỉnh nội dung sang phải, trái, hoặc căn đều. Bên cạnh đó, bạn cũng có thể chọn màu văn bản, đặt các tùy chọn kiểu chữ cho văn bản.

word image 6

6.Featured Image Widget

Featured Image Widget được sử dụng để hiển thị động hình ảnh nổi bật của bài đăng hiện tại.

Tab Nội dung: Tại đây, bạn có thể chọn hình ảnh, chỉnh kích thước, vị trí hình ảnh. Ngoài ra, bạn có thể nhập văn bản chú thích bên dưới mỗi ảnh nổi bật. Tại mục Link To, bạn có thể chọn liên kết hình ảnh tới tệp Media hoặc URL tùy chỉnh. Nếu chọn tệp Media, bạn có tùy chọn để sử dụng Lightbox hoặc không. Nếu chọn URL tùy chỉnh, bạn có thể nhập URL hoặc biểu tượng để chọn URL động, chẳng hạn như URL bài đăng.

Lưu ý : Nếu bạn nhấp vào “Hình ảnh nổi bật”, một cửa sổ sẽ bật lên cho phép bạn chọn Hình ảnh dự phòng trong trường hợp Hình ảnh nổi bật không tồn tại.

Trong Tab Style => Hình ảnh, bạn có thể đặt chiều rộng của hình ảnh, độ mờ, loại đường viền của ảnh,…

word image 7

7.Single Post Widgets

Elementor cung cấp một bộ Widget được gọi là Theme Elements, có thể được sử dụng để tạo Single Post của bạn. Chúng bao gồm: Tiện ích Tiêu đề bài đăng (Post Title),  nội dung bài đăng (Post Content)thông tin bài đăng (Post Info)trích đoạn bài đăng (Post Excerpt)biểu mẫu tìm kiếm (Search Form)tiện ích hình ảnh nổi bật (Featured Image),…

8.Post Navigation Widget

Widget này được sử dụng để hiển thị động các liên kết điều hướng đến các bài đăng khác. Tôi đã sử dụng và thấy đây là một tiện ích dễ dùng và rát cần thiết cho Web của bạn. 

Trong Elementor, bạn tìm tiện ích Post Navigation. Ở đây có Tab Nội dung, Style và Advanced. 

Bạn nhấp vào Tab Content => Click Post Navigation. Sau đó, bạn có thể hiển thị hoặc ẩn các nhãn Trước / Tiếp theo, nhập văn bản cho các nhãn này, hiển thị hoặc ẩn các mũi tên điều hướng, đường viền của tiện ích,…

Tại Tab Style, bạn có thể tùy chỉnh màu sắc, kiểu chữ cho các Label, tiêu đề, mũi tên và tùy chỉnh đường viền.

word image 8

9.Post Excerpt Widget

Tiếp theo đây, tôi xin giới thiệu đến các bạn một tiện ích khác rất quan trọng để sử dụng nội dung động trong Elementor. Đó chính là Post Excerpt Widget, sử dụng để hiển thị động phần trích dẫn của bài đăng hiện tại.

Trong Tab Nội dung, Post Excerpt là lựa chọn duy nhất. Nếu bạn nhấp vào Post Excerpt, một cửa sổ sẽ bật lên để cho phép bạn chọn Đoạn trích dự phòng trong trường hợp Đoạn trích bài đăng không tồn tại. Cửa sổ bật lên này cũng cho phép bạn đặt nội dung tĩnh ở phía trước và sau Post Excerpt.

Với Tab Style, bạn có thể tùy chỉnh kiểu chữ và màu của văn bản của đoạn trích.

10.Post Title Widget

Đây là một Widget dùng để hiển thị động tiêu đề của bài đăng hiện tại. Bạn tìm tiện ích Post Title trong Elementor. Sau đó, trong Tab Nội dung, bạn Click Tiêu đề. Sau đó, bạn tùy chỉnh kích thước tiêu đề, nhập URL hoặc chọn biểu tượng Động để chọn URL động, đặt thẻ HTML của tiêu đề, căn chỉnh tiêu đề bài đăng,… Một lưu ý tôi muốn nhắc với các bạn là nếu nhấp vào Post Title, một cửa sổ sẽ xuất hiện để bạn chọn Tiêu đề dự phòng trong trường hợp Tiêu đề bài đăng không tồn tại.

Còn tại Tab Style, bạn có thể tiến hành chọn kiểu chữ, màu văn bản của tiêu đề,…

11. Author Box Widget word image 9

Widget Author Box sẽ giúp bạn hiển thị hộp thông tin tác giả của bài đăng hiện tại. Cụ thể, tôi đã sử dụng tiện ích Author Box để hiển thị dạng thông tin này.

Trong Tab Nội dung, tôi sẽ kéo Author Box vào màn hình chỉnh sửa. Sau đó, tôi chọn nguồn (bạn có thể chọn tác giả hiện tại hoặc tác giả tùy chỉnh). Bạn cũng có thể hiển thị hoặc ẩn ảnh hồ sơ, tên tác giả. Ngoài ra, bạn cũng có thể chọn một thẻ HTML cho tác giả của bạn và liên kết tên tác giả với trang Web, hoặc kho lưu trữ bài đăng của bạn,… 

Trong Tab Style, bạn sẽ chọn kiểu chữ, màu sắc tên tác giả, căn chỉnh hình ảnh tác giả,…

Nguồn: https://wiki.matbao.net/huong-dan-su-dung-dynamic-content-trong-elementor/