Cách sử dụng Elementor chi tiết 2021 – Plugin kéo thả #1 thế giới

Quan tâm đến việc xây dựng một trang web tuyệt vời? 

Giờ đây, việc này dễ dàng hơn bao giờ hết! Không cần phải viết tay từng trang từ đầu hoặc thuê lập trình viên.

Ngày nay, tất cả những gì bạn thực sự cần là một plugin có tên Elementor , một trong những trình tạo trang WordPress linh hoạt và dễ tiếp cận nhất trên thị trường. Tuyệt vời hơn nữa, nó hoàn toàn miễn phí để bắt đầu!

Trong bài đăng này, Tài sẽ trình bày cách sử dụng Elementor từng bước và xem qua một số tính năng tốt nhất của nó. Cuối cùng, bạn sẽ có mọi thứ bạn cần để xây dựng một trang web WordPress hoạt động nhanh chóng!

Bắt đầu với Elementor

Elementor là một trình tạo trang phổ biến kết hợp tốt với các chủ đề WordPress nhẹ như Astra, hay GeneratePress . Trình tạo trang này cho phép bạn kiểm soát mọi khía cạnh của giao diện trực quan và bố cục của các trang và bài đăng trên trang web của bạn, với hàng tá tiện ích bổ sung chức năng thông qua giao diện kéo và thả gọn gàng.

Bây giờ, hãy nhớ rằng bản thân Elementor không phải là một chủ đề WordPress – nó hoàn toàn là một plugin. Điều này rất quan trọng vì bạn vẫn cần chọn một chủ đề chuyên dụng để xử lý các khía cạnh khác của trang web của mình. 

Cài đặt Elementor

Sau khi bạn đã cài đặt WordPress và một chủ đề đã chọn trên trang web của mình, có một số cách khác nhau mà bạn có thể thực hiện để cài đặt trình tạo trang Elementor:

Phương pháp 1: Trang web của Elementor. Truy cập trang web Elementor và tải trực tiếp phiên bản Elementor miễn phí. Nút tải xuống được hiển thị nổi bật ở đầu trang chủ. Sau khi bạn nhập email của mình, trình duyệt của bạn sẽ tự động tải xuống tệp ZIP.

Tiếp theo, điều hướng đến phần plugin trên phần phụ trợ của trang web WordPress của bạn, nhấp vào “Thêm mới” và tải tệp .ZIP lên trang web của bạn thông qua nút “Tải lên plugin” ở trên cùng. 

Sau khi cài đặt, chỉ cần nhấn “Kích hoạt” và nó đã sẵn sàng hoạt động! 

Phương pháp 2: Bảng điều khiển WordPress. Đăng nhập vào phần phụ trợ của trang web WordPress của bạn và chuẩn bị cài đặt plugin bằng cách nhấn vào nút “Thêm mới” từ tab Plugin.

Để tìm Elementor, chỉ cần nhập từ “Elementor” vào thanh tìm kiếm plugin. Trình tạo trang phần tử sẽ bật lên như là tùy chọn plugin đầu tiên để bạn cài đặt.

Chỉ cần nhấp vào “Cài đặt” và sau đó “Kích hoạt” khi nó được tải xuống.

Cho dù bạn chọn cài đặt Elementor bằng phương pháp nào, bạn sẽ có thể tìm thấy Elementor trong danh sách “Plugin đã cài đặt” từ bây giờ – và nó cũng sẽ có mục nhập riêng trong menu bên. Từ khu vực đó, bạn sẽ có thể điều chỉnh cài đặt của plugin.

Tuy nhiên, không giống như nhiều plugin, chức năng tuyệt vời nhất của Elementor xảy ra trên chính các trang. Điều đó có nghĩa là bạn sẽ dành phần lớn thời gian sử dụng Elementor khi tạo hoặc chỉnh sửa các trang và bài đăng. 

Khám phá các tùy chọn của Elementor 

Chúng ta sẽ sớm xem xét việc xây dựng các trang và mẫu của riêng chúng ta với Elementor, nhưng trước tiên, hãy xem xét ở cấp độ cao các tùy chọn bạn có với Elementor !

Một trong những tính năng quan trọng nhất của bất kỳ trình tạo trang nào là dễ sử dụng. Bạn cần có khả năng tham gia và biến tầm nhìn của mình thành hiện thực mà không cần phải tìm kiếm nhiều trên YouTube và điên cuồng. 

