Cách tạo lớp phủ trên hình ảnh với Divi Builder

Lớp phủ hình ảnh là một trong những cách tuyệt vời để thu hút khách truy cập bằng cách hiển thị thông tin bổ sung cho khách truy cập của bạn. Thông thường, điều này xảy ra khi chuột di chuột qua một phần tử hoặc hình ảnh. Vì nó khá phổ biến, bạn có thể đã nhận thấy nhiều plugin WordPress giúp bạn đạt được điều đó. Nếu bạn yêu thích Divi như tôi , bạn có thể tự hỏi làm thế nào để làm điều đó với Divi? Đó là những gì chúng ta sẽ đề cập ngày hôm nay.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thiết kế lớp phủ hình ảnh tùy chỉnh trong Divi Builder . Các lớp phủ này sẽ chuyển đổi và hiển thị các phần tử khi chuột di chuyển qua chúng. Điều bạn có thể thấy thú vị là bạn có thể kiểm soát tốt hơn thiết kế chỉ bằng cách sử dụng các tùy chọn tích hợp sẵn của Divi. Chúng tôi có thể kết thúc bằng cách sử dụng một số mã CSS, điều này sẽ làm cho mọi thứ trông tốt hơn.

Kết quả mong đợi

Dưới đây là một cái nhìn nhanh về những gì bạn có thể nhận được khi kết thúc hướng dẫn này.

Các thành phần bắt buộc trước khi bắt đầu

Trước khi bắt đầu hướng dẫn, bạn cần đáp ứng một số yêu cầu vì chúng bắt buộc phải có để có thể tái tạo hướng dẫn này. Do đó, bạn sẽ cần:

Tạo trang web tuyệt vời

Với trình tạo trang miễn phí tốt nhất Elementor

Bắt đầu bây giờ

• Cài đặt và kích hoạt Divi
• Tạo một trang mới trong WordPress và sử dụng Divi Builder trên giao diện người dùng
• Chọn tùy chọn "Build From Scratch".

Nếu bạn có một trang trống sau đó, thì bạn đã sẵn sàng.

Tạo lớp phủ hình ảnh tùy chỉnh trong Divi

Xây dựng Phần, Hàng và Cột

Chúng tôi sẽ bắt đầu bằng cách chọn một hàng ba cột bên trong phần mặc định.

Mở cài đặt phần và sử dụng màu nền sau:

• Màu nền: # 3a0ca3

Tiếp theo, chuyển đến cài đặt cho cột 1 và thay đổi các tùy chọn sau:

• Lớp CSS: et-tràn-container
• Tràn ngang: Ẩn
• Tràn dọc: Ẩn

Lớp CSS là cần thiết để kích hoạt các hiệu ứng di chuột của các mục lớp phủ mà chúng ta sẽ xây dựng. Phần tràn ẩn là cần thiết vì chúng ta sẽ có hiệu ứng di chuột để chia tỷ lệ hình ảnh ra ngoài vùng chứa cột.

Thêm hình ảnh

Bây giờ phần, hàng và cột đã sẵn sàng, hãy tiếp tục và thêm mô-đun hình ảnh mới vào cột 1. Đây sẽ là hình ảnh chính đằng sau các thiết kế lớp phủ của chúng tôi.

Tải lên hình ảnh ở dạng chân dung. Tôi đang sử dụng một cái có kích thước khoảng 1280px x 1920px. Đảm bảo rằng nó đủ rộng để kéo dài toàn bộ chiều rộng của cột trên tất cả các kích thước trình duyệt.

Từ tab thiết kế, hãy thay đổi những điều sau:

• Lề: 0px dưới cùng

Trong tab nâng cao, thêm Lớp CSS sau:

• Lớp CSS: et-overlay-image

Chọn màu lớp phủ hình ảnh bằng mô-đun dải phân cách

Để tạo màu lớp phủ hình ảnh, chúng ta sẽ sử dụng mô-đun bộ chia. Ý tưởng là tạo một lớp phủ trên hình ảnh bằng cách xác định dải phân cách theo chiều cao và chiều rộng đầy đủ bao phủ cột, để làm cho nó vừa vặn hoàn hảo trên hình ảnh. Sau khi thiết lập, bạn có thể điều chỉnh màu nền của mô-đun dải phân cách để có được màu lớp phủ như bạn muốn.

