Biết cách sửa đổi hình ảnh khi di chuột có thể hữu ích cho bất kỳ loại Website bạn đang làm việc trên. Ngoài ra, nó giúp bạn thêm tương tác tinh tế cho các trang. Ví dụ: bạn có thể sử dụng nó để cung cấp thêm góc nhìn cho lời chứng thực, trang và trang nhóm.
Với các tùy chọn di chuột mới của Divi, bạn có thể chỉnh sửa hình ảnh khi di chuột chỉ bằng các tùy chọn tích hợp sẵn. Bằng cách kết hợp các hình nền cột và bộ lọc độ mờ, bạn sẽ đến đó nhanh chóng.
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 bốn ví dụ chúng ta sẽ tạo lại từ đầu.
Các bước chung
Thêm một phần mới
Trong phần đầu tiên của hướng dẫn này, chúng ta sẽ thực hiện một số bước chung. Các bước chung này sẽ giúp chúng ta tiết kiệm thời gian khi tập trung vào ba ví dụ đầu tiên. Mở một trang mới hoặc trang hiện có và thêm một phần thông thường vào đó.
Thêm một dòng mới
Cấu trúc cột
Sau đó thêm một hàng mới bằng cách sử dụng cấu trúc cột sau:
Hình nền cột 1
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thêm hình nền vào cột đầu tiên. Chọn hình ảnh bạn muốn bay qua.
- Cột 1 Hình nền Lặp lại: Không lặp lại
Thêm một hình ảnh vào cột 1
Tải lên một hình ảnh
Tiếp tục bằng cách thêm mô-đun hình ảnh vào cột đầu tiên và tải hình ảnh bạn muốn xuất hiện trước khi di chuột.
Thêm một mô-đun văn bản tiêu đề vào cột 2
Thêm nội dung
Trong cột thứ hai, trước tiên chúng ta sẽ cần tiêu đề Mô-đun văn bản. Hãy tiếp tục và thêm một số nội dung H3
Cài đặt văn bản tiêu đề
Sau đó đi đến cài đặt văn bản tiêu đề và thực hiện một số thay đổi.
- Tiêu đề 3 Phông chữ: Baloo Tamma
- Tiêu đề 3 Màu văn bản: # eda96a
- Tiêu đề 3 Kích thước văn bản: pixel 100 (máy tính để bàn), pixel 70 (máy tính bảng), pixel 50 (điện thoại)
- Khoảng cách tiêu đề của các chữ cái 3: -4px
- Tiêu đề 3 Shadow Shadow Chiều dài ngang: 0.04em
- Tiêu đề 3 Văn bản Shadow Chiều dài dọc: 0.04em
- Tiêu đề 3 Màu bóng của văn bản: rgba (0,0,0,0,6)
khoảng cách
Cuối cùng, thêm một lề trên trong cài đặt khoảng cách.
- Lề trên: 50 (máy tính để bàn), 50px (máy tính bảng và điện thoại)
Thêm một mô-đun phân chia vào cột 2
Hiển thị dải phân cách
Thêm một mô-đun phân tách ngay bên dưới tiêu đề Mô-đun văn bản trong cột 2.
- Hiển thị dải phân cách: Có
Màu của dải phân cách
Thay đổi màu của ước số rồi.
- Màu của dải phân cách: # e25300
chế độ
Và chọn một kiểu tách khác trong cài đặt kiểu.
- Phong cách tách biệt: chấm chấm
kích thước
Cũng tăng trọng lượng chia trong các tham số kích thước.
- Trọng lượng phân tách: 3px
Thêm một mô-đun văn bản cơ thể vào cột 2
Thêm nội dung
Hãy chuyển sang mô-đun cuối cùng! Thêm nội dung mô-đun văn bản vào cột thứ hai bằng nội dung của sự lựa chọn.
Cài đặt văn bản
Thay đổi cài đặt văn bản sau.
- Kích thước văn bản: 16px
- Chiều cao của dòng văn bản: 2.3em
- Định hướng văn bản: Justify
Nhân bản phần hai lần
Khi bạn đã hoàn thành tất cả các bước chung, hãy nhân bản kép phần bạn đã xây dựng. Bây giờ chúng ta sẽ có một phần riêng cho từng ví dụ trong số ba ví dụ đầu tiên.
Tạo ví dụ số 1
Áp dụng các cài đặt bổ sung cho mô-đun hình ảnh
Độ mờ mặc định
Hãy bắt đầu tạo ví dụ đầu tiên! Điều duy nhất chúng tôi sẽ làm ở đây là tạo chuyển đổi di chuột, không có hiệu ứng bổ sung. Để thực hiện việc này, hãy mở mô-đun Hình ảnh và chuyển đến cài đặt bộ lọc. Đảm bảo giá trị độ mờ mặc định là 100%.
- Độ mờ đục: 100%
Di chuột qua độ mờ
Thay đổi độ mờ khi di chuột.
- Độ mờ đục: 0%
Chuyển tiếp
Cuối cùng, tạo một quá trình chuyển đổi suôn sẻ bằng cách tăng thời lượng của quá trình chuyển đổi.
- Thời lượng của quá trình chuyển đổi: 1200ms
Tạo ví dụ số 2
Áp dụng các cài đặt bổ sung cho mô-đun hình ảnh
Khoảng cách mặc định
Hãy chuyển sang ví dụ thứ hai! Mở mô-đun hình ảnh trong cột 1 và đảm bảo rằng không có điền tùy chỉnh mặc định.
Khoảng cách văn phòng phẩm
Tiếp tục bằng cách thêm một chút lề khi di chuột qua để cho phép hình ảnh di chuột tăng kích thước.
- Đệm dưới: 100px
Hộp bóng
Chúng tôi cũng thêm một bóng hộp mặc định sẽ biến mất trên cuộn qua.
- Bóng của hộp, vị trí nằm ngang: -55px
- Vị trí dọc của hộp bóng: -50px
- Lực lan truyền bóng hộp: -10px
- Màu bóng: # eda96a
Độ mờ mặc định
Tiếp theo, đi tới cài đặt bộ lọc và đảm bảo độ mờ mặc định là 100%.
- Độ mờ đục: 100%
Di chuột qua độ mờ
Loại bỏ độ mờ của mod di chuột. Điều này sẽ cho phép nền của cột hiển thị và tạo hiệu ứng "hình ảnh di chuột".
- Độ mờ đục: 0%
Chuyển tiếp
Cuối cùng, tăng thời lượng chuyển đổi trong các tham số chuyển tiếp của mô-đun Hình ảnh.
- Thời lượng của quá trình chuyển đổi: 1200ms
Tạo một ví dụ 3
Thêm một nền gradient vào cột 1
Đối với ví dụ thứ ba, chúng tôi bắt đầu bằng cách mở cài đặt hàng và thêm nền gradient xuyên tâm vào cột đầu tiên. Điều này sẽ cung cấp cho hình ảnh di chuột một hình tròn.
- Màu 1: rgba (43,135,218,0)
- Màu 2: #ffffff
- Cột Gradient loại Gradient: Radial
- Cột 1 Hướng xuyên tâm: Trung tâm
- Cột 1 Vị trí bắt đầu: 60%
- Cột 1 Vị trí cuối cùng: 60%
Áp dụng các cài đặt bổ sung cho mô-đun hình ảnh
Độ mờ mặc định
Tiếp tục bằng cách mở mô-đun hình ảnh của cột 1 và đảm bảo rằng độ mờ mặc định là 100%.
- Độ mờ đục: 100%
Di chuột qua độ mờ
Loại bỏ bất kỳ độ mờ của cầu vượt để lộ nền của cột.
- Độ mờ đục: 0%
Tạo ví dụ số 4
Thêm một dòng mới
Cấu trúc cột
Về ví dụ cuối cùng! Ở đây chúng ta sẽ cần một hàng mới với 6 cột.
Hình nền cột 1
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thêm hình nền bạn muốn di chuột qua làm hình nền cho cột 1.
- Cột 1 Hình nền Lặp lại: Không lặp lại
Lặp lại cho tất cả các cột trực tuyến
Lặp lại bước trước đó cho từng cột trong hàng của bạn.
kích thước
Sau đó, truy cập các tham số kích thước cho hàng và loại bỏ bất kỳ khoảng trống giữa các cột.
- Làm cho dòng này đầy đủ chiều rộng: Có
- Sử dụng chiều rộng máng tùy chỉnh: 1
Thêm mô-đun hình ảnh vào cột 1
Tải lên một hình ảnh
Tiếp tục bằng cách thêm một mô-đun hình ảnh vào cột đầu tiên và tải lên hình ảnh bạn muốn xuất hiện theo mặc định.
Độ mờ mặc định
Đảm bảo rằng độ mờ mặc định của mô-đun này là 100%.
- Độ mờ đục: 100%
Di chuột qua độ mờ
Và loại bỏ độ mờ khi di chuột để cho phép nền cột hiển thị thay thế.
- Độ mờ đục: 0%
Chuyển tiếp
Tăng thời gian chuyển đổi để chuyển tiếp suôn sẻ.
- Thời lượng của quá trình chuyển đổi: 800ms
Sao chép mô-đun 3 một lần và đặt các bản sao vào các cột còn lại
Khi bạn đã hoàn tất việc chỉnh sửa mô-đun hình ảnh trong cột 1, bạn có thể sao chép nó và đặt các bản sao vào các cột còn lại. Hãy chắc chắn để thay đổi hình ảnh quá.
cuối cùng suy nghĩ
Thay đổi hình ảnh khi di chuột có thể giúp mang lại sự tương tác bổ sung đó cho các phần chứng thực, về trang và trang nhóm.
Trong hướng dẫn này, chúng tôi đã chỉ cho bạn một cách dễ dàng để có được các loại hình ảnh khác nhau khi di chuột chỉ bằng cách sử dụng các tùy chọn tích hợp của Divi ! Nếu có bất kỳ thắc mắc hay góp ý nào, hãy để lại ý kiến trong phần bình luận bên dưới nhé!
