Hướng Dẫn Sử Dụng Các Widget Cơ Bản Của Elementor

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

 

Widget cơ bản của Elementor có cung cấp tùy chỉnh thiết kế nâng cao để bạn hoàn thiện Website của mình mà không cần cài đặt thêm Plugin khác.

hướng dẫn cách sử dụng các widget cơ bản của Elementor
Elementor cung cấp khá nhiều các Widget hữu ích

Với nhiều Widget hữu ích, Elementor giúp bạn tùy biến và tăng sự chuyên nghiệp, đẹp mắt của Website. Sau đây, tôi sẽ giới thiệu với mọi người các Widget cơ bản của Elementor.

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

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

Chi tiết về các tính năng chính của Elementor

Spacer Widget

Các Spacer Widget tạo ra một khối không gian tại bất cứ nơi nào trên trang của bạn. Bạn có thể lấp đầy khối không gian này bằng màu sắc hoặc hình ảnh. Bạn cũng có thể sử dụng Spacer Widget để tạo ra các hình dạng và Elements thú vị.

spacer widget

Bạn vào mục tùy chỉnh Spacer, kéo chọn lượng không gian theo chiều dọc (tính bằng Pixel) tại mục Space.

Image Box Widget

Tiện ích Image Box cho phép bạn thêm một hộp hình ảnh để kết hợp hình ảnh với một tiêu đề và văn bản. Nó thường được sử dụng trong tính năng Section như một sự thay thế cho việc sử dụng Icon Box Widget. Cụ thể, Widget này cho phép bạn tùy chỉnh nội dung, Style và một số tùy chỉnh nâng cao khác.

  • Nội dung: Bạn có thể chọn hình ảnh, tùy chỉnh kích thước, vị trí hình ảnh, nhập tiêu đề và mô tả, URL, thẻ HTML tiêu đề.
  • Style: Cho phép bạn tùy chỉnh khoảng cách giữa hình ảnh và tiêu đề, bộ lọc CSS, thời lượng chuyển tiếp ảnh,…

Với Image Carousel Widget, bạn có thể thêm các thư viện vào trang của mình, tạo băng chuyền ba cột và băng chuyền hình ảnh dạng thư viện.

  • Nội dung: Tại đây, bạn có thể chọn và tùy chỉnh kích thước hình ảnh, chọn số lượng trang để hiển thị cùng một lúc, liên kết hình ảnh với tệp Media tương ứng, thêm chú thích hình ảnh, tiêu đề, mô tả,…
  • Tại Tab Style, bạn có thể tùy chỉnh Icon (như mũi tên) để chuyển tiếp hình ảnh.

Accordion Widget

Accordion Widget elementor

Đây là một Widget cơ bản của Elementor được sử dụng để hiển thị văn bản trong các Tab có thể thu gọn. Điều này giúp bạn tiết kiệm không gian mà vẫn thể hiện nội dung đầy đủ. Với Accordion, khách truy cập có thể chọn và mở xem một mục họ quan tâm chứ không cần lướt cả bài viết mới đến nội dung mình cần.

Tôi khuyến khích bạn sử dụng tiện ích này để trang Web trông gọn gàng hơn. Khi một trang được tải, mục đầu tiên của tiện ích Accordion sẽ được mở rộng, trong khi tất cả các mục khác vẫn được thu gọn. 

Testimonial Widget

Với Testimonial Widget, bạn có thể thêm và tạo kiểu cho lời chứng thực, đánh giá một cách dễ dàng mà không cần thêm Plugin của bên thứ ba.

  • Trong phần Content, bạn nhập nội dung đánh giá, tải hình ảnh, tên người đưa ra đánh giá,…
  • Bạn có thể tùy chỉnh kiểu chữ, màu văn bản, kiểu đường viền,… trong Tab Style.

Social Icons Widget

Social Icons Widget cho phép bạn thêm biểu tượng liên kết đến tất cả các tài khoản mạng xã hội. Với tiện ích này, bạn có toàn quyền kiểm soát sự xuất hiện của các Social Icon của mình.

  • Tại mục nội dung, bạn có thể thêm Social Icon, nhập URL liên kết đến mạng xã hội, chọn hình dạng, căn chỉnh biểu tượng,… 
  • Style: Tại đây, bạn có thể chọn màu, kích thước, khoảng cách giữa các Icon,…
Social Icons Widget elementor

Toggle Widget

