Chắc hẳn nhiều bạn thấy các trang blog bây giờ hay có một cái Nút treo lơ lửng ở chân trang [thường là bên phải] để phục vụ việc quay trở lại đầu trang ngay lập tức, mà không cần phải kéo hay scroll thanh trượt….Nút Back to Top này rất tiện lợi với người dùng, đặc biệt với các bài viết dài, site bị kéo dài và nhiều thông tin. Hoặc site bạn chưa có một Menu được ghim cố định. Và người đọc buộc lòng phải trượt lại đầu trang.
Về cơ bản thì sau khi cài WordPress bạn có thể cần thêm các plugin hoặc các đoạn code tạo nút Call to Action [kêu gọi hành động] để điều hướng khách hàng click vào các nút dẫn đi tới link mà mình mong muốn. Các nút Call to Action có thể hiểu như nút “Mua ngay“, “Gọi ngay cho chúng tôi” hoặc “Liên hệ tư vấn miễn phí“,… được bố trí ở một số vị trí trong website
- KHÓA HỌC
- QUẢNG CÁO AD GOOGLE
- Tổng quan
- Tối ưu
- Kinh nghiệm
- QUẢNG CÁO FACEBOOK AD
- Tổng quan
- Tối ưu
- Kinh nghiệm
- THỦ THUẬT WORDPRESS
- Code cho theme flatsome
- Code WordPress
- QUẢNG CÁO AD GOOGLE
- THIẾT KẾ WEB
- Liên hệ
- Tăng tốc website
- WordPress căn bản
- Thủ thuật máy tính
- Học WordPress
- Code hay cho flatsome
- Plugin nên dùng
- Học Elementor
- Máy in
Elementor, Nâng cao
Posted on 8 Tháng Hai, 2020 by Bố cu Hoàng
Thêm nút Back to top quay trở lại đầu trang từ vị trí bất kì – elementor
- Nhấp vào phần xử lý của phần đầu tiên trên trang của bạn để vào cài đặt của phần đó
- Trên tab Nâng cao của phần , nhập tên vào trường CSS ID, chẳng hạn như ‘trên cùng’
- Kéo tiện ích “Nút”[button] vào trang của bạn, bất cứ nơi nào bạn muốn đặt nó
- Nhập Top vào trường văn bản của nút
- Loại hàng đầu trong lĩnh vực liên kết, hoặc bất cứ CSS ID mà bạn đã chọn ở bước số 2
Nhấp vào nút TOP của bạn bây giờ sẽ đưa người dùng đến phần trên cùng của trang.
5/5 - [1 bình chọn]
- Themes nào tốt nhất với Elementor
- Cách ẩn tiêu đề trang trong WordPress với Elementor
- Gửi mail hoặc gọi điện thoại trực tiếp với chỉ 1 click chuột Elementor
- Yêu cầu cấu hình Elementor để tránh phát sinh lỗi
- Fix lỗi “Thư mục đã tồn tại” trong WordPress
Bài liên quan
- Lỗi Cant edit elementor màn hình trắng
- Hướng dẫn tạo menu mobile Elementor responsive chi tiết nhất
- Cách tạo form nhiều cột
- Sự khác biệt giữa PX, EM, REM,%, VW và VH là gì? – Elementor
- Cách hiển thị Menu Hamburger trên máy tính để bàn
- Quay trở lại phiên bản trước của Elementor
Hướng dẫn tạo sticky header, header trượt khi cuộn trang
Dịch các element trong elementor cực đơn giản
One thought on “Thêm nút Back to top quay trở lại đầu trang từ vị trí bất kì – elementor”
- Chung says: Tôi thấy bài viết hay và ý nghĩa
Trả lời
Email của bạn sẽ không được hiển thị công khai.
Bình luận
Tên
Trang web
Δ
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". [Ví dụ: thiệp tân linh mục giuseart]. Tìm kiếm ngay
Chào các bạn, bữa trước mình có share code tạo các nút hữu ích phía dưới chân trang cho website WordPress rồi phải không? Hôm nay mình tiếp tục chia sẻ một đoạn code khá hay để tạo Float menu [menu nổi] bằng HTML, CSS và JavaScript, mời các bạn cùng theo dõi.
Code này mình tạo và test chạy tốt trên theme Flatsome, WordPress 4.9.8. Do đó, bài viết sẽ hướng dẫn các bạn thực hiện trên theme Flatsome nhé, những bạn không dùng theme Flatsome thì chỉ cần quan tâm đến file footer.php thôi [Giao diện > Sửa – chọn file footer.php]. Về cơ bản, giao diện Float menu sau khi thực hiện xong sẽ như hình ảnh dưới đây:
Link xem demo
Bài viết này mình không giải thích quá nhiều vì chủ yếu code HTML và CSS thôi, phần này cơ bản rồi. Do đó, mình chỉ note các bước làm cho cụ thể để ngay cả những ai không biết HTML hoặc CSS cũng có thể chỉ cần copy paste là sử dụng được.
Bước 1: Tắt nút back to top mặc định
Vì trong đoạn code của chúng ta có nút “Lên đầu” nên mình cần tắt nút Back to top mặc định của theme đi. Thực chất thì để cả hai vẫn hoạt động được nhưng nhìn nó trùng nhau nên sẽ rất xấu. Hoặc bạn nào muốn dùng nút Back to top mặc định thì dùng, rồi xóa nút “Lên đầu” trong đoạn code của mình đi.
Đối với các theme khác, tùy theme có hỗ trợ nút Back to top hay không thì mình không rõ, nhưng dối với theme Flatsome, các bạn vào Giao diện > Tùy chỉnh > Footer > Bỏ dấu tick ở Back to top button
Bước 2: Chèn ID đầu trang
Để nút Back to top hoạt động hiệu quả thì mình cần thêm một ID đặt trong đoạn HTML đầu trang. Trong theme Flatsome chúng ta vào Giao diện > Tùy chỉnh > Header > HTML > HTML1
Bên trong HTML 1 các bạn muốn viết gì vào đó cũng được, dùng thẻ
gì cũng được, miễn sao nhét cho mình một cái id=”tên_id” vào đó nhé! Lưu ý: nhớ tên của ID để lát nữa mình đặt trong link của nút “Lên đầu” nhé!
Bước 3: Chèn code tạo Float menu vào giao diện
Đối với các theme khác, bạn vào Quản trị > Giao diện – Sửa – Footer.php và paste đoạn code vào ngay sau thẻ đóng , trước thẻ đóng .
Đối với theme Flatsome, bạn copy và paste đoạn code vào Flatsome – Advanced – Global setting – Footer Scripts.
Tất cả đoạn code cần chèn vào được tổng hợp tại đây:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
$[document].ready[function[] {
$["a[href*='#']:not[[href='#]]"].click[function[] {
let target \= $[this].attr["href"];
$['html,body'].stop[].animate[{
scrollTop: $[target].offset[].top
}, 1000];
event.preventDefault[];
}];
}];
.menu-float-right {
width: 100px;
position: fixed;
top: 35%;
right: 0;
z-index: 99999;
}
.menu-float-right
group {
position: absolute;
right: 0px;
}
.menu-float-right ul {
padding: 0;
}
.menu-float-right
group ul li {
background:
5eb509;
position: relative;
border-radius: 3px;
border: 1px solid
fff;
list-style: none;
margin-bottom: 10px;
}
.menu-float-right
group ul li img {
width: 57px;
border-radius: 5px;
}
.menu-float-right
group ul li .mo-ta {
font-size: 9px;
text-align: center;
color: rgb[255, 255, 255];
position: absolute;
width: 90%;
left: 5%;
bottom: 5%;
margin-bottom: 0px;
}
Màu xanh: Sửa liên kết của menu. Ví dụ: ở demo mình để tiêu đề là Bảng giá và có liên kết tới trang Hướng dẫn thanh toán [/huong-dan-thanh-toan].
Riêng nút “Lên đầu”, thẻ của nó phải có liên kết dạng href=”
tên_id”. Các bạn lấy ID mới tạo ở bước 01 nhập vào đây nhé!
Màu vàng: Sửa liên kết hình ảnh icon. Mặc định các icon mình đang để link tại demo web của NinhBinhWeb.net dẫn sang. Trong một số trường hợp các bạn cài SSL nó báo lỗi không bật xanh https thì chắc chắn do phần này. Các bạn buộc phải tải icon về, upload lên host của các bạn rồi thay sửa link vào phần mình bôi màu vàng đó là được.
Màu đỏ: Chính là tên của các menu tùy chỉnh trên Float menu.
Bước 5: Sửa CSS để trang trí cho Float menu
Mình đã trang trí sẵn cho Float menu cũng khá đẹp rồi. Tuy nhiên, trong một số trường hợp các bạn cần thay đổi màu sắc hoặc kích thước chữ theo nhu cầu riêng, thì các bạn có thể sửa các thuộc tính css trong cặp thẻ nhé!
Cụ thể, thay đổi màu nền giống nhau cho các items, chỉnh mã màu trong thuộc tính background của .menu-float-right
group ul li{}.
Trường hợp muốn sửa màu của từng items riêng, mình cũng có đặt class riêng cho từng menu items rồi nhé! Chỉnh thoải mái!
Nếu bạn muốn ẩn Float menu trên mobile thì thêm @media[max-width: 767px] {.menu-float-right{display:none}} vào trong cặp thẻ nhé!
Bước 4: Save all change
Bước cuối cùng sau khi thêm sửa nội dung cho Float menu chính là Save all Change. Lưu lại và ra trang chủ hưởng thụ thành quả thôi các bạn ơi!