Hướng Dẫn Sử Dụng Tính Năng Theme Builder Của Elementor

Tính năng Theme Builder của Elementor sẽ giúp bạn thiết kế, tùy chỉnh Website WordPress dễ dàng và nhanh chóng hơn. 

Có thể bạn quan tâm:

Hướng Dẫn Sử Dụng Tính Năng Integrations Của Elementor

Hướng Dẫn Sử Dụng Tính Năng Popups Của Elementor

Hướng dẫn sử dụng chi tiết các tính năng Theme Builder của Elementor

Với Elementor, bạn có thể tạo các trang Web từ đơn giản tới phức tạp một cách đẹp mắt mà không cần biết lập trình. Trong đó, tính năng Theme Builder của Elementor là một tính năng quan trọng vừa được cập nhật gần đây với nhiều ứng dụng thú vị. Tôi sẽ hướng dẫn chi tiết cách sử dụng tính năng này ngay sau đây:

Product Archives Site Part

Product Archives Site Part cho phép bạn truy cập nhanh chóng để thêm, chỉnh sửa hoặc xóa bất kỳ Products Archive Templates (mẫu lưu trữ sản phẩm) nào.

Để tạo mẫu lưu trữ sản phẩm, bạn nhấp vào Thêm mới (Add New) ở góc trên bên phải của màn hình Products Archive Site Part. Khi bạn đã tạo ít nhất một mẫu lưu trữ sản phẩm, bạn sẽ có thể quản lý chúng tại đây.

Single Product Site Part

Với tính năng Theme Builder của Elementor,bạn có thể tạo Single Product Site Part chỉ trong vài cú Click chuột.  Tại đây, bạn có thể liệt kê, truy cập nhanh để thêm, chỉnh sửa hoặc xóa bất kỳ mẫu WooCommerce Single Product (nếu có).

Để tạo mẫu sản phẩm đơn lẻ (Single Product Templates), bạn nhấp vào nút Thêm mới. Nút này nằm ở góc trên bên phải của màn hình Single Product Site Part.

Tiếp đây, tôi sẽ hướng dẫn bạn chỉnh sửa thiết kế mẫu sản phẩm đơn hiện có:

• Đầu tiên, bạn nhấp vào nhãn Mẫu Sản phẩm Đơn trong thanh bên. Thao tác này sẽ mở trang tổng quan chi tiết của Template Sản phẩm Đơn lẻ.
• Tiếp đến, bạn nhấp vào Chỉnh sửa liên kết (Edit link) ở góc trên bên phải của mẫu Sản phẩm Đơn lẻ cụ thể mà bạn muốn chỉnh sửa. Thao tác này sẽ mở trình chỉnh sửa Elementor cho Mẫu Sản phẩm Đơn đó.

Error 404 Site Part

Để tạo Error 404 Site Part, tại góc trên bên phải của màn hình Phần trang web Lỗi 404, bạn nhấp vào Thêm mới.  

Để chỉnh sửa thiết kế lỗi 404 hiện có, bạn thực hiện theo các bước sau:

• Nhấp vào nhãn Lỗi 404 trong thanh bên để mở trang tổng quan chi tiết của Template Lỗi 404.
• Nhấp vào Chỉnh sửa liên kết ở góc trên bên phải của Template Lỗi 404 cụ thể mà bạn muốn chỉnh sửa. Thao tác này sẽ mở trình chỉnh sửa Elementor cho Template Lỗi 404 đó.

Search Results Site Part

Các bước chỉnh sửa thiết kế kết quả tìm kiếm hiện tại:

• Nhấp vào Label Kết quả tìm kiếm trong thanh bên. 
• Tiếp đến, bạn nhấp vào Edit Link ở góc trên bên phải của Template kết quả tìm kiếm cụ thể mà bạn muốn chỉnh sửa. Sau đó, trình chỉnh sửa Elementor cho Mẫu kết quả tìm kiếm đó sẽ hiển thị để bạn thao tác.

Chỉnh sửa Điều kiện của Kết quả Tìm kiếm Hiện tại: 

• Bạn Click vào Edit Link ở góc Mẫu Kết quả Tìm kiếm mà bạn muốn chỉnh sửa. 
• Trình chỉnh sửa Điều kiện hiển thị cho Search Results Template.

Archive Site Part