May mắn thay, Elementor là một trong những trình tạo trang dễ dàng nhất mà Tài từng sử dụng. Đó là trình chỉnh sửa giao diện người dùng, có nghĩa là bạn có thể thấy chính xác trang sẽ trông như thế nào khi bạn làm việc trên đó.

Khi bạn đã quen với quy trình kéo widget vào trang và điều chỉnh các thuộc tính trong thanh bên, bạn sẽ nhận ra rằng nó trực quan nhất có thể. 

Hầu hết các tùy chọn tùy chỉnh bạn sẽ tìm thấy trong Elementor đều dựa trên các widget đi kèm với plugin.

Cài đặt Elementor

Elementor có một số cài đặt cấp cao nhất mà bạn có thể tìm thấy trực tiếp trong plugin. Điều này cho phép bạn thực hiện những việc như kiểm tra loại bài đăng mà Elementor hoạt động, đặt phông chữ và khoảng cách mặc định, cũng như điều chỉnh cài đặt phản hồi. 

Ngoài ra còn có một chức năng Trình quản lý vai trò tiện dụng trong Elementor cho phép bạn phân loại loại người dùng nào có thể có quyền truy cập vào trình chỉnh sửa Elementor (lưu ý: đây chỉ là một tính năng trong Pro ). 

Những tiện ích nào được bao gồm?

Nói chung, Elementor dựa trên một trình soạn thảo kéo và thả để chứa các phần, cột và tiện ích con. Hệ thống được chia nhỏ như sau:

Phần – Vùng chứa cho các cột và tiện ích con.

Cột – Các phần chứa tiện ích con.

Widget – Các phần tử riêng lẻ trên trang.

Các tiện ích này là các danh mục nội dung đơn giản cho phép bạn tùy chỉnh trang web của mình. Trong phiên bản miễn phí của Elementor , bạn có quyền truy cập vào các phần tử cơ bản. 

Dưới đây là danh sách nhanh một số widget cơ bản mà bạn sẽ sử dụng thường xuyên:

• Phần mở đầu
• Hình ảnh
• Trình soạn thảo văn bản
• Video
• Cái nút
• Dải phân cách
• Biểu tượng
• Spacer
• bản đồ Google

Tất cả đã nói, bạn có gần 30 yếu tố cơ bản cung cấp cho bạn mọi thứ bạn cần để tạo một trang chức năng. Chỉ cần kéo một phiên bản của một phần tử vào trang chính.

Nếu các yếu tố cơ bản này không đủ, bạn có thể nhận thêm các vật dụng bằng cách nâng cấp lên Elementor Pro . Tuy nhiên, Tài sẽ tranh luận rằng hầu hết những gì bạn có thể làm trong Pro đều có thể thực hiện được trong phiên bản miễn phí – nó chỉ mất nhiều thời gian hơn. 

Việc bạn có cần các widget cao cấp trong phiên bản Pro hay không là tùy thuộc vào bạn. Dưới đây là một mẫu nhanh về hàng chục tiện ích con được tìm thấy trong Elementor Pro:

• Danh mục đầu tư
• Hình thức
• Hộp lật
• Bảng giá
• Blockquote
• Kêu gọi hành động

Các yếu tố Pro này sẽ giúp trang web của bạn trông bóng bẩy và chuyên nghiệp hơn, đồng thời cũng được thiết kế để hỗ trợ các nỗ lực Thương mại điện tử, bao gồm tích hợp chuyên sâu với WooCommerce.

Cuối cùng, Elementor không hỗ trợ các widget của bên thứ ba. Bạn có thể tìm thấy nhiều tiện ích bổ sung Elementor của bên thứ ba giúp mở rộng thêm các tiện ích hiện có của bạn, hoặc thậm chí phát triển tiện ích của riêng bạn với tài nguyên nhà phát triển từ Elementor! 

Bạn không chắc chắn muốn thêm tiện ích bổ sung? Mặc dù có thể thuận tiện để có các widget cho mọi thứ bạn muốn làm trên trang web của mình, nhưng nó không hoàn toàn cần thiết – vẫn có vô số plugin WordPress miễn phí của bên thứ ba hoạt động tốt song song với Elementor và chủ đề WordPress của bạn.

