Bạn có muốn hiển thị các biểu tượng mạng xã hội khi di chuột qua ảnh trong Divi ?
Khi tạo trang giới thiệu, bạn có thể cân nhắc việc thêm các thành viên trong nhóm khác nhau của công ty mình vào một buổi giới thiệu.
Khi bạn bắt đầu quá trình thiết kế này, bạn sẽ nhận thấy rằng không thể thiếu ba thứ ngay từ đầu: một hình ảnh, một cái tên và một vị trí. Nhưng nếu bạn muốn giới thiệu các thành viên trong nhóm của mình nhiều hơn, bạn cũng có thể xem xét thêm các liên kết truyền thông xã hội của họ vào thiết kế.
Tất nhiên, bạn có thể làm theo cách cũ và thêm mô-đun 'Theo dõi chúng tôi trên mạng xã hội' dưới tên và chức vụ của người đó. Tuy nhiên, bạn cũng có thể chọn thêm một chút tương tác bằng cách hiển thị các biểu tượng này ngay khi ai đó di chuột qua một trong các hình ảnh của người đó.
Trong hướng dẫn hôm nay, chúng tôi sẽ chỉ cho bạn chính xác cách thực hiện việc này bằng cách sử dụng Divi.
Đ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 nhanh kết quả trên các kích thước màn hình khác nhau.
Kết quả trên máy tính xách tay
Kết quả trên điện thoại di động
Hãy bắt đầu hiện thực hóa với Divi!
Thêm phần # 1
Màu nền
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.
- Nền: # 0f0f0f
khoảng cách
Chuyển tab mới Thiết kế tùy chọn thả xuống Khoảng cách và sau đó thay đổi cài đặt giãn cách.
- Đệm (Trên và Dưới): 100px
Thêm một dòng mới
Cấu trúc của cột
Tiếp tục bằng cách thêm một hàng mới bằng cách sử dụng cấu trúc cột sau:
Thêm mô-đun “Văn bản” # 1 vào cột
Thêm tiêu đề có kích thước H1
Thêm một mô-đun đầu tiên "Chữ" đến cột hàng
Thêm vào nội dung size H1 (Heading 1) tùy bạn lựa chọn.
Cài đặt văn bản H1
Chuyển tab mới Thiết kế, kéo tùy chọn xuống Tiêu đề văn bản và thay đổi cài đặt văn bản H1 cho phù hợp:
- Phông chữ tiêu đề: Alata
- Màu văn bản tiêu đề: #ffffff
- Cỡ chữ:
- Máy tính để bàn: 50px
- Máy tính bảng: 45px
- Điện thoại: 35px
- Chiều cao dòng tiêu đề: 1,2 em
Thêm mô-đun "Dải phân cách" vào cột
tầm nhìn
Tiếp theo, chúng tôi sẽ thêm một mô-đun "Dải phân cách". Đảm bảo rằng tùy chọn “Hiển thị dải phân cách” được bật.
- Hiển thị dải phân cách: CÓ
Dòng
Chuyển tab mới Thiết kế, kéo tùy chọn xuống Dòng và thay đổi màu đường.
- Màu đường kẻ: #ffffff
kích thước
Tùy chọn thả xuống Sizing và thay đổi cả cài đặt định cỡ.
- Trọng lượng dải phân cách: 2px
- Chiều rộng tối đa: 100px
- Chiều cao: 2px
Thêm mô-đun “Văn bản” # 2 vào cột
Thêm nội dung mô tả
Mô-đun tiếp theo và cuối cùng chúng ta cần trong dòng này là một mô-đun “Văn bản” khác có nội dung mô tả về sự lựa chọn của bạn.
Cài đặt văn bản
Chuyển tab mới Thiết kế, kéo tùy chọn xuống bản văn và thay đổi cài đặt văn bản như sau:
- Phông chữ văn bản: Alata
- Màu văn bản: # 7c7c7c
- Kích thước: 17px
- Chiều cao dòng văn bản: 1,9 em
khoảng cách
Đồng thời loại bỏ lề dưới mặc định.
- Lề (Dưới cùng): 0px
Thêm phần # 2
Nền Gradient
Thêm một phần khác ngay bên dưới phần trước và sử dụng nền gradient cho phần này.
- Màu bên trái: # 0f0f0f
- Màu bên phải: # 000000
- Vị trí bên trái: 10%
- Vị trí bên phải: 90%
khoảng cách
Chuyển tab mới Thiết kế, kéo tùy chọn xuống Khoảng cách và sau đó thay đổi cài đặt giãn cách.
- Phần đệm (Trên cùng): 0px
- Phần đệm (Dưới cùng): 200px
Thêm một dòng mới
Cấu trúc của cột
Tiếp tục bằng cách thêm một hàng mới vào phần bằng cách sử dụng cấu trúc cột sau:
kích thước
Mở cài đặt dòng và thay đổi cài đặt định cỡ như sau:
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Chiều rộng máng xối: 2px
Thêm mô-đun “Theo dõi trên mạng xã hội” vào cột 1
Thêm các mạng xã hội mà bạn chọn
Mô-đun đầu tiên chúng tôi cần trong hàng của mình là mô-đun “Theo dõi trên mạng xã hội” trong cột 1. Thêm các mạng xã hội mà bạn chọn.
Xóa màu khỏi từng mạng xã hội riêng lẻ
Mở từng mạng xã hội riêng lẻ
Loại bỏ màu nền.
Thêm liên kết đến từng mạng xã hội riêng lẻ
Đồng thời thêm liên kết tương ứng với từng mạng xã hội.
Màu nền mặc định
Sau đó, quay lại cài đặt mô-đun chung và áp dụng màu nền sau:
- Nền: rgba (0,0,0,0)
Màu nền khi di chuột
Thay đổi màu nền khi di chuột.
- Nền (Di chuột): # 494949
Hình nền
Tiếp theo, tải lên một hình nền.
- Kích thước ảnh nền: Bìa
- Hỗn hợp ảnh nền: Multiply
sự liên kết
Chuyển tab mới Thiết kế và sửa đổi căn chỉnh.
- Mô-đun căn chỉnh: Trung tâm
biểu tượng
Đồng thời thay đổi màu biểu tượng.
- Màu biểu tượng: rgba (0,0,0,0)
khoảng cách
Sau đó, chuyển đến cài đặt giãn cách (Khoảng cách) và áp dụng các giá trị sau:
- Lề (Dưới cùng): 0px
- Phần đệm (Trên cùng):
- Máy tính để bàn: 250px
- Máy tính bảng: 450px
- Điện thoại: 200px
- Phần đệm (Dưới cùng): 20px
Biên giới
Chúng tôi cũng đang thay đổi cài đặt đường viền.
- Góc tròn: 100px
- Chiều rộng đường viền: 2px
- Màu viền: rgba (255,255,255,0)
Đường viền khi di chuột
Sử dụng màu viền khác khi di chuột.
- Màu viền (Di chuột): #ffffff
Lớp CSS
Sau đó chuyển đến tab Nâng cao và áp dụng một lớp CSS tùy chỉnh.
- Lớp CSS: nhóm-xã hội
Css tùy chỉnh (Trước)
Và hoàn thành cài đặt mô-đun bằng cách bật cài đặt di chuột trên phần tử "Trước" và bằng cách sao chép và dán các dòng mã CSS sau:
content: "Restons connectés!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
Thêm mô-đun "Người" vào cột 1
Thêm nội dung mô tả
Mô-đun tiếp theo và cuối cùng mà chúng ta cần trong cột 1 là mô-đun “Người”. Điền thêm nội dung mô tả về sự lựa chọn của bạn.
Cài đặt văn bản
Chuyển tab mới Thiết kế và thay đổi cài đặt văn bản như sau:
- Căn chỉnh văn bản: Căn giữa
- Màu văn bản: Ánh sáng
Cài đặt văn bản tiêu đề
Sau đó tùy chỉnh văn bản tiêu đề.
- Phông chữ tiêu đề: Alata
- Tiêu đề Kích thước Văn bản của tiêu đề:
- Máy tính để bàn: 27px
- Máy tính bảng: 25px
- Điện thoại: 22px
Cài đặt văn bản mô tả công việc
Sau đó chỉnh sửa cài đặt văn bản mô tả công việc.
- Phông chữ vị trí: Alata
- Kích thước văn bản vị trí:
- Máy tính để bàn: 17px
- Máy tính bảng và điện thoại: 15px
khoảng cách
Thay đổi cài đặt giãn cách như sau:
- Đệm (Trên và Dưới): 40px
Biên giới
Và hoàn thành cài đặt mô-đun bằng cách áp dụng các cài đặt đường viền sau:
- Chiều rộng đường viền: 1px
- Màu viền: #ffffff
Xóa các cột còn lại khỏi hàng
Khi bạn đã hoàn thành các mô-đun Cột 1, bạn có thể xóa hai cột còn lại khỏi hàng.
Sao chép cột hai lần
Sử dụng lại cột 1 bằng cách sao chép nó hai lần.
Sao chép toàn bộ hàng
Sau đó sao chép toàn bộ hàng nhiều lần nếu cần.
Chỉnh sửa tất cả nội dung trùng lặp
Thêm mô-đun Mã bên dưới mô-đun văn bản cuối cùng trong dòng 1 của phần 1
Bây giờ, để đảm bảo rằng mỗi mạng xã hội thay đổi phong cách của nó ngay sau khi toàn bộ mô-đun được di chuột qua, chúng ta sẽ cần một vài dòng mã CSS. Chúng tôi sẽ đặt mã này trong một mô-đun mã mới mà chúng tôi sẽ thêm vào phần đầu tiên, ngay bên dưới văn bản mô tả
Thêm mã CSS
Sao chép-dán các dòng sau của mã CSS và bạn đã hoàn tất:
<style>
.team-socials:hover li a.icon:before {
color: black !important;
}
.team-socials:hover li a.icon {
background-color: white;
}
</style>
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
Tải xuống DIVI ngay bây giờ !!!
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 đã chỉ cho bạn cách sáng tạo trong việc giới thiệu các thành viên trong nhóm của bạn.
Cụ thể, chúng tôi đã chỉ cho bạn cách hiển thị các biểu tượng mạng xã hội khi bạn di chuột qua một trong các hình ảnh của thành viên trong nhóm. Kết quả là một tương tác tinh tế nhưng thú vị mà bạn có thể sử dụng cho bất kỳ loại Website mà bạn tạo.
Nếu bạn cần thêm các yếu tố để hoàn thành các dự án tạo trang web của mình, hãy duyệt qua 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.
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 trong phần bình luận để thảo luận về nó.
Nhưng trong khi đó, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
