Cách tạo phần va chạm cột đẹp trên Divi

Cách tạo phần va chạm cột đẹp trên Divi

Hiệu ứng cuộn của Divi mang lại nhiều khả năng thiết kế mới cho các trang web bạn xây dựng. 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 trang web của bạn. 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ẽ quản lý cụ thể việc tạo một phần tuyệt đẹp của các anh hùng va chạm 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.

Va chạm phần Divi

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
Cấu hình phần Divi

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

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:

Bố cục của các cột divi

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

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
Khoảng cách dòng Divi

tràn

Và ẩn các dòng tràn.

  • Tràn ngang: ẩn
  • Tràn dọc: ẩn
Cấu hình đường hiển thị Divi

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

Chỉ số Z

Đồng thời tăng chỉ số z của cột.

  • Chỉ số Z: 12
Vị trí tương đối divi

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
Divi cột nền

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.

Divi hỗ trợ nghề tự do

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
Cấu hình phông chữ Divi

khoảng cách

Ngoài ra, thêm một lề trên.

  • Lề trên: 10vw
Cấu hình giãn cách văn bản

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.

Thêm cột văn bản 1 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ữ: 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
Tùy chỉnh phông chữ văn bản Divi

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

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.

Thêm một mô-đun nút divi

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 phong cách tùy chỉnh divi
  • Nút phông chữ: Mở mà không cần
Cài đặt thông số nút phông chữ

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)
Khoảng cách giữa các nút Divi

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.

Văn bản cột 2 divi

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)
Jane doe text cột 2 divi

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)
Giãn cách văn bản Divi

Á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%
Hiệu ứng cuộn hoạt hình divi

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
Căn chỉnh ngang Divi

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%
phần anh hùng va chạm với cột

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%)
Divi hoạt hình ngang

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%
Chuyển động hoạt hình divi

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ử dụng sáng tạo các hiệu ứng cuộn của Divi để tạo phần anh hùng va chạm cột. Ngay khi khách truy cập cuộn, hai cột khác nhau và các phần tử của chúng bắt đầu hợp nhất. Điều này sẽ cho phép bạn nhấn mạnh bản sao nhiều hơn.

Tài nguyên khác

Dưới đây là danh sách nội dung sẽ cho phép bạn làm được nhiều việc hơn với chủ đề Divi WordPress của mình.

Cách dễ dàng điều hướng giữa các lớp trên Divi

Cách dễ dàng điều hướng giữa các lớp trên Divi

Hôm nay, chúng tôi sẽ nói chuyện với bạn về Divi Layers View, một bảng chỉnh sửa hoàn toàn mới trong trình tạo cho phép bạn nhanh chóng xem, điều hướng, sắp xếp và chỉnh sửa các trang của mình trong giao diện các lớp lồng nhau. Bạn có thể khám phá nội dung của mình bên trong bảng điều khiển lớp trong khi sửa đổi trực quan trang của bạn. Điều này mang lại sự đơn giản và hiệu quả của việc chỉnh sửa dựa trên khối và kết hợp nó với tính chất trực quan của trình tạo trực quan, mang lại cho bạn những gì tốt nhất của cả hai thế giới! Bảng điều khiển lớp hợp nhất các trang dài và phức tạp và cho phép bạn điều hướng và chỉnh sửa chúng với hiệu quả mới.

Cách truy cập chế độ xem lớp

Để sử dụng bảng điều khiển lớp mới, chỉ cần nhấp vào biểu tượng các lớp mới hoặc nhấp chuột phải vào bất kỳ phần tử nào và chọn "Đi tới Lớp" để định vị phần tử đó trong cửa sổ lớp. Điều này sẽ cung cấp cho bạn một cái nhìn có tổ chức của tất cả nội dung trang của bạn trong một cửa sổ cô đọng.

Xem cấu trúc trang của bạn và nhanh chóng điều hướng đến bất kỳ phần tử nào

Bảng điều khiển lớp cung cấp cho bạn chế độ xem có cấu trúc về nội dung trang của bạn được sắp xếp và dễ hiểu. Bạn có thể tìm hiểu bên trong mỗi phần để hiển thị các hàng, cột và mô-đun lồng nhau. Bạn cũng có thể tìm kiếm bảng điều khiển Lớp để nhanh chóng tìm thấy những gì bạn đang tìm kiếm hoặc lọc bảng điều khiển Lớp để hiển thị các phần, dòng hoặc mô-đun cụ thể. Nếu bạn nhấp vào thứ gì đó trong bảng điều khiển lớp, nó sẽ tự động cuộn trang của bạn đến vị trí của phần tử đó để bạn có thể chỉnh sửa nó bằng Visual Builder.

  • Hiển thị cấu trúc trang của bạn - Bảng điều khiển Lớp hiển thị tất cả các mục trong một danh sách được tổ chức và lồng nhau cho thấy rõ cấu trúc trang của bạn.
  • Tìm mặt hàng - Bạn đang tìm kiếm một phần tử cụ thể trên một trang dài và phức tạp? Chỉ cần tìm kiếm bảng điều khiển lớp để tìm thấy nó một cách nhanh chóng, điều hướng đến vị trí của nó trên trang và bắt đầu chỉnh sửa.
  • Lọc các mục theo loại - Bạn muốn nhanh chóng định vị tất cả các mô-đun nút trên trang của mình? Lọc bảng điều khiển lớp theo "nút" để xem tất cả chúng trong một danh sách có tổ chức!
  • Điều hướng nhanh chóng qua trang của bạn - Đôi khi rất khó để tìm thấy những gì bạn đang tìm kiếm trên một trang dài. Thay vì cuộn trang lên hoặc xuống để tìm kiếm, chỉ cần nhấp vào phần trong bảng điều khiển lớp để điều hướng ngay đến vị trí của nó.