Elementor Free so với Elementor Pro

Nếu bạn muốn có một trình tạo trang miễn phí tinh vi có đầy đủ tính năng hơn nhiều tùy chọn trả phí , thì Elementor Free là một lựa chọn tuyệt vời!

Như đã nói, Elementor Pro bổ sung một số tính năng mong muốn để tăng tốc quy trình làm việc của bạn và cung cấp cho bạn nhiều quyền kiểm soát hơn đối với giao diện và chức năng của trang web của bạn. Việc bổ sung trình tạo chủ đề, tiện ích cao cấp và các yếu tố toàn cầu đều được hoan nghênh, nhưng bạn chắc chắn không cần chúng để tạo nên một trang web tuyệt vời. 

Bảng so sánh các tính năng của Elementor

Dưới đây là tổng quan nhanh về sự khác biệt chính mà bạn sẽ tìm thấy giữa Elementor Free và Elementor Pro.

Đây là ảnh so sánh về sự khác biệt giữa hai phiên bản.

Định giá Elementor Pro

Nếu bạn đang suy nghĩ về việc chọn một trong các phiên bản trả phí của Elementor Pro, bạn nên lưu ý rằng cả ba gói đều cung cấp các tính năng hoàn toàn giống nhau! 

Tài muốn nói rõ: Sự khác biệt duy nhất giữa các gói Pro là số lượng giấy phép bạn mua cùng một lúc.

Với Personal , bạn nhận được Elementor Pro cho một trang web với giá 49 đô la mỗi năm.

Với Plus , bạn nhận được Elementor Pro trên 3 trang web với giá 99 đô la mỗi năm.

Với Expert , bạn nhận được Elementor Pro trên 1.000 trang web khổng lồ với giá 199 đô la mỗi năm.

Thứ nào là thứ phù hợp với bạn? Đối với các cá nhân hoặc nhóm nhỏ, Plus chắc chắn là giá trị tốt nhất, miễn là có khả năng bạn sẽ quản lý nhiều trang web bằng Elementor Pro trong năm Tài.

Bạn luôn có thể chọn bắt đầu với Cá nhân và nâng cấp lên Plus sau này nếu bạn quyết định mình thích Elementor và muốn có thêm giấy phép.

Cách sử dụng Trình tạo trang miễn phí của Elementor

Vì vậy, với tất cả những điều đó, bạn đã sẵn sàng để xem Elementor hoạt động chưa? 

Trình tạo trang này hoạt động với các loại bài đăng tùy chỉnh và có nhiều mẫu tạo sẵn để lựa chọn, nhưng đối với bài đăng này, hãy xem nó trông như thế nào khi bắt đầu từ hình vuông.

Bước 1. Tạo bài đăng hoặc trang mới

Đi Tài bảng điều khiển của trang web WordPress của bạn và nhấp vào “Thêm mới” trong Bài đăng hoặc Trang. Đối với hướng dẫn này, Tài sẽ tạo một bài đăng blog mới.

Bước 2. Chỉnh sửa bằng Elementor

Khi bạn đến màn hình này, bạn có thể chọn chỉnh sửa trang bằng trình chỉnh sửa WordPress mặc định. Để sử dụng Elementor, bạn nên nhấp vào nút “Edit With Elementor”.

Bước 3. Kéo các phần tử vào trang chính

Ban đầu trang này sẽ trống. Chọn và kéo các phần tử từ thanh bên Elementor.

Hãy tạo một tiêu đề mới cho trang. Tất cả những gì bạn phải làm là nhấp vào hộp có nội dung “Tiêu đề”, giữ nút chuột và kéo vào vùng tiện ích trên trang (nơi có nội dung “Kéo tiện ích vào đây”).

Nếu bạn không muốn phần tử này chiếm toàn bộ chiều rộng của trang (theo mặc định), bạn có thể nhấp vào nút “dấu cộng” nhỏ để tùy chỉnh cấu trúc của phần đó trên trang của bạn.

Sau khi nhấp vào nút dấu cộng, bạn sẽ thấy tùy chọn “Chọn cấu trúc của bạn”. Hãy đi với ba cột bằng nhau.

Sau khi Tài nhấp vào biểu tượng đó với ba cột, giờ đây Tài thấy một phần hoàn toàn mới trên trang với ba cột, mỗi cột có một nút dấu cộng.