Toggle Widget cho phép bạn tạo hộp văn bản có tùy chọn xổ xuống đẹp mắt. Người truy cập sẽ thấy tiêu đề của từng hạng mục trong hộp văn bản. Điều này cho phép bạn hiển thị nội dung của mình dưới dạng cô đọng, gọn gàng. Khách truy cập không phải cuộn qua một trang dài và có thể xem qua các tiêu đề một cách dễ dàng. Với tiện ích Toggle, bạn có thể mở rộng nhiều mục mong muốn cùng một lúc.

Sidebar là Widget cơ bản của Elementor cho phép thêm thanh bên của chủ đề vào trang. Bạn đi tới Nội dung, nhấp vào Thanh bên (Sidebar), bạn chọn tiếp Chọn Thanh bên (Choose Sidebar) từ Menu xổ xuống và chọn một Sidebar để hiển thị trên trang.

Sidebar Widget elementor

Icon Box Widget

Icon Box rất tiện dụng khi bạn xây dựng trang Web. Cách sử dụng phổ biến nhất của Widget này là dùng cho các Sections liệt kê các tính năng của sản phẩm/dịch vụ. Bạn có để tùy chỉnh mọi thành phần của tiện ích này như biểu tượng, dòng tiêu đề và mô tả. 

  • Tab nội dung: Bạn có toàn quyền kiểm soát nội dung của tiện ích. Bạn có thể tùy chỉnh chế độ xem, tiêu đề và mô tả, thẻ tiêu đề HTML,…
  • Tab Style: Cho phép bạn chọn Icon, màu sắc, khoảng cách của các Icon,…

Text Editor Widget

Tiện ích Text Editor là một trình soạn thảo TinyMCE WYSIWYG hoạt động giống như trình soạn thảo trực quan cổ điển của WordPress. Bạn có thể nhập Rich Text, hình ảnh và thậm chí cả mã ngắn WordPress.

Ngoài các tính năng thường xuất hiện trên trình chỉnh sửa TinyMCE, tiện ích này cũng cung cấp cho bạn nhiều tùy chọn tạo kiểu cho phép bạn thay đổi độ đậm phông chữ, độ cao dòng, khoảng cách chữ cái, căn chỉnh,…

Button Widget

Button Widget giúp bạn dễ dàng thiết kế và tùy chỉnh các nút mà không cần Plugin hoặc Shortcodes khác.

Tại Tab nội dung bạn có thể chọn kích thước, loại nút, nhập văn bản của nút, liên kết URL cho nút,…

Trong Tab Style, bạn có thể tùy chỉnh kiểu chữ, màu văn bản, màu nền, loại đường viền,…

Button Widget trong elementor

Alert Widget

Các Alert Widget cho phép bạn hiển thị một hộp cảnh báo để gây chú ý với người dùng đến một thông điệp quan trọng.

Tại mục nội dung, bạn có thể chọn loại hộp cảnh báo, nhập tiêu đề, mô tả, hiện hoặc ẩn nút loại bỏ (X),…

Đối với mục phong cách (Style), bạn có thể chọn màu nền của hộp cảnh báo, màu văn bản, kiểu chữ, màu, chiều rộng đường viền,…

Inner Section Widget (formerly Columns Widget)

Bạn có thể sử dụng tiện ích Inner Section để tạo các cột lồng nhau trong một Section. Bằng cách này, bạn có thể tạo các bố cục phức tạp, đẹp mắt cho trang.

  • Kéo tiện ích Inner Section vào cột của bạn.
  • Theo mặc định, bạn sẽ thấy một phần có hai cột.
  • Bạn có thể thêm hoặc xóa cột bằng cách nhấp chuột phải vào Icon điều khiển cột.
  • Bạn có thể kéo và thả tiện ích Inner Section vào bất kỳ cột nào trên trang của mình, nhưng nó không thể được sử dụng trong Inner Section khác.

Bây giờ, bạn có thể tạo kiểu cho Inner Section giống như cách bạn tạo kiểu cho một Section.

HTML Widget

Bên trong HTML Widget, bạn có thể nhúng HTML, CSS, mã ngắn và các tập lệnh JS. Ngoài ra, bạn còn có thể đặt các tùy chọn nâng cao như Margin, Padding, Z-index, ID CSS,…

html widget của elementor

Icon List Widget

Với Widget này, bạn có thể dễ dàng tạo ra danh sách các mặt hàng với từng hạng mục nổi bật bằng biểu tượng riêng của mình.

  • Tại Tab nội dung, bạn có thể tùy chỉnh hiển thị các mục trong danh sách theo chiều dọc hoặc ngang, chọn Icon cho mục, nhập URL liên kết của mặt hàng,…
  • Trong Tab Style, bạn có thể căn chỉnh danh sách sang phải, trái, hoặc giữa, chọn màu của văn bản, Icon,…

