Hướng dẫn import giao diện từ Elementor Template Kits vào website

Trước tiên, mình xin nhắc lại một chút về Elementor Template Kits cho bạn nào chưa hiểu rõ nó là cái gì, mình sẽ trích dẫn một đoạn nhỏ của bài viết “Elementor Template Kits là gì?” cho bạn tiện tham khảo nhé:
Elementor Template Kits là tập hợp các thành phần giao diện được thiết kế sẵn giành cho Elementor như các trang mẫu (page templates), các phần (sections), header, footer, và nhiều thành phần giao diện khác để bạn có thể tùy chỉnh và xây dựng website theo ý muốn.
Khác với themes truyền thống thường tích hợp sẵn rất nhiều tính năng, Elementor Template Kits chỉ tập trung vào việc cung cấp giao diện mẫu. Bạn chỉ việc import bất kỳ thành phần giao diện nào mà bạn muốn là bạn đã có ngay website được thiết kế sẵn một cách chuyên nghiệp. Nhờ vậy mà website của bạn sẽ chạy mượt mà hơn, không bị “nặng” so với việc sử dụng theme wordpress truyền thống bởi nhiều chức năng thừa thãi mà chưa chắc bạn đã sử dụng đến.
Nếu bạn muốn tìm hiểu kỹ hơn về Elementor Template Kits thì hãy tham khảo bài viết này nhé. Vì Elementor Template Kits không phải là theme nên cách sử dụng và cài đặt sẽ không giống như chúng ta vẫn thường làm với theme.
Các bước chuẩn bị
Để import giao diện từ Elementor Template Kits, bạn cần chuẩn bị những thứ sau (các bước chuẩn bị trình bày thì có vẻ dài dòng nhưng khi thực hiện thì sẽ rất nhanh và dễ dàng, vì vậy bạn đừng vì thế mà ngại nhé):
- Tất nhiên, để import thì bạn cần phải có một mẫu Elementor Template Kit trước rồi. Đây là một file nén dạng .zip chứa các thành phần giao diện được thiết kế sẵn cho website của bạn. Nếu bạn chưa có thì có thể tìm cho mình một mẫu tại đây hoặc liên hệ với Kho Tài Nguyên để được hỗ trợ.
- Sau khi có chuẩn bị sẵn cho mình một mẫu Elementor Template Kit rồi thì bạn hãy nhớ là không được giải nén ra nhé, cứ giữ nguyên file như vậy.
- Trên webite của bạn cần được cài sẵn Elementor, một số Template Kit có yêu cầu thêm Elementor Pro thì bạn có thể đặt mua tại đây với giá cực rẻ nhé.
- Khuyến khích bạn sử dụng theme Hello, Astra, GeneratePress để sử dụng với Template Kit bởi những theme này hỗ trợ tốt cho elementor và cực nhẹ (chẳng có gì cả) nên sẽ tối ưu cho website của bạn và đặc biệt là chúng miễn phí. Để thêm những theme này vào thì bạn chỉ cần vào Appearance > Themes > Add New, sau đó tìm theme mà bạn muốn cài (ví dụ Hello).
- Cấu hình Elementor: bạn đi tới menu Elementor > Settings và click chọn Features tab. Tại đây, hãy tìm và đảm bảo rằng “Flexbox Container” được bật (hiển thị biểu tượng màu xanh) như hình dưới nhé.
- Cài đặt Plugin Envato WordPress: Để import Elementor Template, bạn cần cài đặt plugin Envato Elements – Photos & Elementor Templates. Đây là plugin miễn phí, và bạn có thể cài đặt một cách dễ dàng bằng cách vào menu Plugins > Add New, sau đó tìm kiếm từ khóa “Envato” là bạn sẽ thấy plugin này ngay (như hình bên dưới).
- Sau khi bạn đã cài đặt và kích hoạt plugin Envato, hãy vào menu Elements > Settings để kiểm tra các thông số hosting cấu hình cho website của bạn có đáp ứng đầy đủ yêu cầu không nhé. Nếu thông số nào chưa đáp ứng được thì bạn hãy cấu hình lại theo yêu cầu, ví dụ như hình bên dưới:
Import Elementor Template Kit
Sau khi đã chuẩn bị đầy đủ các bước trên, bây giờ chúng ta sẽ tiến hành import Template Kit theo các bước sau:
- Đi tới menu Elements > Installed Kits và click chọn Upload Template Kit ZIP File để upload file template kit (.zip) như hình bên dưới.
⚠️ Lưu ý: trường hợp khi bạn upload file template kit mà gặp thông báo ‘This kit is in the newer “Elementor Kit” format’ như hình bên dưới:
Đây là bộ Elementor Full Site Kits đặc biệt bao gồm toàn bộ giao diện demo thiết kế sẵn giành riêng cho website wordpress mới (site mới xây dựng chưa có nội dung), đối với mẫu template kit này thì bạn sẽ không sử dụng plugin Envato Elements để import mà sẽ sử dụng trực tiếp plugin Elementor. Những template kit này thường được nhận diện bởi tên file thường chứa cụm từ “Full Site Kit”.Để import loại template kit này thì bạn vào menu Elementor > Tools > Import, sau đó làm theo hướng dẫn để cài đặt file .zip.
- Cài đặt bổ sung: nếu bạn thấy thông báo màu cam xuất hiện phía trên màn hình (như hình dưới) thì hãy click chọn Install Requirements để cài đặt các addon và các thiết lập cần thiết cho bộ template kit.
- Cuối cùng, bạn hãy click vào Import ở mục Global Kit Styles để thiết lập màu sắc, phông chữ và cài đặt chung cho trang web trước. Sau đó bạn mới tiến hành click vào Import Template trên từng mẫu giao diện.
Thực hiện 3 bước trên là bạn đã import thành công bộ giao diện cho website của mình rồi đó, việc còn lại là tiến hành xây dựng website của bạn thôi.
- Các mẫu giao diện đã import sẽ được lưu trong Elementor > Templates > Saved Templates. Để sử dụng, bạn cần chèn chúng vào một trang mới trong WordPress trước khi tùy chỉnh.
- Các blocks, tabs hoặc slides đã import cũng sẽ nằm trong Saved Templates và bạn có thể sao chép hoặc chỉnh sửa trực tiếp.
- Các phần giao diện yêu cầu sử dụng Elementor Pro sẽ được lưu trong Templates > Theme Builder và bạn có thể tìm và chỉnh sửa tại đây.
Khởi tạo các trang sử dụng template kit đã import
Phần này mình sẽ hướng dẫn thêm một chút về cách tạo và cấu hình các trang để tạo một website hoàn chỉnh. Phần này khá cơ bản và giành cho những bạn mới , bạn nào đã biết rồi thì bỏ qua nhé.
- Thêm trang mới:
- Bạn vào menu Pages > Add New Page, đặt tiêu đề cho trang và click vào Edit with Elementor.
- Đóng bất kỳ thông báo hoặc popup nào của Elementor bằng cách click vào dấu X.
- Click vào biểu tượng thư mục màu xám để mở Elementor Template Library (như hình dưới).
- Chèn template vào trang:
- Chọn mẫu giao diện mà bạn muốn chèn (chỉ chọn các loại giao diện như Page, Container, hoặc Section), sau đó nhấp Insert để chèn vào trang web của bạn.
- Đối với các loại template khác bạn có thể tùy chỉnh thông qua Elementor Pro Theme Builder.
- Nếu bạn gặp thông báo hỏi “Apply the Settings of the Page too?“, bạn hãy chọn Do not Apply.
- Chọn mẫu giao diện mà bạn muốn chèn (chỉ chọn các loại giao diện như Page, Container, hoặc Section), sau đó nhấp Insert để chèn vào trang web của bạn.
- Cấu hình trang:
- Click vào biểu tượng bánh răng trong bảng điều khiển Elementor (ở giữa trên cùng hoặc góc trái dưới cùng) để truy cập Page Settings (như hình dưới).
- Trong mục Page Layout (hình trên), chọn Elementor Full Width để cấu hình header và footer toàn cục hoạt động đúng và loại bỏ tiêu đề mặc định ở đầu trang.
- Nếu template kit của bạn có các header chuyên biệt dành riêng cho một layout cụ thể nào đó thì bạn hãy sử dụng Elementor Canvas để ẩn header toàn cục.
- Click vào biểu tượng bánh răng trong bảng điều khiển Elementor (ở giữa trên cùng hoặc góc trái dưới cùng) để truy cập Page Settings (như hình dưới).
Form, Slide và các block Tab
- Bộ template kit của bạn có thể đi kèm với các block giao diện như form, tab, slide,… để sử dụng kết hợp với các widget nội dung. Vì vậy khi cấu hình trang web, bạn chỉ cần chọn block phù hợp trong cài đặt của widget.
- Để nắm rõ hơn về cách sử dụng những template này, bạn có thể xem trong phần mô tả chi tiết tại trang sản phẩm trên Kho Tài Nguyên.
Cấu hình Header & Footer
- Tạo menu điều hướng: Truy cập Appearance > Menus trong WordPress để tạo menu điều hướng.
- Với các bộ Elementor Pro Template Kit thì phần header và footer sẽ được tự động được cài đặt tại Templates > Theme Builder. Trường hợp bạn không thấy chúng hiển thị trên trang của bạn thì hãy kiểm tra lại Page Layout đã được cấu hình là Elementor Full Width (hình trên – bước cấu hình trang) và điều kiện của header là Entire Site.
- Đối với các bộ template không sử dụng Elementor Pro thì bạn sẽ được cung cấp phương thức khác để thiết lập header và footer toàn cục. Đối với những mẫu này, bạn tham khảo chi tiết cách sử dụng trong phần mô tả của trong trang sản phẩm trên Kho Tài Nguyên.
Chỉ định trang chủ
Sau khi import và cấu hình đầy đủ các trang cho website của mình, bạn sẽ cần chỉ định trang chủ cho website. Để thực hiện điều này, bạn hãy vào menu Settings > Reading và chỉ định trang chủ mà bạn muốn tại khu vực Static Front Page.
Tổng kết
Trên đây là toàn bộ các bước import và sử dụng Elementor Template Kit để tạo giao diện cho website của bạn. Cũng không khó lắm phải không nào 😊. Ưu điểm của việc sử dụng Elementor Template Kit là ở tính gọn nhẹ vì bạn sẽ không cần phải ôm đồm quá nhiều tính năng thừa so với việc sử dụng theme chuyên dụng, điều này sẽ giúp website của bạn “nhẹ” hơn và tối ưu hiệu suất cho website hơn. Chưa kể chi phí bỏ ra cho một bộ Elementor Template Kit có thể sẽ tiết kiệm hơn so với theme nhiều đấy.
Nào, bạn còn chờ gì nữa, hãy tìm cho mình một bộ template kit ngay tại đây để tạo cho mình một website ưng ý và chuyên nghiệp nhé.