Và nếu chúng ta muốn tùy chỉnh những gì chúng ta thấy trong phần này? Bạn đoán nó: Tài kéo một tiện ích ở đó.

Tài đã kéo phần tử Video vào cột ở giữa, cột này được tải trước với danh sách phát video Elementor theo mặc định. 

Bước 4. Chỉnh sửa cài đặt

Đối với mỗi phần hoặc phần tử bạn đặt trên trang, bạn có các tùy chọn để tùy chỉnh thêm. Chỉ cần tìm sáu dấu chấm.

Ví dụ: nếu Tài chọn tiêu đề, Tài có thể thay đổi nội dung, kiểu hoặc các tính năng nâng cao của nó như lề và phần đệm, khả năng đáp ứng, v.v.

Bước 5. Xuất bản trang của bạn

Khi bạn hài lòng với các cài đặt, đã đến lúc kiểm tra thành phẩm. Tài đã thấy trang này trông như thế nào trong trình chỉnh sửa, nhưng nếu Tài xem trước bản xem trước của trang thực tế, Tài thấy rằng nó giống nhau!

Đó là một điều rất tốt. Điều đó có nghĩa là khi trang bạn đang làm việc đang hoạt động, bạn có thể tự tin rằng nó trông giống hệt như khi bạn đang chỉnh sửa. Đó là một trong những tính năng quan trọng nhất của Elementor.

Tóm tắt trình tạo trang

Đây rõ ràng là một ví dụ nhanh – và tiết lộ đầy đủ, Tài không phải là nhà thiết kế – nhưng nó cho bạn thấy việc đặt các phần tử và tạo một trang web hoạt động dễ dàng như thế nào! 

Điểm mấu chốt là, bạn không cần phải là một chuyên gia để xây dựng một trang web với Elementor. Và với vô số mẫu để lựa chọn, bạn không bao giờ phải bắt đầu lại từ đầu trừ khi bạn muốn.

Có một điểm quan trọng nữa mà Tài muốn nhấn mạnh ở đây: Cho dù bạn chọn Elementor Free hay Elementor Pro , các đai ốc và bu lông của trình tạo trang của Elementor đều giống hệt nhau. Pro chỉ cung cấp nhiều chức năng nâng cao hơn thông qua các widget cao cấp để giúp bạn sử dụng tiếp thị, Thương mại điện tử, thiết kế và tích hợp với các công cụ phổ biến khác như MailChimp và Adobe TypeKit.

Đó là một quyết định tuyệt vời khi thiết lập Elementor theo cách này bởi vì bạn không phải học lại bất cứ thứ gì khi bạn đã sẵn sàng thực hiện bước nhảy vọt từ Elementor Free lên Elementor Pro.

Cách sử dụng Trình tạo chủ đề của Elementor 

Thông thường, khi một thứ gì đó trở nên dễ sử dụng hơn, nó sẽ phải loại bỏ các tính năng hữu ích. May mắn thay, Elementor là một trường hợp đặc biệt vừa dễ sử dụng và cực kỳ linh hoạt, phần lớn là nhờ vào trình tạo chủ đề của nó.

Có sẵn trong phiên bản Elementor’s Pro, trình tạo chủ đề là một công cụ thay đổi trò chơi cho bất kỳ ai quen thuộc với trình tạo trang, vì nó cho phép bạn tạo đầu trang, chân trang tùy chỉnh và nội dung động khác cho trang web của mình. Nó thậm chí còn cho phép bạn ghi đè các khía cạnh của chủ đề WordPress của mình, vì vậy bạn có thể giữ những gì hoạt động và chỉ cần thực hiện các thay đổi bạn muốn!

Tại sao bạn cần nội dung động? Chà, đôi khi bạn có thể muốn lưu trữ một trang bán hàng không có tiêu đề và thanh bên truyền thống hoặc bạn có thể muốn lưu bố cục bài đăng blog tùy chỉnh mà bạn có thể sử dụng mỗi khi thêm bài đăng mới. Khả năng là vô tận.

Tạo Header / Footer với Elementor 

Bạn đã sẵn sàng tạo đầu trang hoặc chân trang tùy chỉnh với Elementor bằng trình tạo chủ đề chưa? Đây là cách nó được thực hiện!

