Tháng Hai 17

Elementor [Free+Pro]: Cài Đặt & Hướng Dẫn Sử Dụng A-Z

Làm thế nào để có một website WordPress tuyệt đẹp & chuyên nghiệp? Rồi homepage & các trang Landing Page lung linh? Dùng Elementor!

Bài viết này, mình sẽ share với bạn toàn tập về Elementor.

  • Giới thiệu tổng quan về Plugin Elementor
  • Cách cài đặt & cấu hình trình dựng trang (page bulder) này
  • Hướng dẫn sử dụng các tính năng của Elementor để
    • Làm trang chủ website đẹp
    • Dựng Landing Page chuyên nghiệp
    • Và cả làm trang Blog lung linh
  • Và [review] cho bạn về Elementor Pro – Bản có tính phí (không cao lắm) nhưng xắt ra miếng

Bạn vào trang chủ của Elementor để xem một trang website được dựng với Elementor nó đẹp thế nào nhé

plugin elementor miễn phí pro hướng dẫn

Let’s go …

Elementor là gì?

Elementor là gì?

Elementor là Page Builder Plugin (trình dựng trang) miễn phí và tính phí (bản pro) giúp người làm website wordpress xây dựng các trang, landing page đẹp & chuyên nghiệp

… một cách dễ dàng

… đơn giản bằng cách kéo thả rồi chỉnh sửa các thành phần trên trang.

Các landing page giới thiệu khóa học, dịch vụ trên Blog này của Đức đều được build bằng Elementor.

Ví dụ các tính năng trên Elementor Page Builder

Đây là vài ví dụ bạn có thể làm với Elementor.

Dưới đây là ảnh chụp màn hình một landing page mình thiết kế để giới thiệu khóa học Facebook Ads Master của mình trên Estore Education.

ví dụ mẫu landing page dựng với elementor tạo landing page đẹp bằng wordpress với elementor hướng dẫn dùng elementor làm landing page bán hàng các thành phần trên plugin elementor cách làm landing page đẹp với plugin elementor wordpress các thành phần trên plugin elementor

Đây là bảng giá được tạo bởi Elementor. Bạn cũng có thể làm nó

tạo landing page đẹp bằng wordpress với elementor

Nói chung Elementor khiến website & landing page của bạn trông cực kỳ chuyên nghiệp & đẹp mắt.

Elementor Pro & miễn phí

Elementor có bản free & pro.

Bản free thôi là bạn đã cảm thấy nó hữu ích thế nào trong việc giúp bạn dựng trang trên WordPress.

Bản pro thì khỏi bàn rồi!

Với bản Elementor miễn phí, bạn chủ yếu để làm landing page.

Còn với Elementor Pro, bạn có thể dựng toàn bộ website đẹp lung linh với nó.

Đây là các tính năng khác nhau giữa Elementor miễn phí và Elementor Pro

tạo landing page đẹp bằng wordpress với elementor

Bạn có thể vào website của Elementor để xem một website được dựng hoàn toàn bằng Elementor nó trông thế nào

Dùng Elementor ở đâu trên website wordpress?

Phổ biến nhất là dùng Elementor để tạo:

  • Trang chủ website
  • Landing page giới thiệu sản phẩm, bán hàng
  • Trang giới thiệu
  • Trang liên hệ

Với Elementor Pro, bạn sẽ tùy ý make up cho các trang:

  • Sản phẩm trong WooCommerce
  • Tạo mẫu bài viết trên Blog
  • Dựng Form thu Lead
  • Tạo các Pop-up
  • Có nhiều mẫu website hoàn thiện để bạn dựng toàn bộ website bằng Elementor
  • Hơn 300 mẫu trang dựng sẵn, bạn chỉ cần chọn để dựng bất kỳ trang nào trên website wordpress của bạn

Cách cài đặt Plugin

Cài đặt

Bạn vào Plugins => Add New = Gõ “elementor” vào ô tìm kiếm => Install Now => Activate