Sắp xếp các phần tử và nhanh chóng đổi tên các lớp

Có thể dễ dàng sắp xếp các mục trong bảng điều khiển lớp. Tất cả các phần, hàng, cột và mô-đun đều có thể được sắp xếp lại bằng cách kéo và thả. Chế độ xem cô đọng và có thứ tự của các bảng lớp giúp dễ dàng di chuyển các phần tử nhất định. Bạn cũng có thể nhanh chóng đổi tên các mục trong bảng điều khiển lớp. Chỉ cần nhấp vào tên của một mục để điều chỉnh nhãn quản trị của nó.

  • Dễ dàng đổi tên các mục - Không cần mở phương thức cài đặt để thay đổi nhãn quản trị. Chỉ cần nhấp vào tên của phần tử trong bảng điều khiển lớp để thay đổi tên của nó và giữ cho trang của bạn có tổ chức.
  • Kéo và thả để di chuyển các mục - Dễ dàng di chuyển các phần tử trong bảng điều khiển lớp. Bạn có cần kéo một phần từ cuối trang dài lên trên cùng không? Thật dễ dàng trong chế độ xem các lớp!

Bạn có thể làm mọi thứ trong chế độ xem Lớp


Bảng điều khiển lớp là nhiều hơn nữa hơn một công cụ điều hướng / tổ chức đơn giản. Đó là một công cụ xây dựng phong phú và đầy đủ tính năng cung cấp cho bạn tất cả sức mạnh của Divi Builder trong một cửa sổ nén luôn có sẵn. Bạn có thể kéo và thả để di chuyển các mục. Bạn có thể xóa, sao chép hoặc thêm các mục mới. Bạn có thể sao chép, dán, mở rộng kiểu cũng như tìm và thay thế. Bạn có thể làm mọi thứ bên trong cửa sổ nhỏ này. Mỗi khi bạn thay đổi điều gì đó trong bảng điều khiển lớp, những thay đổi đó sẽ được phản ánh ngay lập tức trên trang của bạn.

Bảng điều khiển lớp giúp một số tác vụ dễ dàng hơn. Bạn có gặp khó khăn khi truy cập các mục chồng chéo do việc sử dụng nâng cao chỉ số ký quỹ, vị trí và z không? Thay vào đó, chỉ cần tìm và chỉnh sửa các phần tử này trong bảng điều khiển lớp. Chế độ xem Lớp rất đơn giản và rõ ràng.

Bạn nghĩ gì về tính năng mới này trên Divi?

nguồn: https://www.elegantthemes.com/blog/theme-releases/divi-layers-view

Các tài nguyên được đề xuất khác

Đây là danh sách các hướng dẫn mà bạn cũng có thể quan tâm:

Cách tạo hoạt hình cuộn trên Divi

Cách tạo hoạt hình cuộn trên Divi

Trang Giới thiệu về Bạn (About) là một trong những trang quan trọng nhất trên trang web của bạn. Điều này cho phép mọi người hiểu rõ hơn về bạn và quyết định xem họ có cảm thấy thoải mái khi thực hiện bước tiếp theo hay không. Nếu bạn đang tìm kiếm một cách dễ dàng để đưa phần kể chuyện vào trang này, bạn sẽ thích hướng dẫn này. Chúng tôi sẽ sử dụng các hiệu ứng cuộn của Divi để tạo ra một chuyển tiếp kể chuyện mượt mà trên cuộn. Ngay sau khi một phần của câu chuyện mờ đi, phần khác sẽ xuất hiện. Nó tạo cho du khách cảm giác như đang đọc một câu chuyện thú vị. 

Kết quả cuối cùng 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.

Hoạt hình Divi

1. Tạo phần toàn màn hình đầu tiên của trang

Thêm một phần mới

Màu nền

Bắt đầu bằng cách thêm phần đầu tiên vào trang Giới thiệu của bạn. Mở cài đặt phần và thay đổi màu nền thành màu đen.

  • Màu nền: # 000000
Phần nền Divi

kích thước

Sau đó chuyển phần thành toàn màn hình bằng cách thêm chiều cao tối thiểu trong các tham số kích thước.

  • Chiều cao tối thiểu: 100vh
Chiều cao phần Divi

2. Thêm một dòng hoạt hình

Thêm một dòng mới

Cấu trúc cột

Sau đó thêm một hàng mới vào phần của bạn bằng cấu trúc cột sau:

Thêm một dòng divi

kích thước

Mở các tham số dòng và cho phép dòng chiếm toàn bộ chiều rộng của phần chứa bằng cách sửa đổi các tham số kích thước.

  • Chiều rộng: 100%
  • Chiều rộng tối đa: 100%
Cấu hình chiều rộng divi tối đa

khoảng cách

Sau đó thêm điền trái và phải trên các kích thước màn hình khác nhau.

  • Đệm bên trái: 20vw (bàn), 10vw (máy tính bảng và điện thoại)
  • Đệm bên phải: 20vw (bàn) 10vw (máy tính bảng và điện thoại)
Tùy chỉnh đệm divi

Hoạt hình

