Khi thiết kế trang dịch vụ của bạn, bạn muốn đảm bảo rằng khách thông báo tất cả các dịch vụ khác nhau mà bạn cung cấp. Trong nhiều trường hợp, đó sẽ chỉ là một dịch vụ cụ thể mà họ đang tìm kiếm, nhưng nếu bạn cung cấp một cách sắp xếp hợp lý trong cấu trúc dịch vụ của mình thì nhiều khả năng là khách đối phó với tất cả chúng.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sáng tạo với các hiệu ứng cuộn của Divi và tạo ra một quá trình chuyển đổi dịch vụ liền mạch. Bạn cũng sẽ có thể tải xuống tệp JSON miễn phí!
Đi thôi.
Kết quả có thể
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem kết quả trên các kích thước màn hình khác nhau.
1, tái tạo cấu trúc của các yếu tố
Thêm phần # 1
khoảng cách
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 giá trị phần đệm trên các kích thước màn hình khác nhau.
- Phần đệm trên: 80px (máy tính để bàn và máy tính bảng), 0px (điện thoại)
- Đệm dưới: 80px
Thêm một dòng mới
Cấu trúc cột
Tiếp tục thêm một hàng mới bằng cấu trúc cột sau:
kích thước
Không thêm nhiều mô-đun, mở các tham số dòng và áp dụng các thay đổi sau cho tham số kích thước:
- Sử dụng chiều rộng máng tùy chỉnh: Có
- Chiều rộng máng xối: 1
- Chiều rộng: 90%
- Chiều rộng tối đa: 1580px
khoảng cách
Sau đó thêm một lề trên và dưới tùy chỉnh.
- Lề trên: 200px
- Lề dưới: 200px
Thêm một mô-đun văn bản vào cột 1
Thêm nội dung H2
Đã đến lúc thêm mô-đun, bắt đầu bằng mô-đun văn bản trong cột 1. Nhập nội dung H2 tùy bạn chọn.
Cài đặt văn bản H2
Chuyển đến tab thiết kế mô-đun và thay đổi cài đặt văn bản H2 như sau:
- Tiêu đề 2 Cảnh sát: Hàng quý
- Tiêu đề 2 Kích thước văn bản: 80px (máy tính để bàn), 50px (máy tính bảng), 40px (điện thoại)
- Chiều cao của dòng 2 của đầu: 1.2em
khoảng cách
Sau đó thêm một lề dưới trên máy tính bảng và điện thoại.
- Lề dưới: 50 pixel (chỉ máy tính bảng và điện thoại)
Thêm một mô-đun văn bản vào cột 2
Thêm nội dung
Hãy chuyển sang cột thứ hai. Ở đó mô-đun đầu tiên chúng ta cần là một mô-đun văn bản với một định nghĩa nhất định nội dung Sự miêu tả.
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ữ: cabin
- Kiểu chữ văn bản: chữ hoa
- Màu văn bản: # 000000
- Kích thước văn bản: 18px (máy tính để bàn), 15px (máy tính bảng), 13px (điện thoại)
- Khoảng cách chữ văn bản: 3px (máy tính để bàn), 1px (máy tính bảng và điện thoại)
- Chiều cao của dòng văn bản: 3em
Thêm một mô-đun tách vào cột 2
tầm nhìn
Mô-đun tiếp theo và cuối cùng chúng ta cần trong cột này là một mô-đun tách. Đảm bảo rằng tùy chọn “Hiển thị dấu phân cách” được bật.
- Hiển thị dấu phân cách: Có
Dòng
Sau đó thay đổi màu dòng của mô-đun.
- Màu đường kẻ: # 000000
kích thước
Sau đó thực hiện một số thay đổi cho các tham số kích thước.
- Trọng lượng bộ chia: 3px
- Chiều rộng: 28%
khoảng cách
Chúng tôi cũng thêm một lề trên.
- Lề trên: 10px
Thêm phần # 2
khoảng cách
Hãy chuyển sang phần thông thường tiếp theo. Xóa phần đệm trên cùng mặc định khỏi phần.
- Phần đệm trên: 0px
tràn
Cũng che giấu những tràn.
- Tràn ngang: ẩn
- Tràn dọc: ẩn
Thêm một dòng mới
Cấu trúc cột
Tiếp tục thêm một hàng đầu tiên bằng cấu trúc cột sau:
kích thước
Không thêm nhiều mô-đun, mở các tham số dòng, truy cập các tham số kích thước và thực hiện các sửa đổi sau:
- 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: 90%
- Chiều rộng tối đa: 1580px
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
Cài đặt cột 1
Màu nền
Sau đó, mở cài đặt cho cột 1 và thay đổi màu nền.
- Màu nền: # f7f7f7
khoảng cách
Hoàn thành cài đặt cộ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: 200px (bàn), 100px (máy tính bảng và điện thoại)
- Đệm dưới: 200px (bàn), 100px (máy tính bảng và điện thoại)
- Đệm trái: 8%
- Đệm phải: 8%
Cài đặt cột 2
khoảng cách
Tiếp tục bằng cách mở cài đặt trong cột 2. Chuyển đến tab nâng cao và 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.
- Đệm hàng đầu: 100px (máy tính để bàn), 50px (máy tính bảng và điện thoại)
- Đệm dưới: 200px
- Đệm bên trái: 150 px (bàn), 0 px (máy tính bảng và điện thoại)
Thêm một mô-đun tách vào cột 1
tầm nhìn
Trong cột đầu tiên, mô-đun đầu tiên chúng ta cần là một mô-đun tách. Đảm bảo rằng tùy chọn “Hiển thị dấu phân cách” được bật.
- Hiển thị dấu phân cách: Có
Dòng
Sau đó thay đổi màu dòng của mô-đun.
- Màu đường kẻ: # 000000
kích thước
Cũng thay đổi các tham số kích thước.
- Trọng lượng bộ chia: 3px
- Chiều rộng: 50%
Thêm một mô-đun văn bản vào cột 1
Thêm nội dung H3
Mô-đun tiếp theo chúng ta cần trong cột 1 là mô-đun văn bản có nội dung H3
Cài đặt văn bản H3
Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản H3:
- Tiêu đề 3 Cảnh sát: Hàng quý
- Màu văn bản của mục 3: # 000000
- Mục 3 Kích thước văn bản: 50px (máy tính để bàn), 40px (máy tính bảng), 35px (điện thoại)
- Chiều cao của dòng 3 của đầu: 1.1em
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 đầu tiên chúng ta cần là một mô-đun văn bản với một số nội dung mô tả.
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ữ: cabin
- Kiểu chữ văn bản: chữ hoa
- Kích thước văn bản: 18px (máy tính để bàn), 15px (máy tính bảng), 13px (điện thoại)
- Khoảng cách chữ văn bản: 3px (máy tính để bàn), 1px (máy tính bảng và điện thoại)
- Chiều cao của dòng văn bản: 3em
Thêm một mô-đun nút vào cột 2
Thêm một bản sao
Mô-đun tiếp theo và cuối cùng chúng ta cần là mô-đun nút. Nhập một bản sao của sự lựa chọn của bạn.
Cài đặt nút
Sau đó tạo kiểu cho 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: 20 pixel
- 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
- Phông chữ: Hàng quý
- Trọng lượng phông chữ: đậm
khoảng cách
Ngoài ra thêm đệm tùy chỉnh.
- Phần đệm trên: 50px
- Đệm dưới: 50px
- Đệm trái: 100px
- Đệm bên phải: 100px
Chức vụ
Và định vị lại nút cho phù hợp:
- Vị trí: Tuyệt đối
- Vị trí: phía dưới bên trái
Nhân bản dòng nhiều lần khi cần thiết
Khi bạn đã hoàn thành toàn bộ dòng và tất cả các mô-đun của nó, bạn có thể sao chép toàn bộ dòng ba lần.
Thay đổi tất cả nội dung
Đảm bảo chỉnh sửa tất cả nội dung trong các dòng trùng lặp.
2. Áp dụng hiệu ứng cuộn
Hiệu ứng cuộn hàng đầu tiên
Chuyển động ngang
Khi bạn đã hoàn thành tất cả các dòng trong phần của mình, đã đến lúc thêm các hiệu ứng cuộn. Mở hàng đầu tiên của phần và thêm chuyển động ngang.
- Kích hoạt chuyển động ngang: Có
- Bắt đầu bù: -5
- Độ lệch trung bình: 0 (ở mức 26%)
- Kết thúc bù: 0
- Kích hoạt hiệu ứng chuyển động: giữa phần tử
Mất dần trong và ngoài
Cũng sử dụng một hiệu ứng mờ dần đến và đi.
- Kích hoạt mờ dần trong và ngoài: Có
- Độ mờ ban đầu: 100%
- Độ mờ trung bình: 100% (ở mức 50%)
- Độ mờ kết thúc: 0% (đến 53%)
- Kích hoạt hiệu ứng chuyển động: giữa phần tử
Hiệu ứng cuộn hàng giữa
Chuyển động thẳng đứng
Tiếp theo, chúng tôi sẽ thêm hiệu ứng cuộn cho tất cả các dòng giữa dòng đầu tiên và dòng cuối cùng của phần. Đầu tiên sử dụng một chuyển động thẳng đứng:
- Kích hoạt chuyển động dọc: Có
- Bắt đầu bù: -4
- Độ lệch trung bình: 0 (ở mức 26%)
- Kết thúc bù: 0
- Hiệu ứng kích hoạt chuyển động: giữa phần tử
Mất dần trong và ngoài
Cũng kích hoạt một hiệu ứng mờ dần trong và ngoài.
- Kích hoạt mờ dần trong và ngoài: Có
- Độ mờ ban đầu: 0%
- Độ mờ trung bình: 100% (từ 27% đến 50%)
- Kết thúc bù: 0 (ở mức 53%)
- Kích hoạt hiệu ứng chuyển động: giữa phần tử
Hiệu ứng cuộn dòng cuối cùng
Chuyển động thẳng đứng
Sau đó mở dòng cuối cùng của phần và thêm chuyển động dọc sau:
- Kích hoạt chuyển động dọc: Có
- Bắt đầu bù: -4
- Độ lệch trung bình: 0 (ở mức 26%)
- Kết thúc bù: 0
- Kích hoạt hiệu ứng chuyển động: giữa phần tử
Mất dần trong và ngoài
Với hiệu ứng mờ dần đến và đi và bạn đã hoàn tất!
- Kích hoạt mờ dần trong và ngoài: Có
- Độ mờ ban đầu: 0%
- Độ mờ trung bình: 100% (từ 27% đến 50%)
- Độ mờ kết thúc: 100% (đến 53%)
- Kích hoạt hiệu ứng chuyển động: giữa phần tử
Kết quả cuối cùng
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.
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 tạo một chuyển đổi giao bóng đẹp mắt với các hiệu ứng cuộn của Divi. Ngay cả trước khi một quả giao bóng biến mất, quả giao bóng kia bắt đầu xuất hiện, tạo ra sự chuyển đổi đẹp mắt, dễ nhìn. Cách tiếp cận này sẽ giúp bạn làm nổi bật từng dịch vụ ở cấp độ cá nhân. 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 ý kiến trong phần bình luận bên dưới.
