Skip to content
  • Webo
  • Elementor
  • Flatsome
  • Blocksy
  • Divi
Webo Developers
  • Webo
  • Elementor
  • Flatsome
  • Blocksy
  • Divi
Webo Developers

Hướng dẫn Elementor

14
  • Cách thêm mục lục vào website bằng Elementor Pro
  • Hướng dẫn cài đặt Elementor chi tiết cho người mới bắt đầu
  • Cách tùy chỉnh tiện ích giỏ hàng WooCommerce của Elementor
  • Xây dựng addons Elementor
    • Lớp Chính – Main Class
    • Kiểm tra tương thích – Compatibility Checks
    • Quy trình khởi tạo – Initialization Process
    • Sử dụng Namespaces – Using Namespaces
    • Bình Luận Header – Header Comments
    • Cấu trúc Tệp & Thư mục
    • Quy trình tải – Loading Process
  • Elementor Editor
    • Bảng Tùy chọn Người dùng
    • Xem trước Elementor
    • Bảng điều khiển Elementor
    • Bảng Cài Đặt Trang

Hướng dẫn Flatsome

13
  • Cách dịch giao diện hoặc plugin
  • Cách tạo Mega Menu (menu thả xuống tùy chỉnh hoàn toàn)
  • Hình ảnh biến thể bổ sung
  • Cách sử dụng Flatsome Studio
  • Cách chỉnh sửa tiêu đề cửa hàng bằng UX Builder
  • Cách thêm biểu tượng thanh toán vào chân trang
  • Cách tạo cửa sổ bật lên Hướng dẫn Kích thước sản phẩm
  • Cách Xóa “Tải xuống” khỏi Tài khoản của tôi
  • Cách tạo một trang sản phẩm tùy chỉnh
  • Cách thêm nhãn menu cá nhân của riêng bạn
  • Giấy phép/đăng ký giao diện
  • Cách tạo nội dung trang 404 tùy chỉnh
  • Các mẫu biến thể

Hướng dẫn Blocksy

7
  • Blocksy - Cơ bản
    • Trang web khởi đầu
    • Bảng điều khiển Blocksy
    • Theme con
    • Dịch thuật Blocksy
    • Cài đặt chủ đề Blocksy
    • Cách Nâng cấp lên Blocksy Pro
    • Bảng Menu

Hướng dẫn Webo

22
  • Webo Help: Cách xem danh sách website
  • Webo Help: Cách upload và tối ưu hình ảnh
  • Webo Help: Cách tạo website trial
  • Webo Help: Cách gửi yêu cầu hỗ trợ
  • Webo Help: Cách đăng nhập quản trị website bằng SSO
  • Webo Help: Cách cấp quyền để Webo kiểm tra website
  • Webo Help: Cách mời người quản lý website
  • Webo Help: Cách thêm tên miền riêng vào website
  • Webo Help: Cách trỏ DNS tên miền về Webo
  • Webo Help: Cách dùng Cloudflare cho tên miền Webo
  • Webo Help: Cách kiểm tra SSL và trạng thái tên miền
  • Webo Help: Webo Help Center là gì?
  • Webo Help: Cách chọn gói website phù hợp
  • Webo Help: Cách đăng nhập tài khoản Webo bằng email
  • Webo Help: Cách thanh toán và nâng cấp gói
  • Webo Help: Tổng quan trang quản lý Webo
  • Webo Help: Cách chỉnh sửa nội dung cơ bản
  • Hệ thống Webo
    • Hướng dẫn mua gói tự tạo website tại Webo
    • Trang tổng quan (Dashboard) của website sau khi tạo site trên hệ thống Webo
    • Đăng ký tài khoản tại hệ thống tạo website tự động của Webo
    • Giới thiệu về hệ thống tạo website của Webo.vn
    • Hướng dẫn tạo website trên Webo sau khi đăng ký tài khoản

Hướng dẫn Wordpress