Chỉnh sửa thiết kế của Archive hiện có:

• Bạn Click chọn nhãn Lưu trữ trong thanh bên. 
• Tiếp tục nhấp Chỉnh sửa Link ở góc trên bên phải của Mẫu lưu trữ cụ thể mà bạn muốn chỉnh sửa. Sau đó bạn tùy chỉnh thiết kế cho mẫu lưu trữ trong trình chỉnh sửa Elementor.

Xuất một Archive:

• Bạn nhấp biểu tượng ba dấu ngang ở phía trên bên phải của Mẫu Archive mà bạn muốn xuất. 
• Chọn  Xuất  để mở hộp thoại Lưu, nó sẽ lưu tệp .json vào máy tính của bạn.

Single Page Site Part

Tính năng Theme Builder của Elementor cung cho phép bạn tạo, chỉnh sửa, xóa các trang đơn một cách dễ dàng. Sau đây, tôi sẽ hướng dẫn chi tiết bạn cách chỉnh sửa, xóa một mẫu Single Page.

Chỉnh sửa thiết kế mẫu trang đơn hiện có:

• Bạn nhấp vào Label Trang Đơn trong thanh bên. Thao tác này sẽ mở trang tổng quan chi tiết của Mẫu Trang Đơn.
• Sau đó, bạn nhấp vào Chỉnh sửa liên kết ở góc trên bên phải của Mẫu Trang Đơn cụ thể và tiến hành chỉnh sửa theo ý muốn.

Xóa một mẫu trang đơn:

• Click Icon ba dấu ngang ở phía trên bên phải của Mẫu Trang Đơn mà bạn muốn xóa. 
• Bạn chọn  Xóa để mở hộp thoại xác nhận Xóa trang đơn. 
• Nhấp vào  Xóa  để xác nhận rằng bạn muốn xóa Mẫu Trang Đơn này. Nếu bạn thay đổi ý định và quyết định không muốn xóa Mẫu Trang Đơn thì chỉ cần nhấp vào Hủy. 

Single Post Site Part

Để chỉnh sửa thiết kế của một mẫu bài đăng hiện có, bạn chỉ cần thực hiện tương tự các bước chỉnh sửa như ở các danh mục bên trên. Tôi sẽ hướng dẫn bạn cách đổi tên và xuất một mẫu bài đăng nhé.

Đổi tên một mẫu Single Post:

• Đầu tiên, bạn nhấp vào Ba dấu ngang  ở phía trên bên phải của Mẫu bài đăng đơn mà bạn muốn đổi tên. 
• Chọn  Đổi tên để mở  hộp thoại Rename Part. 
• Bạn nhập tên mới và nhấp vào Thay đổi  để hoàn tất quá trình đổi tên. Hoặc bạn có thể nhấp vào  Hủy  nếu không muốn đổi tên Mẫu Single Post.

Xuất một mẫu Single Post:

• Nhấp vào ba dấu ngang  ở phía trên bên phải của Mẫu Single Post mà bạn muốn xuất. 
• Chọn  Xuất  để mở hộp thoại Lưu, nó sẽ lưu tệp .json vào máy tính của bạn.

Phần  Footer Site Part của Theme Builder liệt kê tất cả các Footer bạn đã tạo. Đồng thời, nó cho phép truy cập nhanh để bạn thêm, chỉnh sửa hoặc xóa bất kỳ Footer nào. Nếu chưa có chân trang nào được tạo, bạn sẽ cần tạo một chân trang cho mình. Bạn chỉ cần bấm Thêm Mới  ở góc trên bên phải của màn hình Footer Site Part là đã có thể tạo chân trang. Thật đơn giản đúng không ạ.

Chỉnh sửa thiết kế của Header hiện có:

• Bạn chỉ cần nhấp vào Label Header trong thanh bên để mở bảng điều khiển chi tiết của Header.
• Tiếp theo, bạn nhấp vào Edit Link tại Header cụ thể mà bạn muốn chỉnh sửa. Thao tác này sẽ mở trình soạn thảo Elementor cho Header đó.

Xuất một  Header:

• Nhấp chọn Header mà bạn muốn xuất. 
• Bạn Click vào nút Xuất  để mở hộp thoại Lưu, tiếp đến nó sẽ lưu tệp .json vào máy tính của bạn.