cài đặt plugin page builder

(Luôn tiện thì bạn cũng nên cài luôn cái Essential Addons for Elementor bên cạnh nhé)

Cài đặt thì chỉ có vậy thôi. Và đây chính là bản miễn phí

Về cấu hình, thì bạn để mặc định của Elementor là được rồi, không cần cài đặt, chỉnh sửa gì thêm.

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

Giờ thì bạn tạo một page trống mới (Pages => Add New), đặt cho nó cái tiêu đề là được => Bấm “Edit with Elenmentor”

Và bắt đầu trải nghiệm page builder plugin tốt nhất thị trường hiện tại này nhé.

tạo trang mới trong website wordpress

Giao diện của nó trông thế này

giao diện page builder plugin

  1. Thêm các khối (section) mới cho trang
  2. Lấy mẫu trang dựng sẵn từ thu việc của Elementor
  3. Các widget để tạo các thành phần cho trang
  4. Thanh điều khiển
  5. Mở các thành phần dựng trang
  6. Cài đặt trang

Page settings – Cài đặt trang

Ở mục page setting này, bạn có thể:

  • Đặt lại tiêu đề cho trang
  • Thay đổi trạng thái trang giữa: draft (bản nháp) / pending review (đợi duyệt) / private (riêng tư) / publish (đăng công khai lên web)
  • Thêm ảnh đại diện (featured image) cho trang khi hiển thị lên web
  • Chọn có hiển thị tiêu đề lên trang hay không (hide tittle)
  • Chọn kiểu layout cho trang

Phần quan trọng nhất ở đây là Page Layout

thay đổi page layout cách sử dụng elementor

  • Elementor Canvas: kiểu layout trang full toàn màn hình, không có header, footer
  • Elementor Full Width: kiểu layout trang full toàn màn hình, có header, footer của website
  • Theme: kiểu layout giống kiểu trang mặc định trên theme của bạn

Giờ thì bạn cứ thử với page layout Elementor Canvas trước nhé.

Với tùy chọn này, trang của bạn sẽ trắng trơn không có gì hết. Và bạn sẽ tạo trang từ đầu.

Và đây là tùy chọn cho các bạn tạo landing page miễn phí

page layout elementor canvas làm landing page 2

Thêm section, thành phần mới

Bạn bấm dấu “+” chỗ mũi tên

thêm secion vào elementor

Bạn sẽ có được một section mới như thế này. Mình đã chọn layout 3 cột

thêm layout cột vào elementor

Ý tưởng là, 3 cột này mình sẽ giới thiệu lợi ích của sản phẩm mình đang bán.

Lấy mẫu trang dựng sẵn trong thư viện

Với một trang trắng hoàn toàn như trên, bạn sẽ mất khá nhiều thời gian để làm một landing page hoàn chỉnh.

Thì Elementor có dựng sẵn các trang rất đẹp trong thư viện của nó

lấy mẫu trang trong thư viện elementor

thư viện elementor

Chỗ ô mình tạo viền xanh, bạn thấy:

  • Pages: Chèn các mẫu trang đã được dựng hoàn thiện
  • Blocks: Chèn các khối thành phần lẻ tẻ vào trang
  • My templates: Các mẫu trang bạn đã dựng trước đây và bạn đã lưu vào thư việc riêng của mình để dùng về sau

Thư viện này, có một số ít là miễn phí, còn hầu hết là bạn phải nâng cấp lên bản Elementor Pro mới xài được

Mẫu miễn phí bạn có thể xài thì sẽ có chữ Insert như hình, khi bạn rê chuột vào từng mẫu

mẫu trang miễn phí trong thư việc elementor

Còn thế này thì bạn phải nâng cấp lên Elementor Pro mới xài được

chèn mẫu trang thư viện elementor pro

Giờ mình bấm Insert để chèn hẳn một mẫu trang miễn phí hoàn thiện