Để tăng hiệu ứng kể chuyện, chúng tôi cũng sẽ sử dụng hoạt ảnh mờ dần cho dòng.

  • Phong cách hoạt hình: Fade
  • Thời lượng hoạt ảnh: 3000ms
  • Đường cong tốc độ hoạt ảnh: dễ vào-ra
  • Lặp lại hoạt ảnh: một lần
Hoạt hình phần Divi

Chức vụ

Cuối cùng, chúng tôi sẽ đảm bảo rằng dòng được định vị ở giữa của bộ chứa phần bằng cách sửa đổi các tùy chọn vị trí.

  • Vị trí: tuyệt đối
  • Địa điểm: Trung tâm
Vị trí bị bãi bỏ divi

3. Chèn tiêu đề với hiệu ứng cuộn

Thêm mô-đun văn bản # 1 vào cột

Thêm nội dung H1

Mô-đun duy nhất chúng ta cần trong dòng này là mô-đun văn bản có nội dung H1.

Thiết kế titire divi

Tiêu đề 1 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 H1 như sau:

  • Phông chữ tiêu đề: Nunito
  • Trọng lượng phông chữ: Semi bold
  • Màu văn bản tiêu đề: #ffffff
  • Kích thước văn bản tiêu đề: 7vw (máy tính để bàn), 9vw (máy tính bảng), 11vw (điện thoại)
Cấu hình phông chữ Divi

Chuyển động thẳng đứng

Chúng tôi cũng sẽ thêm một hình ảnh động dọc tinh tế.

  • Kích hoạt chuyển động dọc: Có
  • Bắt đầu bù: 0 (ở mức 50%)
  • Độ lệch trung bình: 10 (ở mức 100%)
  • Bù đắp cuối cùng: 10
Hoạt hình văn bản Divi

Hiệu ứng cuộn đến và đi

Với 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 55%)
  • Độ mờ kết thúc: 0% (đến 62%)
Lựa chọn hoạt ảnh Opacity

Mở rộng hiệu ứng cuộn lên và xuống

Cuối cùng nhưng không kém phần quan trọng, chúng tôi cũng sẽ sử dụng hiệu ứng cuộn lên và xuống.

  • Cho phép mở rộng quy mô lên và xuống: Có
  • Tỷ lệ bắt đầu: 100% (đến 40%)
  • Tỷ lệ trung bình: 95% (đến 74%)
  • Tỷ lệ kết thúc: 90%
Văn bản hoạt hình Divi

4. Sao chép toàn bộ phần một lần và bao gồm văn bản mô tả với các hiệu ứng cuộn

Chỉnh sửa tiêu đề và nội dung

Khi bạn đã hoàn thành phần đầu tiên, bạn có thể sao chép nó hoàn toàn. Mở mô-đun văn bản bên trong vùng chứa phần trùng lặp và sử dụng bản sao H2.

Phần nhân bản divi

Sửa đổi các tham số văn bản của mô-đun Văn bản H2

Thay đổi cài đặt văn bản H2 tương ứng:

  • Cảnh sát tiêu đề 2: Nunito
  • Tiêu đề phông chữ 2: bán đậm
  • Mục 2 Màu văn bản: #ffffff
  • Mục 2 Kích thước văn bản: 5vw (máy tính để bàn), 7vw (máy tính bảng), 8vw (điện thoại)
  • Chiều cao của dòng 2: 1em (văn phòng), 1.2em (máy tính bảng và điện thoại)
câu chuyện trên cuộn

Thêm mô-đun văn bản # 2 vào cột

Thêm nội dung

Sau đó thêm một mô-đun văn bản khác vào cột với nội dung mô tả bạn chọn.

câu chuyện trên cuộn

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

Thay đổi cài đặt văn bản cho mô-đun văn bản như sau:

  • Phông chữ: Mở Sans
  • Màu văn bản: #ffffff
  • Kích thước văn bản: 1vw (máy tính để bàn), 2.5vw (máy tính bảng), 3vw (điện thoại)
  • Chiều cao dòng văn bản: 3.1em (bàn), 2.5em (máy tính bảng và điện thoại)
câu chuyện trên cuộn

khoảng cách

Cũng sử dụng một lề trên.

  • Lề trên: 8vw
câu chuyện trên cuộn

Hiệu ứng cuộn đến và đi

Tiếp theo, chuyển sang hiệu ứng cuộn trong tab nâng cao và sử dụng cài đặt làm mờ dần và mờ dần sau:

  • Kích hoạt mờ dần trong và ngoài: Có
  • Độ mờ ban đầu: 100%
  • Độ mờ trung bình: 0% (ở mức 31%)
  • Độ mờ đục cuối cùng: 0% (đến 35%)
Hoạt ảnh cuộn mô-đun văn bản Divi

Mở rộng hiệu ứng cuộn lên và xuống

Đồng thời thêm hiệu ứng tăng và giảm tỷ lệ.

  • Cho phép mở rộng quy mô lên và xuống: Có
  • Tỷ lệ bắt đầu: 100% (đến 40%)
  • Tỷ lệ trung bình: 95% (đến 74%)
  • Tỷ lệ kết thúc: 90%
Mô-đun văn bản divi chuyển thể hoạt hình

Bây giờ bạn có thể sao chép phần cuối cùng này nhiều lần. Tuy nhiên, bạn sẽ cần điều chỉnh nội dung của từng phần cho nhu cầu của bạn.

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.

Kết quả mẫu

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 kể một câu chuyện trên trang Giới thiệu bằng cách sử dụng các hiệu ứng cuộn được tích hợp sẵn của Divi. Hiệu ứng mà chúng tôi tạo ra cho phép các bản sao liên tiếp mờ dần và biến mất, khiến khách truy cập cảm thấy như họ đang đọc một câu chuyệ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.

