Thiết kế điểm nổi bật cho hình ảnh và văn bản là một kỹ thuật thiết kế cổ điển có thể được sử dụng để tăng thêm gia vị cho hình ảnh và văn bản. nội dung của một trang web. Ngoài ra, Divi giúp bạn dễ dàng tạo những phản chiếu này trực tiếp từ Divi Builder mà không cần phải sử dụng trình chỉnh sửa ảnh.
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thiết kế phản chiếu cho hình ảnh trên Divi. Chìa khóa để thực hiện phản chiếu là sử dụng tùy chọn biến đổi của Divi để tạo phiên bản phản chiếu của một vật phẩm. Sau đó, bạn có thể thêm lớp phủ tùy chỉnh mà tôi sẽ chỉ cho bạn cách sử dụng với mô-đun văn bản.
Hãy bắt đầu nào!
khảo sát
Dưới đây là tổng quan về các thiết kế chúng tôi sẽ xây dựng trong hướng dẫn này.
Những gì bạn cần để bắt đầu
Để bắt đầu, tất cả những gì bạn cần là Divi. Hãy đảm bảo rằng Chủ đề Divi đã được cài đặt và hoạt động. Chúng tôi sẽ tạo các thiết kế của mình từ đầu bằng Trình tạo Divi trên giao diện người dùng (trình tạo trực quan). Bạn cũng sẽ cần một số hình ảnh giả cho hướng dẫn này (một hình nền khoảng 1920px x 600px và một hình khác khoảng 500px x 350px).
Khi bạn đã sẵn sàng, hãy chuyển đến bảng điều khiển WordPress của bạn và đi tới Trang> Thêm. Đặt tiêu đề cho trang mới của bạn và triển khai Divi Builder trên giao diện người dùng. Chọn tùy chọn “Xây dựng từ Scratch”. Bây giờ bạn đã sẵn sàng để đi!
Ý tưởng cơ bản đằng sau việc tạo hình ảnh và phản chiếu văn bản trong Divi
Ý tưởng cơ bản của việc tạo các mẫu phản chiếu trong Divi bao gồm ba bước:
- Tạo một mô-đun với hình ảnh hoặc văn bản của bạn
- Nhân đôi mô-đun và sử dụng tỷ lệ biến đổi để tạo hình ảnh hoặc văn bản phản chiếu
- Thêm lớp phủ gradient vào phần tử được nhân đôi bằng cách sử dụng dải phân cách hoặc mô-đun văn bản được định vị tuyệt đối.
Kỹ thuật thiết kế này không giới hạn ở các mô-đun riêng lẻ. Bạn thực sự có thể thêm phản chiếu vào toàn bộ hàng trong Divi bằng phương pháp này, hữu ích để tạo các thiết kế tiêu đề độc đáo. Chúng tôi sẽ thêm phản chiếu vào một hàng của thiết kế phản chiếu văn bản của chúng tôi ở phần sau trong hướng dẫn này. Nhưng bây giờ, hãy bắt đầu bằng cách tạo một hình ảnh phản chiếu.
Cách tạo phản chiếu hình ảnh
Để tạo phản chiếu hình ảnh, hãy bắt đầu bằng cách tạo một phần thông thường mới với một hàng một cột.
Sau đó thêm một mô-đun hình ảnh vào dòng.
Tải xuống hình ảnh bạn muốn từ thư viện phương tiện vào mô-đun hình ảnh. Sau đó cập nhật các cài đặt hình ảnh sau:
Chiều rộng tối đa: 600px
Sắp xếp mô-đun: trung tâm
Lề tùy chỉnh: 0px ở phía dưới
Tạo hình ảnh phản chiếu
Để tạo hiệu ứng phản chiếu, trước tiên chúng ta cần tạo một bản sao của hình ảnh ngay bên dưới hình ảnh.
Để làm điều này, hãy nhân đôi mô-đun hình ảnh. Sau đó cập nhật cài đặt hình ảnh trùng lặp như sau:
Độ mờ đục: 40%
Trục X của tỷ lệ chuyển đổi: -100%
Thuộc tính tỷ lệ Chuyển đổi là tính năng lật hình ảnh theo chiều dọc và chiều ngang một cách kỳ diệu để tạo ra phiên bản được phản chiếu của hình ảnh.
Điều này hỗ trợ thiết kế phản chiếu cơ bản. Tuy nhiên, chúng ta có thể thêm lớp phủ gradient bổ sung vào hình ảnh thấp hơn để có thiết kế phản chiếu chân thực hơn.
Thêm lớp phủ gradient bằng cách sử dụng mô-đun văn bản
Để thêm lớp phủ gradient vào hình ảnh dưới cùng, chúng ta có thể sử dụng mô-đun văn bản. Chúng ta có thể cung cấp cho mô-đun văn bản một vị trí tuyệt đối sao cho nó ở phía trên hình ảnh phía dưới. Tiếp theo, chúng ta có thể thêm nền gradient cho mô-đun văn bản. Việc sử dụng mô-đun văn bản (thay vì dấu phân cách) sẽ cung cấp cho bạn tùy chọn bổ sung để thêm nội dung trên hình ảnh phản chiếu sau này nếu muốn.
Hãy tiếp tục và tạo một mô-đun văn bản dưới hình ảnh dưới cùng.
Xóa đi nội dung theo mặc định để mô-đun văn bản trống.
Sau đó cập nhật cài đặt mô-đun văn bản như sau:
Độ dốc nền bên trái Màu: rgba (255,255,255,0)
Độ dốc nền bên phải Màu sắc: #ffffff
Chiều rộng: 100%
Chiều cao: 50%
Sau đó, thêm mã CSS tùy chỉnh sau vào phần tử chính:
vị trí: tuyệt đối! quan trọng; top: 50%;
Định vị tuyệt đối này của mô-đun văn bản chồng lên mô-đun văn bản ở nửa dưới của dòng.
Thêm màu nền
Nếu bạn không muốn có nền trắng, bạn có thể sử dụng các màu nền khác để tạo mẫu phản chiếu trên toàn bộ chiều rộng.
Để thực hiện việc này, hãy mở cài đặt dòng và cập nhật các thông tin sau:
Màu nền: #000000
Chiều rộng: 100%:
Chiều rộng tối đa: 100%;
Đệm tùy chỉnh: 0px cao, 0px xuống
Bây giờ hãy xem kết quả.
Các hình phản chiếu có thể trông thực sự tuyệt vời nếu bạn dành thời gian để thiết kế chúng một cách hợp lý. May mắn thay, Divi có công cụ để thành công. Có những phương pháp khác để thực hiện phản chiếu CSS, nhưng tiếc là chúng có xu hướng thiếu hỗ trợ từ trình duyệt. Các thiết kế trong hướng dẫn này sẽ trông tuyệt vời trên tất cả các trình duyệt.
Tôi nhận thấy rằng phản chiếu trông tuyệt vời trong tiêu đề trang và hiển thị hình ảnh cho một mục danh mục đầu tư. Và tôi chắc rằng có rất nhiều cách triển khai khác.
Đó là nó cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn thêm phản ánh trên trang web WordPress của mình bằng cách sử dụng các tính năng nội bộ của Divi.
