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

Cách thêm hiệu ứng cuộn qua với các chi tiết cho hình ảnh 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ị]

Không có gì bí mật rằng các trang "Chúng tôi là ai" rất tốt để tạo các nhấp chuột trên trang web của bạn. Đây cũng là loại trang sẽ tập trung vào phần con người của doanh nghiệp đằng sau trang web. Biết được điều này, chúng tôi nhận ra rằng điều quan trọng là phải chú ý đến cách chúng tôi cấu trúc các trang, loại thông tin chúng tôi chia sẻ và cách chúng tôi tạo ra các tương tác.

Một trong những điều bạn có thể làm để nâng cao trải nghiệm trang là cung cấp một bộ phận các thành viên trong nhóm đưa nhân viên của bạn vào ánh đèn sân khấu. Ngoài ra, bạn có thể thêm hiệu ứng bioflash vào ảnh của các thành viên trong nhóm chỉ bằng các tùy chọn Divi tích hợp.

Điều này sẽ giúp bạn tiết kiệm không gian trên trang bạn đang làm việc và tạo ra sự tương tác lơ lửng giữa bạn và khách truy cập.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn, từng bước một, làm thế nào để đến đó. Một khi bạn có được cách tiếp cận, bạn có thể tùy chỉnh phong cách thiết kế cho phù hợp với nhu cầu của riêng bạn.

Chúng ta hãy đ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.

Văn phòng

Divi-bio-hover-hiệu quả-desktop-gif.gif

di động

Divi-bio-hover-hiệu quả-mobile-gif.gif

Hãy bắt đầu tái tạo

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

khoảng cách

Tạo một trang mới hoặc mở một trang hiện có và thêm một phần mới bằng cách sử dụng các giá trị điền tùy chỉnh sau:

  • Đệm tốt nhất: 100px
  • Đệm dưới: 100px

hiệu ứng di chuột sinh học

Thêm hàng 1

Cấu trúc cột

Khi bạn đã hoàn tất việc thêm điền tùy chỉnh vào phần của mình, bạn có thể đóng cài đặt phần và thêm một hàng mới bằng một cột duy nhất.

hiệu ứng di chuột sinh học

Thêm một mô-đun văn bản

Thêm nội dung H2

Thêm tiêu đề Mô-đun văn bản vào cột với kích thước H2 tùy chọn.

hiệu ứng di chuột sinh học

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

Sau đó truy cập cài đặt văn bản H2 và thực hiện một số thay đổi đối với giao diện của bản sao.

  • Phông chữ 2: Cinzel
  • Tiêu đề 2 Kiểu chữ: Mũ nhỏ
  • Tiêu đề 2 Căn chỉnh văn bản: trung tâm
  • Tiêu đề 2 Kích thước văn bản: 70px

hiệu ứng di chuột sinh học

Thêm một mô-đun phân chia

tầm nhìn

Tiếp tục thêm một mô-đun phân tách mới ngay bên dưới tiêu đề Mô-đun văn bản.

  • Hiển thị dải phân cách: Có

hiệu ứng di chuột sinh học

Màu của dải phân cách

Chuyển đến tab Thiết kế, mở cài đặt màu và thay đổi màu của dải phân cách cho phù hợp:

  • Màu của dải phân cách: # 333333

hiệu ứng di chuột sinh học

kích thước

Sau đó, chúng tôi sẽ giảm kích thước của dải phân cách và căn giữa nó.

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

  • Chiều rộng: 26%
  • Sắp xếp mô-đun: trung tâm

hiệu ứng di chuột sinh học

Thêm dòng 2

Cấu trúc cột

Ngay bên dưới dòng trước mà bạn đã thêm, tiếp tục và thêm một hàng mới bằng ba cột có kích thước bằng nhau.

hiệu ứng di chuột sinh học

kích thước

Không thêm nhiều mô-đun, mở các tham số dòng và thực hiện một số thay đổi đối với tham số kích thước.

  • Sử dụng chiều rộng tùy chỉnh: Có
  • Đơn vị: PX
  • Chiều rộng tùy chỉnh: 2000px
  • 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ó

hiệu ứng di chuột sinh học

khoảng cách