Khi bạn tạo trang đầu tiên, Elementor sẽ yêu cầu bạn tạo tài khoản & kết nối với wordpress.

Bạn chỉ cần làm việc này một lần đầu tiên

tạo tài khoản elementor và kết nối với wordpress

tạo tài khoản elementor miễn phí page builder

hướng dẫn tạo tài khoản elementor miễn phí

Nhập email, chọn password rồi bấm Create Accountkết nối elementor với website wordpress

Kết nối thành công thì nó như thế này

kết nối elementor với wordpress thành công

Giờ thì bạn quay lại trang elementor đang tạo, refresh lại trang (bấm Publish/Save draft để lưu lại nếu bạn muốn trước khi refresh nhé)

Giờ thì bạn vào lại thư viện, và chèn một trang mâu vào (chỗ Pages, chọn mẫu miễn phí)

Giờ thì bạn đã có cái nền để chỉnh sửa lại theo ý bạn muốn

hướng dẫn thêm template trong elementor website wordpress

Giới thiệu các thành phần – Element

Elementor Pro sẽ có thêm các chức năng nâng cao khác mà Elementor miễn phí không có.

Bạn cứ khám phá các thành phần trong bản Elementor miễn phí trước nhé

Các thành phần trong Plugin Elementor Free

Thành phần cơ bản – Basic Elements

các thành phần element trong elementor

  • Inner section: Thêm cột chứa các thành phần vào trang
  • Headling: Thêm tiêu đề cho từng khối trên trang
  • Image: Thêm hình ảnh
  • Text editor: Thêm đoạn văn bản
  • Video: Thêm video từ youtube, vimeo
  • Button: Thêm nút kêu gọi hành động
  • Divider: Các đoạn phân trang để có bố cục rõ ràng
  • Spacer: Thêm các khoảng trắng phân cách các thành phần
  • Google Map: Thêm Google Map vào trang
  • Icon: Thêm các icon
Thành phẩn tổng quan – General Elements

các thành phần trong elementor miễn phí

  • Image box
  • Icon box
  • Star rating
  • Image Carousel
  • Basic gallery
  • Icon list
  • Counter
  • Progress bar
  • Testimonial
  • Tab
  • Accordion
  • Toogle
  • Social icon
  • Alert
  • Soundcloud
  • Shortcode
  • HTML
  • Menu anchor
  • Sidebar
  • Read more

Mỗi thành phần, bạn nhìn hình mô tả là hình dung được nó làm gì rồi.

Bạn cứ kéo vào và thử nghiệm xem, nó giúp bạn ứng dụng vào việc gì nhé.

Thành phần cơ bản trên website – WordPress Elements

các thành phần wordpress dựng trang page builder

Các thành phần trên Elementor Pro

Với Elementor Pro (bạn đã nâng cấp lên bản có tính phí), thì ngoài các thành phần ở trên, bạn còn có thêm:

  • Tự thiết kế lại được toàn bộ theme (giao diện website) bằng cách kéo thả đơn giản
    • Mục comment
    • Table of content (tóm tắt nội dung trên blog)
    • Author box: giới thiệu tác giả bài viết blog
    • Site map
    • Site logo
    • Site title
  • Tạo và thiết kế lại các trang sản phẩm trong WooCommerce đẹp & cực chuyên nghiệp

Chi tiết hơn, bạn xem ở phần review Elementor Pro bên dưới nhé

Thêm thành phần mới

Ví dụ bạn muốn thêm một tiêu đề cho một khối nội dung trên trang,

=> Click chuột vào Heading

=> Giữ chuột (không nhả ra), kéo tới chỗ bạn muốn nó ở đó (Drag)

=> Nhả việc nhấn chuột ra (Drop)

cách thêm thành phần mới trong elementor bằng cách kéo thả drag drop

Bạn kéo thả tiếp một Text editor và một Image vào để xem nó trông thế nào nhé

Bạn trở lại khu vực lấy các thành phần ở ô bên dưới

