Thêm hotline bên trái trong flatsome

06/10/2021 02:02 601

Bài viết này anh chị làm theo sẽ được kết quả như bên dưới:

Table of Contents

1. Mã html

Vào Flatsome -> advanced -> Footer Scripts, thêm mã sau nhớ chỉnh số điện thoại cũng nhưng facebook… thành của bạn nha

<div class="sidebar-support">
		<a href="tel:099999999">
		<div class="item-support" style="background: #dd3333">
				<img src="https://fcwordpress.net/wp-content/uploads/2021/10/phoneicon.png" alt="099999999" >099 999 999			
		</div>
	</a>
		<a href="#">
		<div class="item-support" style="background: #1e73be">
				<img src="https://fcwordpress.net/wp-content/uploads/2021/10/fbicon.png" alt="Facebook">Facebook			
		</div>
	</a>
		<a href="#">
		<div class="item-support" style="background: #1e73be">
				<img src="https://fcwordpress.net/wp-content/uploads/2021/10/tik.png" alt="Tiktok" >Tiktok			
		</div>
	</a>
		<a href="#">
		<div class="item-support" style="background: #1e73be">
				<img src="https://fcwordpress.net/wp-content/uploads/2021/10/yt.png" alt="Youtube" >Youtube			
		</div>
	</a>
	</div>

<img src="https://fcwordpress.net/wp-content/uploads/2021/10/phoneicon.png" alt="099999999" >099 999 999

</div>

</a>

<img src="https://fcwordpress.net/wp-content/uploads/2021/10/fbicon.png" alt="Facebook">Facebook

</div>

</a>

<img src="https://fcwordpress.net/wp-content/uploads/2021/10/tik.png" alt="Tiktok" >Tiktok

</div>

</a>

<img src="https://fcwordpress.net/wp-content/uploads/2021/10/yt.png" alt="Youtube" >Youtube

</div>

</a>

</div>

2. Thêm mã css

Vào Flatsome -> advanced ->Header Scripts, copy mã sau vào:

<style>
.sidebar-support {
    position: fixed;
    bottom: 200px;
    z-index: 9999;
}

.item-support {
    margin-top: 10px;
    height: 45px;
    padding: 5px;
    border-radius: 0 99px 99px 0;
    width: 170px;
    text-align: right;
    line-height: 35px;
    margin-left: -125px;
    transition: .5s;
}

.item-support img {
    float: right;
    height: 35px;
    background: #fff;
    padding: 5px;
    border-radius: 50%;
    margin-left: 10px;
}

.siderbar_support a {
    color: #fff !important;
}

.item-support:hover {
    margin-left: 0;
    transition: .5s;
}
</style>

<style>

.sidebar-support {

position: fixed;

bottom: 200px;

z-index: 9999;

}

.item-support {

margin-top: 10px;

height: 45px;

padding: 5px;

border-radius: 0 99px 99px 0;

width: 170px;

text-align: right;

line-height: 35px;

margin-left: -125px;

transition: .5s;

}

.item-support img {

float: right;

height: 35px;

background: #fff;

padding: 5px;

border-radius: 50%;

margin-left: 10px;

}

.siderbar_support a {

color: #fff !important;

}

.item-support:hover {

margin-left: 0;

transition: .5s;

}

</style>

Các bài viết khác có thể hữu ích với bạn

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Css bổ sung cho vertical menu flatsome [ 10/04/2023 12:44 ]
Thêm breadcrumb cho flatsome [ 11/10/2021 07:53 ]
Thêm nút add to cart và mua ngay hiện khi scroll xuống dưới cho flatsome [ 25/08/2020 09:10 ]
Css mũi tên cho nút on sale trong flatsome [ 25/08/2020 02:44 ]
Thêm custom hook vào flatsome (add custom hook into flatsome) [ 21/08/2020 07:23 ]

Thêm hotline bên trái trong flatsome

1. Mã html

2. Thêm mã css

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)