Bước 1. Nhấp vào “Mẫu” trong Bảng điều khiển WordPress

Sau khi đăng nhập vào trang tổng quan WordPress của bạn, hãy chuyển đến “Mẫu” trong Phần tử trong menu bên.

Bước 2. Thêm mới hoặc nhập mẫu

Đây là nơi bạn tạo một mẫu mới cho tiêu đề của mình.

Nếu bạn đã thấy tiêu đề mà bạn thích giao diện, bạn có thể nhập tiêu đề đó để sử dụng làm điểm bắt đầu. Nếu không, hãy nhấp vào “Thêm mới”. 

Thao tác này sẽ bật lên một hộp thoại cho phép bạn chọn loại mẫu – tiêu đề trong trường hợp này – cùng với tên mẫu của bạn. 

(Lưu ý: Elementor Free chỉ bao gồm các mẫu phần và trang. Phiên bản Pro bao gồm một số danh mục mẫu bổ sung, bao gồm widget toàn cầu, đầu trang, chân trang, đơn và lưu trữ.)

Bước 3. Chỉnh sửa mẫu mới của bạn

Nếu bước này trông quen thuộc, đó là vì đó là trình chỉnh sửa chính xác mà Tài đã sử dụng để tạo toàn trang trước đó. Bây giờ, nó được áp dụng để tạo tiêu đề tùy chỉnh. 

Bạn có thể thực hiện quá trình này để tạo bố cục của mình với các tiện ích con khác nhau và thậm chí cả hình ảnh cụ thể hoặc nội dung khác. Khi bạn đã lưu tiêu đề mới của mình, bạn có thể dễ dàng truy cập tiêu đề này từ một trang mới.

Xây dựng các trang WooCommerce với Elementor

Quá trình tạo trang sản phẩm WooCommerce tùy chỉnh tương tự như bất kỳ trang hoặc phần nào khác mà bạn có thể tạo. Cảm nhận một mẫu ở đây?

Với Trình tạo WooCommerce, Elementor hỗ trợ khả năng tạo mẫu cho trang “Sản phẩm đơn lẻ”. Khi bạn tạo một mẫu mới, bạn sẽ thấy một thư viện mẫu đầy đủ các khối hoặc các trang đầy đủ mà bạn có thể sử dụng cho trang sản phẩm WooCommerce của mình. 

Hãy nhớ rằng mẫu WooCommerce này sẽ có một số tiện ích sản phẩm động, bao gồm tiêu đề sản phẩm, hình ảnh sản phẩm và giá sản phẩm. Bạn có thể đặt thông tin chi tiết của sản phẩm bằng WooCommerce và sử dụng Elementor để hiển thị thông tin sản phẩm cập nhật trên giao diện người dùng.

Nó đơn giản mà! 

Yếu tố nào bị thiếu

Tài muốn chỉ cho biết trình tạo chủ đề của Elementor có bao nhiêu tính năng khác nhau!

Tuy nhiên, bất chấp tất cả sự linh hoạt này, vẫn có một số điều mà Elementor không thể làm được. Hãy nhớ rằng, Elementor không phải là một chủ đề – nó chỉ sử dụng trình tạo chủ đề để ghi đè các tính năng chủ đề nhất định. 

Để kiểm soát điên cuồng chủ đề của bạn, Tài thực sự khuyên bạn nên sử dụng Astra Pro và Elementor. Astra cung cấp cho bạn các tùy chọn đầu trang và chân trang được tích hợp sẵn, các menu lớn, và nhiều hơn thế nữa! 

Mẫu khởi động cho Elementor

Một lợi ích to lớn khác của Astra là bộ sưu tập các mẫu khởi động đã sẵn sàng để nhập vào Elementor, bao gồm cả tùy chọn miễn phí và trả phí.

Ví dụ: nếu bạn đang thiết lập một trang web cho huấn luyện viên thể dục, bạn có thể sử dụng trang web dành cho huấn luyện viên thể hình từ Astra làm nền tảng vững chắc và tùy chỉnh nó từ đó.

Nhập một trang web khởi động Astra rất dễ thực hiện! Bạn chỉ cần cài đặt phiên bản miễn phí hoặc trả phí của Chủ đề Astra, cùng với plugin Starter Templates miễn phí . Khi bạn đã thiết lập cả hai, bạn có thể đăng nhập vào trang tổng quan WordPress của mình, điều hướng đến Giao diện> Mẫu dành cho người mới bắt đầu và chọn trang web bạn muốn nhập. 