Cách thêm biểu mẫu liên hệ thả xuống vào tiêu đề toàn cầu của bạn

Cách thêm biểu mẫu liên hệ thả xuống vào tiêu đề toàn cầu của bạn

Khi bạn tạo tiêu đề tùy chỉnh cho trang web của mình bằng cách sử dụng trình tạo chủ đề của Divi, bạn sẽ thấy mình đang tìm cách hoàn hảo để thêm AAL (lời kêu gọi hành động). Một cách để làm điều này là thêm một biểu mẫu liên hệ thả xuống. Điều này sẽ giúp bạn giữ cho giao diện tổng thể của tiêu đề sạch sẽ trong khi cung cấp khả năng liên lạc với bạn mà không cần phải cuộn xuống. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo biểu mẫu liên hệ thả xuống bằng cách sử dụng mã Divi và JQuery & CSS. Bạn cũng có thể tải xuống tệp JSON miễn phí!

Đ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 kết quả trên các kích thước màn hình khác nhau.

Menu thả xuống Divi

1. Chuyển đến Trình tạo chủ đề Divi và bắt đầu tạo tiêu đề toàn cầu

Chuyển đến Trình tạo chủ đề Divi

Bắt đầu bằng cách đi đến Trình tạo chủ đề Divi trong phần phụ trợ của trang web WordPress của bạn.

Tiêu đề divi toàn cầu

Tạo một tiêu đề toàn cầu

Nhấp vào "Thêm tiêu đề toàn cầu" và chọn "Tạo tiêu đề toàn cầu" để bắt đầu tạo tiêu đề toàn cầu tùy chỉnh.

Xây dựng tiêu đề divi toàn cầu

2. Xây dựng thiết kế tiêu đề

Cài đặt phần

Màu nền

Khi bên trong mẫu tiêu đề tổng thể, bạn sẽ nhận thấy một phần. Mở phần này và sử dụng màu nền trắng.

  • Màu nền: #FFFFFF
Điều chỉnh nền

khoảng cách

Sau đó loại bỏ phần đệm trên và dưới mặc định khỏi phần.

  • Phần đệm trên: 0px
  • Đệm dưới: 0px
Cấu hình đệm

Hộp bóng

Cũng áp dụng một bóng hộp tinh tế.

  • Sức mạnh bóng mờ của hộp: 50px
  • Màu bóng: rgba (0,0,0,0,15)
Cấu hình bóng Divi

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:

Chọn một bố cục

kích thước

Không thêm nhiều mô-đun, mở các tham số dòng và sửa đổi các tham số kích thước như 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: 95%
  • Chiều rộng tối đa: 100%
Định cấu hình kích thước đường divi

khoảng cách

Sau đó thêm phần đệm trên và dưới tùy chỉnh.

  • Phần đệm trên: 1vw
  • Đệm đáy: 1vw
Cấu hình giãn cách phần

Yếu tố chính

Và căn chỉnh tất cả nội dung cột bằng cách thêm một dòng mã CSS vào phần tử chính của hàng.

align-items: center;

Css tùy chỉnh

Cột 2 Chỉ số Z

Chúng tôi cũng đảm bảo rằng cột thứ hai có giá trị chỉ số z cao hơn cho các mục đích phản ứng.

  • Chỉ số Z: 12
Tham số cột

Thêm mô-đun hình ảnh vào cột 1

Tải logo

Đã đến lúc bắt đầu thêm các mô-đun! Bắt đầu với mô-đun hình ảnh trong cột 1. Tải lên biểu trưng.

Mô-đun hình ảnh divi

sự liên kết

Sau đó, thay đổi căn chỉnh của mô-đun.

  • Căn chỉnh hình ảnh: trung tâm
Mô-đun hình ảnh căn chỉnh

kích thước

Cũng thay đổi chiều rộng.

  • Chiều rộng: 3vw (máy tính để bàn), 5vw (máy tính bảng), 7vw (điện thoại)
hình thức liên lạc thả xuống

Thêm một mô-đun menu vào cột 2

Chọn menu

Trong cột thứ hai, chúng tôi sẽ thêm một mô-đun menu.

Cá nhân hóa mô-đun menu divi

Bố trí

Chuyển sang tab thiết kế mô-đun và thay đổi kiểu bố cục.

  • Phong cách: Trung tâm
Kiểu mô-đun menu

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

Sau đó thay đổi cài đặt văn bản trong menu mô-đun.

  • Phông chữ menu: Mở mà không cần
  • Trọng lượng phông chữ menu: Semi bold
  • Màu văn bản menu: # 000000
  • Kích thước văn bản menu: 0.8vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Khoảng cách chữ cái menu: 1px
Văn bản menu Divi

Cài đặt văn bản trình đơn thả xuống

Sau đó thay đổi màu của dòng trong menu thả xuống.

  • Màu của dòng menu thả xuống: # 007dff
Menu thả xuống Divi

biểu tượng

Với màu biểu tượng menu hamburger.

  • Màu biểu tượng menu bánh hamburger: # 007dff
Biểu tượng menu divi

Thêm mô-đun văn bản 1 vào cột 3

Thêm một bản sao

Hãy chuyển sang mô-đun thứ ba! Thêm một mô-đun văn bản với một bản sao bạn chọn.

Liên hệ với chúng tôi mô-đun divi

Màu nền

