Hướng Dẫn Sử Dụng Các Widget Nâng Cao Của Elementor

NghiemVo 19/01/2021 72 lượt xem

 

Các Widget nâng cao của Elementor bao gồm các tùy chọn mở rộng cho phép bạn tùy chỉnh trang Web hoàn hảo, có nhiều tính năng, hiệu ứng đặc biệt hơn.

Hướng Dẫn Sử Dụng Các Widget Nâng Cao Của Elementor
Các Widget nâng cao cho phép các tùy chinh với hiệu ứng, tính năng đặc biệt hơn

Elementor là một trình Page Builder kéo và thả cho Website WordPress. Để trang của bạn độc đáo hơn các trang tiêu chuẩn, đừng bỏ qua Widget nâng cao trong Elementor.

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

Hướng dẫn cách cài đặt và cấu hình Plugin Elementor

Hướng dẫn sử dụng các Widget cơ bản của Elementor

Lottie Widget (Pro)

Tiện ích Lottie được hiển thị từ các tệp .Json. Bạn chỉ cần tải lên hoặc tham chiếu tệp .Json bên ngoài và điều chỉnh theo ý muốn. Bạn tìm Widget này trên Elementor và tùy chỉnh trong Tab Content và Style. Trong mục Content, bạn có thể chọn nguồn của tệp Lottie, tệp Media hoặc URL bên ngoài, tải lên tệp JSON,… Đối với mục Style, bạn tùy chỉnh chiều rộng, độ mờ của phần tử,…

Lottie Widget của elementor

WooCommerce Single: Product Stock (Pro)

Đây là Widget nâng cao trong Elementor cho phép bạn hiển thị và tạo kiểu Thông tin kho sản phẩm trên Mẫu WooCommerce Single. Trong Page Builder Elementor, bạn tìm WooCommerce Single: Product Stock. Tiếp đó, bạn có thể tùy chỉnh Font chữ, màu sắc văn bản,… trong Tab Style.

Tuy nhiên, tôi muốn nhắc các bạn một điểm đặc biệt là Tab Style này thường bị ảnh hưởng bởi chủ đề và Plugin của bạn. Nếu bạn gặp bất kỳ vấn đề nào như vậy, hãy thử chuyển sang chủ đề cơ bản và hủy kích hoạt các Plugin liên quan. Hoặc bạn có thể điều chỉnh Styling trong phần cài đặt chủ đề.

Tiện ích nâng cao tiếp theo tôi muốn giới thiệu là Media Carousel. Nó cho phép bạn tạo một thanh trượt của Video và hình ảnh. Tiện ích bao gồm 3 giao diện:

  • Slideshow: Là giao diện thanh trượt hiển thị một Slide chính và các hình Thumbnail nhỏ bên dưới.
  • Carousel: Là giao diện băng chuyền xoay, hiển thị số lượng Slide hình ảnh hoặc Video tùy chỉnh cho mỗi lần xem. 
  • Coverflow: là giao diện hiển thị một Slide chính ở trung tâm, nằm phía trước và hai Slide ở hai bên nằm chìm phía sau. Người dùng có thể trượt để xem hình ảnh. 

Login Widget (Pro)

hướng dẫn sử dụng Login Widget của elementor

Login Widget giúp bạn dễ dàng tạo một trang đăng nhập có thể tùy chỉnh thay vì trang đăng nhập WordPress mặc định. Để thêm trang đăng nhập vào WordPress, bạn tạo hiển thị hoặc ẩn Label biểu mẫu, màu, Font văn bản,…theo ý muốn.

Facebook Like Button Widget (Pro)

Với Facebook Like Button, một Widget nâng cao của Elementor, bạn có thể thêm nút thích trên Facebook vào trang Web để khách truy cập có thể Like các bài đăng của bạn. Bạn vào Tab nội dung của tiện ích, chọn một loại nút, đặt kích thước, màu sắc của nút, hiển thị ảnh hồ sơ,…

