- Khởi tạo 1 project với Flatsome
- Create a page with uxbuilder
- Dùng plugin Simple Custom CSS and JS
- Add css custom
- Tùy chình lại giao diện
1 Khởi tạo 1 project với Flatsome
Các bạn có thể tham khảo về Flatsome theme tại đường dẫn https://flatsome3.uxthemes.com/
Nếu vẫn chưa biết cách tải theme ở đâu và cài đặt nó lên wordpress như thế nào thì liên hệ mình nhé. Mình sẽ cố gắng làm một bài viết hướng dẫn về nó sớm trên blog này thôi!
2. Create a page with uxbuilder
Đầu tiên cần tạo cho mình một trang trước nhé. Ở đây mình tạo trang Home.
Tiếp theo tạo lần lượt add các element như mình nhé.
Phần Row đầu tiên nhớ chọn như ảnh của mình nhé.
Phần Section nhớ off 2 mục này lại nha
3. Dùng plugin Simple Custom CSS and JS
Cài plucgin và tạo một CSS code. Copy phần code bên dưới của mình vào. Các bạn đừng thắc mắt tại sao không có JS code hay liệu nó có hoạt động không hãy tin mình nhé ?
4. Add css custom
/* Hide scrollbar in Chrome, Safari and Opera */
body::-webkit-scrollbar {
display:none;
}
/* Hide scrollbar for IE, Edge and Firefox / body { -ms-overflow-style: none; / IE and EDGE /; scrollbar-width: none; / Firefox */
}
html, body, section {
block-size: 100%;
}
html {
scroll-snap-type: y mandatory;
}
section {
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex;
align-items: center;
justify-content: center;
}
section:nth-of-type(even) {
color: white;
background: black;
}
section:nth-of-type(odd) {
color: black;
background: white;
}
.container .section, .row .section {
padding-left: 0px;
padding-right: 0px;
}
5. Tùy chình lại giao diện
Tới bước này là đã hoàn thành rồi đấy. Xem video kết quả của mình nào!
Địa chỉ: 356 Gò Dầu, P. Tân Quý, Q.Tân Phú, TP. HCMHotline: 0333.666.484 websiteviet.info@gmail.com