Bỏ qua đến nội dung chính

Cách tạo chuyển tiếp liền mạch với hiệu ứng cuộn trên Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 901.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Khi thiết kế trang dịch vụ của mình, bạn muốn đảm bảo rằng khách truy cập nhận thấy tất cả các dịch vụ khác nhau mà bạn cung cấp. Trong nhiều trường hợp, đây 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, khách truy cập của bạn có nhiều khả năng sẽ đối xử tốt với tất cả họ. 

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 chuyển đổi dịch vụ liền mạch. Bạn cũng 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.

Chuyển đổi giữa các phần divi

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
Phần tham số Divi

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
Cấu hình khoảng cách Divi

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
Cấu hình giãn cách dòng Divi

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 các mô-đun, bắt đầu với một mô-đun văn bản trong cột 1. Nhập bất kỳ nội dung H2 nào bạn muốn.

Các dịch vụ của chúng tôi được cung cấp bởi các chuyên gia của thời điểm này

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
Trưởng cảnh sát divi

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)
Cấu hình giãn cách văn bản Divi

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 số nội dung mô tả.

Hộp văn bản divi nội dung

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
Tham số văn bản Divi

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ải phân cách có thể nhìn thấy

Dòng

Sau đó thay đổi màu dòng của mô-đun.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

  • Màu đường kẻ: # 000000
Màu nền của dải phân cách

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%
Định cỡ bộ phân tách Divi

khoảng cách

Chúng tôi cũng thêm một lề trên.

  • Lề trên: 10px
Khoảng cách giữa mô-đun phân tách Divi

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
Khoảng cách divi phần 2

tràn

Cũng che giấu những tràn.

  • Tràn ngang: ẩn
  • Tràn dọc: ẩn
Ẩn phần tràn mô-đun divi

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:

Chọn một bố cục divi

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
Phần divi cấu hình máng xối

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 giãn cách mô-đun 1 dòng Divi

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
Cấu hình nền mô-đun dòng Divi

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 mô-đun hàng

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)
Cài đặt giãn cách mô-đun Divi

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.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

  • Hiển thị dấu phân cách: Có
Hiển thị dấu phân cách divi 1

Dòng

Sau đó thay đổi màu dòng của mô-đun.

  • Màu đường kẻ: # 000000
Cài đặt dấu phân tách Divi

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%
Định cỡ bộ phân tách Divi

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 phần nội dung Divi

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 mô-đun văn bản Divi

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
Divi điều chỉnh phông chữ khuôn văn bản

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ội dung mô-đun văn 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
Cài đặt kiểu nút Divi
  • Phông chữ: Hàng quý
  • Trọng lượng phông chữ: đậm
Cài đặt màu nút Divi

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
Cài đặt giãn cách nút mô-đun Divi

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
Điều chỉnh vị trí mô-đun nút Divi

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.

Mô-đun nhân bản divi

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.

Chỉnh sửa nội dung phần divi

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ử
Áp dụng hiệu ứng cuộn divi

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ử
Định cấu hình phần hoạt ảnh mờ dần divi

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:

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

  • 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ử
Cấu hình aniation cuộn divi

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ử
Hình ảnh động mờ dần dòng Divi

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ô-đun dòng divi cuộn hoạt ảnh

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ử
Cài đặt hoạt ảnh giao diện mô-đun dòng Divi

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.

Bản demo cuối cù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 tạo một chuyển đổi dịch vụ đẹp mắt với các hiệu ứng cuộn của Divi. 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 cho người 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 bình luận trong phần bình luận bên dưới.

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
0 cổ phiếu
cổ phiếu
tweet
Enregistrer