Tự tay tạo ra một website đẹp và chuyên nghiệp!
Đây là mong muốn của hầu hết của các bạn khi tiếp cận với WordPress. Tuy nhiên, không phải ai cũng có đủ kỹ năng về lập trình, code, PHP, CSS… để làm được điều này.
Điều đáng mừng là có những plugin hỗ trợ người dùng tạo trang với những mẫu và phần tử có sẵn. Chỉ với thao tác kéo/thả và trực quan, bạn sẽ tự mình xây dựng được một page đẹp và ưng ý.
Một trong số plugin tạo trang hàng đầu hiện nay, đó là Elementor Pro.
Đừng bỏ qua bài viết: plugin Elenmentor là gì?.
Ok!!!
Quay lại bài viết hôm nay, mình sẽ chia sẻ cách sử dụng plugin tạo trang mạnh mẽ này.
Hướng dẫn sử dụng Elementor Pro wordpress
Đối với bài viết này, Lực sẽ kích hoạt plugin Elementor Pro bằng license key để sử dụng được đầy đủ các mẫu và các chức năng của plugin này.
Bạn có thể sử dụng bản miễn phí để trải nghiệm trước bằng các bước hướng dẫn dưới đây.
Cài đặt Elementor
Elementor cũng giống các plugin thông thường khác, việc cài đặt cũng không có gì khác biệt.
» Tại giao diện quản trị wordpress, bạn chọn “Plugin” › click “Cài mới“.
» Tìm từ khóa “Elementor” tại thanh công cụ tìm kiếm › sau đó click “Cài đặt“.
» Quá trình cài đặt hoàn thành, bạn click “Kích hoạt“.
» Elementor đã được xuất hiện tại trang quản trị.
Ngoài cách này, bạn cũng có thể download trực tiếp plugin này từ trang chủ elementor.com.
Như vậy bạn đã hoàn tất việc cài đặt plugin Elementor bản miễn phí.
Tiếp theo chúng ta sẽ đi vào chi tiết hướng dẫn sử dụng Elementor.
Hướng dẫn sử dụng Elementor
Như đã đề cập, để các tính năng được sử dụng đầy đủ Lực sẽ sử dụng bản Pro.
Dưới đây là hướng dẫn sử dụng Elementor Pro chi tiết.
#1. Tạo Post/Page bằng Elementor
» Để tạo bài đăng dạng bài viết hoặc trang, bạn sẽ thao giống như bình thường. Sau đó bạn lựa chọn “Sửa với Elementor” để đến giao diện dựng trang Elementor page builder.
#2. Giao diện Elementor Pro
Như thường lệ, chúng ta sẽ bắt đầu với giao diện người dùng.
Giống như các trình tạo trang khác. Bảng điều khiển của Elementor là tập hợp của các phần tử và công cụ hỗ trợ tạo trang.
Giao diện làm việc của Elementor hoạt động ổn định và trực quan. Đặc biệt chúng không chiếm nhiều không gian trên màn hình soạn thảo, điều này rất có ích nếu màn hình máy tính của bạn có kích cỡ không lớn.
» Với cách sử dụng mũi tên nhỏ trên bảng điều khiển, cho phép bạn xem trước bài đăng. Tất nhiên bạn không thể chỉnh sửa trong bản xem trước này.
Mẹo nhỏ: Bạn có thể sử dụng phím tắt “Ctrl + P” trên bản phím để sử dụng chức năng này của Elementor.
» Ở trên cùng bên trái, bạn sẽ tìm thấy cài đặt trang. Tại đây có nhiều công cụ mà bạn sẽ cần dùng tới chúng trong quá trình làm nội dung.
» Dưới cùng bên góc trái, có thêm các tùy chọn hữu ích khác.
Trong đó
- (1) – Cài đặt: các tùy chọn chung cho bài đăng như tiêu đề, kiểu nền, layout…
- (2) – Nagivator: trình quản lý bài đăng theo layer, bạn có thể quản lý vị trí phần tử bằng cách kéo thả tại đây.
- (3) – lịch sử: các thao tác chỉnh sửa và layout của bạn sẽ được lưu tại đây. Bạn có thể hoàn tác bất kỳ thao tác lỗi nào.
- (4) – chế độ Responsive: các chế độ xem trước của bài đăng trên các thiết bị, bao gồm máy tính, máy tính bảng, thiết bị di động. Bạn có thể chỉnh sửa giao diện bài đăng phù hợp cho từng thiết bị riêng biệt mà không ảnh hưởng tới các thiết bị khác.
- (5) – biểu tượng Preview: Chế độ xem trước bài đăng trước khi xuất bản.
- (6) – xuất bản: đăng bài đăng (post, page).
Biểu tưởng góc cùng bên phải sẽ là nơi đưa bạn đến giao diện quản lý các phần tử dựng trang.
Để thêm các phần tử dựng trang vào nội dung bài đăng, bạn chỉ việc kéo chúng từ danh sách quản lý, sau đó thả vào vùng layout của trang.
Về phần giao diện quản lý phần chính chỉ có như vậy. Chúng ta sẽ mất một chút thời gian để làm quen với chúng.
Nhìn chung, giao diện quản lý của Elementor rất gọn gàng và dễ sử dụng.
#3. Tùy chọn bố cục và cột
Việc tạo bố cục cụ thể là tất cả những gì mà các trình dựng trang đều có, vậy Elementor cụ thể sẽ thao tác như thế nào?
Câu trả lời sẽ có ngay sau đây.
Trong khu vực layout.
Click vào lựa chọn “Thêm mục mới“.
Các bố cục tùy chọn cho bài đăng sẽ hiện ra. Bạn có thể lựa chọn bất kỳ bố cục layout nào phù hợp với nội dung của bạn.
Thông thường, bố cục 1 cột duy nhất sẽ là măc định cho tất cả các bài đăng.
Ngoài ra, việc thêm một cột cũng hoàn toàn dễ dàng trong quá trình làm nội dung. Bằng cách click vào biểu tượng cột và chọn “Add new column“.
Bạn có thể chỉnh sửa độ rộng từng cột bằng cách di chuyển qua phần tử cột để hiển thị đường viền, sau đó kéo để tăng/giảm.
#4. Các phần tử Widget
Đây là những phần tử nhỏ mà bạn sử dụng để thể hiện nội dung của bài đăng. Elementor cung cấp một thư viện (elementor template) rất nhiều các công cụ để bạn lựa chọn như header, icons, table…
#5 Lưu Widget và sử dụng cho Post/Page
Bạn có thể lưu những thiết kế để sử dụng lại trong bất kỳ post/page.
Quy trình thực hiện như sau.
Lưu Widget vào thư viện
Việc lưu riêng lẻ những mẫu Widget sau khi hoàn thành giúp chúng ta có thể sử dụng lại chúng bất cứ khi nào muốn. Đối với Elementor thì việc này hoàn toàn dễ dàng và nhanh chóng.
Click chuột phải vào biểu tượng “Sửa mục” của phần tử muốn lưu › click “Lưu dưới dạng mẫu“.
Nhập tên mẫu, sau đó click “Lưu“.
Mẫu bạn lưu sẽ được tự động thêm vào “Mẫu của tôi” trong “Thư viện” của Elementor.
Sử dụng các Widget đã lưu trong thư viện
Sau khi lưu Widget, bạn sẽ sử dụng được chúng trong tất cả các bài đăng bằng Elementor hoặc trình soạn thảo WordPress.
Thêm mẫu bằng trình sửa Elementor
Khi bạn đang thao tác trực tiêp trên trình tạo trang Elementor bạn sẽ thực hiện như sau.
Trong phần layout, bạn chọn “Thêm mẫu“.
Tìm đến “Mẫu của tôi” trong menu thư viện, và lựa chọn Widget cần sử dụng.
Trường hợp sử dụng trình tạo trang mặc định của wordpress, bạn cần sử dụng mẫu bằng “id”.
Thêm mẫu bằng trình soạn thảo WordPress bằng ID
Tại trang quản trị WordPress › chọn “Elementor” › chọn “Mẫu của tôi“.
» Trong phần “Shortcode” › chọn và copy “Elementor template id” tương ứng với mẫu bạn mong muốn thêm vào nội dung bài đăng.
Paste “Elementor template id” vào trình soạn thảo WordPress. Nội dung mẫu bạn lưu sẽ hiển thị như một bài đăng bình thường.
#6. Sử dụng thư viện Elementor Pro – Elementor template
Thư viện của Elementor có đầy đủ các mẫu cho bạn lựa chọn, bao gồm:
- Blocks: mẫu bố cục nhỏ như phần giới thiệu, đồng hồ đếm ngược, review.
- Page: trang đã được bố cục đẹp theo nhiều dạng và chủ đề khác nhau.
Cách sử dụng 2 loại mẫu này như sau
Trong phần layout, bạn chọn “Thêm mẫu“.
Thêm mẫu đối với “Blocks” và “Trang” đều giống nhau. Bạn kéo trỏ chuột tới mẫu cần thêm, sau đó click “Chèn“.
Sau khi chèn, mẫu sẽ xuất hiện trong bài đăng. Bạn có thể tùy chỉnh nội dung và hình ảnh của mẫu đã chèn.
#7. Hoàn tác và lịch sử sửa đổi
Trong quá trình làm việc với nội dung bài đăng, chúng ta khó có thể tránh khỏi sai sót về text cũng như bố cục.
Việc khắc phục những sai sót đối với Elementor hoàn toàn đơn giản và nhanh chóng bằng công cụ “Lịch sử“.
Ngoài ra, phím tắt hoàn tác thông thường “Ctrl + Z” cũng sẽ sử dụng được trong Elementor.
Các hành động nhỏ nhất sẽ được lưu lại ngay sau khi bạn thực hiện.
Chúng sẽ được lưu lần lượt từ cũ và mới theo từng lớp hành động. Bạn chỉ cần di chuột tới hành động cần “hoàn tác” và click vào biểu tượng trong hình.
#8. Lưu nháp và xuất bản nội dung
Sau khi hoàn thành việc chỉnh sửa nội dung và bố cục bài đăng. Bạn có thể lưu bài đăng dưới dạng nháp hoặc thành dạng mẫu để sử dụng sau này.
Nếu bài đăng nội dung đã đạt yêu cầu nội dung và bố cục. Bạn có thể đăng nó ngay trong Elementor.
Chú ý sau khi xuất bản bài đăng, bạn vẫn phải vào trình soạn thảo wordpress để thực hiện các bước tối ưu SEO nhé.
Tóm tắt kiến thức
Khi sử dụng Elementor, việc xây dựng 1 trang với thao tác kéo thả là vô cùng đơn giản.
Bạn cũng có thể lưu những mẫu đã thiết kế vào thư viện và sử dụng bất kỳ lúc nào nếu muốn.
Như vậy, Lực đã cùng bạn tìm hiểu các chức năng chính của plugin Elementor qua bài viết hướng dẫn sử dụng Elementor pro WordPress.
Đây là một trong những công cụ tốt nhất hiện nay, trong việc xây dựng một trang landing page trên nền tảng WordPress.
Elementor có uy tín lớn trong cộng đồng sử dụng WordPress và được rất nhiều người sử dụng, với hơn 1 triệu lượt cài đặt.
Còn bạn thì sao? bạn có muốn sử dụng công cụ mạnh mẽ này để phục vụ cho công việc online của mình không?.
Cảm ơn bạn đã theo dõi bài viết, chúc bạn thành công!
Bài viết rất hay, đã hiểu thêm về elementor. Có thêm phần hướng dẫn về các widget nữa thì tuyệt vời.
Mình muốn nhận bản pro. Email: thinhvo28@gmail.com
Thanks.
Giờ mới biết plugin tuyệt vời này, Những người không biết code sử dụng rất tốt. Thanks bạn, bái viết rất chi tiết
Chào bạn, mình muốn hỏi làm thế nào để sử dụng tính năm justify khi soạn thảo trong elementor. Mong bạn chỉ giúp!
Chào bạn!
Mình đã làm theo như bạn hướng dẫn.nhưng trong phần mẫu của tôi.ở trang quản lý của mình ko hiện thị Shortcode cho mẫu.
Bạn có thể chỉ giúp mình dc k?
MÌNH MUỐN NHẬN BẢN ELENENTOR PRO. TƯ VẤN MÌNH NHÉ
Bạn có thể cho mình biết tên các plugin khác tương tự như Elementor được không a.
Bài viết của bạn rất chi tiết cho người mới. Phải nói là Plugin này rất bá đạo trong độ tùy biến
Bài viết rất hay và dễ hiểu. Mình muốn key bản pro. Email kiet2007@gmail.com
Elementor bản quyền có thể kích hoạt mà không cần key bạn nhé
Bài viết của bạn có ích thật, mình cũng đang xem thằng này, bạn ra thêm ít bài về Elementor này nữa đi, mong bạn gửi cho mình bản Elementor bản Pro để mình biết được nhiều chức năng hơn, nếu được thì bạn gửi qua email này cho mình nhé, nguyenquocthien7418v@gmail.com , xin cảm ơn bạn nhiều luôn ấy hihi <3
Bài viết rất hay. Nếu được cho mình xin nhé, mail: luuminhchau87@gmail.com tks
Bạn cho hỏi làm sao để phân trang khi sử dụng phần tử Elementor, ý mình là 1 trang nó dài quá chẳng hạn mình muốn phân thành trang 1 2 3 4 5…6 thì làm thế nào
Bạn cho mình hỏi chút.
Mình muốn phân trang khi dùng Elementor, bài dài quá mình muốn đánh số trang 1 2 3 4..5 như trong link này ( https://smartblogger.com/category/podcast/) thì làm như thế nào vậy bạn.
Chào anh,
Cho mình hỏi là mình muốn tạo form rồi khi khách nhấn gửi thì nó sẽ gửi mail về cho mình và khách. Tuy nhiên mình không thấy chỗ cấu hình smtp trong elementor.
Anh có thể hướng dẫn 1 bài về việc gửi mail từ elementor form thông qua yandex không ạ
Cảm ơn anh