Đây là một Widget cơ bản trong Elementor mà tôi đánh giá khá cao. Nó cho phép bạn dễ dàng thiết kế và thêm kho hình ảnh đẹp trên Website.

  • Trong phần nội dung: Cho phép bạn chọn hình ảnh hiển thị. Sau đó, bạn có thể chỉnh kích thước ảnh, chọn số cột hiển thị (từ 1 đến 10). Ngoài ra, bạn còn có thể liên kết hình ảnh với tệp Media, trang đính kèm mình muốn,…
  • Bạn có thể chọn loại đường viền, đặt khoảng cách giữa các Slide tại Tab Style. Hơn thế nữa, bạn còn có thể ẩn hoặc hiển thị phụ đề, căn chỉnh chú thích, chọn màu văn bản kiểu chữ của văn bản phụ đề,…

SoundCloud Widget

Với SoundCloud Widget, bạn có thể nhúng Clip âm thanh từ SoundCloud. Tiện ích này có hai Tab chính là Nội dung (Content) và Nâng cao (Advanced).

Trong phần Nội dung, bạn nhập URL SoundCloud muốn thêm vào trang. Bên cạnh đó, bạn chọn xem âm thanh có được tự động phát khi người dùng tải trang hay không. Bạn có thể chọn hiển thị các nút mua, thích, tải xuống, chia sẻ, nhận xét,…

soundcloud widget của elementor

Read More Widget

Elementor hỗ trợ thẻ WordPress ‘<! – more–>’ giúp xác định văn bản xem trước được hiển thị cho các bài đăng trên Blog trong các trang lưu trữ. Ngoài ra, bạn có thể thêm tiện ích Read More vào các bài đăng do Elementor thiết kế để đặt điểm giới hạn cho các bài đăng Blog trên các trang lưu trữ WordPress. Bạn có thể thiết lập văn bản liên kết cho nút Read More như Đọc thêm, Tiếp tục đọc,…

Tabs Widget

Các Tabs Widget cho phép bạn phân chia nội dung vào các Tab theo chiều ngang hoặc chiều dọc.

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

  • Mục Tab: Nhập tiêu đề và nội dung cho mỗi Tab.
  • Thêm mục: Nhấp vào nút Thêm mục để thêm một Tab khác
  • Loại: Chọn Tab ngang hoặc dọc.

Với Tab Style, bạn có thể tùy chỉnh màu, chiều rộng đường viền, màu nền cho các Tab, màu tiêu đề, kiểu chữ,…

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

Star Rating Widget

Tôi nghĩ bạn không nên bỏ qua tiện ích tuyệt vời này. Nó cho phép hiển thị xếp hạng dưới dạng các ngôi sao trong nội dung của bạn. Cả nhãn và các ngôi sao đều có thể tùy chỉnh hoàn toàn về kích thước, màu sắc và kiểu chữ.

Bạn có thể vào Tab nội dung, chọn thang điểm từ 0 đến 5 hoặc 0 đến 10. Bên cạnh đó, bạn có thể chọn loại biểu tượng để sử dụng, nhập tiêu đề, căn chỉnh cho xếp hạng,… 

Với Tab Style, bạn có thể chọn kiểu chữ, kiểm soát khoảng cách giữa tiêu đề và các Icon, thay đổi kích thước, màu sắc của các ngôi sao,…

Shortcode Widget

Thêm mã ngắn bằng Shortcode Widget sẽ thuận tiện, tiết kiệm thời gian hơn vì bạn có thể xem mã ngắn trông như thế nào mà không cần chuyển đến chế độ xem trước. Thông qua tiện ích này, bạn cũng có thể thêm nội dung chuyên biệt dễ dàng hơn nhiều.

Có nhiều cách sử dụng cho mã ngắn như thêm biểu mẫu liên hệ 7, tiện ích Twitter hoặc bất kỳ API trang Web nào.

Heading Widget

Heading Widget cho phép bạn tạo tiêu đề đẹp mắt cho trang của bạn. Trong Tab Nội dung, bạn nhập văn bản Heading, liên kết tiêu đề với một URL. Tại đây, bạn cũng có thể thay đổi kích thước, căn chỉnh tiêu đề,…

Tại Tab Style, bạn chọn màu văn bản tiêu đề, kiểu chữ tiêu đề, xem bản Demo Blend Mode,…