Sau đó, thêm một màu nền.

  • Màu nền: # 007dff
Nền divi

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ữ: Mở Sans
  • Trọng lượng phông chữ của văn bản: đậm
  • Màu văn bản: #ffffff
  • Kích thước văn bản: 0.8vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Sắp xếp văn bản: trung tâm
Màu phông chữ Divi

kích thước

Sau đó sửa đổi các tham số kích thước mô-đun.

  • Chiều rộng: 33%
  • Sắp xếp mô-đun: trung tâm
Định cỡ phần văn bản divi

khoảng cách

Sau đó thêm phần đệm trên và dưới tùy chỉnh.

  • Phần đệm trên: 0.8vw (máy tính để bàn), 2vw (máy tính bảng và điện thoại)
  • Đệm dưới: 0.8vw (bàn), 2vw (máy tính bảng và điện thoại)
Cấu hình giãn cách mô-đun văn bản

biên giới

Và hoàn thành các tham số mô-đun bằng cách thêm một bán kính đường viền.

  • Tất cả các góc: 100px
Cấu hình đường viền mô-đun văn bản

Thêm mô-đun văn bản 2 vào cột 3

Thêm một biểu tượng cho khu vực nội dung

Hãy chuyển sang mô-đun tiếp theo, là một mô-đun văn bản khác. Thêm mũi tên sau vào vùng nội dung: "▼".

Mô-đun văn bản Divi fleche

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ữ: Mở Sans
  • Màu văn bản: # 007fff
  • Kích thước văn bản: 3vw
  • Chiều cao của dòng văn bản: 0em
  • Sắp xếp văn bản: trung tâm
Phông chữ divi mô-đun văn bản

Chỉ số Z

Chúng tôi cũng tăng chỉ số z của mô-đun.

  • Chỉ số Z: 11
Vị trí mô-đun văn bản Divi

Thêm mô-đun mẫu liên hệ vào cột 3

Bây giờ bạn có thể thêm một hình thức liên lạc ở dưới cùng của mô-đun văn bản có chứa mũi tên. Mô-đun này khá đơn giản để sử dụng, vì vậy bạn sẽ phải tùy chỉnh các trường mà bạn muốn hiển thị.

Mô-đun biểu mẫu liên hệ

3. Tùy chỉnh các yếu tố để tạo một hình thức liên lạc trong một cú nhấp chuột

Thêm chiều cao của cột 3

Khi tất cả các mod đã sẵn sàng, đã đến lúc tạo hiệu ứng. Bước đầu tiên để đạt được kết quả mong muốn là mở cài đặt trong cột 3 và thêm chiều cao tùy chỉnh đáp ứng trong tab nâng cao.

Văn phòng:

height: 3vw;

máy tính bảng:

height: 5vw;

Điện thoại:

height: 6vw;

Mẫu tờ rơi liên hệ

Thêm một lớp CSS vào nút và mũi tên

Sau đó, chúng tôi sẽ thêm cùng một lớp CSS vào hai mô-đun văn bản đầu tiên trong cột 3.

  • Lớp CSS: show-contact
Thêm phần liên hệ hiển thị

Thêm một lớp CSS vào biểu mẫu liên hệ

Chúng tôi cũng sẽ cần một lớp CSS tùy chỉnh cho mô-đun Biểu mẫu liên hệ.

  • Lớp CSS: mô-đun liên hệ
Thêm một lớp vào biểu mẫu divi

Ẩn mô-đun biểu mẫu Liên hệ

Tiếp tục bằng cách thêm một dòng mã CSS bổ sung vào phần tử chính của mô-đun Biểu mẫu liên hệ. Điều này sẽ cho phép chúng tôi ẩn mô-đun trước khi nhấp vào.

display: none;

Phong cách mô-đun css divi

Thêm mô-đun mã vào cột 3 bằng mã JQuery và CSS

Và để tạo hàm nhấp chuột, chúng ta sẽ cần một số mã JQuery. Chúng tôi cũng sẽ sử dụng mã CSS tùy chỉnh. Thêm mô-đun mã mới vào cột 2 với mã. Đảm bảo đặt mã JQuery giữa các thẻ script và mã CSS giữa các thẻ kiểu.

jQuery(function($){$(".show-contact").click(function() {$('.contact-form-module').slideToggle();});});

.show-contact {cursor: pointer;} .et-menu>li {padding-left: 0.7vw !important;padding-right: 0.7vw !important;}

Thêm mã javascript

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

Ví dụ thiết kế

Những gì bạn phải nhớ

Trong bài viết này, chúng tôi đã hướng dẫn bạn cách thêm biểu mẫu liên hệ thả xuống vào tiêu đề tùy chỉnh của bạn. Đó là một cách tuyệt vời để kích hoạt hành động sớm. 

Cách tạo gradient hoạt hình trên Divi

Cách tạo gradient hoạt hình trên Divi

Hoạt ảnh nền Gradient có thể là một kỹ thuật thiết kế đẹp để mang lại màu sắc nền sống động trên trang web của bạn. Đó là một giải pháp hoàn hảo cho những ai muốn thứ gì đó chân thực hơn màu nền tĩnh mà không cần phải dùng đến nền video tải chậm. Ý tưởng cơ bản đằng sau hoạt ảnh nền gradient là sử dụng CSS để tạo phóng đại và tạo hoạt ảnh cho nền gradient để tạo chuyển tiếp màu chuyển động mượt mà.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo hoạt ảnh nền gradient trên Divi. Phương pháp này kết hợp một đoạn CSS tùy chỉnh làm hoạt hình các màu chuyển sắc được chọn trong cài đặt Divi tích hợp. Cấu hình thực sự khá đơn giản cho một kết quả đẹp như vậy.

