Bạn có muốn tạo thanh trượt toàn màn hình với Divi ?
Thanh trượt Toàn màn hình có thể hoạt động rất tốt với vai trò là tiêu đề của trang chủ của bạn. Website.
Khía cạnh toàn màn hình duy trì một cách có hệ thống nội dung quan trọng trong màn hình đầu tiên. Và chức năng thanh trượt cho phép người dùng xem nội dung bổ sung mà không cần phải cuộn trang.
Tạo thanh trượt toàn màn hình với Divi dễ làm một cách đáng ngạc nhiên. Điều quan trọng là cung cấp cho thanh trượt của bạn một chiều cao so với chiều cao của trình duyệt, sau đó loại bỏ bất kỳ hạn chế bổ sung nào về lề và chiều rộng trên hàng hoặc phần chính.
Chỉ trong vài phút, bạn có thể tạo thanh trượt toàn màn hình mở rộng để lấp đầy toàn bộ màn hình khi tải trang và trông tuyệt vời trên tất cả các thiết bị.
Chúng ta hãy bắt đầu.
khảo sát
Dưới đây là tổng quan ngắn gọn về thanh trượt mà chúng tôi sẽ tạo trong hướng dẫn này.
Tạo một trang mới với Divi Builder
Trong bảng điều khiển WordPress, hãy truy cập Trang> Thêm mới
Đặt một tiêu đề phù hợp với bạn và nhấp vào 'Sử dụng Divi Xây dựng'
Cuối cùng, bấm vào 'Bắt đầu xây dựng'
Sau đó, bạn sẽ có một trang trống để bắt đầu thiết kế trong Divi.
Tạo thanh trượt toàn màn hình trong Divi
Cấu hình phần và dòng
Để bắt đầu, hãy thêm một hàng một cột vào phần.
lề phần
Trước khi thêm mô-đun, hãy mở cài đặt phần, chuyển đến tab Thiết kế, kéo tùy chọn xuống Khoảng cách và thay đổi cài đặt như sau:
- Đệm (Trên và Dưới): 0px
Cài đặt dòng
Tiếp theo, mở cài đặt dòng và cập nhật phần sau trong tab Thiết kế :
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
- Đệm (Trên và Dưới): 0px
Với tất cả các cài đặt này, bây giờ chúng ta có thể chuyển sang tạo Thanh trượt thực tế.
Tạo thanh trượt toàn màn hình
Để tạo thanh trượt toàn màn hình, hãy thêm mô-đun Thanh trượt mới vào hàng.
Thêm hình ảnh vào mỗi trang chiếu
Trước khi cập nhật cài đặt trang trình bày chung, hãy mở cài đặt trang trình bày đầu tiên mặc định
Thêm hình ảnh và hình nền vào trang chiếu. Đối với ví dụ này, chúng tôi đang sử dụng cùng một hình ảnh cho hình ảnh trang chiếu và hình ảnh nền (khoảng 1920px x 1500px).
Sau đó, mở cài đặt cho trang trình bày thứ hai
Thêm hình ảnh và hình nền khác với hình trước đó vào trang chiếu.
Lưu ý rằng bạn có thể thêm bao nhiêu trang trình bày tùy thích.
Cập nhật cài đặt thanh trượt
Bây giờ mỗi trang trình bày riêng lẻ có một hình ảnh và hình nền duy nhất, chúng tôi đã sẵn sàng cập nhật cài đặt thanh trượt nói chung.
Quay lại cài đặt thanh trượt và cập nhật phần sau trong tab Thiết kế :
Che
- Sử dụng lớp phủ nền: CÓ
- Màu lớp phủ nền: rgba (27,18,38,0.74)
Hộp bóng
- Box Shadow Style: Xem Chụp (1)
- Hộp Shadow (Ngang và Dọc) Vị trí: -8vw
- Sức mạnh lan truyền của Box Shadow: -6,5 vw
- Màu bóng: # cf1259
Tiêu đề văn bản
Chỉnh sửa cài đặt tiêu đề
- Phông chữ tiêu đề: Montserrat
- Độ đậm phông chữ tiêu đề: Cực đậm
- Kích thước văn bản: 5vw (máy tính để bàn), 40px (máy tính bảng và điện thoại)
bài kiểm tra cơ thể
Chỉnh sửa cài đặt văn bản mô tả như sau:
- Trọng lượng phông chữ trong cơ thể: Bán đậm
- Kích thước văn bản nội dung: 16px
- Chiều cao dòng: 1.8 em
Kiểu nút
- Sử dụng kiểu tùy chỉnh cho nút: CÓ
- Kích thước văn bản nút: 16px
- Nền: # cf1259
- Chiều rộng đường viền: 0px
- Bán kính đường viền: 0px
- Độ đậm phông chữ: Bold
- Kiểu phông chữ: TT
- Đệm (Trên và Dưới): 15px
- Đệm (Trái và Phải): 30px
Chiều cao thanh trượt và chiều rộng nội dung
- Chiều rộng tối đa của nội dung: 90%
- Chiều cao tối thiểu: 100vh
Đặt thanh trượt có chiều cao tối thiểu là 100vh sẽ đảm bảo rằng thanh trượt kéo dài toàn bộ chiều cao của cửa sổ trình duyệt. Đây là chìa khóa để tạo Slider toàn màn hình.
Thanh trượt sẽ kéo dài toàn bộ chiều rộng của cửa sổ trình duyệt, vì chiều rộng dòng là 100%.
Mũi tên trượt
Trong tab Nâng cao, cập nhật kích thước và vị trí của các mũi tên Thanh trượt bằng cách thêm CSS tùy chỉnh sau vào vùng CSS Trượt Mũi tên :
font-size: 8vw !important;
margin-top: -4vw;
Thao tác này sẽ phóng to các mũi tên Thanh trượt trên kích thước màn hình lớn và thu nhỏ chúng xuống kích thước nhỏ hơn trên thiết bị di động.
Trừ chiều cao tiêu đề khỏi chiều cao Thanh trượt
Nếu bạn có tiêu đề trên trang, Thanh trượt Toàn màn hình sẽ thực sự mở rộng một chút bên dưới cửa sổ trình duyệt.
Điều này là do chiều cao của tiêu đề làm giảm Thanh trượt hiện có chiều cao là 100vh (100% chiều cao của cửa sổ / trình duyệt). Để ngăn Thanh trượt bị đẩy xuống bên dưới chế độ xem của trình duyệt, bạn có thể thêm một hàm CSS calc () để trừ chiều cao của tiêu đề với chiều cao của thanh trượt.
Bạn sẽ cần biết chiều cao của tiêu đề (máy tính để bàn và thiết bị di động) để điều này hoạt động. Nếu bạn đang sử dụng tiêu đề Divi mặc định, chiều cao tiêu đề sẽ là 80px. Do đó, chiều cao của thanh trượt phải là 100vh - 80px.
Để thêm chiều cao tùy chỉnh, hãy mở cài đặt Thanh trượt và thêm CSS tùy chỉnh sau vào phần tử Thanh trượt chính và cả cho mỗi trang chiếu:
min-height: calc(100vh - 80px)!important;
Kết quả cuối cùng
Đây là kết quả cuối cùng.
Tải xuống DIVI ngay bây giờ !!!
Và đây là cách thiết kế trông trên máy tính bảng và điện thoại.
Kết luận
Các bước quan trọng để tạo Thanh trượt toàn màn hình trong Divi là định cấu hình phần và hàng để mở rộng toàn bộ chiều rộng của trình duyệt, sau đó cung cấp cho thanh trượt chiều cao tối thiểu là 100vh.
Nếu đang sử dụng tiêu đề, bạn có thể thêm đoạn mã CSS tùy chỉnh sẽ trừ chiều cao của tiêu đề để đảm bảo thanh trượt toàn màn hình không mở rộng ra ngoài cuối trình duyệt.
Với các bước quan trọng này, bạn có thể tùy chỉnh thêm thanh trượt (và các trang trình bày) theo cách bạn muốn bằng cách sử dụng tất cả các tính năng mạnh mẽ có trong Divi Builder.
Sử dụng nó để tạo các thanh trượt đẹp và hiệu quả lấp đầy bất kỳ màn hình nào trên mọi thiết bị.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