Sau đó, truy cập cài đặt khoảng cách và thêm lề tùy chỉnh và điền giá trị.

  • Lề trên: 50px
  • Lề dưới: 50px
  • Đệm hàng đầu: 10px
  • Đệm dưới: 10px
  • Đệm trái: 5px
  • Upholstery Right: 5px
  • Cột 1, 2 và 3 ở bên trái: 5px
  • Cột 1, 2 và 3 ở bên phải: 5px

hiệu ứng di chuột sinh học

Hộp bóng

Chúng tôi cũng cung cấp cho dòng của chúng tôi một chút chiều sâu bằng cách thêm một bóng hộp với các tham số sau:

  • Hộp bóng mờ lực lượng: 80px
  • Sức mạnh lan truyền của Shadowbox: -14px
  • Màu bóng: rgba (0,0,0,0,3)

hiệu ứng di chuột sinh học

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

Tải một hình ảnh vào một mô-đun hình ảnh

Đã đến lúc bắt đầu thêm các mô-đun! Để đạt được hiệu ứng tràn sinh học, chúng ta sẽ cần tổng cộng hai mô-đun. một mô-đun hình ảnh và một mô-đun blurb. Mô-đun hình ảnh sẽ chứa hình ảnh của thành viên nhóm bạn muốn trình bày.

Trong khi đó, mô-đun Blurb sẽ được sử dụng để thêm biểu tượng ở góc dưới bên trái và tiểu sử bay bổng. Thêm một mô-đun hình ảnh vào cột đầu tiên bằng cách sử dụng một hình ảnh vuông.

hiệu ứng di chuột sinh học

Bộ lọc

Thiết kế chúng tôi tạo ra hoàn toàn bằng thang độ xám. Để thêm màu xám này vào hình ảnh của chúng tôi, hãy chuyển đến cài đặt bộ lọc và xóa tất cả độ bão hòa.

  • Độ bão hòa: 0%

hiệu ứng di chuột sinh học

Thêm mô-đun Blurb vào cột 1

Thêm nội dung

Tiếp tục thêm một mô-đun Blurb mới ngay bên dưới mô-đun hình ảnh trong cột 1. Thêm tên của thành viên nhóm vào trường tiêu đề và nhập thông tin bổ sung về thành viên nhóm trong khu vực nội dung.

hiệu ứng di chuột sinh học

Chọn một biểu tượng

Điều tiếp theo chúng tôi sẽ làm là chọn một biểu tượng lựa chọn sẽ cho khách truy cập thấy có nhiều thứ hơn là một bức tranh.

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ệu ứng di chuột sinh học

Màu nền mặc định

Sau đó, chúng tôi sẽ chọn một màu nền trong suốt đầy đủ.

  • Màu nền: rgba (255,255,255,0)

hiệu ứng di chuột sinh học

Màu nền trên cầu vượt

Và chúng ta sẽ thay đổi màu này lơ lửng.

  • Màu nền: rgba (255,255,255,0.88)

hiệu ứng di chuột sinh học

Cài đặt biểu tượng mặc định

Chúng tôi muốn một biểu tượng có thể nhìn thấy sẽ giúp khách truy cập hiểu rằng họ có thể bay qua nó. Thay đổi cài đặt biểu tượng để có được một biểu tượng như vậy.

  • Màu biểu tượng: #ffffff
  • Biểu tượng hình tròn: có
  • Màu vòng tròn: # 000000
  • Vị trí biểu tượng: bên trái
  • Sử dụng cỡ chữ biểu tượng: Có
  • Kích thước phông chữ biểu tượng: 50px

hiệu ứng di chuột sinh học

Thông số của biểu tượng vượt mức

Tuy nhiên, chúng tôi không muốn biểu tượng xuất hiện tràn ra. Đó là lý do tại sao chúng tôi sử dụng một màu hoàn toàn trong suốt thay thế.

  • Màu biểu tượng: rgba (255,255,255,0)
  • Màu của hình tròn: rgba (255,255,255,0)

hiệu ứng di chuột sinh học

Cài đặt tiêu đề mặc định

Sau đó đi đến cài đặt văn bản của tiêu đề và thực hiện một số thay đổi.

  • Cảnh sát tiêu đề: Cinzel
  • Phông chữ: In đậm
  • Kiểu chữ tiêu đề: Mũ nhỏ
  • Tiêu đề văn bản màu: # 000000
  • Kích thước tiêu đề văn bản: 0px

