[Ad_1]
Đi thôi.
khảo sát
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh kết quả trên các kích thước màn hình khác nhau.
Văn phòng
di động
Tải xuống bố cục MIỄN PHÍ
Để có được bố cục miễn phí, trước tiên bạn cần tải chúng xuống bằng cách sử dụng nút bên dưới. Để truy cập tải xuống, bạn cần đăng ký danh sách gửi thư Divi Daily của chúng tôi bằng cách sử dụng hình thức phía dưới. Là người đăng ký mới, bạn sẽ nhận được nhiều lợi ích Divi hơn nữa và gói Bố cục Divi miễn phí vào mỗi Thứ Hai! Nếu bạn đã có trong danh sách, chỉ cần nhập địa chỉ email của bạn vào bên dưới và nhấp vào tải xuống. Bạn sẽ không được "đăng ký lại" hoặc nhận thêm email.
Hãy bắt đầu tạo lại!
Thêm 2 lần phần giữ chỗ
Thêm một phần mới
Bắt đầu bằng cách thêm phần giữ chỗ vào trang bạn đang làm việc.
kích thước
Mở cài đặt phần và thay đổi chiều cao trong cài đặt định cỡ.
Phần nhân bản
Sao chép phần một lần. Điều này để lại cho bạn hai phần giữ chỗ trên trang của bạn. Các phần giữ chỗ này sẽ giúp bạn thấy hiệu ứng cuối cùng sau khi xem qua hướng dẫn. Trên một trang web trực tiếp, các phần giữ chỗ sẽ được thay thế bằng các phần bình thường mà bạn sử dụng trên toàn trang.
Thêm phần mới giữa các phần giữ chỗ
Khi các phần trình giữ chỗ đã có, hãy thêm một phần mới vào giữa các phần trình giữ chỗ.
Màu nền
Mở cài đặt phần và sử dụng màu nền trắng.
- Màu nền: #ffffff
khoảng cách
Chuyển sang tab thiết kế phần và thay đổi các giá trị phần đệm trên cùng và dưới cùng cho phù hợp:
- Lớp đệm trên cùng: 10vh
- Đệm dưới cùng: 10vh
Thêm dòng số 1
Cấu trúc cột
Tiếp tục bằng cách thêm một hàng mới vào phần bằng cách sử dụng cấu trúc cột sau:
kích thước
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng, chuyển đến cài đặt định cỡ và thay đổi giá trị chiều rộng và chiều rộng tối đa.
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
Thêm một mô-đun văn bản vào cột
Thêm một bản sao
Mô-đun duy nhất chúng ta cần cho dòng này là mô-đun văn bản. Thêm một bản sao của sự lựa chọn của bạ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ữ văn bản: Montserrat
- Trọng lượng phông chữ văn bản: Cực đậm
- Kiểu phông chữ văn bản: chữ hoa
- Màu văn bản: # fff2ea
- Kích thước văn bản: 11vw
- Chiều cao dòng văn bản: 1 em
- Căn chỉnh văn bản: Căn giữa
Thêm dòng số 2
Cấu trúc cột
Thêm một hàng khác vào phần bằng cách sử dụng cấu trúc cột sau:
kích thước
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thay đổi cài đặt định cỡ như sau:
- Sử dụng chiều rộng máng xối tùy chỉnh: Có
- Chiều rộng máng xối: 2
- Chiều rộng: 90%
- Căn chỉnh dòng: Căn giữa
Thêm mô-đun hình ảnh vào cột
Tải lên một hình ảnh
Thêm mô-đun hình ảnh vào cột hàng. Tải lên hình ảnh bạn chọn.
sự liên kết
Chuyển sang tab thiết kế mô-đun và thay đổi căn chỉnh hình ảnh cho phù hợp:
kích thước
Sau đó, chuyển đến cài đặt định cỡ và buộc toàn bộ chiều rộng trên mô-đun.
Thêm một mô-đun nút vào cột
Thêm một bản sao
Mô-đun tiếp theo và cuối cùng mà chúng tôi sẽ thêm vào cột là mô-đun nút. Sử dụng một bản sao của sự lựa chọn của bạn.
Căn chỉnh nút
Chuyển đến tab Thiết kế và thay đổi căn chỉnh nút.
Cài đặt nút
Sau đó tạo kiểu cho nút như sau:
- Sử dụng các kiểu tùy chỉnh cho nút: Có
- Kích thước văn bản nút: 16px
- Màu văn bản của nút: # 000000
- Màu nền của nút: #ffffff
- Chiều rộng đường viền nút: 0px
- Khoảng cách giữa các ký tự nút: 2px
- Phông chữ nút: Montserrat
- Độ đậm của phông chữ nút: đậm
- Kiểu phông chữ nút: chữ hoa
khoảng cách
Đồng thời sử dụng các giá trị đệm tùy chỉnh trong cài đặt khoảng cách.
- Phần đệm trên cùng: 20px
- Phần đệm dưới cùng: 20px
- Phần đệm bên trái: 5%
- Phần đệm bên phải: 5%
Thêm định vị tuyệt đối vào dòng 1
Khi bạn đã hoàn thành hàng thứ hai, hãy quay lại hàng số 1. Mở cài đặt hàng, chuyển đến tab nâng cao và đặt phần này là tuyệt đối. Bằng cách này, dòng và mô-đun văn bản bên trong sẽ được đặt bên dưới dòng chứa mô-đun hình ảnh.
- Chức vụ: Tuyệt đối
- Vị trí: Trung tâm
Sao chép hàng n ° 1 và đặt bản sao dưới hàng n ° 2
Để cho phép mô-đun văn bản xuất hiện phía trên hình ảnh, chúng tôi sẽ cần một hàng khác có giá trị z-index cao hơn. Sao chép hàng đầu tiên và đặt bản sao bên dưới hàng thứ hai.
Áp dụng hiệu ứng cho hàng số 3
Tăng chỉ số Z
Mở hàng trùng lặp và thay đổi chỉ mục z trong tab nâng cao.
Thay đổi màu văn bản
Mở mô-đun văn bản trong hàng và thay đổi màu văn bản.
Áp dụng chế độ hòa trộn cho dòng
Sau đó, mở cài đặt hàng và thay đổi chế độ hòa trộn trong cài đặt bộ lọc.
Sử dụng hiệu ứng cuộn trên mô-đun văn bản ở hàng # 3
Thêm hiệu ứng mờ dần và mờ dần
Hoàn thành hướng dẫn bằng cách mở lại nhóm văn bản, chuyển đến hiệu ứng cuộn và bật hiệu ứng mờ dần và mờ dần. Đó là nó!
- Cho phép làm mờ dần và mờ dần: Có
- Độ mờ bắt đầu: 0%
- Độ mờ trung bình: 0% (đến 26%)
- Độ mờ cuối cùng: 100% (ở mức 28%)
- Kích hoạt hiệu ứng chuyển động: Giữa phần tử
khảo sát
Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem xét lần cuối cùng xem nó trông như thế nào trên các kích thước màn hình khác nhau.
Văn phòng
di động
cuối cùng suy nghĩ
Trong bài viết này, chúng tôi đã hướng dẫn bạn cách sáng tạo với các hiệu ứng cuộn tích hợp của Divi. Cụ thể, chúng tôi đã hướng dẫn bạn cách xáo trộn bản sao cuộn. Lúc đầu, bản sao dường như nằm bên dưới hình ảnh. Sau khi cuộn, bản sao được hiển thị phía trên hình ảnh và hợp nhất với hình ảnh. Bạn cũng có thể tải xuống tệp JSON miễn phí! Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, đừng ngại để lại bình luận trong phần bình luận bên dưới.
Nếu bạn muốn tìm hiểu thêm về Divi và nhận thêm quà tặng Divi, hãy nhớ đăng ký kênh của chúng tôi bản tin qua email và đến của chúng tôi Kênh YouTube để bạn luôn là một trong những người đầu tiên biết đến và tận dụng nội dung miễn phí này.
[Ad_2]