Bạn có muốn sử dụng hiệu ứng đổ bóng và di chuột trong Divi để tạo ra nội dung tương tác và nổi bật của bạn Website ?
Hãy chắc chắn rằng của bạn Website nổi bật so với các trang web tương tự có thể khó khăn. Nhưng một khi bạn đạt được điều đó, nó hầu như luôn xứng đáng với nỗ lực và suy nghĩ đã đi vào nó.
Chúng tôi sẽ chỉ cho bạn cách tạo nội dung tương tác khi tạo trang web với Divi.
Chúng ta hãy đi!
khảo sát
Trước khi đi sâu vào hướng dẫn này, chúng ta hãy xem nhanh kết quả mà bạn có thể mong đợi.
Máy tính desktop
di động
Hãy bắt đầu hiện thực hóa với Divi!
Thêm một phần mới
Màu nền
Tạo một trang mới hoặc mở một trang hiện có và thêm một phần thông thường vào đó. Mở cài đặt phần và thay đổi màu nền.
- Nền: # 03006d
khoảng cách
Sau đó, chuyển đến cài đặt giãn cách phần và thay đổi như sau:
- Đệm (Trên và Dưới): 50px
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
Sau đó, chuyển đến cài đặt định cỡ và để dòng này lấp đầy toàn bộ chiều rộng của màn hình.
- 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%
khoảng cách
Hãy cũng thay đổi cài đặt giãn cách sau:
- Đệm (Phải): 9vw (Máy tính để bàn), 5vw (Máy tính bảng và Điện thoại)
- Đệm (Phải): 5vw (Máy tính bảng và Điện thoại)
Thêm mô-đun Văn bản vào cột 1
Thêm nội dung
Khi bạn đã hoàn tất việc chỉnh sửa cài đặt hàng, hãy thêm mô-đun Văn bản đầu tiên vào cột 1.
Thêm ký tự đầu tiên làm văn bản đoạn văn. Sau đó, nội dung mà bạn muốn xuất hiện dưới dạng văn bản danh sách.
Cài đặt văn bản (Màn hình)
Sau đó chuyển đến tab Thiết kếvà thay đổi cài đặt văn bản đoạn văn mặc định. Đảm bảo sử dụng cùng một màu cho văn bản và nền của phần.
- Độ đậm phông chữ: Cực đậm
- Màu văn bản: # 03006d
- Kích thước văn bản: 27vw (máy tính để bàn), 0vw (máy tính bảng và điện thoại)
- Chiều cao dòng: 1,1 em
- Text Shadow: Xem chụp
- Sức mạnh làm mờ bóng: 0,01em
- Màu bóng: #ffffff
- Căn chỉnh văn bản: Trái
Di chuột cài đặt văn bản
Để tạo hiệu ứng di chuột đẹp, chúng ta sẽ cần thay đổi các cài đặt văn bản đoạn di chuột này.
- Màu văn bản (Di chuột): #ffffff
- Màu bóng (Di chuột): rgba (255,255,255,0)
Cài đặt danh sách (Màn hình)
Tiếp tục bằng cách đi tới cài đặt danh sách.
- Trọng lượng phông chữ: Nhẹ
- Màu văn bản danh sách: #ffffff
- Kích thước văn bản liệt kê: 0px (Máy tính để bàn), 18px (Máy tính bảng và điện thoại)
- Vị trí kiểu: Vòng tròn
- Vị trí kiểu danh sách không có thứ tự: Bên ngoài
- Mục danh sách không có thứ tự Thụt lề: 0px
Liệt kê cài đặt văn bản khi di chuột (Hover)
Chúng tôi muốn văn bản danh sách xuất hiện khi di chuột. Đây là lý do tại sao chúng tôi sẽ thay đổi kích thước của văn bản khi di chuột.
- Kích thước văn bản danh sách không theo thứ tự (Di chuột): 18px
khoảng cách
Tiếp tục bằng cách chuyển đến cài đặt giãn cách mô-đun và thực hiện một số thay đổi ở đó.
- Lề (Dưới cùng): 50px (Máy tính bảng và Điện thoại)
- Lề (Phải): -4vw (Máy tính để bàn), 0vw (Máy tính bảng và Điện thoại)
Sao chép mô-đun văn bản 4 lần và đặt các bản sao vào các cột còn lại
Bây giờ chúng ta đã hoàn tất việc sửa đổi mô-đun đầu tiên trong cột 1, hãy sao chép mô-đun bốn lần. Sau đó đặt từng bản sao vào các cột còn lại. Chúng tôi sẽ sửa đổi từng bản sao để phù hợp với những gì chúng tôi muốn.
Thay đổi mô-đun Văn bản trong cột 2
chỉnh sửa nội dung
Mở bản sao trong cột 2 và chỉnh sửa nội dung.
Thay đổi khoảng cách
Tiếp theo, chuyển đến cài đặt giãn cách và thay đổi giá trị lề tùy chỉnh.
- Lề (Dưới cùng): 50px (Máy tính bảng và Điện thoại)
- Lề (Trái và Phải): -2vw (Máy tính để bàn), 0vw (Máy tính bảng và Điện thoại)
- Lề phải: -2vw (máy tính để bàn), 0vw (máy tính bảng và điện thoại)
Thay đổi mô-đun Văn bản trong cột 3
chỉnh sửa nội dung
Đồng thời thay đổi nội dung của bản sao trong cột 3.
Thay đổi khoảng cách
Với cài đặt khoảng cách trong tab thiết kế.
- Lề (Trái): 2,5 vw
- Lề (Phải): 1,5 vw
Sửa đổi mô-đun Văn bản trong cột 4
chỉnh sửa nội dung
Tiếp tục bằng cách mở cài đặt mô-đun Văn bản trong cột 4 và chỉnh sửa nội dung ở đó.
Thay đổi khoảng cách
Tiếp theo, chuyển đến tab Thiết kế và thay đổi các giá trị lề tùy chỉnh trong cài đặt Giãn cách.
- Lề (Trái): -6vw
- Biên (Phải): 2vw
Sửa đổi mô-đun Văn bản trong cột 5
Nội dung
Mở đường cho bản sao cuối cùng. Chỉnh sửa nội dung trong khu vực nội dung.
Thay đổi khoảng cách
Với cài đặt khoảng cách tùy chỉnh.
- Lề (Trái): -7vw
- Biên (Phải): 3vw
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.
Đọc cũng: Divi : Cách tùy chỉnh giỏ hàng và biểu tượng tìm kiếm của mô-đun “Menu toàn chiều rộng”
Văn phòng
di động
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Chúng tôi biết tầm quan trọng của việc đảm bảo rằng Website nổi bật so với các trang web khác. Với các tùy chọn tích hợp của Divi, bạn có thể sáng tạo theo ý muốn.
Bài viết này là một ví dụ về cách bạn có thể tạo nội dung di chuột tương tác.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. 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ó.
Bạn cũng có thể tham khảo 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.
...