Hãy bắt đầu!

Kết quả Posisble

Dưới đây là tổng quan về hai cách chúng ta có thể tạo hoạt hình nền gradient trên Divi.

Rõ ràng, điều kiện tiên quyết cho hướng dẫn này là bạn đã cài đặt chủ đề Divi và cập nhật.

Tạo hoạt ảnh nền gradient với trích xuất CSS và tùy chọn nền của Divi

Để bắt đầu, hãy thêm một hàng một cột vào phần mặc định trong Divi Builder.

Bố cục Divi

Cài đặt phần

Sau đó, cập nhật cài đặt phần bằng hình nền. Nền gradient của chúng tôi sẽ được thêm vào dòng của chúng tôi để nó chồng lên hình ảnh này.

Sau đó cập nhật điền như sau:

  • Đệm: cao 0px, thấp 0px
Thêm hình ảnh divi

Cài đặt hàng và cột

Thông số cột

Mở cài đặt hàng, sau đó cập nhật điền vào cột như sau:

  • Đệm: trên 12 vw

Sau đó, thêm CSS tùy chỉnh sau vào phần tử cột chính:

height: 40vw;

Kiểu mô-đun Divi

Cài đặt dòng

Nền Gradient

Bây giờ chúng ta có thể thêm nền gradient vào dòng. Đảm bảo đặt màu chuyển sắc nửa trong suốt nếu bạn muốn xem hình nền của phần.

Cập nhật các tham số dòng như sau:

  • Màu nền bên trái: rgba (12,113,195,0.8)
  • Màu nền của gradient bên phải: rgba (131,0,233,0.8)
  • Kiểu gradient: tuyến tính
  • Hướng dốc: 45 độ
Cấu hình màu Divi
Kích thước

Sau đó cập nhật kích thước dòng như sau:

  • Chiều rộng: 100%
  • Chiều rộng tối đa: 100%
Cấu hình chiều rộng mô-đun Divi
Lớp CSS tùy chỉnh

Bây giờ nền gradient của chúng ta đã có, chúng ta cần thêm hoạt ảnh thông qua CSS tùy chỉnh. Trước khi thêm mã CSS, chúng ta cần thêm một lớp CSS tùy chỉnh để nhắm mục tiêu hàng cụ thể đó.

Chuyển đến tab nâng cao và thêm lớp CSS sau:

  • Lớp CSS: animate-gradient
Dòng mô-đun divi lớp css

Thêm một mô-đun mã

Khi lớp CSS đã được thêm vào dòng, thêm mô-đun mã vào dòng.

Thêm mô-đun mã divi

Dán CSS trong mô-đun mã

Sau đó dán mã CSS sau vào vùng Mô-đun Cài đặt Mã Mã:

.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}

Đảm bảo bọc mã trong <style></style>vì chúng tôi thêm nó vào mã HTML của trang.

Cấu hình kiểu mô-đun Divi

Kết quả

Đây là kết quả cho đến nay. Nền gradient đã được phóng to lên 400% so với kích thước ban đầu và được làm động bằng cách di chuyển sang trái và phải.

Divi nền hoạt hình

Thêm lời kêu gọi hành động

Để hoàn thành thiết kế, hãy thêm mô-đun gọi hành động để trở thành một phần của nội dung.

Thêm lời kêu gọi hành động divi

Cài đặt lời kêu gọi hành động

Nội dung

Cập nhật nội dung như sau:

  • Thêm một tiêu đề
  • Thêm văn bản nút
  • Thêm văn bản cơ thể
  • URL của liên kết của nút: #
  • Sử dụng màu nền: KHÔNG
Conception

Chuyển đến tab Thiết kế và cập nhật những điều sau:

  • Phông chữ: Kaushan Script
  • Kích thước văn bản tiêu đề: 4vw (máy tính để bàn), 30px (điện thoại)
  • Chiều cao dòng tiêu đề: 1,4 em
  • Cảnh sát cơ thể: Roboto
  • Kích thước văn bản nút: 16px
  • Màu văn bản nút: # 555555
  • Nút nền: #ffffff
  • Độ rộng đường viền nút: 0px
  • Bán kính đường viền nút: 30 pixel
  • Khoảng cách chữ cái nút: 3px
  • Phông chữ: Roboto cô đọng
  • Trọng lượng phông chữ: đậm

Kết quả

Bây giờ, hãy kiểm tra kết quả trên trang trực tiếp với nội dung của lời kêu gọi hành động. Nó sẽ là một tiêu đề tuyệt vời cho trang web của bạn!

Hoạt ảnh nền kết quả cuối cùng

Hãy nhớ rằng, bạn có thể dễ dàng thay đổi màu nền của đường thành bất kỳ màu nào bạn muốn. Mã sẽ tiếp tục chạy trong nền để tạo hoạt ảnh nền cho bạn.

Nếu bạn biết một chút CSS, bạn có thể điều chỉnh tốc độ và hướng của hoạt ảnh bằng cách thay đổi các giá trị của thuộc tính hoạt ảnh.

Tôi hy vọng bạn thấy hướng dẫn này hữu ích. Đừng ngần ngại chia sẻ ý kiến ​​của bạn về nó.

Khám phá các hiệu ứng hoạt hình cuộn mới trên Divi

Khám phá các hiệu ứng hoạt hình cuộn mới trên Divi

