Hướng dẫn tạo Module tính năng icon contact có chứa các icon liên kết nhanh tới các mạng xã hội như: facebook, zalo….

Vị trí được đính cố định góc phải màn hình, căn giữa màn hình theo trục thẳng.

Chèn đoạn code sau vào nơi cần hiển thị, trong Header hoặc Footer

<div class='zubi-icon-support'>

<a target="_blank" href='https://www.messenger.com/t/zubi.cloud'>
<img src='https://www.triplegoddesign.com/wp-content/uploads/2025/01/messenger-icon.png'/>
</a>

<a target="_blank" href='https://zalo.me/0357341710'>
<img src='https://www.triplegoddesign.com/wp-content/uploads/2025/01/zalo-icon.png'/>
</a>


<a target="_blank" href='https://www.instagram.com/'>
<img src='https://www.triplegoddesign.com/wp-content/uploads/2025/01/instagram-icon.png'/>
</a>

<a target="_blank" href='#'>
<img src='https://www.triplegoddesign.com/wp-content/uploads/2025/01/map-icon.png'/>
</a>

</div>

<style>
.zubi-icon-support {
position: fixed;
right: 10px;
top: 40%;
width: 45px;
overflow: hidden;
z-index: 999;
}
.zubi-icon-support a {
background: #5e3c23;
width: 100%;
height: 45px;
overflow: hidden;
float: left;
border-radius: 100%;
padding: 10px;
margin: 3px 0;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
}
</style>

Hướng dẫn sửa thay thế đường dẫn link trong chức năng icon contact, sử dụng Elementor

Đầu tiên chọn sửa Footer như ảnh dưới

Nhấp vào vùng số 1, tiếp theo chỉnh sửa thay thế ở vùng số 2

Thay thế các link nằm trong href=”Link cần thay thế”

• Link nhấp dẫn tới chát Facebook có dạng: https://www.messenger.com/t/zubi.cloud
• Link nhấp gửi email: mailto: zubicloud@gmail.com
• Link nhấp gọi số điện thoại: tel:012345678
• Link nhấp dẫn tới Zalo: https://zalo.me/012345678

Xong hãy nhớ bấm nút cập nhật để lưu lại