Các hiệu ứng cuộn của Divi mang đến vô số khả năng thiết kế mới cho các trang web bạn tạo. Các tương tác tinh tế mà bạn chọn để thêm thực sự có thể giúp nâng cao giao diện tổng thể của bạn. Website. Mọi thứ thậm chí còn trở nên tốt hơn ngay sau khi bạn đồng bộ hóa các hiệu ứng cuộn. Trong hướng dẫn này, chúng tôi sẽ đặc biệt xử lý việc tạo phần anh hùng va chạm đẹp với các cột trên cuộn. Thiết kế phần anh hùng hợp nhất hai cột khác nhau trên cuộn, do đó giúp nhấn mạnh bản sao.
Kết quả có thể
Bây giờ chúng ta đã đi qua tất cả các bước, chúng ta hãy xem kết quả trên các kích thước màn hình khác nhau.
Tái tạo bố cục của Phần anh hùng
Thêm một phần mới
Tùy chỉnh màu nền
Bắt đầu bằng cách thêm một phần mới vào trang bạn đang làm việc. Mở cài đặt phần và thay đổi màu nền.
- Màu nền: # f4f2f7
khoảng cách
Cũng loại bỏ phần đệm trên và dưới mặc định khỏi tất cả các phần.
- Phần đệm trên: 0px
- Đệm dưới: 0px
Thêm một dòng mới
Cấu trúc cột
Tiếp tục thêm một dòng mới vào phần bằng cấu trúc cột sau:
kích thước
Nếu không thêm các mô-đun, hãy mở các tham số dòng và sửa đổi các tham số kích thước tương ứng:
- Sử dụng chiều rộng máng tùy chỉnh: Có
- Chiều rộng máng xối: 1
- Cân bằng chiều cao cột: Có
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
khoảng cách
Sau đó loại bỏ tất cả các phần đệm trên và dưới mặc định.
- Phần đệm trên: 0px
- Đệm dưới: 0px
tràn
Và ẩn các dòng tràn.
- Tràn ngang: ẩn
- Tràn dọc: ẩn
Cài đặt cột 1
khoảng cách
Sau đó mở cài đặt trong cột 1 và thêm giá trị điền tùy chỉnh.
- Phần đệm trên: 15vw
- Đệm đáy: 10vw
- Đệm trái: 5vw
- Đệm phải: 5vw
Chỉ số Z
Đồng thời tăng chỉ số z của cột.
- Chỉ số Z: 12
Cài đặt cột 2
Hình nền
Tiếp tục bằng cách mở cài đặt trong cột 2 và tải lên một hình nền bạn chọn.
- Kích thước ảnh nền: Bìa
- Vị trí của hình nền: Trung tâm
- Lặp lại hình nền: không lặp lại
- Trộn hình nền: Bình thường
Thêm mô-đun văn bản # 1 vào cột 1
Thêm nội dung H1
Đã đến lúc thêm các mô-đun, bắt đầu với một mô-đun văn bản đầu tiên trong cột 1. Thêm bất kỳ nội dung H1 nào bạn chọn.
Cài đặt văn bản H1
Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản H1 cho phù hợp:
- Phông chữ: Bóng trong ánh sáng
- Trọng lượng phông chữ: đậm
- Màu văn bản tiêu đề: # 000000
- Kích thước văn bản tiêu đề: 6vw (máy tính để bàn), 11vw (máy tính bảng), 13vw (điện thoại)
- Khoảng cách chữ cái đầu trang: -2px
- Chiều cao dòng đầu: 1.2em
khoảng cách
Ngoài ra, thêm một lề trên.
- Lề trên: 10vw
Thêm mô-đun văn bản # 2 vào cột 1
Thêm nội dung
Chèn một mô-đun văn bản khác với nội dung mô tả của sự lựa chọn của bạn.
Cài đặt văn bản
Thay đổi cài đặt văn bản của mô-đun như sau:
- Phông chữ: Mở Sans
- Màu văn bản: # 1e1e1e
- Kích thước văn bản: 0.9vw (máy tính để bàn), 1.9vw (máy tính bảng), 3vw (điện thoại)
- Chiều cao dòng văn bản: 2,4 em
khoảng cách
Và thêm các giá trị lề tùy chỉnh trên các kích thước màn hình khác nhau.
- Lề trên: 4vw (máy tính để bàn), 8vw (máy tính bảng), 12vw (điện thoại)
- Lề dưới: 4vw (máy tính để bàn), 8vw (máy tính bảng), 12vw (điện thoại)
Thêm một mô-đun nút vào cột 1
Thêm một bản sao
Mô-đun tiếp theo và cuối cùng chúng ta cần trong cột này là mô-đun nút. Thêm một bản sao của sự lựa chọn của bạn.
Cài đặt nút
Sửa đổi các tham số của các nút mô-đun như sau:
- Sử dụng kiểu tùy chỉnh cho nút: Có
- Kích thước văn bản nút: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Màu văn bản nút: #ffffff
- Màu nền của nút: # 000000
- Độ rộng đường viền nút: 0px
- Bán kính đường viền nút: 100px
- Nút phông chữ: Mở mà không cần
khoảng cách
Và hoàn thành cài đặt nút bằng cách thêm các giá trị đệm tùy chỉnh trên các kích thước màn hình khác nhau.
- Phần đệm trên: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Đệm dưới: 1vw (bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Lớp đệm bên trái: 3vw (máy tính để bàn), 5vw (máy tính bảng), 7vw (điện thoại)
- Đệm bên phải: 3vw (bàn), 5vw (máy tính bảng), 7vw (điện thoại)
Thêm một mô-đun văn bản vào cột 2
Thêm nội dung
Trong cột thứ hai, mô-đun duy nhất chúng ta cần là mô-đun văn bản. Nhập nội dung bạn chọn.
Cài đặt văn bản
Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản cho phù hợp:
- Phông chữ: bóng trong ánh sáng
- Màu văn bản: rgba (0,0,0,0,25)
- Kích thước văn bản: 9vw (máy tính để bàn), 14vw (máy tính bảng và điện thoại)
- Khoảng cách chữ văn bản: -3px
- Chiều cao của dòng văn bản: 1em
- Căn chỉnh văn bản: trung tâm (văn phòng), bên trái (máy tính bảng và điện thoại)
khoảng cách
Cũng thêm giá trị điền tùy chỉnh.
- Đệm trên: 5vw (bàn),
- Đệm dưới: 60vw (máy tính bảng và điện thoại)
- Đệm trái: 5vw (máy tính bảng và điện thoại)
Áp dụng hình động cuộn
Phần
Tăng và giảm
Khi tất cả các mod của bạn đã sẵn sàng, đã đến lúc áp dụng các hiệu ứng cuộn! Trước tiên, hãy mở các thông số phần và sử dụng hiệu ứng chia tỷ lệ sau:
- Kích hoạt Sclaing từ trên xuống dưới
- Tỷ lệ bắt đầu: 100% (đến 49%)
- Quy mô trung bình:
- Văn phòng: 70% (100%)
- Máy tính bảng và điện thoại: 100% (100%)
- Thang điểm cuối:
- Văn phòng: 70%
- Máy tính bảng và điện thoại: 100%
Cột 1
Chuyển động ngang
Tiếp tục bằng cách mở cài đặt trong cột 1 và sử dụng hiệu ứng di chuyển ngang sau:
- Kích hoạt chuyển động ngang: Có
- Bắt đầu bù: 0
- Giá trị bù trung bình:
- Văn phòng: 0 (ở mức 65%)
- Máy tính bảng và điện thoại: 0 (93%)
- Kết thúc bù:
- Văn phòng: 6
- Máy tính bảng và điện thoại: 0
Tăng và giảm
Đồng thời áp dụng hiệu ứng tăng và giảm tỷ lệ cho cột.
- Cho phép mở rộng quy mô lên và xuống: Có
- Quy mô bắt đầu:
- Văn phòng: 10%
- Máy tính bảng và điện thoại: 100%
- Quy mô trung bình:
- Văn phòng: 90%
- Máy tính bảng và điện thoại: 100%
- Tỷ lệ kết thúc: 100%
Cột 2
Chuyển động ngang
Sau đó mở các tham số trong cột 2 và sử dụng các tham số chuyển động ngang sau:
- Kích hoạt chuyển động ngang: Có
- Bắt đầu bù: 0
- Giá trị bù trung bình:
- Văn phòng: 0 (ở mức 53%)
- Máy tính bảng và điện thoại: 0 (56%)
- Kết thúc bù:
- Văn phòng: -6 (ở mức 53%)
- Máy tính bảng và điện thoại: 0 (100%)
Mất dần trong và ngoài
Hoàn thành cài đặt cột bằng cách thêm hiệu ứng mờ dần và mờ dần.
- Kích hoạt mờ dần trong và ngoài: Có
- Độ mờ ban đầu: 100% (ở mức 47%)
- Độ mờ trung bình:
- Văn phòng: 0% (47%)
- Máy tính bảng và điện thoại: 100% (47%)
- Kết thúc độ mờ:
- Văn phòng: 0%
- Máy tính bảng và điện thoại: 100%
cuối cùng suy nghĩ
Trong bài viết này, chúng tôi đã chỉ cho bạn cách sử dụng hiệu ứng cuộn của Divi một cách sáng tạo để tạo phần anh hùng đụng hàng với cột. Ngay sau khi khách cuộn, hai cột khác nhau và các thành phần của chúng bắt đầu hợp nhất. Đổi lại, điều này sẽ cho phép bạn nhấn mạnh bản sao hơn nữa.
Tài nguyên khác
Đây là danh sách nội dung cho phép bạn làm được nhiều việc hơn với theme WordPress Divi.