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!
Bonjour,
Cảm ơn bạn vì hướng dẫn này, nó rất hữu ích đối với tôi.
Tuy nhiên, tôi gặp phải 2 vấn đề nhỏ:
- nền di chuột không áp dụng (tôi có ấn tượng rằng nó nằm sau hình ảnh ...)
- cầu vượt không mở theo cách giống như trong ví dụ (văn bản của tôi vẫn ở cùng độ cao với biểu tượng và không mở lên trên) trông đẹp mắt.
Bạn có một giải pháp? Cảm ơn bạn
Bonne dạ hội
Bonjour,
Bạn có thể chia sẻ ảnh chụp màn hình không?
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 đề khi di chuột qua di chuột của tôi bị lắc và không chảy. Bạn có biết điều này là do gì không?
Merci
Xin chào Sal
Không có ý kiến xin lỗi.