6
  • Tạo trang mới
  • Cách thay đổi trang chủ
  • Cách tạo tài khoản quản trị cho đội ngũ hỗ trợ
  • Thay đổi Logo & Tiêu đề Trang
  • Thiết lập Menu điều hướng (Navigation Menu)
  • Thiết lập Trang chủ và Blog
View Categories

Hướng dẫn cài đặt Elementor chi tiết cho người mới bắt đầu

Với giao diện trực quan và khả năng kéo-thả tiện ích, Elementor giúp bạn thiết kế trang web chuyên nghiệp mà không cần biết lập trình. Nếu bạn chưa biết cách cài đặt Elementor vào trang web của mình thì dưới đây là hướng dẫn chi tiết từng bước nhé.

Bước 1. Đăng nhập vào hệ thống quản trị WordPress #

Đầu tiên, bạn cần truy cập vào trang quản trị WordPress của mình bằng cách nhập đường dẫn:
yourdomain.com/wp-admin.

Khi giao diện đăng nhập xuất hiện, bạn sẽ thấy hai ô nhập liệu chính:

  • Tên đăng nhập(Username): Nhập tên người dùng bạn đã tạo trong quá trình cài đặt WordPress.
  • Mật khẩu(Password): Nhập mật khẩu tương ứng với tài khoản quản trị viên của bạn.
Bạn tiến hành đăng nhập vào admin bằng tài khoản WordPress
Bạn tiến hành đăng nhập vào admin bằng tài khoản WordPress

Nếu bạn không nhớ thông tin đăng nhập, hãy kiểm tra email hoặc tài liệu lưu trữ khi cài đặt WordPress.

Bước 2. Cài đặt plugin Elementor #

Sau khi đăng nhập thành công vào bảng điều khiển WordPress (Dashboard), tìm đến menu bên trái. => Nhấp vào Plugins (Gói mở rộng) tại đây bạn sẽ thấy danh sách các plugin đã được cài đặt trên website.

Nhấn “Cài mới” (Add New) ở phía trên cùng hoặc góc bên trái màn hình để mở thư viện plugin WordPress => Tại ô tìm kiếm phía trên bên phải, nhập từ khóa “Elementor”. Sau vài giây, danh sách các plugin liên quan sẽ xuất hiện, bạn tìm chính xác plugin có tên Elementor Website Builder, do Elementor.com phát triển (có biểu tượng chữ “E” màu trắng trên nền hồng).

Cài đặt plugin Elementor
Cài đặt plugin Elementor

Cuối cùng bạn nhấn nút “Cài đặt ngay” (Install Now) màu xanh bên cạnh, quá trình cài đặt sẽ diễn ra trong vài giây đến vài phút tùy thuộc vào tốc độ mạng và máy chủ hosting.

Khi cài đặt hoàn tất, bạn nhấn nút “Kích hoạt” (Activate) để kích hoạt plugin và bắt đầu sử dụng Elementor trên website của bạn.

Bước 3. Cài đặt giao diện tối ưu cho Elementor (Tùy chọn) #

Để tận dụng tối đa hiệu suất và tính năng của Elementor, bạn nên sử dụng giao diện Hello Theme tương thích và tối ưu hóa cho plugin này.

Chọn “Giao diện” (Appearance) => chọn “Giao diện” (Themes) => nhấn vào nút “Thêm mới” (Add New) ở phía trên cùng màn hình. Bạn tìm kiếm Hello Elementor trong thanh tìm kiếm, khi đã tìm thấy giao diện Hello Elementor, nhấn nút “Cài đặt” (Install) màu xanh bên cạnh. Tiếp theo bạn nhấn nút “Kích hoạt” để sử dụng Hello Theme làm giao diện chính cho website của bạn.

Cài đặt giao diện tối ưu cho Elementor
Cài đặt giao diện tối ưu cho Elementor

