Làm thế nào để thêm bản đồ Google vào footer của Flatsome?

Để thêm bản đồ Google vào footer của Flatsome, bạn có thể thực hiện theo các bước sau:

1. Lấy Mã Nhúng Bản Đồ Google

1. Truy Cập Google Maps:
   • Mở Google Maps và tìm vị trí bạn muốn hiển thị trên bản đồ.
2. Lấy Mã Nhúng:
   • Nhấp vào nút Share (Chia sẻ) trên Google Maps.
   • Chọn tab Embed a map (Nhúng bản đồ).
   • Chọn kích thước bản đồ bạn muốn và sao chép mã nhúng (iframe) từ ô HTML.

2. Thêm Mã Nhúng Vào Footer của Flatsome

1. Truy Cập Bảng Điều Khiển WordPress:
   • Đăng nhập vào WordPress Dashboard.
2. Chỉnh Sửa Footer:
   • Vào Appearance > Customize để mở Customizer.
   • Chọn Footer (hoặc phần tương tự, tùy vào cấu hình của Flatsome).
3. Thêm Widget hoặc HTML Tùy Chỉnh:
   • Nếu bạn đang sử dụng các widget trong footer, vào Appearance > Widgets và tìm footer widget area.
   • Thêm một Text Widget vào khu vực footer bạn muốn.
4. Chèn Mã Nhúng:
   • Trong widget Text, dán mã nhúng bản đồ Google (iframe) vào ô nội dung của widget.
5. Lưu và Xuất Bản:
   • Nhấp vào Save hoặc Publish để lưu các thay đổi.

3. Tùy Chỉnh Kích Thước và Giao Diện

1. Tùy Chỉnh Kích Thước:
   • Bạn có thể chỉnh sửa kích thước của iframe trong mã nhúng để phù hợp với khu vực footer của bạn. Ví dụ:
     html

     Sao chép mã

     <iframe src="URL_BẢN_ĐỒ" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

   • Thay đổi các giá trị width và height để phù hợp với thiết kế của bạn.
2. Tùy Chỉnh CSS (Nếu Cần):
   • Nếu cần, bạn có thể thêm CSS tùy chỉnh để điều chỉnh giao diện của bản đồ trong footer.
   • Vào Appearance > Customize > Additional CSS và thêm mã CSS tùy chỉnh, ví dụ:
     css

     Sao chép mã

     .footer-map iframe {
width: 100%;
height: 300px;
border: none;
}

   • Sau đó, gán lớp CSS footer-map cho widget chứa iframe.

Lưu Ý

• Tính Tương Thích: Đảm bảo rằng bản đồ hiển thị chính xác trên tất cả các thiết bị và trình duyệt.
• Tối Ưu Di Động: Kiểm tra và điều chỉnh kích thước bản đồ để nó hoạt động tốt trên thiết bị di động.

Bằng cách thực hiện các bước trên, bạn có thể dễ dàng thêm bản đồ Google vào footer của trang web sử dụng Flatsome, cung cấp thông tin vị trí quan trọng cho người dùng.