Bạn có muốn làm cho các biểu tượng mạng xã hội của mình trở nên hấp dẫn với Divi không?
Với các tùy chọn 'cố định' được tích hợp sẵn của Divi, bạn có thể dễ dàng thiết kế mô-đun 'Theo dõi phương tiện truyền thông xã hội' cố định sẽ giữ cho các biểu tượng mạng xã hội đó ở phía trước và chính giữa khi người dùng cuộn xuống trang.
Ngoài ra, bằng cách thêm kiểu tùy chỉnh vào mô-đun ở trạng thái dính, chúng tôi có thể tạo các chuyển tiếp thiết kế độc đáo khi chuyển sang trạng thái dính trong khi cuộn.
Vì vậy, nếu bạn đang tìm kiếm toàn quyền kiểm soát thiết kế nút mạng xã hội của mình, thì hướng dẫn này là dành cho bạn!
khảo sát
Dưới đây là tổng quan ngắn gọn về kết quả mà chúng tôi sẽ thu được trong hướng dẫn này.
Tạo một trang mới với "Divi Builder"
Từ bảng điều khiển WordPress, hãy chuyển đến “Trang> Thêm mới”
Đặt cho nó một tiêu đề có ý nghĩa với bạn sau đó nhấp vào “Sử dụng DiviBuilder”
Đối với hướng dẫn này, chúng tôi sẽ sử dụng một bố cục được xác định trước. Để làm điều này, hãy nhấp vào “Duyệt qua các bố cục”
Tìm và chọn bố cục "Nhà thiết kế thời trang"
Chọn bố cục "Đổ bộ" sau đó bấm “Sử dụng bố cục này”
Thiết kế mô-đun "Theo dõi truyền thông xã hội" trong Divi
Tạo phần
Thêm một phần thông thường mới vào bố cục.
Sau đó, chuyển phần mới lên đầu trang (hoặc bất cứ nơi nào bạn muốn thêm các liên kết theo dõi trên mạng xã hội của mình).
Mở cài đặt phần và cập nhật màu nền để phù hợp với bố cục như sau:
- Màu nền: # fff9f2
Dưới tab Thiết kế, mở rộng tùy chọn Khoảng cách và sửa đổi các thông số sau:
- Đệm (Trên và Dưới): 10px
Tạo dòng
Bên trong phần, thêm một hàng vào một cột.
Mở cài đặt dòng, kéo tùy chọn Khoảng cách xuống và thay đổi cài đặt 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: 1
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
Tiếp tục bằng cách cuộn xuống tùy chọn Khoảng cách
- Đệm (Trên và Dưới): 0px
Tạo mô-đun "Theo dõi truyền thông xã hội" cố định
Khi phần và dòng đã ở đúng vị trí, hãy thêm một mô-đun mới “Social MediaFollow” tại dòng.
Cập nhật cài đặt mô-đun
Mở cài đặt của mô-đun "Theo dõi trên mạng xã hội".
Điều đầu tiên chúng ta cần làm là thêm một vị trí dính vào mô-đun.
Dưới tab Nâng cao, kéo tùy chọn xuống Hiệu ứng cuộn và cập nhật những điều sau:
- Vị trí cố định: Bám sát lên đầu
Khi vị trí ở trạng thái dính, bạn sẽ có thể nhắm mục tiêu kiểu của mô-đun ở trạng thái dính (giống như bạn có thể làm đối với trạng thái di chuột). Điều này có thể được thực hiện bằng cách di chuột qua một tùy chọn và nhấp vào biểu tượng ghim.
Dưới tab Thiết kế, cập nhật những điều sau:
- Mô-đun căn chỉnh: Trung tâm
- Màu biểu tượng: # 000000 (Máy tính để bàn), #ffffff (Di chuột), #ffffff (Dính)
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
- Đệm: 20px (Trên), 12px (Dưới), 10px (Trái và Phải)
Cài đặt mạng xã hội
Khi cài đặt mô-đun đã sẵn sàng, bây giờ chúng ta có thể chuyển sự chú ý của mình đến việc tạo kiểu cho các biểu tượng truyền thông xã hội riêng lẻ.
Để làm điều này, trước tiên chúng ta sẽ tùy chỉnh một biểu tượng mạng xã hội. Sau đó, chúng tôi sẽ nhân bản mạng xã hội để tạo ra những mạng khác.
Bạn đã có hai mạng xã hội trong tab nội dung theo mặc định. Xóa một cái và nhấp để chỉnh sửa cái còn lại.
Khi ở trong cài đặt mạng xã hội, hãy chọn một mạng xã hội và cập nhật màu nền cho các trạng thái màn hình, di chuột và cố định.
- Mạng xã hội : TikTok (hoặc bất cứ điều gì bạn muốn)
- Nền: trong suốt (Máy tính để bàn), # fe2c55 (Di chuột), # 000000 (Cố định)
LỪA : Màu nền sẽ tự động thay đổi để phù hợp với thương hiệu truyền thông xã hội. Bạn có thể sao chép màu này và thêm nó làm màu nền trạng thái di chuột cho biểu tượng. Thao tác này sẽ hiển thị màu nền mặc định của mạng xã hội khi bạn di chuột qua biểu tượng.
Giờ đây, bạn có thể chuyển đổi giữa các tab để xem màu nền cho cả ba trạng thái (màn hình nền, di chuột và cố định).
Tiếp theo, hãy cung cấp cho biểu tượng một hình bầu dục đẹp và một đường viền để phù hợp với bố cục hơn. Dưới tab Thiết kế, cập nhật những điều sau:
- Góc tròn: 50%
- Chiều rộng đường viền: 1px
- Màu viền: # 000000 (Máy tính để bàn), Trong suốt (Di chuột)
Hiện tại, biểu tượng có dạng hình tròn. Để có được hình bầu dục hơn, chúng tôi sẽ thay đổi cài đặt giãn cách như sau:
- Lề (Trái và Phải): 15px (Máy tính để bàn), 0px (Dính), 0px (Điện thoại)
- Padding (Trái và Phải): 16px (Máy tính để bàn), 14px (Máy tính bảng), 0px (Điện thoại)
Mạng xã hội trùng lặp
Bây giờ chúng ta đã thiết kế xong mạng xã hội đầu tiên, chúng ta có thể nhân đôi biểu tượng để tạo ra những cái khác.
Để làm điều này, hãy mở cài đặt mô-đun Truyền thông xã hội và nhấp vào biểu tượng trùng lặp. Đối với ví dụ này, hãy tạo thêm 4 cái nữa.
Bây giờ tất cả những gì chúng ta phải làm là cập nhật từng mạng xã hội mới. Vì điều này sẽ thay đổi màu nền, bạn cũng sẽ cần cập nhật màu nền cho từng màu.
Để thực hiện việc này, hãy mở cài đặt của mạng xã hội thứ hai và cập nhật những điều sau:
- Mạng xã hội: Facebook
- Nền: trong suốt (Máy tính để bàn), # 3b5998 (Di chuột)
Tiếp tục quá trình tương tự để cập nhật phần còn lại của các mạng xã hội.
Kết quả cuối cùng
Bây giờ chúng ta hãy xem kết quả thu được trên các kích thước màn hình khác nhau.
Tải xuống DIVI ngay bây giờ !!!
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Các nút mạng xã hội hầu như luôn là một tính năng chính trên Website. Chúng là một trong những cách chính để kết nối các kênh truyền thông xã hội với Website. Đây là lý do tại sao mô-đun “Theo dõi trên mạng xã hội” của Divi chứa tất cả các biểu tượng mạng và các tùy chọn thiết kế mà bạn cần để tạo ra giải pháp hoàn hảo cho trang web của mình.
Chúng tôi hy vọng hướng dẫn này sẽ hữu ích cho bạn trong các dự án Divi tiếp theo của bạn. Nếu bạn muốn biết thêm về Divi, đừng ngần ngại truy cập danh mục của chúng tôi về Hướng dẫn Divi. Bạn cũng có thể tham khảo Cách tạo trang Blog bằng mô-đun Divi Blog
Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, đừng ngại để lại bình luận trong phần bình luận bên dưới.
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 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.
...
