Hướng dẫn sử dụng Widget – Google Maps

09/09/2025
270 lượt xem
5/5 - (1 đánh giá)
Chia sẻ qua

Cách sử dụng tiện ích Google Maps

1. Các tiện ích Widgets trong Elementor

Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.

Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:

  • Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
  • Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
  • Advanced (Nâng cao): Các tùy chọn nâng cao như:
    • Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
    • Z-index: Thứ tự hiển thị của các lớp phần tử.
    • CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
    • Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
    • Background: Màu nền, hình ảnh nền, gradient.
    • Border: Đường viền.
    • Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
    • Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
    • Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.

2. Tiện ích Google Maps là gì ?

Tiện ích này giúp bạn nhúng bản đồ Google vào trang web của mình để hiển thị vị trí doanh nghiệp, địa điểm sự kiện, hoặc bất kỳ địa điểm nào bạn muốn.

3. Các bước sử dụng tiện ích Google Maps

Bước 1. Chỉnh sửa nội dung

Đây là nơi bạn thiết lập địa điểm hiển thị trên bản đồ và các tùy chọn cơ bản của bản đồ.

Image4

1. Vị trí (Location):

Image7

  • Đây là ô quan trọng nhất. Bạn cần nhập địa chỉ hoặc tên địa điểm mà bạn muốn hiển thị trên bản đồ.
  • Ví dụ: như trên hình tôi để địa chỉ là: Mỹ Đình – Nam Từ Liêm – Hà Nội
  • Elementor sẽ tự động tìm kiếm và hiển thị vị trí tương ứng trên bản đồ.

2. Thu phóng (Zoom):

Image10

  • Thanh trượt này cho phép bạn điều chỉnh mức độ phóng to/thu nhỏ của bản đồ.
  • Kéo thanh trượt sang phải để phóng to (nhìn rõ chi tiết hơn), và sang trái để thu nhỏ (nhìn được khu vực rộng hơn).
  • Giá trị càng lớn (ví dụ: 15-20), bản đồ càng phóng to. Giá trị càng nhỏ (ví dụ: 5-10), bản đồ càng thu nhỏ.
  • Trong hình bạn gửi, mức thu phóng đang là 10.

3. Chiều cao (Height):

Image9

  • Ô này cho phép bạn đặt chiều cao của khung bản đồ theo đơn vị pixel (px).
  • Nhập một số vào đây để thay đổi chiều cao của bản đồ. Ví dụ: 400 để có bản đồ cao 400px.
  • Bạn cũng có thể nhấp vào biểu tượng bên cạnh “px” để chuyển sang đơn vị % (phần trăm) hoặc vh (viewport height – theo chiều cao màn hình), nhưng px là phổ biến nhất cho chiều cao cố định của bản đồ.

Bước 2. Chỉnh sửa kiểu hiển thị

Tiện ích Google Maps không có nhiều tùy chọn định kiểu trực tiếp như màu sắc văn bản hay phông chữ, vì bản thân nó là một bản đồ. Tuy nhiên, nó có thể có các tùy chọn về đường viền hoặc bóng đổ cho khung bản đồ.

1. CSS Filters (Bộ lọc CSS):

Image6

  • Đây là tùy chọn nâng cao cho phép bạn thay đổi giao diện của bản đồ bằng các hiệu ứng như:
    • Blur (Làm mờ): Làm mờ bản đồ.
    • Brightness (Độ sáng): Điều chỉnh độ sáng của bản đồ.
    • Contrast (Độ tương phản): Điều chỉnh độ tương phản của bản đồ.
    • Saturation (Độ bão hòa): Điều chỉnh độ bão hòa màu sắc của bản đồ.
    • Hue (Sắc độ): Thay đổi sắc độ màu của bản đồ.
  • Bạn có thể kéo các thanh trượt để xem hiệu ứng. Thường được dùng để làm cho bản đồ phù hợp hơn với tông màu tổng thể của trang web.

2. Transition Duration (Thời gian chuyển đổi):

Image2

  • Thời gian hiệu ứng chuyển đổi khi di chuột qua (thường không áp dụng nhiều cho bản đồ tĩnh).

3. Border Type (Loại đường viền):

  • Bạn có thể thêm đường viền cho khung bản đồ.
    • None (Không): Không có đường viền.
    • Solid (Đặc): Đường viền liền nét.
    • Double, Dotted, Dashed: Các kiểu đường viền khác.
  • Width (Độ dày): Độ dày của đường viền.
  • Color (Màu sắc): Màu của đường viền.

4. Border Radius (Bán kính bo tròn):

  • Giúp bạn bo tròn các góc của khung bản đồ. Giá trị càng lớn, các góc càng tròn.

5. Box Shadow (Bóng đổ):

  • Tạo hiệu ứng bóng đổ cho toàn bộ khung bản đồ.

6. Opacity (Độ mờ đục):

  • Điều chỉnh độ trong suốt của bản đồ.

Bước 3. Chỉnh sửa nâng cao

Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của bản đồ.

1. Bố cục (Layout):

Image5

  • Căn chỉnh (Alignment): Căn chỉnh bản đồ sang trái, phải hoặc giữa cột chứa nó.
  • Chiều rộng (Width): Bạn có thể đặt chiều rộng của bản đồ theo phần trăm (%) hoặc pixel (PX).
  • Chiều rộng tối đa (Max Width): Đặt chiều rộng tối đa mà bản đồ có thể đạt được.

2. Lề và Khoảng đệm (Margin & Padding):

  • Lề (Margin): Khoảng cách bên ngoài tiện ích bản đồ với các phần tử khác xung quanh. Bạn có thể điều chỉnh lề trên, dưới, trái, phải.
  • Khoảng đệm (Padding): Khoảng cách bên trong tiện ích, giữa đường viền của tiện ích và nội dung bản đồ.

3. Z-index:

  • Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.

4. CSS ID & CSS Classes:

  • Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bản đồ bằng mã CSS riêng.

5. Hiệu ứng chuyển động (Motion Effects):

  • Hiệu ứng khi vào (Entrance Animation): Chọn hiệu ứng xuất hiện cho bản đồ khi trang được tải.
  • Hiệu ứng cuộn (Scrolling Effects): Tạo các hiệu ứng khi người dùng cuộn trang.
  • Hiệu ứng chuột (Mouse Effects): Tạo các hiệu ứng khi di chuột qua tiện ích.

6. Nền (Background):

  • Bạn có thể thêm màu nền hoặc hình nền cho vùng chứa tiện ích bản đồ.

7. Đường viền (Border):

  • Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa tiện ích (khác với đường viền cho riêng bản đồ).

8. Mặt nạ (Mask):

  • Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho tiện ích.

9. Khả năng đáp ứng (Responsive):

  • Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn bản đồ trên các loại thiết bị khác nhau nếu không cần thiết hoặc muốn thay thế bằng một giải pháp khác cho thiết bị nhỏ.

10. Thuộc tính (Attributes):

  • Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ tiện ích.

11.CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):

  • Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của bản đồ một cách nâng cao.
5/5 - (1 đánh giá)
Bài viết liên quan

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đang tải...