WooCommerce Single: Product Content (Pro)

Nhờ Widget nâng cao này, bạn có thể dễ dàng tạo Product Content trên mẫu WooCommerce Single. Thông qua Tab Style, bạn có thể căn chỉnh nội dung sản phẩm sang phải, trái, chính giữa hoặc căn đều, chọn màu của văn bản, tùy chọn kiểu chữ cho văn bản Product Content.

WooCommerce Archive Title (Pro)

Tiện ích này cho phép bạn kiểm soát kiểu và bố cục của WooCommerce Archive Title

Trong Tab Nội dung, bạn có thể tùy chỉnh các mục sau:

  • Tiêu đề: Được tạo động tự động
  • Liên kết: Nhập URL cho liên kết của mặt hàng.
  • Kích thước: Bạn có thể chọn kích thước mặc định, nhỏ, trung bình, lớn, XL, XXL.
  • Thẻ HTML: Tại đây, bạn có thể chọn thẻ HTML để sử dụng cho Tiêu đề, từ H1 đến H6 hoặc Div, Span hoặc P.
  • Alignment: Bạn có thể căn chỉnh Tiêu đề sang trái, phải, chính giữa hoặc căn đều.

Tại Tab Style, bạn có thể chỉnh sửa những mục sau:

  • Màu của văn bản.
  • Tùy chọn kiểu chữ cho văn bản.
  • Text Shadow: Thêm bóng và hiệu ứng mờ cho văn bản.
  • Blend Mode: Chọn từ nhiều hiệu ứng bao gồm Normal, Multiply, Screen, Overlay,…
WooCommerce Archive Title của elementor

Global Widget (Pro)

Global Widget là tiện ích nâng cao tiếp theo mà tôi muốn đề cập đến. Nó cho phép bạn toàn quyền kiểm soát một Widget cụ thể được hiển thị trong nhiều vị trí trên trang Web của bạn. Bạn chỉ cần chỉnh sửa ở một nơi, phần còn lại của tiện ích sẽ ngay lập tức được tự động cập nhật. 

Giả sử bạn đã chỉnh sửa và thiết kế tiện ích Testimonial trên một trang. Bây giờ, bạn muốn sử dụng nó trên nhiều trang khác trên Website của mình. Bạn chỉ cần lưu nó dưới dạng Global Widget và sau đó kéo Widget mới của bạn vào bất kỳ trang nào mình muốn. Sau đó, bạn có thể chỉnh sửa tất cả chúng cùng một lúc bằng cách chỉnh sửa Global Widget. 

Sau đây, tôi sẽ hướng dẫn bạn tạo một Global Widget:

  • Bạn nhấp chuột phải vào biểu tượng bút chì và nhấp vào Lưu dưới dạng Global (Save As A Global).
  • Tiếp đến, bạn đặt tên cho mẫu Global mới và nhấp vào nút Lưu.

WooCommerce Product Categories (Pro)

Với tiện ích nâng cao này, bạn có thể hiển thị lưới danh mục sản phẩm WooCommerce ở bất kỳ đâu trên trang Web của bạn. Sau khi thêm tiện ích, bạn tiến hành tùy chỉnh trong các Tab Content, Style.

Ở Tab Content, bạn có thể thiết lập số cột hiển thị (từ 1 đến 12), nguồn và số lượng danh mục hiển thị, đặt thứ tự mà các danh mục sẽ được hiển thị,… Còn ở Tab Style, bạn có thể thiết lập khoảng cách giữa các cột, hàng, căn chỉnh dữ liệu sản phẩm, chọn màu,kiểu chữ của Tiêu đề,…

Call To Action Widget (Pro)

hướng dẫn sử dụng widget nâng cao call to action của elementor

Call To Action Widget là một công cụ để tạo các Box đẹp mắt bao gồm hình ảnh, văn bản, và một Button. Tiện ích sử dụng hoạt ảnh và hiệu ứng CSS để tạo tương tác của người dùng, xuất hiện khi người dùng di chuột qua Box được tạo.

