Chia css

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

Chia css
Elementor cung cấp khá nhiều Widget hữu ích

Với nhiều Widget hữu ích, Elementor giúp bạn tùy biến và nâng cao tính 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

You can you 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 tạo ra một khối không gian ở bất kỳ nơi nào trên trang của bạn. Bạn có thể xóa toàn bộ không gian khối 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 định dạng và phần tử thú vị

Chia css

Bạn vào mục tùy chọn Chỉnh sửa Spacer, kéo chọn khoảng thời gian không gian theo chiều dọc (tính bằng Pixel) tại mục Space

Hộp hình ảnh tiện ích cho phép bạn thêm một hộp hình ảnh để kết hợp hình ảnh với tiêu đề và văn bản. Nó thường được sử dụng trong các tính năng Mục 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, Kiểu dáng 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ẻ tiêu đề HTML
  • Phong cách. 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 Phương tiện 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 Biểu tượng (như mũi tên) để chuyển tiếp hình ảnh

Chia css

Đâ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 thời gian mà vẫn có thể hiện nội dung đầy đủ. Với Accordion, khách truy cập có thể chọn và mở xem 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 xuống, 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.  

Với Tiện ích chứng thực, 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 Nội dung, 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 chữ, kiểu đường viền,… trong Tab Style

Tiện ích biểu tượng xã hội 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 tra sự xuất hiện của các Biểu tượng xã hội của mình

  • Tại mục nội dung, bạn có thể thêm Biểu tượng xã hội, nhập URL liên kết đến mạng xã hội, chọn định dạng, căn chỉnh biểu tượng,…
  • Phong cách. Tại đây, bạn có thể chọn màu sắc, kích thước, khoảng cách giữa các Icon,…

Chia css

Toggle Widget cho phép bạn tạo hộp văn bản có tùy chọn xổ số đẹ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

Thanh bên là tiện ích cơ bản của Elementor cho phép thêm thanh bên của chủ đề vào trang. Bạn truy cập 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ổ số và chọn một Thanh bên để hiển thị trên trang

>>> Tìm hiểu chi tiết. Thanh bên WordPress là gì

Chia css

Icon Box rất tiện ích khi bạn xây dựng trang Web. Cách sử dụng biến phổ biến nhất của Widget này được sử dụng cho các Mục liệt kê các tính năng của sản phẩm/dịch vụ. Bạn có thể 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ả.  

  • Nội dung tab. Bạn có toàn quyền kiểm tra 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,…
  • Kiểu tab. Cho phép bạn chọn Biểu tượng, màu sắc, khoảng cách của các Biểu tượng,…

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òn 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 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, URL liên kết 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, kiểu đường viền,…

Chia css

Widget cảnh báo cho phép bạn hiển thị một hộp cảnh báo để gây chú ý cho người dùng đến một thông báo 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 sắc, chiều rộng đường viền,…

Bạn có thể sử dụng Inner Section tiện ích để 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 Inner Section tiện ích 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 Biểu tượng điều khiển cột
  • Bạn có thể kéo và thả Phần bên trong tiện ích 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 Phần bên trong khác

Bây giờ, bạn có thể tạo kiểu cho Phần bên trong giống như cách bạn tạo kiểu cho một Phần

Bên trong HTML Widget, bạn có thể nhúng HTML, CSS, short code và JS file. 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,…

Chia css

Với Widget này, bạn có thể dễ dàng tạo 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 Biểu tượng 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, Biểu tượng,…

Đâ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

  • In the content section. Cho phép bạn chọn hình ảnh hiển thị. Sau đó, bạn có thể chỉnh sửa 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 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 phụ đề văn bản,,…

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 (Nội dung) và Nâng cao (Nâng cao)

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ó 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,...

Chia css

Elementor hỗ trợ thẻ WordPress ‘’ 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 Đọc thêm 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 Đọc thêm như Đọc thêm, Tiếp tục đọc,…

The 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
  • Add item. Nhấn 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 sắc, chiều rộng đường viền, màu nền cho Tab, màu tiêu đề, kiểu chữ,...

Chia css

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 các loại biểu tượng để sử dụng, nhập tiêu đề, căn chỉnh để xếp hạng,…

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

Thêm mã rút ngắn bằng Widget mã ngắn sẽ thuận tiện, tiết kiệm thời gian tiết kiệm hơn vì bạn có thể xem mã rút ngắn 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 để rút ngắn mã như biểu mẫu liên hệ 7, tiện ích Twitter hoặc bất kỳ API trang web nào

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,…

Menu tiện ích 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 Menu tiện ích Neo 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 truy cập của khách
  • Đặ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 tiện ích. Bạn cần lưu ý ID liên kết chỉ chấp nhận các ký tự từ A-Z, a-z, số từ 0-9, _,

Chia css

Đâ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 Nội dung, bạn chọn các 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 Rate frame 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à độ sắc nét cho Video,…

Hình ảnh đóng một vai trò chơi quan trọng trong Web thiết kế, 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 of Image Widget, bạn có thể thực hiện các tùy chỉnh sau

  • Tải ảnh lên hoặc chọn sử dụng ả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 tùy chỉnh URL,,…

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 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

Widget này cho phép bạn thêm Progress Bar (thanh tiến trình biểu thị tiến trình 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 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,…

Chia css

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 Dòng tiêu chuẩn với các hiệu ứng độc đáo, hoặc chọn từ hơn 25 bộ Dải phân cách 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 Biểu tượng vào trước, sau hoặc giữa dải phân cách

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 số đếm đẹp mắt vào trang

Bạn tìm thấy Bộ đếm tiện ích 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 gian để hoạt động ảnh đang chạy hoàn tất, chọn màu của số, kiểu chữ cho tiêu đề văn bản,,…

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)

You can you quan tâm

Dịch vụ lưu trữ WordPress – giải pháp toàn diện cho nền tảng trang web 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 cho các bạn