Lợi ích khi sử dụng Hello Theme

  • Với thiết kế tối giản, Hello Theme giúp website của bạn tải nhanh hơn, mang lại trải nghiệm người dùng tốt hơn.
  • Giao diện này được tối ưu để hoạt động mượt mà với mọi tính năng của Elementor, từ các tiện ích cơ bản đến nâng cao.
  • Hello Theme cung cấp nền tảng sạch để bạn tự do thiết kế mà không bị giới hạn bởi cấu trúc giao diện.

Bước 4. Tạo trang và bắt đầu chỉnh sửa với Elementor #

Sau khi đã cài đặt và kích hoạt Elementor, bạn có thể bắt đầu tạo và chỉnh sửa trang web của mình với công cụ kéo-thả mạnh mẽ này.

Bạn truy cập “Trang” (Pages) => Chọn “Thêm mới” (Add New) để tạo một trang mới. Trong giao diện tạo trang, bạn nhập tiêu đề phù hợp với nội dung bạn dự định tạo và nhấn “Lưu nháp” (Save Draft).

Sau khi đặt tên, nhấn vào nút “Chỉnh sửa với Elementor” (Edit with Elementor) để mở trình chỉnh sửa.

Tạo trang và bắt đầu chỉnh sửa với Elementor
Tạo trang và bắt đầu chỉnh sửa với Elementor

Làm quen với giao diện Elementor #

Khi giao diện Elementor mở ra, bạn sẽ thấy hai khu vực chính:

  1. Khung xem trước (Preview Pane): Đây là khu vực hiển thị trực tiếp các thay đổi bạn thực hiện trên trang.
  2. Bảng công cụ (Widgets Panel): Nằm ở bên trái, đây là nơi chứa các tiện ích (widgets) như tiêu đề, hình ảnh, nút bấm, biểu mẫu, v.v.
Plugin Elementor
Giao diện của Plugin Elementor

Thêm và chỉnh sửa nội dung #

Đầu tiên bạn thêm khối (Sections): Nhấp vào biểu tượng dấu “+” trên khung xem trước để thêm một khối mới. Bạn có thể chọn bố cục cột phù hợp (1, 2, 3 cột hoặc tùy chỉnh).

Tiếp đến là kéo các tiện ích từ bảng công cụ bên trái và thả vào khối vừa tạo:

  1. Heading (Tiêu đề) để thêm tiêu đề cho trang.
  2. Text Editer (Văn bản) để thêm đoạn văn cho trang.
  3. Image (Hình ảnh) để chèn hình minh họa.
  4. Button (Nút bấm) để tạo nút kêu gọi hành động (CTA) như “Mua ngay,” “Liên hệ,” hoặc “Xem thêm.”
Elementor cho phép bạn tuỳ chỉnh bố cục
Thêm và chỉnh sửa nội dung bố cục

Sau khi chèn tiện ích, bạn có thể tinh chỉnh các thuộc tính của nó trong bảng công cụ bên trái.

  1. Tab Content (Nội dung): Điều chỉnh nội dung chính như văn bản, hình ảnh, hoặc liên kết của tiện ích.
  2. Tab Style (Kiểu dáng): Tùy chỉnh màu sắc, font chữ, kích thước, hoặc viền để đảm bảo phù hợp với thẩm mỹ tổng thể của trang web.
  3. Tab Advanced (Nâng cao): Cài đặt thêm các yếu tố như khoảng cách (margin, padding), hiệu ứng chuyển động, hoặc thêm lớp CSS để tối ưu hóa thiết kế.

Lưu thay đổi và xuất bản trang #

Sau khi hoàn tất chỉnh sửa, nhấp vào nút “Lưu nháp” (Save Draft) nếu bạn muốn lưu tạm thời mà chưa xuất bản; hoặc nhấn nút “Xuất bản” (Publish) nếu bạn muốn trang hiển thị trực tuyến ngay lập tức. Nếu cần chỉnh sửa sau, bạn chọn “Xuất bản” (Publish) để lưu thay đổi.