tìm cách thành phần element

Sau khi thêm Text editor & image, nó trông thế này

kéo thả các thành phần

Chỉnh sửa từng thành phần

Giờ bạn muốn sửa thành phần nào, bạn click chuột vào thành phần đó.

Cột điều khiển bên trái sẽ hiển thị khung chỉnh sửa thành phần đó.

cách chỉnh sửa các thành phần

  • Content: nơi bạn chỉnh sửa nội dung thành phần
  • Style: Nơi bạn chỉnh sửa kiểu chữ, màu sắc, …
  • Advanced: Chỉnh sửa nâng cao như căn chỉnh lề 4 phía, thêm hiệu ứng động, thêm màu/hình nền, thêm đường viền, …

Ví dụ với Heading ở trên, mình có thể thay đổi như thế này

căn giữa heading

Căn giữa tiêu đề

Thay đổi font chữ, màu chữ, làm nổi chữ (text shadow) ở tab Style

thay đổi font chữ kiểu chữ màu sắc trong elementor

  • Text color: đổi màu chữ
  • Typography: Đổi kiểu chữ
    • Family: Đổi font chữ
    • Size: Kích thước chữ
    • Weight: Độ đậm chữ
    • Transform: Viết hoa toàn bộ / Viết hoa chữ cái đầu / viết thường / bình thường
    • Line Height: Khoảng trắng giữa các dòng
    • Letter spacing: Độ dày của chữ

Ví dụ mình chỉnh sửa lại thế này

chỉnh sửa thành phần trong elementor

Giờ mình thêm ít khoảng cách cho các thành phần cho nó đẹp lên chút

thêm khoảng trắng vào các thành phần trên elementor

Bạn cứ vào từng mục, vọc vạch cho đã, là bạn nắm được cách chỉnh sửa các thành phần.

Sau khi chỉnh sửa, bạn nhớ bấm update để lưu nhé. Không là công cốc đấy

Di chuyển các thành phần

Ví dụ mình muốn di chuyển cái hình vào giữa cái heading và đoạn văn bản

cách di chuyển thành phần

Mình rê chuột vào thành phần cần di chuyển

=> Click và giữ chuột vào biểu tượng cây bút

=> Kéo nó tới chỗ cần tới

=> Thả chuột

Và nó thế này

cách di chuyển thành phần 1

Thêm hiệu ứng chuyển động

Bạn muốn thành phần nào có hiệu ứng chuyển động ngang dọc, nhấp nháy hoa lá

Chọn thành phần => Tab Advanced => Motion Affects => Chọn hiệu ứng

Thêm màu/ hình nền

Bạn thêm màu nền / hình nền ở Tab Advanced => BackGround

Có thành phần thì mục BackGround này nó nằm ở Tab Style nhé. Bạn cứ lục lọi chút là thấy.

Chỉnh sửa trang theo từng thiết bị

Khi bạn thao tác trên máy tính, bạn thấy nó trông ổn rồi.

Nhưng khi trang hiển thị lên thiết bị di động hoặc máy tính bảng, nó lại không cân đối.

Bạn cần vào kiểm tra xem trang hiển thị trên các thiết bị khác ok chưa.

cách chỉnh sửa trang elementor trên thiết bị di động

Mình chọn Mobile thì cái tiêu đề nó lớn quá

hướng dẫn elementor trên thiết bị di dộng

Mình click vào tiêu đề => Vào Tab Style => Đổi lại cỡ chữ

cách sửa thành phần elementor trên di động

Bạn sẽ tự hỏi là khi đổi cỡ chữ bên thiết bị di động, thì bên máy tính có đổi theo không?

Không nhé!

Cỡ chữ mình mới giảm lại bên di động, nhưng bên máy tính nó vẫn giữ như ban đầu

Bạn có thể chỉnh sửa riêng cho máy tính và di động

Xem trước trang

Bạn làm tiếp, vọc vạch hoàn thiện một trang hoàn chỉnh thử nhé.

