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é
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.
Đây là bảng giá được tạo bởi Elementor. Bạn cũng có thể làm nó
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
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
(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é.
Giao diện của nó trông thế này
- Thêm các khối (section) mới cho trang
- Lấy mẫu trang dựng sẵn từ thu việc của Elementor
- Các widget để tạo các thành phần cho trang
- Thanh điều khiển
- Mở các thành phần dựng trang
- 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
- 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í
Thêm section, thành phần mới
Bạn bấm dấu “+” chỗ mũi tên
Bạn sẽ có được một section mới như thế này. Mình đã chọn layout 3 cột
Ý 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ó
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
Còn thế này thì bạn phải nâng cấp lên Elementor Pro mới xài được
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
Nhập email, chọn password rồi bấm Create Account
Kết nối thành công thì nó như thế này
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
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
- 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
- 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 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)
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
Sau khi thêm Text editor & image, nó trông thế này
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 đó.
- 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 tiêu đề
Thay đổi font chữ, màu chữ, làm nổi chữ (text shadow) ở tab Style
- 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
Giờ mình thêm ít khoảng cách cho các thành phần cho nó đẹp lên chút
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
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
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.
Mình chọn Mobile thì cái tiêu đề nó lớn quá
Mình click vào tiêu đề => Vào Tab Style => Đổi lại cỡ chữ
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
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ế
Đă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
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
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
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