hiệu ứng di chuột sinh học

Di chuột qua các cài đặt văn bản của tiêu đề

Thay đổi kích thước của văn bản bằng cách di chuột.

  • Kích thước tiêu đề văn bản: 30px

hiệu ứng di chuột sinh học

Cài đặt văn bản cơ thể mặc định

Cũng thay đổi cài đặt văn bản cơ thể.

  • Cảnh sát cơ thể: Mở Sans
  • Văn bản màu cơ thể: # 000000
  • Kích thước văn bản cơ thể: 0px
  • Chiều cao cơ thể: 1.8em

hiệu ứng di chuột sinh học

Thông số của cơ thể trên overflight

Và, một lần nữa, thay đổi kích thước cơ thể của văn bản lơ lửng.

  • Kích thước văn bản cơ thể: 14px

hiệu ứng di chuột sinh học

Khoảng cách mặc định

Cuối cùng nhưng không kém phần quan trọng, chúng ta sẽ cần tạo sự chồng lấp giữa mô-đun Blurb và mô-đun hình ảnh bằng cách sử dụng lề trên âm.

  • Lề trên: -3.7vw (máy tính để bàn), -9vw (máy tính bảng và điện thoại)
  • Lề dưới: 1.5vw (máy tính bảng), 2vw (điện thoại)

hiệu ứng di chuột sinh học

Khoảng cách văn phòng phẩm

Thay đổi lề tùy chỉnh và điền giá trị trong cuộn qua.

  • Lề trên: -11,38vw
  • Đệm hàng đầu: 20px
  • Đệm dưới: 20px
  • Upholstery Right: 50px

hiệu ứng di chuột sinh học

Nhân bản hai mô-đun hai lần và đặt các bản sao vào các cột còn lại.

Chúng tôi đã hoàn thành việc tạo hiệu ứng di chuột sinh học đầu tiên của chúng tôi. Để tiết kiệm thời gian, chúng ta chỉ cần sao chép hai mô-đun trong cột 1 hai lần và đặt các bản sao vào hai cột còn lạ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]

hiệu ứng di chuột sinh học

Sửa đổi hình ảnh và nội dung của mô-đun Blurb

Đừng quên thay đổi hình ảnh trong mô-đun Hình ảnh và bản sao trong mô-đun Blurb để hoàn thành phần của các thành viên trong nhóm!

hiệu ứng di chuột sinh học

khảo sát

Bây giờ chúng ta đã trả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 lần cuối.

Văn phòng

hiệu ứng di chuột sinh học

di động

hiệu ứng di chuột sinh học

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 hiệu ứng di chuột sinh học cho ảnh của các thành viên trong nhóm chỉ bằng các tùy chọn Divi tích hợp. Chúng tôi nhấn mạnh tầm quan trọng của việc tạo ra các trang tốt bởi vì chúng là một trong những trang web được truy cập nhiều nhất.

Sử dụng hiệu ứng cầu vượt hữu cơ cho ảnh của các thành viên trong nhóm sẽ không chỉ cải thiện chất lượng trang của bạn mà còn tạo ra sự tương tác với khách truy cập của bạn. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy chắc chắn để 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 4
  1. Bonjour,

    Cảm ơn bạn đã hướng dẫn này, nó rất hữu ích cho tôi.
    Tuy nhiên, tôi gặp phải 2 vấn đề nhỏ:
    - nền trong ánh sáng quá mức không được áp dụng (Tôi có ấn tượng rằng nó nằm phía sau hình ảnh)
    - tổng quan không mở theo cùng một cách như trong ví dụ (văn bản của tôi vẫn giữ nguyên chiều cao với biểu tượng và không mở ra) giúp tôi hiển thị đẹp.

    Bạn có một giải pháp? Cảm ơn bạn

    Bonne dạ hội

  2. Bonjour,
    Cảm ơn bạn cho hướng dẫn này, nó được giải thích rất tốt.
    Tuy nhiên, tôi có một vấn đề với việc di chuột qua chuột, di chuột run rẩy của tôi không phải là chất lỏng. Bạn có biết đây là gì không?

    Merci

Để 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
2 cổ phiếu
cổ phiếu2
tweet
Enregistrer