Slides Widget (Pro)

Các Slides Widget cho phép bạn nhanh chóng tạo Slide một cách hoàn hảo mà không cần biết lập trình.

  • Điều chỉnh trong Tab Nội dung: Danh sách các Slide sẽ hiển thị để bạn lựa chọn. Bạn có thể kéo và thả để thay đổi vị trí của chúng. Khi bạn nhấp vào một Slide, các tùy chọn của nó sẽ mở ra để bạn cài đặt Background, Nội dung và Style.
  • Ở Tab Style: Bạn có thể hiệu chỉnh chiều rộng của nội dung bên trong Slide, căn chỉnh nội dung bên phải, trái hoặc giữa,…
  • Trong Tab Advanced, bạn có thể tùy chỉnh Margin, Z-index, CSS ID,…

Site Logo Widget (Pro)

Site Logo là Widget nâng cao của Elementor cho phép hiển thị các trang Web Logo. Bạn chỉ có thể thay thế hoặc xóa Logo trong trang cài đặt của Elementor hoặc trong trình tùy chỉnh WordPress. Tiện ích Site Logo cho phép bạn thay đổi một số thiết kế nhất định của Logo.

hướng dẫn sử dụng site logo widget của elementor

Sitemap Widget (Pro)

Widget nâng cao tiếp theo tôi muốn đề cập đến là Sitemap Widget. Tiện ích này giúp bạn tạo ra một cấu trúc, tổ chức, Sitemap HTML của trang Web. Nhờ vậy, người dùng và công cụ tìm kiếm có thể dễ dàng hiểu và tìm được Website của bạn.

WooCommerce Single: Add To Cart (Pro)

Bạn có thể chèn nút Add To Cart và kiểm soát bố cục, kiểu dáng của nút trong mẫu WooCommerce Single Template. Bạn có thể căn chỉnh tiêu đề, thay đổi các tùy chọn kiểu chữ cho nút Add To Cart, chọn loại đường viền, thay đổi cài đặt Padding của nút, cài đặt màu nền, màu văn bản của nút,…

Form Widget (Pro)

Hãy thiết lập biểu mẫu liên hệ trên trang Web của bạn để khách truy cập có thể liên hệ với bạn thuận tiện hơn. Dưới đây là các tùy chọn có sẵn cho tiện ích nâng cao này:

  • Tùy chọn nội dung: Bạn có thể chỉnh sửa trường biểu mẫu, nút gửi, hành động sau khi gửi, tùy chọn bổ sung.
  • Tab Style: Tùy chỉnh thiết kế các nút, tin nhắn,…
  • Tùy chọn nâng cao: Cho phép chọn hiệu ứng chuyển động, CSS tùy chỉnh,…

WooCommerce Single: Product Rating (Pro)

Product Rating widget của elementor

Một Widget nâng cao trong Elementor khá thú vị và cần thiết khác mà tôi muốn giới thiệu là Product Rating. Thông qua tiện ích này, bạn có thể tạo mục xếp hạng sản phẩm trong WooCommerce Single Template.

WooCommerce Pages (Pro)

Đây là tiện ích nâng cao giúp hiển thị Trang WooCommerce ở bất kỳ đâu trên trang Web của bạn. Các trang này có thể là Trang Giỏ hàng, Trang Sản phẩm Đơn lẻ, Trang Thanh toán, Biểu mẫu Theo dõi Đơn hàng hoặc Trang Tài khoản của Tôi.

Tại Tabs Nội dung => bạn Click Element => đến mục Page, bạn chọn trang WooCommerce để hiển thị. Nếu bạn chọn Trang sản phẩm duy nhất (Single Product Page), một trường bổ sung sẽ xuất hiện cho phép bạn tìm kiếm và chọn một trang cụ thể để hiển thị.

WooCommerce Single: Product Images (Pro)