Trong khi làm, bạn muốn xem trước xem nó có ổn không thì vào biểu tượng con mắt

cách chỉnh sửa trang elementor trên thiết bị di động

Lưu nháp, đăng & cập nhật trang

Vài thao tác khác mà bạn cần biết:

Lưu nháp trang bạn đang thiết kế

lưu nháp save draft

Đăng trang để hiển thị công khai => Publish

Cập nhật để các thay đổi bạn vừa làm được lưu lại => Update

Trang mới tạo mới có nút Publish. Bạn đã bấm nó một lần rồi, thì nó đổi thành Update nhé

Lưu mẫu trang vào thư viện để dùng về sau

Sau khi bạn dựng hoàn thiện một trang bằng Elementor, và “Wow! Tuyệt!”, bạn có thể sẽ muốn dùng tiếp mẫu trang đó về sau.

Thì hãy lưu nó lại trong thư viện Elementor

lưu trang elementor như một mẫu template

lưu trang elementor thành mẫu template trong thư viện dùng về sau

Sau này khi bạn muốn dùng mẫu này cho một trang khác, bạn vào thư viện => My template => Insert rồi chỉnh sửa lại chút là ok.

Quá tiện đúng không bạn?!

Sử dụng Elementor để làm Free Landing Page

Mình dùng Elementor nhiều nhất là ở các Landing Page

  • Để giới thiệu các khóa học kinh doanh, bán hàng online
  • Giới thiệu dịch vụ Marketing

Bên cạnh đó là để layout các trang chủ website đẹp & chuyên nghiệp

Mình có hướng dẫn cách tạo landing page miễn phí, bạn tham khảo ở đó nhé

[Review] Elementor Pro – Giá cả & sức mạnh của nó

Giờ là review về Elementor Pro.

Bản Elementor có tính phí này thực sự mạnh mẽ để giúp bạn tạo website với wordpress cực kỳ đẹp & chuyên nghiệp

Xem các chức năng trong bản tính phí

Bạn có thể dựng toàn bộ website, các trang (pages), bài viết trên blog WordPress với Elementor

Tùy ý kéo thả & chỉnh sửa các thành phần dễ dàng.

Elementor Pro giúp bạn tạo các trang sản phẩm trong WooCommerce cho website bán hàng wordpress rất đẹp.

Dựng các Landing Page với Elementor Pro

Elementor Pro có các thành phần mà trong bản miễn phí bị khóa không xài được

các thành phần trong elementor pro

 

Kết

Hy vọng hướng dẫn này sẽ giúp bạn dễ dàng tự tạo được các trang như homepage, landing page trên website wordpress đẹp & chuyên nghiệp.

Mình đã cố cover toàn bộ các thứ bạn cần ở đây, nếu có chỗ nào đó mình bỏ sót, và bạn thấy vướng,

… để lại câu hỏi của bạn dưới comment nhé, Đức sẽ rep bạn sớm

Nếu hướng dẫn này cũng hữu ích cho ai đó khác, bạn share giúp mình nhé (thanks bạn!)

 

Cheers!

Hoàng Việt Đức

Group Facebook: Khởi Nghiệp Kinh Doanh –  Học Tập & Chia Sẻ

Youtube: Hoàng Việt Đức Youtube Channel


Tags


Có thể bạn quan tâm ...

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Bạn cần Đức hỗ trợ gì không?

Đức có dịch vụ Coaching 1-1 các lĩnh vực. Nếu bạn muốn kinh doanh online, kiếm tiền nhanh hơn. Bạn cân nhắc tham gia nhé ...

  • [Coaching 1-1 Online] Chiến lược bắt đầu kinh doanh online ít rủi ro
  • [Coaching 1-1 Online] Facebook Advertising Master
  • [Coaching 1-1 Online] Viết Blog kiếm tiền với  Affiliate Marketing
Tên bạn*
Email*
Tin nhắn
0 of 350
>