Thứ ba, 30 Tháng 10 2018 12:00

Hướng dẫn sử dụng Elementor

Đánh giá bài viết:
(1 Vote)

Elementor phát triển vô cùng mạnh mẽ trong năm 2017 từ 20 nghìn lượt cài đặt lên đến 40 nghìn lượt. Đến tháng 7 năm 2018 con số kích hoạt của Plugin này đã là 1 triệu. Nhiều người dùng + mã nguồn mở => nhiều người phát triển => bạn sẽ được lợi rất nhiều khi sử dụng plugin này.

Bài viết này mình sẽ giới thiệu cho các bạn một plugin vô cùng hữu ích giúp xây dựng website một cách nhanh chóng khi sử dụng wordpress.

Hướng dẫn sử dụng Elementor

Elementor là gì?

Elementor là một công cụ đang rất “hot” hiện này khi nói về thiết kế website mà không động tay vào code. Nó là một trình tạo trang sử dụng khi dàn trang, tạo trang bằng cách kéo thả các thành phần hay tùy biến website WordPress của bạn, giúp bạn có thể dễ dàng chia nội dung của mình ra nhiều cột khác nhau, ở mỗi cột bạn có thể thêm bất cứ tiện ích “widget” nào để nó hiển thị nội dung mà bạn muốn.

Một số ưu điểm của Elementor

  • Giao diện kéo thả có thể nhìn thấy thay đổi realtime
  • Hoàn toàn miễn phí
  • Sử dụng dễ dàng
  • Không cần coding
  • Tiện ích (widgets) phong phú
  • Giao diện thân thiện với thiết bị di động (mobile)
  • Tối ưu với SEO
  • Cho phép tùy chỉnh CSS

Elementor có một tính năng rất hữu ích đó là ở phần Thư viện mẫu (template library) - cho phép bạn thiết kế Mẫu (template) cho riêng mình, lưu lại và sử dụng cho những lần sau ở các trang web khác.

  • Pre-Made Templates Sử dụng template đã được thiết kế sẵn của elementor hoặc là có thể custome lại hoặc tạo mới template theo nhu cầu sử dụng của bạn.
  • Save Your Design Sau khi đã thiết kế xong bạn có thể save lại và để sử dụng cho lần sau cho những trang khác.
  • Export & Import Bạn có thể export bất kì template nào và import chúng ở website khác. Điều này giúp bạn có thể chia sẻ template với những người khác.

Qua những ưu điểm trên thì giờ chúng ta bắt đầu cài đặt và tìm hiểu những ưu điểm trên nhé.

Cài đặt Elementor

Đầu tiên bạn đăng nhập vào trang quản lý của WordPress, sau đó bạn vào Gói mở rộng (Plugins) > Cài mới (Add new). Tiếp đó bạn tìm kiếm từ khóa “Elementor” tại khung tìm kiếm.

Hướng dẫn sử dụng Elementor

Sau đó, bạn nhấn cài đặt để tiến hành cài đặt plugin, sau khi hoàn tất việc cài đặt bạn kích hoạt plugin để có thể sử dụng. Ngoài cách trên thì bạn cũng có thể tải xuống trực tiếp từ trang chủ của elementor.com

Bạn có thể thiết lập các tùy chọn cơ bản bằng cách vào Elementor > Cài đặt, tại đây bạn có thể chọn các bài viết (post) hoặc trang (page) có thể sử dụng Elementor. Ngoài ra còn có thể lựa chọn vô hiệu hóa Fonts chữ, màu sắc mặc định của Elementor..

Hướng dẫn sử dụng Elementor

Để bắt đầu sử dụng Elemtor, bạn tạo mới bài viết hoặc trang và nhấn “Sửa với Elementor” để thực hiện.

Sử dụng Elementor

Ở giao diện soạn thảo trang mới, đầu tiên bạn cần chọn template. 

Hướng dẫn sử dụng Elementor

Có 3 lựa chọn để bạn bắt đầu:

  • Elementor Full Width: bạn sẽ xây dựng trang full-width, nhưng vẫn giữ lại phần header và footer của website
  • Elementor canvas: bạn xây dựng trang từ đầu luôn, một trang trắng đúng nghĩa.
  • Giao diện mặc định.

Sau khi lựa chọn được kiểu giao diện bạn nhấn “Lưu nháp”, tiếp đến nhấn “Sửa với Elementor” để mở giao diện thiết kế của Elementor.

Hướng dẫn sử dụng Elementor

Giao diện gồm 2 phần:

  • Sidebar: bên trái là nơi bạn bổ sung các thành phần element vào phần bên phải. Nó cũng là nơi bạn chỉnh sửa phần tử bạn đang chọn bên phải.
  • Xem trước thay đổi: là nơi chứa bản thiết kế của bạn. Giao diện của nó chính xác như người dùng cuối sẽ nhìn thấy. ​

Nhấn vào nút Thư mục (folder) ở phía bên phải trang và chọn Thư viện Mẫu (Template Library). Bên cạnh các template chỉ có ở bản Pro, bạn cũng sẽ có nhiều mẫu miễn phí.

Hướng dẫn sử dụng Elementor

Việc sử dụng Elementor để dàn trang cho website bằng cách kéo thả các thành phần (element) từ phần Sidebar bên trái.

Bạn thêm phần (section) bằng cách nhấn Thêm Mục Mới bên phải giao diện, sau đó lựu chọn số cột trong một hàng.

Hướng dẫn sử dụng Elementor

Tiếp theo, bạn lựu chọn thành phần bên trái để kéo sang phần (section) vừa tạo xong.

Hướng dẫn sử dụng Elementor

Lúc này, bạn có thể tùy chỉnh lại thành phần, phía bên trái Sidebar hiển thị 3 tab cho bạn tùy chỉnh.

  • Nội dung (content): ở đây bạn sẽ thay đổi nội dung của thành phần
  • Kiểu (style): nơi bạn thay đổi màu sắc và kiểu chữ
  • Nâng cao (advanced): nơi bạn thực thiện thay đổi nâng cao như khoảng cách giữa các thành phần, màu sắc hiển thị của nền, viển, chỉnh sửa giao diện ở các thiết bị khác nhau...

Còn rất nhiều các thành phần khác, mỗi thành phần hỗ trợ một kiểu định dạng khác nhau như: hình ảnh (image), video, văn bản (text), nút (button), biểu tượng (icon), google map.. Cách sử dụng đều giống nhau, bạn chỉ việc kéo và thả vào nơi mình muốn phía bên phải và tùy chỉnh.

Hướng dẫn sử dụng Elementor

Và còn rất nhiều điều thú vị của Elementor đang chờ đợi bạn, chắc chắn chúng sẽ giúp ích rất nhiều trong việc xây dựng Website bán hàng của bạn. Chúc bạn thành công!

------------------------------------------

Bạn muốn xây dựng Website Bán Hàng sử dụng WooCommerce, hãy liên hệ ngay với HanoWeb để được tư vấn Thiết Kế Web Bán Hàng miễn phí nhé!

HanoWeb - Thiết Kế Web Bán Hàng Chuyên Nghiệp
Giao diện đẹp - Chuẩn SEO - Tải Nhanh - Chi Phí Thấp

Địa chỉ: P1428, CT5B, Tân Triều, Thanh Trì, Hà Nội
Điện thoại: 08.9999.1428 - Email: This email address is being protected from spambots. You need JavaScript enabled to view it.

Đã đọc: 921 lượt Sửa đổi lần cuối: Thứ hai, 19 Tháng 11 2018 14:49