Tiện ích Menu Anchor cho phép bạn tạo một trang có điều hướng cuộn mượt mà. Tôi sẽ hướng dẫn bạn sử dụng tiện ích này. Tại Tab nội dung, bạn thực hiện theo các bước sau:

  • Bạn kéo tiện ích Menu Anchor lên đầu khu vực bạn muốn liên kết cuộn đến. Tuy nhiên, tôi muốn lưu ý với bạn là tiện ích sẽ không chiếm dung lượng thực và không hiển thị đối với khách truy cập.
  • Đặt tên cho Anchor.
  • Bạn chỉnh sửa Menu hoặc phần tử tiện ích con sẽ liên kết với Anchor của bạn.
  • Nhập ‘#’ + tên liên kết (ví dụ: # contact-us) trong trường liên kết URL của mục Menu hoặc phần tử tiện ích. Bạn cần lưu ý liên kết ID chỉ chấp nhận các ký tự từ A-Z, a-z, số từ 0-9, _,
cách sử dụng Menu Anchor Widget của elementor

Video Widget

Đây là Widget cơ bản của Elementor giúp bạn dễ dàng nhúng Video vào trang. Trong mục Content, bạn chọn nguồn Video như Vimeo, Youtube, Dailymotion,… Ngoài ra, bạn có thể nhập URL của Video, đặt thời gian bắt đầu và kết thúc cho Video của bạn. Riêng tại Tab Style, bạn có thể tùy chỉnh tỷ lệ khung hình Video (1: 1, 3: 2, 4: 3, 16: 9, 21: 9 và 9:16). Bên cạnh đó, bạn có thể thiết lập độ mờ, độ sáng, độ tương phản, độ bão hòa và màu sắc cho Video,…

Image Widget

Hình ảnh đóng một vai trò quan trọng trong thiết kế Web, vì vậy tôi tin rằng bạn sẽ sử dụng tiện ích này rất nhiều. Trong Tab Content của Image Widget, bạn có thể thực hiện các tùy chỉnh sau:

  • Tải hình ảnh lên hoặc chọn sử dụng hình ảnh nổi bật của bài đăng, ảnh Hồ sơ Tác giả,…
  • Kích thước, căn chỉnh hình ảnh.
  • Thêm chú thích vào cuối hình ảnh. 
  • Đặt liên kết đến URL tùy chỉnh,…

Với Tab Style, bạn có thể tùy chỉnh chiều rộng hình ảnh, bộ lọc CSS (làm mờ, độ sáng, độ tương phản, độ bão hòa), thời lượng chuyển đổi, kiểu đường viền,…

Google Maps Widget

Google Maps Widget giúp bạn nhúng Google Maps vào trang Web một cách dễ dàng. Điều này rất hữu ích cho các trang liên hệ. Nhờ tiện ích này khách truy cập có thể biết địa chỉ của doanh nghiệp bạn đang ở đâu.

Progress Bar Widget

Widget này cho phép bạn thêm Progress Bar (thanh tiến trình biểu thị tiến độ hoàn thành công việc, hoặc mức độ hài lòng,…) vào trang của bạn.

Trong Tab Nội dung, bạn nhập văn bản tiêu đề được hiển thị phía trên thanh tiến trình. Sau đó, bạn chọn một loại tiêu chuẩn, đặt màu thanh, đặt số phần trăm hoàn thành,…

Với Tab Style, bạn có thể thay đổi màu của Progress Bar, chọn kiểu chữ, màu của văn bản sẽ được hiển thị trong thanh,…

Divider Widget

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

Với Divider Widget, bạn có thể thêm các đường ngang để phân chia nội dung trên trang. 

Bạn có thể chọn Line tiêu chuẩn với các hiệu ứng độc đáo, hoặc chọn từ hơn 25 bộ Dividers SVG để tạo kiểu dáng thiết kế nâng cao. Ngoài ra, bạn có thể đưa văn bản hoặc Icon vào trước, sau hoặc ở giữa dải phân cách.

Counter Widget

Với tôi, Widget cơ bản của Elementor này khá đặc biệt. Nó cho phép bạn thêm một các con số đếm đẹp mắt vào trang.

Bạn tìm tiện ích Counter trong Elementor, sau đó tùy chỉnh theo ý muốn trong Tab Content và Style. Theo đó, bạn có thể đặt số bắt đầu, số kết thúc của bộ đếm, nhập văn bản xuất hiện trước số (nếu có). Ngoài ra, bạn còn có thể thiết lập thời để hoạt ảnh đang chạy hoàn thành, chọn màu của số, kiểu chữ cho văn bản tiêu đề,…

Icon Widget

Icon Widget rất hữu ích cho việc hiển thị các biểu tượng FontAwesome theo nhiều phong cách trên trang của bạn. Bạn có thể chọn 3 chế độ xem khác nhau cho tiện ích: Mặc định (Default), Xếp chồng (Stacked) và Có khung (Framed).

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 cơ bản 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