Sau đó, bạn sẽ có thể thực hiện các thay đổi đối với trang web bắt đầu ngay trong Elementor! Để biết thêm thông tin, hãy xem hướng dẫn chi tiết này để nhập các mẫu khởi động Astra .

Bổ trợ cuối cùng cho Elementor

Ngoài các mẫu này, Tài có một plugin có tên Ultimate Addons cho Elementor cung cấp chức năng bổ sung không có trong Elementor. Điều này thậm chí còn tiến xa hơn Elementor Pro trong việc cung cấp các tiện ích nâng cao, chẳng hạn như chuyển đổi nội dung, cửa sổ bật lên phương thức, dòng thời gian nội dung và mục lục.

Để có khả năng kiểm soát và tính linh hoạt Tài đa, bạn chắc chắn nên xem qua Ultimate Addons cho Elementor!

Cách xây dựng các mẫu với Elementor

Bạn có thể tạo mẫu cho tất cả các loại phần và trang, bao gồm:

• Trang
• Tiêu đề
• Chân trang
• Bài đăng đơn
• Kho lưu trữ blog
• Trang sản phẩm

Đối với ví dụ này, hãy làm việc với mẫu bài đăng / trang.

Tạo một mẫu trang với Elementor 

Trong Elementor, cả trang và bài đăng đều được bao phủ bởi “mẫu trang”. Đây là mẫu đã lưu mà bạn có thể sử dụng cho bất kỳ trang hoặc bài đăng blog mới nào, cho phép bạn duy trì tính nhất quán, ngay cả khi có nhiều thành viên trong nhóm thực hiện việc đăng.

Thậm chí tốt hơn, cái này có sẵn cho tất cả người dùng Elementor, bao gồm cả Elementor Free.

Bước 1. Nhấp vào “Mẫu” trong Bảng điều khiển WordPress

Sau khi đăng nhập vào trang tổng quan WordPress của bạn, hãy chuyển đến “Mẫu” trong Phần tử trong menu bên.

Bước 2. Thêm mới hoặc nhập mẫu

Đây là nơi bạn tạo một mẫu mới cho tiêu đề của mình.

Trong hộp thoại, hãy chọn loại Trang mẫu và đặt tên cho mẫu mới của bạn. 

Sau đó, nhấp vào “Tạo mẫu” để bắt đầu!

Bước 3. Chỉnh sửa Mẫu Trang

Giống như trước đó khi Tài tạo trang của riêng mình, bạn sẽ sử dụng cùng một trình chỉnh sửa ở đây. Nó đơn giản như tạo các phần mới, thay đổi cột và kéo các tiện ích con khác nhau vào trang.

Khi bạn đã thiết kế một trang mà mình thích, bạn có thể lưu nó dưới dạng mẫu để có thể truy cập trang đó cho bất kỳ trang nào khác của bạn về sau.

Phần kết luận

Chà, Tài đã đề cập rất nhiều điều với Elementor trong bài đăng này!

Về mặt cơ bản, Tài hy vọng bạn có thể hiểu lý do tại sao Elementor là một trình tạo trang tuyệt vời, cần rất nhiều phỏng đoán trong thiết kế web. Nó tạo ra sự cân bằng lý tưởng giữa tính dễ sử dụng và chức năng sâu, khiến nó trở thành một trong những trình tạo trang dễ truy cập nhất có sẵn cho WordPress.

Tài cũng hy vọng bạn sẽ nhớ cung cấp cho Astra một giao diện như chủ đề WordPress của bạn để ghép nối với Elementor . Astra nhẹ, nhanh và cực kỳ linh hoạt, bổ sung các tính năng bổ sung cho Elementor để bạn có thể tạo ra bất cứ thứ gì mà bạn mơ ước!

Cảm ơn vì đã đọc! Hy vọng rằng, bài đăng này đã cung cấp cho bạn một điểm khởi đầu tuyệt vời để thành công với Elementor. Nếu bạn có bất kỳ câu hỏi hoặc ý kiến ​​nào, hãy chia sẻ với Tài bên dưới nhé!