Bạn hoàn toàn có thể chọn hình ảnh hoặc thư viện mà bạn muốn hiển thị cho Sản phẩm WooCommerce trong WooCommerce Single Template. Tiện ích gồm các tùy chọn sau:

Kiểu (Style):

  • Hiển thị hoặc ẩn Flash Sale.
  • Chọn loại đường viền.
  • Kiểm soát độ dày, bán kính của đường viền xung quanh hình ảnh chính.
  • Tùy chỉnh màu của đường viền.
  • Điều chỉnh không gian giữa hình ảnh chính và hình thu nhỏ.

Hình thu nhỏ (Thumbnails):

  • Chọn loại đường viền của ảnh thu nhỏ.
  • Kiểm soát độ dày, bán kính của đường viền.
  • Cho phép chọn màu sắc đường viền.
  • Điều chỉnh khoảng cách giữa mỗi hình thu nhỏ.

WooCommerce Single: Product Data Tabs (Pro)

Với Widget này, bạn có thể kiểm soát kiểu Tab dữ liệu sản phẩm (Product Data Tabs) trong mẫu WooCommerce Single. Tại đây, bạn có thể tùy chỉnh căn bản, màu sắc, đường viền,… của Tab, của Heading, Panel.

Search Form Widget

Tiện ích Search Form cho phép thêm một thanh tìm kiếm ở bất cứ nơi nào trên trang Web của bạn. Tôi sẽ liệt kê một số tùy chọn của tiện ích này ngay bên dưới:

  • Tùy chỉnh Form tìm kiếm.
  • Chọn và thay đổi thiết kế của Button hoặc Toggle.
  • Các tùy chọn nâng cao.

Price Table (Pro)

hướng dẫn sử dụng widget nâng cao Price table của elementor

Tiện ích Price Table cho phép bạn tạo ra các bảng giá đẹp mắt, hiện đại cho các sản phẩm, dịch vụ của bạn.

Ở mục Style, bạn sẽ chỉnh sửa Title, Heading, Sub Heading, biểu tượng tiền tệ,… Tại Tab Nội dung, bạn có thể tùy chỉnh tiêu đề, giá cả, Feature, chân trang, Ribbon. Bạn cũng có thể tham khảo một số tùy chỉnh mở rộng khác ở Tab Advanced.

Custom Add To Cart (Pro)

Nếu sở hữu một trang Web bán hàng, tôi khuyến nghị bạn nên sử dụng Widget này. Nó sẽ cho phép bạn thêm nút Add to Cart vào một sản phẩm cụ thể ở bất kỳ đâu trên trang Web. Bạn chỉ cần kéo tiện ích Custom Add to Cart tới bất cứ nơi nào bạn cần.

Với Nav menu Widget, bạn có thể sử dụng các Menu mà bạn đã tạo trong WordPress và thiết kế chúng dưới bất kỳ cách nào mà bạn muốn.

Trong tùy chọn Content, bạn có thể chỉnh sửa bố cục Menu, Cài đặt Menu xổ xuống hiển thị trên điện thoại. Ở tùy chọn Style, bạn có thể chỉnh màu, Font chữ, hiệu ứng cho Menu chính, Menu thả xuống,…

Facebook Page Feed (Pro)

Đây là Widget nâng cao của Elementor mà tôi cho là khá quan trọng và thú vị. Nó cho phép bạn thêm Facebook Page Feed (trước đây có tên là Like Box) vào trang Web của bạn. 

facebook page feed widget của elementor

Một số tùy chọn của tiện ích:

  • Nhập URL trang Facebook của bạn.
  • Chọn giữa Dòng thời gian, Sự kiện và Tin nhắn.
  • Hiển thị Tiêu đề Facebook ở chế độ Narrow View.
  • Hiển thị hoặc ẩn ảnh bìa.
  • Hiển thị ảnh của những người đã thích trang của bạn.
  • Chọn giữa nút CTA chính thức của trang hoặc nút Chia sẻ mặc định.
  • Đặt chiều cao của Box phù hợp từng thiết bị: máy tính để bàn, máy tính bảng và thiết bị di động.

