Bạn có muốn tạo tiểu sử với DIVI của các thành viên trong nhóm của mình bằng hiệu ứng di chuột không?
Không có gì bí mật khi các trang về lý tưởng để tạo ra các tương tác trên Website. Đây cũng là loại trang này sẽ nhấn mạnh phần con người của công ty đằng sau Website.
Một trong những điều bạn có thể làm để cải thiện trải qua của trang À Propos là cung cấp phần thành viên trong nhóm giúp nhân viên của bạn trở thành tâm điểm.
Đọc cũng: Divi: Cách tạo tiêu đề toàn cầu trong suốt và cố định
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn từng bước cách thực hiện. Một khi bạn hiểu cách tiếp cận, bạn có thể tùy chỉnh nó 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.
Máy tính desktop
di động
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ị đệm tùy chỉnh sau:
- Lề nội bộ (Trên cùng và Dưới cùng): 100px
Thêm dòng số 1
Cấu trúc của cột
Khi bạn đã hoàn tất việc thêm các phần đệm 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 dòng mới bằng cách sử dụng một cột duy nhất.
Thêm mô-đun Văn bản
Thêm mô-đun Văn bản vào cột có Tiêu đề kích thước H2 mà bạn chọn.
Cài đặt văn bản H2
Tiếp theo, đi tới cài đặt văn bản H2 và thực hiện một số thay đổi.
- Phông chữ tiêu đề: Cinzel
- Kiểu sao chép tiêu đề: Tt (Xem Chụp)
- Căn chỉnh văn bản: Căn giữa
- Tiêu đề Kích thước văn bản: 70px
Thêm mô-đun Dấu phân cách
tầm nhìn
Tiếp tục bằng cách thêm một mô-đun Dấu phân cách mới ngay bên dưới Mô-đun Văn bản.
- Hiển thị dải phân cách: Có
Màu dải phân cách
Chuyển đến tab Kiểu, mở cài đặt màu và thay đổi màu phân cách của bạn cho phù hợp:
- Màu nhãn: # 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 tối đa: 26%
- Căn chỉnh văn bản: Căn giữa
Thêm dòng 2
Cấu trúc của 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 bất kỳ mô-đun nào, hãy mở cài đặt dòng và thực hiện một số thay đổi đối với cài đặt định cỡ.
- Sử dụng chiều rộng máng xối tùy chỉnh: Có
- Khoảng cách cột: 1
- Chiều rộng tối đa: 2 pixel
- hài hòa chiều cao cột: Có
khoảng cách
Tiếp theo, chuyển đến cài đặt khoảng cách và thêm các giá trị lề tùy chỉnh.
- Lề (Trên và Dưới): 50 px
- Lề nội bộ: (Trên và dưới: 10px), (Trái và Phải: 5px)
Nhập các tham số của từng cột và cũng sửa đổi các giá trị của lề nội bộ như sau:
- Lề trong (Trái và Phải): 5px
Hộp bóng
Chúng tôi cũng tạo độ sâu cho đường của mình bằng cách thêm bóng hộp vào đó với các cài đặt sau:
- Độ mạnh của Box Shadow Blur: 80px
- Sức mạnh lan truyền của Box Shadow: -14px
- Màu phông chữ phụ đề: rgba (0,0,0,0.3)
Thêm mô-đun Hình ảnh vào cột 1
Tải hình ảnh trong 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, tổng cộng chúng ta sẽ cần hai mô-đun; một mô-đun Hình ảnh và một mô-đun Tóm tắt.
Xem thêm: Divi: Cách tạo lưới hình ảnh đáp ứng với các liên kết và hiệu ứng di chuộ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 làm nổi bật. Mặt khác, mô-đun Tóm tắt sẽ được sử dụng để thêm biểu tượng ở góc dưới bên trái và tiểu sử khi 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 thang độ 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 Tóm tắt vào cột 1
Tiếp tục bằng cách thêm mô-đun Tóm tắt 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 một số thông tin bổ sung về thành viên nhóm vào hộp. nội dung.
Chọn 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 có nhiều hơn chỉ là một hình ảnh.
Màu nền mặc định
Tiếp theo, chúng ta sẽ chọn một màu nền hoàn toàn trong suốt.
- Nền: rgba (255,255,255,0)
Màu nền khi di chuột
Và chúng tôi sẽ thay đổi màu đó khi di chuột.
- 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ư thế này.
- Màu biểu tượng: #ffffff
- Màu nền của Hình ảnh / Biểu tượng: # 000000
- Vị trí Hình ảnh / Biểu tượng: Bên trái
- Chiều rộng Hình ảnh / Biểu tượng: 50px
- Hình ảnh / Biểu tượng Hình chữ nhật Tròn: 100px
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ẽ 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 nền hình ảnh / biểu tượng: rgba (255,255,255,0)
Cài đặt văn bản tiêu đề mặc định
Tiếp theo, hãy chuyển đến cài đặt văn bản tiêu đề và thực hiện một số thay đổi.
- Tiêu đề phông chữ: Cinzel
- Văn bản nhẹ nhàng: Văn bản in đậm
- Kiểu sao chép tiêu đề: Tt
- Màu văn bản tiêu đề: # 000000
- Kích thước văn bản tiêu đề: 0px
Cài đặt tiêu đề khi di chuột
Thay đổi kích thước của văn bản khi di chuột.
- Kích thước văn bản tiêu đề: 30px
Mặc định Văn bản Bản trình bày
Đồng thời thay đổi cài đặt làm nổi bật.
- Nội dung phông chữ: Mở Sans
- Màu văn bản nội dung: # 000000
- Kích thước văn bản nội dung: 0px
Cài đặt di chuột qua nội dung văn bản
Và, một lần nữa, hãy thay đổi kích thước của văn bản nội dung khi di chuột.
- Kích thước văn bản nội dung: 14px
Khoảng cách mặc định
Cuối cùng, chúng ta sẽ cần tạo chồng chéo giữa mô-đun Tóm tắt và mô-đun Hình ảnh bằng cách sử dụng lề trên âm.
- Lợi nhuận trên: -3,7 vw (máy tính để bàn), -9 vw (máy tính bảng và điện thoại)
- Lề dưới: 1,5 vw (máy tính bảng), 2 vw (điện thoại)
Khoảng cách khi di chuột
Thay đổi giá trị ký quỹ khi di chuột.
- Ký quỹ (Trên cùng): -11,38 vw
- Lề nội bộ: (Trên và dưới: 20px), (Phải: 50px)
Sao chép cột 1 hai lần
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 có thể sao chép cột 1 hai lần từ các tham số hàng. Xóa hai cột khác trước, sau đó nhấp đúp để sao chép cột 1
Thay đổi hình ảnh và nội dung của mô-đun Tóm tắt trong các cột được sao chép
Đừng quên thay đổi hình ảnh trong mô-đun Hình ảnh và mô tả trong mô-đun Tóm tắt để kết thúc!
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.
Máy tính desktop
di động
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Trong bài viết này, chúng tôi đã hướng dẫn bạn cách tạo hiệu ứng di chuột trên ảnh của các thành viên trong nhóm chỉ bằng cách sử dụng các tùy chọn có sẵn của Divi. Chúng tôi đã đề cập tầm quan trọng của việc tạo các trang 'Giới thiệu' tốt, vì đây là một trong những trang được truy cập nhiều nhất.
Việc sử dụng hiệu ứng di chuột cho ảnh của thành viên nhóm sẽ không chỉ đưa trang giới thiệu của bạn lên một tầm cao mới mà còn tạo ra sự tương tác với bạn. khách. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi tại phần bình luận để thảo luận về nó.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