Hôm nay chúng tôi đã được thông báo về một bản cập nhật mới trên Divi cung cấp những gì được gọi là hiệu ứng hoạt hình cuộn. Chúng tôi đã xem qua và trong hướng dẫn này, chúng tôi sẽ tóm tắt những gì mong đợi.

Chúng ta hãy bắt đầu.

Các hiệu ứng cuộn là gì?

Hiệu ứng cuộn là các hoạt ảnh có thể tùy chỉnh phản ứng với khách truy cập của bạn khi họ cuộn từ trên xuống dưới của trang. Không giống như hình ảnh động truyền thống, hiệu ứng cuộn liên quan trực tiếp đến hành vi cuộn của khách truy cập. Tốc độ và hướng của hoạt ảnh dựa trên tốc độ và hướng cuộn của khách truy cập. Dòng thời gian hoạt ảnh dựa trên vị trí của clip trong cửa sổ trình duyệt.

Nó có vẻ phức tạp, nhưng với Divi, nó khá đơn giản

Bất kỳ phần tử nào cũng có thể được làm động bằng sự kết hợp của các hiệu ứng tỷ lệ, xoay, chuyển động ngang và dọc, độ mờ và hiệu ứng mờ. Bạn kiểm soát độ lớn của từng hiệu ứng tại các điểm khác nhau trong hoạt ảnh, sau đó Divi sẽ lo phần còn lại, tạo ra các chuyển tiếp đẹp mắt khi các yếu tố này xuất hiện và di chuyển xung quanh chế độ xem của khách truy cập. Tạo các hình ảnh động đơn giản để tăng thêm chiều sâu và sự tinh tế, hoặc kết hợp các hiệu ứng và tạo hoạt ảnh cho nhiều yếu tố để tạo ra những hoạt động ngoạn mục sẽ khiến khách truy cập của bạn phải trầm trồ!

6 hiệu ứng mới độc đáo

Hiệu ứng có sẵn để lựa chọn hoặc kết hợp. Divi đi kèm với sáu hiệu ứng cuộn khác nhau, mỗi hiệu ứng có thể được tùy chỉnh riêng bằng cách sử dụng giao diện người dùng hiệu ứng cuộn mới của chúng tôi. Bạn cũng có thể kết hợp bất kỳ hiệu ứng nào để tạo ra các hoạt ảnh phức tạp hơn.

Chuyển động thẳng đứng

Hiệu ứng chuyển động dọc cho phép bất kỳ phần tử nào di chuyển lên và xuống trang tùy thuộc vào tốc độ và hướng cuộn của khách truy cập. Kết quả là một hiệu ứng thị sai! Giờ đây, mọi thứ đều có thể được sử dụng để tạo hiệu ứng thị sai với Divi. Bạn thậm chí có thể kết hợp chuyển động dọc với hình nền thị sai để tạo ra một số thiết kế thực sự ấn tượng.

Cài đặt hình ảnh Divi

Chuyển động ngang

Hiệu ứng di chuyển ngang tương tự như hiệu ứng di chuyển dọc, chỉ khác là nó cho phép di chuyển các mục từ trái sang phải trên màn hình tùy thuộc vào hướng và tốc độ di chuyển của khách truy cập. . Bạn thậm chí có thể kết hợp chuyển động dọc và ngang, cho phép bạn kiểm soát hoàn toàn chuyển động của bất kỳ phần tử nào!

Hiệu ứng hoạt hình Divi

Bối cảnh mờ

Hiệu ứng làm mờ sẽ đưa các phần tử vào và mất nét tùy thuộc vào tốc độ và hướng di chuyển của khách truy cập. Vì Divi cho phép bạn kiểm soát các giá trị mờ đầu, giữa và cuối, bạn có thể đưa các yếu tố vào tiêu điểm ngay khi chúng ở trước mắt khách truy cập. Đó là một cách tuyệt vời để thu hút sự chú ý đến thông tin quan trọng.

Cài đặt mờ theo ngữ cảnh Divi

nấu chảy

Hiệu ứng mờ dần với các phần tử mờ dần trong và ngoài tùy thuộc vào tốc độ và hướng cuộn của khách truy cập. Bạn có thể pha trộn các phần tử, làm cho chúng biến mất hoặc cả hai. Sự kết hợp của mờ dần, mờ và tỷ lệ có thể tạo ra một số hoạt ảnh thực sự tinh vi bổ sung thêm yếu tố "nó" cho thiết kế của bạn.

Hiệu ứng mờ dần divi

Hiệu ứng mở rộng quy mô

Hiệu ứng tỷ lệ sẽ tăng hoặc giảm kích thước của bất kỳ mục nào dựa trên tốc độ và hướng cuộn của khách truy cập. Nếu bạn muốn thu hút sự chú ý vào một phần tử cụ thể, chẳng hạn như lời kêu gọi hành động, bạn có thể đặt hiệu ứng tỷ lệ để tăng kích thước của phần tử khi nó đến gần tâm khung hơn. cửa sổ. Tất nhiên, cũng có nhiều khả năng khác!

Hiệu ứng mở rộng

Hiệu ứng xoay

Hiệu ứng xoay với việc xoay một mục theo một trong hai hướng dựa trên tốc độ và hướng cuộn của khách truy cập. Sự quay tinh tế thực sự có thể mang lại những cảnh sống động. Chỉ cần xoay một chút khi kết hợp với chuyển động ngang có thể trông rất tuyệt! Hoặc để các phần tử chuyển động thành vòng tròn.

