Không có gì bí mật khi các trang "Giới thiệu về chúng tôi" rất tốt trong việc thúc đẩy các nhấp chuột đến website. Đây cũng là loại trang sẽ nhấn mạnh phần con người của doanh nghiệp đằng sau Website. 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 để cải thiện trải nghiệm trang là cung cấp phần thành viên trong nhóm giúp nhân viên của bạn được chú ý. Trên hết, bạn có thể thêm hiệu ứng di chuột sinh học vào ảnh của các thành viên trong nhóm chỉ bằng các tùy chọn tích hợp của Divi.

Điều này sẽ cho phép bạn tiết kiệm không gian trên trang bạn đang làm việc và tạo tương tác di chuột giữa bạn và khách.

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

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

di động

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

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 cách sử dụng một cột.

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.

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

Sau đó, chuyển đến 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

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ó

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 dải phân cách của bạn cho phù hợp:

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

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

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

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.

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ó

khoảng cách

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

• 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

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
• Lực lan truyền bóng hộp: -14px
• Màu bóng: rgba (0,0,0,0,3)

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

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

Đã đến lúc bắt đầu thêm các mô-đun! Để đạt được hiệu ứng di chuột 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 làm nổi bật. Mô-đun Hình ảnh sẽ chứa hình ảnh của thành viên trong nhóm mà bạn muốn giới thiệu.

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

Bộ lọc

Thiết kế chúng tôi tạo ra hoàn toàn là 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à loại bỏ tất cả độ bão hòa.

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

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

Thêm nội dung

Tiếp tục bằng cách thêm mô-đun Blurb mới ngay bên dưới mô-đun hình ảnh ở cột 1. Thêm tên 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 vào hộp. nội dung.

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

Điều tiếp theo chúng ta sẽ làm là chọn một biểu tượng lựa chọn sẽ hiển thị khách rằng không chỉ có một bức ảnh.

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

Tiếp theo, 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)

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)

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

Chúng tôi muốn một biểu tượng hiển thị sẽ giúp khách để hiểu rằng họ có thể bay qua nó. Thay đổi cài đặt biểu tượng để có 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 Kích thước Phông chữ Biểu tượng: Có
• Kích thước phông chữ biểu tượng: 50px

Cài đặt biểu tượng di chuột

Tuy nhiên, chúng tôi không muốn biểu tượng xuất hiện khi di chuột. Đó 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)

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

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

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

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

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)

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

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 mình. Để 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.

Chỉnh sửa 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à sao chép nó trong mô-đun Blurb để hoàn thành phần thành viên trong nhóm!

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

di động

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 tích hợp của Divi. 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 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 di chuột qua sinh họ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 nhớ để lại bình luận trong phần bình luận bên dưới!