Vì vậy, đầu tiên chúng ta hãy thêm một mô-đun phân chia dưới hình ảnh.

Sau đó, định vị dải phân cách là tuyệt đối để nó xuất hiện trên đầu hình ảnh:

• Chức vụ: Tuyệt đối

Trong tab nội dung, hãy cập nhật những điều sau:

• Hiển thị dải phân cách: KHÔNG
• Màu nền: rgba (247,37,133,0.8)

Sau đó, thay đổi chiều cao và chiều rộng của dải phân cách:

• Chiều rộng: 100%
• Chiều cao: 100%

Sau khi thiết kế được xác định, hãy thêm Lớp CSS sau vào dải phân cách:

• et-overlay-item

Cảnh báo : Lớp này nên được thêm vào tất cả các thành phần thiết kế lớp phủ mà bạn chỉ muốn hiển thị khi di chuột. Nếu bạn không muốn phần tử bị ẩn lúc đầu, đừng sử dụng nó.

Theo tùy chọn, bạn có thể gắn nhãn dải phân cách thành một lớp phủ với tên có thể nhận dạng rõ ràng. Điều đó có thể được tạo từ lớp và bạn có thể sử dụng "Lớp phủ".

Thêm văn bản tiêu đề lớp phủ

Trong mô-đun ngăn, hãy thêm một mô-đun văn bản mới. Điều này sẽ được sử dụng làm văn bản tiêu đề lớp phủ của chúng tôi và sẽ xuất hiện ở đầu hình ảnh khi di chuột.

Thay đổi nội dung bằng tiêu đề H2:

>h2/h2



Bạn cũng có thể thay đổi nhãn của mô-đun văn bản để tham khảo sau này.







Trong cài đặt thiết kế văn bản, hãy thay đổi điều này:



Căn chỉnh văn bản: Căn giữa
Màu văn bản: Ánh sáng







Phông chữ tiêu đề 2: Cormorant Garamond
Tiêu đề 2 Độ đậm phông chữ: In đậm
Tiêu đề 2 Kích thước văn bản: 40px







Chiều rộng: 100%
Chiều rộng tối đa: 85%







Trong tab nâng cao, hãy thay đổi vị trí như sau:



Chức vụ: Tuyệt đối
Vị trí: trung tâm hàng đầu
Chênh lệch dọc: 10%



Cảnh báo: Độ lệch dọc có thể cần được điều chỉnh theo kích thước của tỷ lệ co của hình ảnh. 







Sau đó, thêm các Lớp CSS sau vào mô-đun văn bản:



Lớp CSS: et-overlay-item di chuyển xuống



Ngoài lớp â € œet-overlay-itemâ €, chúng tôi đang thêm một lớp bổ sung â € œmove-downâ € để sử dụng CSS tuỳ chỉnh để di chuyển tiêu đề xuống một chút khi di chuột.







Tạo Văn bản Nội dung Lớp phủ



 Để tạo văn bản lớp phủ, chúng ta có thể sao chép mô-đun văn bản được sử dụng cho tiêu đề lớp phủ.  Trước khi thay đổi cài đặt, hãy đặt cho mô-đun đó một nhãn khác.  Lần này, chúng tôi sẽ sử dụng "Overlay Body".







Mở cài đặt văn bản cho mô-đun văn bản mới và cập nhật nội dung phần nội dung với một vài câu của đoạn văn bản.







Trong tab nâng cao, thay đổi vị trí tuyệt đối của mô-đun thành trung tâm.







Vì chúng tôi không muốn cái này di chuyển khi di chuột (chỉ xuất hiện), hãy cập nhật Lớp CSS để chỉ bao gồm những thứ sau:



Lớp CSS: et-overlay-item







Tạo nút lớp phủ



 Phần tử lớp phủ cuối cùng trên hình ảnh này sẽ là nút.  Để tạo nút, hãy thêm một mô-đun nút mới trong mô-đun văn bản â € œbody textâ €.