Bằng cách làm theo các bước trên, bạn đã có thể tạo và thiết kế một trang web đẹp mắt, chuyên nghiệp với Elementor.

Tại Webo.vn, chúng tôi cung cấp các mẫu giao diện được thiết kế hoàn chỉnh bằng Elementor, giúp bạn dễ dàng tạo website low code mà không cần quá nhiều thời gian hay kỹ năng thiết kế. Bạn chỉ cần thực hiện một vài thao tác đơn giản như thay thế hình ảnh phù hợp với thương hiệu hoặc sản phẩm của mình và cập nhật nội dung trang web theo ý muốn là có thể sở hữu một website chuyên nghiệp và ấn tượng nhé.

Nâng cấp lên Elementor Pro (Tùy chọn) #

Nếu bạn muốn sử dụng các tính năng nâng cao như tạo popup, biểu mẫu chuyên nghiệp, hoặc áp dụng các hiệu ứng đặc biệt, việc nâng cấp lên Elementor Pro là một lựa chọn tuyệt vời.

Để nâng cấp lên elementor pro, bạn cần truy cập vào trang chính thức của Elementor, sau đó chọn gói Pro phù hợp với nhu cầu của mình, chẳng hạn như gói dành cho cá nhân, doanh nghiệp nhỏ hoặc chuyên nghiệp. Tiếp theo, thực hiện thanh toán và làm theo các hướng dẫn chi tiết từ nhà cung cấp để kích hoạt và bắt đầu sử dụng các tính năng nâng cao.

Với các bước cài đặt và sử dụng Elementor, bạn đã có thể dễ dàng tạo ra một trang web đẹp mắt và chuyên nghiệp mà không cần phải có kỹ năng lập trình. Dù bạn chỉ sử dụng phiên bản miễn phí hay nâng cấp lên Elementor Pro để tận dụng các tính năng nâng cao, việc thiết kế trang web sẽ trở nên đơn giản và hiệu quả hơn bao giờ hết. Hãy bắt đầu tạo dựng website của mình ngay hôm nay và trải nghiệm những khả năng vô hạn mà Elementor mang lại!

What are your Feelings

  • Happy
  • Normal
  • Sad

Share This Article :

  • Facebook
  • X
  • LinkedIn
  • Pinterest
Cách thêm mục lục vào website bằng Elementor ProCách tùy chỉnh tiện ích giỏ hàng WooCommerce của Elementor
Mục lục
  • Bước 1. Đăng nhập vào hệ thống quản trị WordPress
  • Bước 2. Cài đặt plugin Elementor
  • Bước 3. Cài đặt giao diện tối ưu cho Elementor (Tùy chọn)
  • Bước 4. Tạo trang và bắt đầu chỉnh sửa với Elementor
    • Làm quen với giao diện Elementor
    • Thêm và chỉnh sửa nội dung
    • Lưu thay đổi và xuất bản trang
  • Nâng cấp lên Elementor Pro (Tùy chọn)
W
WEBO DEVELOPERS

CÔNG TY TNHH MTV WEBO
Giấy chứng nhận ĐĂNG KÝ DOANH NGHIỆP do SỞ KẾ HOẠCH VÀ ĐẦU TƯ TP. ĐÀ NẴNG cấp ngày 08/10/2021
Chịu trách nhiệm nội dung: Dương Phú Phương

MST: 0402112909
14 Mỹ Đa Tây 4, Đà Nẵng
0905 93 92 99
lienhe@webo.vn

Công ty

  • Về chúng tôi
  • Tiếp thị liên kết
  • Liên hệ
  • Tuyển dụng
  • Tin tức

Hổ trợ

  • Blog webo

Sản phẩm

  • Webo
  • Elementor
  • Flatsome
  • Blocksy
  • Divi