Điều chỉnh hình ảnh hiệu ứng xoay divi

Giao diện trực quan mới

Vẻ đẹp thực sự của các hiệu ứng cuộn của Divi là sự dễ sử dụng của chúng! Có một giao diện người dùng mới giúp đơn giản hóa quá trình tạo ảnh động web để mọi người có thể truy cập chúng. Chỉ với một cú nhấp chuột, bạn có thể thêm hoặc kết hợp một trong sáu hiệu ứng cuộn của Divi. Ngay khi ra khỏi hộp, chúng sẽ trông rất tuyệt! Sau đó, bạn có thể tinh chỉnh các hiệu ứng để tạo ra các hoạt ảnh nâng cao hơn nữa.

Một cú nhấp chuột và thế là xong!

Bạn muốn thêm hiệu ứng cuộn vào mô-đun? Một cú nhấp chuột sẽ thêm hiệu ứng và nó trông cũng rất tuyệt! Để thêm hiệu ứng cuộn, chỉ cần truy cập nhóm tùy chọn Hiệu ứng cuộn mới trong tab Nâng cao của bất kỳ mô-đun, hàng, cột hoặc phần nào. Nhiều hiệu ứng có thể được kích hoạt cùng lúc và các hiệu ứng sẽ được kết hợp thành một hoạt ảnh mượt mà biến đổi đẹp mắt khi bạn cuộn.

Bạn có muốn toàn quyền kiểm soát? bạn có nó !

Khi bạn kích hoạt hiệu ứng cuộn, bạn có toàn quyền kiểm soát độ lớn của hiệu ứng tại mỗi điểm trong hoạt ảnh. Bằng cách kiểm soát các giá trị bắt đầu, giữa và cuối, bạn kiểm soát làm gì hoạt hình. Sau khi các giá trị được đặt, Divi sẽ xử lý phần còn lại và sẽ chuyển đổi phần tử khi nó di chuyển xung quanh trong cửa sổ trình duyệt, tạo ra một hoạt ảnh.

  • Giá trị khởi điểm - Trạng thái của hoạt ảnh bắt đầu được sử dụng khi phần tử nhập vào cuối cửa sổ trình duyệt.
  • Giá trị trung gian - Trạng thái hoạt ảnh trung gian sẽ được chuyển khi phần tử di chuyển đến giữa cửa sổ.
  • Giá trị cuối - Trạng thái hoạt ảnh kết thúc xảy ra khi mục rời khỏi cửa sổ trình duyệt ở đầu màn hình.

Ví dụ: hiệu ứng độ mờ với giá trị bắt đầu là 0 (vô hình), giá trị trung bình là 100 (hiển thị hoàn toàn) và giá trị kết thúc bằng 0 (ẩn), sẽ thay đổi từ trạng thái ẩn khi nó đi vào cho đến khi nó hiển thị 100% ở giữa cửa sổ, sau đó nó sẽ biến mất ở trạng thái vô hình khi thoát khỏi cửa sổ.

Điều chỉnh dòng thời gian hoạt ảnh

Bạn không chỉ có thể điều chỉnh các giá trị hoạt ảnh mà còn có thể điều chỉnh dòng thời gian hoạt ảnh. Giao diện người dùng dòng thời gian thể hiện chiều cao của cửa sổ trình duyệt. Mỗi khung hình ảnh động có thể được kích hoạt ở một vị trí khác nhau trong cửa sổ. Điều này cho phép bạn kiểm soát thời gian bắt đầu, kết thúc và thời gian của hoạt ảnh dựa trên vị trí của clip hoạt ảnh trong trục y của cửa sổ trình duyệt.

  • Bắt đầu vị trí khung hình chính - Tùy chọn này kiểm soát thời gian bắt đầu hoạt ảnh. Nếu bạn muốn trì hoãn hoạt ảnh, hãy kéo vị trí của khung hình chính bắt đầu vào trong.
  • Vị trí khung hình chính giữa - Điều này kiểm soát điểm mà tại đó hoạt ảnh đạt đến giá trị hoạt ảnh trung tâm của nó. Nó không nhất thiết phải chính xác ở giữa dòng thời gian hoạt ảnh. Bạn có thể di chuyển khung hình chính giữa đến bất kỳ vị trí nào trong cửa sổ.
  • Vị trí cuối khung hình chính - Điều khiển này được sử dụng để kết thúc hoạt ảnh. Nếu bạn muốn hoạt ảnh kết thúc trước khi clip thoát khỏi cửa sổ trình duyệt, bạn có thể kéo vị trí khung hình chính kết thúc vào trong.

Thêm trạng thái tĩnh vào bất kỳ hoạt ảnh nào

Bạn cũng có thể thêm các khoảng tạm dừng vào hoạt ảnh của mình bằng cách tăng thời lượng của giá trị hiệu ứng tĩnh giữa. Để tạo thời lượng hoạt ảnh tĩnh, hãy nhấp vào hai mũi tên khi bạn di chuột qua khung hình chính giữa. Sau đó, bạn có thể mở rộng khung hình chính giữa bằng cách kéo các cạnh của nó qua lại. Trong thời điểm này trong hoạt ảnh, phần tử sẽ vẫn ở trạng thái tĩnh. Sau khi thời lượng tĩnh kết thúc, hoạt ảnh sẽ tiếp tục chuyển sang giá trị cuối cùng của nó.

Bạn nghĩ gì về những tính năng mới này? Đừng ngần ngại chia sẻ ý kiến ​​của bạn trong phần bình luận.