Dynamic Tags (Pro)

Các nội dung Dynamic lấy nội dung từ trang Web hoặc từ trang/ bài đăng hiện tại, sau đó thay đổi theo trang hoặc bài đăng trên đó. Tuy nhiên, tôi muốn lưu ý với các bạn rằng không phải tất cả các trường nội dung Dynamic đều có Dynamic Tags. Chỉ các thẻ thích hợp sẽ được liệt kê dưới dạng tùy chọn trong danh sách lựa chọn thả xuống của một trường. Các Nội dung được hỗ trợ Dynamic Tags bao gồm: Post, Archive, Site, Media,…

Elementor Integration With PODS

Tính năng Theme Builder của Elementor cho phép bạn tích hợp PODS vào Template bài đăng. Bạn chỉ cần thực hiện theo các bước sau:

• Bạn đi tới Mẫu=> Trình tạo chủ đề=> Đơn (Single) => Thêm mới.
• Tiếp đến, bạn chọn Loại Mẫu => Đơn và đặt tên cho mẫu và nhấp vào Tạo Mẫu.
• Nhấp vào biểu tượng bánh răng Cài đặt tài liệu.
• Bạn Click tiếp vào Tab Preview Settings và chọn loại bài đăng bạn muốn xem trước.
• Kéo tiện ích con sử dụng Dynamic Content.
• Nhấp vào biểu tượng Dynamic.
• Chọn trường PODS. Sau khi được chọn, bạn nhấp lại vào Trường PODS.
• Trong Cài đặt, bạn Click Khóa và chọn trường tùy chỉnh bạn muốn hiển thị.
• Bạn tùy chọn theo ý muốn trong Tab nâng cao.

Creating a Single Page Template with Elementor Pro

• Bạn đi tới Mẫu=> Trình tạo chủ đề => Đơn => Thêm mới. Sau đó, bạn chọn Single từ trình đơn thả xuống và chọn Trang, nhấp vào Tạo mẫu.
• Tiếp đến, bạn chọn một Page Block và Chèn.
• Sau đó, bạn nhấp vào biểu tượng bánh răng để chọn một trang cụ thể làm ví dụ xem trước trong khi chỉnh sửa.
• Bạn tiến  hành chỉnh sửa bất kỳ yếu tố nào mình muốn. Sau khi bạn thiết kế xong, hãy nhấp vào Xuất bản.
• Kế đến, bạn chọn một Điều kiện và nhấp để tìm hiểu về các điều kiện.

WooCommerce Single Product Builder

Với  Elementor WooCommerce Builder, bạn có thể thiết kế các mẫu trang lưu trữ và sản phẩm đơn lẻ của mình.

Cách tạo một Single Product Template:

• Bạn vào Mẫu, chọn Trình tạo chủ đề=> Sản phẩm Single=>  Thêm mới. Từ Menu thả xuống, bạn chọn Single Product, đặt tên cho sản phẩm và nhấp vào  Tạo mẫu.
• Chọn một Block sản phẩm  và  Chèn.
• Sau khi bạn thiết kế xong, hãy nhấp vào Xuất bản .
• Bạn chọn một Điều kiện và nhấp để tìm hiểu về các điều kiện .

Creating a Blog or any Archive Template with Elementor Pro

Khi truy cập Blog của một trang và xem danh sách các bài viết đã xuất bản, thực ra bạn đang xem trang Lưu trữ. Với tính năng Theme Builder của Elementor, bạn có thể tạo Blog và trang lưu trữ dễ dàng. Bạn có thể lọc bài viết thông qua trường tác giả, Danh mục, Bài đăng gần đây,…

Trước tiên, bạn nên xuất bản một trang trống trong giao diện WordPress Add Page Interface. Sau đó, bạn đã xuất bản trang trống đó và chuyển đến Cài đặt=> Đọc. Tiếp đến, bạn chọn trang vừa xuất bản trong Menu thả xuống như được hiển thị bên dưới.

Kế đến, bạn chuyển sang các bước thực hiện với Elementor, tạo trang lưu trữ tương tự như các bước tạo các Site đã hướng dẫn ở trên.

Các Header Template cho phép bạn dễ dàng thiết kế và chỉnh sửa tiêu đề WordPress với các bước sau:

• Bạn vào Mẫu, chọn Trình tạo chủ đề, nhấp vào Tiêu đề (Header) và chọn Thêm mới. Tiếp đến, bạn chọn Tiêu đề từ Menu thả xuống và nhấp vào Tạo mẫu.
• Chọn một Block tiêu đề và Chèn.
• Sau đó, bạn nhấp phần cài đặt, chọn Bố cục, chọn tiếp  Thẻ HTML và Thay đổi Mặc định thành Tiêu đề.
• Bạn nhấp vào Xuất bản sau khi tùy chỉnh xong.
• Cuối cùng, bạn chọn một Điều kiện và nhấp để tìm hiểu về các điều kiện.

Conditions

Với Conditions, bạn có thể đặt chính xác vị trí mỗi mẫu được triển khai, dù mẫu đó nằm trong một Danh mục, hoặc trên một Trang cụ thể.

Mỗi cài đặt Conditions cho phép bạn thêm hoặc loại trừ một điều kiện. Ví dụ, tôi có mẫu Tiêu đề với trang Web Bao gồm điều kiện cho toàn bộ Site. Tôi thêm điều kiện thứ hai là Loại trừ cho một trang cụ thể là trang Front End. Lúc này, sẽ có hai tiêu đề trên trang Web của tôi gồm một loại Header xuất hiện trên toàn bộ trang Web và một loại khác chỉ hiển thị trên trang chủ.

Create a custom 404 page Using Elementor’s Theme Builder

Việc tạo Mẫu trang 404 tùy chỉnh cho phép bạn giữ mức độ hài lòng của khách hành dù trang của bạn không truy cập được. Bạn có thể hiển thị các bài đăng gần đây, thanh tìm kiếm hoặc bất cứ thứ gì bạn muốn. Để tạo trang 404, bạn thực hiện các bước sau:

• Đi tới Mẫu=> Trình tạo chủ đề=>  Đơn=> Thêm mới.
• Chọn Single từ Menu thả xuống Loại mẫu, từ Menu Loại bài đăng bạn chọn 404, đặt tên cho mẫu của bạn và  nhấp vào Tạo mẫu.
• Thiết kế Mẫu trang 404 của riêng bạn hoặc chọn một mẫu được thiết kế sẵn.
• Sau đó,  bạn nhấp vào Xuất bản.
• Thêm  điều kiện vào trang 404 của bạn.

Creating a Single Post Template with Elementor Pro

Khi bạn sử dụng chủ đề cho trang Web của mình, bạn sẽ nhận được Single Post Template của chủ đề. Nó được tạo ra từ các yếu tố khác nhau như: Tiêu đề, nội dung bài đăng, hình ảnh nổi bật, nhận xét,…

Với Elementor, bạn có thể kiểm soát bố cục và thiết kế của Mẫu Single Post trên bất kỳ chủ đề nào.

Để tạo Single Post Template, bạn thực hiện tương tự các bước mà tôi đã hướng dẫn ở mục 1.12.

WordPress Sticky Headers giúp tiêu đề hoặc Menu của bạn luôn hiển thị trên trang.

• Bạn nhấp vào biểu tượng Edit Section trong phần Header. Trong bảng điều khiển, bạn hãy chuyển đến Tab Nâng cao.
• Nhấp vào Hiệu ứng chuyển động (Motion Effects) và bật Sticky Header.
• Chọn thiết bị bạn cần (máy tính để bàn, máy tính bảng, điện thoại di động).
• Cập nhật và thêm Điều kiện.

Dynamic Content

Dynamic Content lấy nội dung từ trang Web hoặc từ các trang hiện tại. Ví dụ như Post Title Widget, tiện ích này hiển thị tiêu đề của trang hoặc bài đăng và thay đổi theo trang hoặc bài đăng mà nó được sử dụng.

Cách thêm Tagline vào trang Web:

• Bạn kéo tiện ích Heading lên màn hình.
• Tiếp theo, bạn nhấp vào biểu tượng Dynamic ở góc trên bên phải của trường.
• Bạn chọn Site Tagline từ Menu thả xuống và xem văn bản Heading mặc định thay đổi ngay lập tức thành dòng Tagline của trang Web.

Creating a WooCommerce Shop Page / Archive Template with Elementor Pro

