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 600.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 bạn, bạn muốn đảm bảo rằng khách truy cập của bạn 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, đó 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 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 đối xử với tất cả.

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 sự chuyển tiếp 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.

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

Cài đặt văn bản H2

Chuyển đến tab thiết kế mô-đun và sửa đổi các tham số 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 đi đến 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

Chuyển đến 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ô-đun tách. Đảm bảo rằng tùy chọn "Hiển thị dấu phân cách" được kích hoạt.

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

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

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. Loại bỏ phần đệm trên 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 trong 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 giá trị điền tùy chỉnh vào 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 giá trị điền tùy chỉnh vào các kích thước màn hình khác nhau.

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]

  • Đệ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 kích hoạ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 đến tab thiết kế mô-đun và sửa đổi các tham số 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ột 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ở dòng đầu tiên của phần và thêm một 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.

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 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

Sau đó, chúng tôi sẽ thêm các 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 dọc:

  • 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 đã trải qua tất cả các bước, hãy xem xét kết quả cuối cùng 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 đã chỉ cho bạn cách tạo một dịch vụ chuyển tiếp đẹp mắt với các hiệu ứng cuộn của Divi. Trước khi một dịch vụ thậm chí biến mất, dịch vụ kia bắt đầu xuất hiện, mang lại sự chuyển tiếp đẹp mắt. 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 đề xuất nào, vui lòng để lại nhận xét 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