Animated Headline (Pro)

Animated Headline Widget cho phép bạn tạo ra tiêu đề đẹp mắt, thu hút người xem. Bạn có thể tạo Headline dạng Highlighted hoặc Rotating, tùy chỉnh màu sắc, Font chữ của văn bản Headline. Bên cạnh đó, bạn có thể tùy chỉnh Margin, Padding, Z-index, CSS Classes, ID CSS tại Tab Advanced.

Template Widget (Pro)

Đây là tiện ích nâng cao dùng để chèn một Global Template tùy chỉnh vào trang của bạn. Tôi sẽ hướng dẫn bạn sử dụng tiện ích này ngay bên dưới:

  • Từ Tab Nội dung, bạn Click vào mẫu, chọn mẫu mà bạn đã lưu trước đó trong Templates.
  • Sau khi trang được xuất bản, nút chỉnh sửa Mẫu sẽ có sẵn trong các tùy chọn tiện ích. Nếu bạn cần chỉnh sửa mẫu, hãy nhấp vào nút Chỉnh sửa Mẫu để nhanh chóng điều hướng đến mẫu trong Template Library.
Template Widget trong elementor

Facebook Embed Widget (Pro)

Tiện ích giá trị tiếp theo mà tôi muốn nhắc đến là Facebook Embed. Nó cho phép nhúng Video, bài viết, hoặc bình luận Facebook trên trang Web của bạn. 

  • Nhúng bài đăng: Bạn chọn URL sẽ được nhúng vào trang. Tiếp đến, bạn bật Full Post để hiển thị toàn bộ nội dung của bài đăng hoặc tắt chế độ này để hiển thị nội dung bài đăng ngắn hơn.
  • Nhúng Video: Bạn tiến hành chọn URL được nhúng vào trang, bật hoặc tắt chế độ Full Post. Bên cạnh đó, bạn có thể tùy chọn bật hoặc tắt Allow Full Screen, Autoplay, Captions. Các tùy chọn này tương ứng việc cho phép Video ở chế độ toàn màn hình, tự động phát và hiển thị phụ đề.
  • Nhúng nhận xét: Bạn chọn Link sẽ nhúng vào trang, bật Parent Comment nếu muốn cho phép hiển thị nhận xét của phụ huynh.

Testimonial Carousel Widget cho phép bạn hiển thị các đánh giá của khách hàng theo dạng băng chuyền. Bạn còn có thể thêm hình ảnh, tên của khách hàng để lại đánh giá. Tiện ích cũng cho phép bạn tùy chỉnh kiểu chữ, màu sắc của Text, căn chỉnh đánh giá nằm trái, phải hoặc căn đều,…

WooCommerce Single: Product Meta (Pro)

Đây tiếp tục là một Widget mà tôi cho là không thể thiếu với các Website thương mại điện tử. Nó giúp bạn hiển thị và kiểm soát kiểu dáng của dữ liệu Meta của sản phẩm trên Mẫu WooCommerce Single. Bạn có thể dễ dàng đặt các thông số của sản phẩm như màu sắc, chiều cao, trọng lượng,..

Table Of Content (Pro)

hướng dẫn sử dụng widget nâng cao table of content của elementor

Đây là Widget nâng cao của Elementor cho phép tự động sắp xếp nội dung trang của bạn dựa trên phân cấp từ H1 đến H6. Mặc dù quy trình này là tự động, nhưng bạn có nhiều quyền kiểm soát đối với những gì được đưa vào và những gì bị loại khỏi mục lục.

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

WordPress Hosting – giải pháp toàn diện cho các Website nền tảng WordPress

Trên đây là hướng dẫn sử dụng một số Widget nâng cao của Elementor. Hi vọng bài viết sẽ mang đến những thông tin hữu ích đến các bạn!






Bài viết liên quan