Khi truy cập một cửa hàng trực tuyến , bạn sẽ thấy trang đầu của Website. Sau đó, bạn có thể chọn chỉ xem một danh mục cụ thể hoặc lọc kết quả theo kích thước, giá cả,… Những gì bạn thực sự đang xem này chính là trang Lưu trữ (Archive Page).

Với WooCommerce Archive, bạn có thể lọc kết quả muốn xem thông qua ngày, danh mục, giá, mức độ phổ biến, kích thước, màu sắc,…

Customize the Search Results Archive

Trang Search Results là một kho lưu trữ để hiển thị kết quả của bạn trong một mẫu lưu trữ.

• Trong Dashboard, bạn  nhấp Mẫu=> Trình tạo chủ đề=> Lưu trữ => Thêm mới.
• Trong Loại Mẫu, hãy chọn Lưu trữ và Tạo Mới.
• Chọn một Block hoặc thiết kế kho lưu trữ của riêng bạn.
• Để xem trước Trang lưu trữ dưới dạng kết quả tìm kiếm, hãy nhấp vào biểu tượng con mắt  => Nhấp vào Cài đặt => Chọn kết quả tìm kiếm.
• Nhập một cụm từ tìm kiếm mẫu để xem trang kết quả trông như thế nào.
• Nhấp vào Áp dụng để xem trước.

Các  Footer Template cho phép bạn dễ dàng thiết kế và chỉnh sửa Footer trên  trang.

• Trong Mẫu, bạn chọn Trình tạo chủ đề, vào Footer và bấm Thêm Mới. Tiếp theo,  bạn chọn Footer từ Menu thả xuống và nhấp vào Tạo Mẫu.
• Chọn một Footer Block và Chèn.
• Sau đó, bạn nhấp vào Xuất bản.
• Chọn một  Điều kiện và nhấp để tìm hiểu về các điều kiện.

What is the Elementor Theme Builder?

Theme Builder là một tính năng của Elementor, cho phép bạn sử dụng trình chỉnh sửa của Elementor để xây dựng và thiết kế một cách trực quan:

• Đầu trang và chân trang của bất kỳ chủ đề nào.
• Bất kỳ mẫu trang lưu trữ nào của chủ đề để bạn xác định các bài đăng trên Blog của mình.
• Định dạng và bố cục trang tìm kiếm của bất kỳ chủ đề nào.
• Định dạng và bố cục trang 404 của bất kỳ Theme nào.
• Các trang sản phẩm WooCommerce của bạn,…

Intro to Dynamic Content

Post Types là loại nội dung được nhóm lại với nhau theo cách có cấu trúc trong WordPress. Các loại bài đăng WordPress mặc định gồm: Post, Page, tập tin đính kèm, CSS tùy chỉnh,…

Hầu hết người dùng đều quen thuộc với Post và Page. Post sử dụng các đơn vị phân loại như danh mục và thẻ, trong khi Page thì sử dụng Mẫu trang để hiển thị.

Elementor Pro 2.0 Theme Builder FAQ

Khi nào Elementor Pro 2.0 sẽ được phát hành? Tôi có thể tìm thấy nó ở đâu?

Elementor Pro 2.0 đã ra mắt. Nếu bạn không thể thấy thông báo cập nhật trong Trang Dashboard => Plugins, hãy chuyển đến Dashboard => Updates và nhấp vào nút Kiểm tra lại. 

Elementor Theme Builder có hoạt động trên bất kỳ chủ đề nào không?

Câu trả lời là Elementor Theme Builder có thể hoạt động trên mọi chủ đề.

Bạn đã có có giấy phép Elementor Pro thì có nhận được Elementor Pro 2.0 (bao gồm cả Theme Builder) không?

Mọi người dùng có giấy phép đang hoạt động đều có thể cập nhật Elementor Pro lên phiên bản mới nhất và nhận tất cả các tính năng mới của Pro 2.0, bao gồm cả Theme Builder.

Có thể bạn quan tâm:

Cloud Hosting WordPress – giải pháp tối ưu cho Website mã nguồn WordPress

AskWhat – trang hỏi đáp kiến thức tổng hợp

Trên đây là hướng dẫn chi tiết cách sử dụng một số tính năng Theme Builder của Elementor. Hi vọng bài viết sẽ mang đến các bạn những thông tin hữu ích nhất!