Trước khi cập nhật thiết kế, hãy thay đổi vị trí của nút như sau:



Vị trí: tuyệt đối
Chênh lệch dọc: 10%







Bây giờ nút sẽ được căn giữa ở phần dưới cùng của hình ảnh.



Khi ở trong tab nâng cao, hãy cập nhật Lớp CSS và thêm một đoạn CSS tùy chỉnh vào Phần tử chính như sau:



Lớp CSS: et-overlay-item move-up
Phần tử chính CSS: min-width: 15em



 Lưu ý rằng ở đây có một lớp bổ sung được thêm vào nút để di chuyển nó lên trên một chút khi di chuột.  Điều đó sẽ bổ sung cho chuyển động đi xuống của văn bản tiêu đề khi di chuột.







Sau đó cập nhật các cài đặt thiết kế sau:



Căn chỉnh nút: Trung tâm
Kích thước văn bản nút: 14px
Nút Màu Nền: # 4361ee
Chiều rộng đường viền của nút: 0px
Khoảng cách chữ cái nút: 0,1em
Độ đậm phông chữ của nút: In đậm
Kiểu phông chữ nút: TT
Đệm: 0,8em trên cùng, 0,8em dưới, 0px trái, 0px phải







Bổ sung với mô-đun mã tùy chỉnh



 Trước khi chuyển sang phiên bản khác, hãy thêm một số CSS để thêm hiệu ứng di chuột.  Để làm điều này, hãy thêm một mô-đun mã dưới nút.







 Sau đó dán CSS sau vào bên trong nội dung mã.  Đừng quên bọc mã trong các thẻ script cần thiết.



>style and (min-width: 981px) { .et-fb-root-ancestor .et-overlay-item {opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/}.et-overlay-item {opacity: 0; /*hides overlay items by default*/margin-bottom: 0px;}.et-overlay-item, .et-overlay-image {transition: all 400ms !important; /*sets transition speed of all overlay items*/}.et-overlay-container:hover .et-overlay-item {opacity: 1; /*reveals hidden overlay items on hover*/}.et-overlay-container:hover .et-overlay-image {/*add new styles here to change image on hover*/}.et-overlay-container:hover .et-overlay-image.et-scale {transform: scale(1.2); /*adjust scale of image here*/}.et-overlay-container:hover .et-overlay-image.et-rotate {transform: scale(1.4)rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/}  .et-overlay-container:hover .et-overlay-item.move-up {margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/}.et-overlay-container:hover .et-overlay-item.move-down {margin-top: 10%; /*adjust how far you want the overlay item to move down*/} }>/style







Mã có một số chú thích để bạn có thể hiểu nơi bạn có thể điều chỉnh CSS khi cần.



Sao chép cột cho các phần khác



 Mặc dù chúng tôi đã có thêm hai cột trống để làm việc, nhưng việc chuyển tất cả các mô-đun và thiết kế trong cột đầu tiên sang cột mới sẽ dễ dàng hơn bằng cách sao chép toàn bộ cột.  Để thực hiện việc này, hãy mở phương thức lớp, xóa hai cột trống, sau đó nhân bản cột chứa thiết kế lớp phủ hình ảnh hai lần.  Bạn nên có tổng cộng ba cột có thiết kế giống hệt nhau.







Tôi sẽ để bạn quyết định đâu là tập hợp màu bạn sẽ áp dụng cho cột 2 và 3. Chúng ta hãy không xem kết quả cuối cùng là gì.



Kết quả cuối cùng



Bây giờ ba thiết kế của chúng tôi đã hoàn thành (hy vọng bạn đã thay đổi thiết kế cho 2 cột còn lại), hãy cùng xem kết quả cuối cùng của các thiết kế của chúng tôi.







Tóm lược



 Thực sự có thể tạo lớp phủ hình ảnh với Divi .  Có vô số thiết kế bạn có thể tạo trực quan bằng trình tạo Divi và chỉ cần một lượng nhỏ CSS tùy chỉnh để áp dụng một số hiệu ứng di chuột.