Bạn đã bao giờ ước mình biết cách hiển thị văn bản phía trên một hình ảnh với Elementor ?
Trong hướng dẫn mới này, chúng tôi sẽ chỉ cho bạn cách thực hiện.
Nếu bạn không biết chúng tôi muốn nói về điều gì hôm nay, mời bạn xem video sau:
Sau đó, hãy trở lại lý do tại sao chúng ta ở đây.
Để hoàn thành hướng dẫn này, bạn sẽ cần phiên bản Pro của Elementor, bởi vì chúng tôi sẽ sử dụng mã CSS tùy chỉnh chỉ được hỗ trợ bởi phiên bản này củaElementor.
Cũng khám phá hướng dẫn của chúng tôi về: Cách tạo thư viện hình ảnh với Elementor
Hãy tạo một phần mới với cấu trúc 3 cột, sau đó trong bảng điều khiển, hãy xác định Hauteur sur Chiều cao tối thiểu, và sau đó Chiều cao tối thiểu hãy nhấp vào VH và đặt thanh trượt thành 100.
Hãy chọn cột giữa và trong tab Phong cách, trong phần lý lịch hãy nhấp vào cổ điển cho Loại nền, sau đó chọn một màu tối.
Hãy đặt trong cột này Widget Mục Nội bộ. Tiện ích Phần nội bộ được định cấu hình mặc định với 2 cột, hãy xóa một trong số chúng. Hãy định cấu hình phần còn lại trong bảng điều khiển bằng cách sửa đổi Hauteur sur Chiều cao tối thiểu và Chiều cao tối thiểu hãy đặt con trỏ thành 400.
Đọc cũng: Elementor: Cách thu phóng thẻ hồ sơ
Sau đó, trên Căn chỉnh theo chiều dọc hãy chọn milieu.
Sau đó thả Tiện ích tiêu đề trong phần bên trong hãy nhập là Ảnh tiêu đề và trên Căn chỉnh, hãy chọn Trung tâm.
Trong tab Phong cách hãy sửa đổi màu của Tiêu đề để nó có thể nhìn thấy được nếu không,
Hãy thả một Tiện ích trình soạn thảo văn bản bên dưới Tiện ích tiêu đề. Sau đó, trong tab Phong cách, trên Alignment chọn Trung tâm. Hãy cũng thay đổi màu của văn bản để nó có thể nhìn thấy được.
Xem thêm: Elementor: Cách thêm một dải phân cách để tạo một phần
Hãy chọn cột giữa và trong tab của nó Phong cách, đặt lại màu nền và tải hình ảnh, sau đó Chức vụ hãy chọn Căn giữa ở giữa, lặp lại sur Không lặp lại, Trải ra sur Kích thước.
Trong phần Biên giới hãy sửa đổi tất cả bán kính đường viền trên 12. Trong bóng hộp, đặt thanh trượt thành 0 vì Ngang, Trong 0 cho Dọc, để 40 trên Blur, để -10 trên chương trình phát sóng. Bạn sẽ thấy hiệu ứng đổ bóng tuyệt đẹp dưới hình ảnh của mình.
Sur Lớp phủ nền, lựa chọn cổ điển cho Loại nền và màu chọn một màu đen, trên Opacity, hãy đặt thanh trượt thành 0.55
Trong tab tiên tiến, hãy lấy 20 cho tất cả Lề.
Hãy chọn của chúng tôi Phần nội bộ và đi đến tab của nó tiên tiến trong phần CSS tùy chỉnh, hãy sao chép và dán đoạn mã sau:
/*Afficher ou masquer un contenu au survol*/
selector{
opacity: 0;
transition: 0.5s ease-in-out;
}
selector:hover{
opacity: 1;
}
Hãy một lần nữa chọn cột giữa của phần của chúng ta, Trong tab của nó Phong cáchvà trong phần Lớp phủ nền, hãy kiểm tra xem chúng tôi đang ở trên tab BÌNH THƯỜNG, hãy hạ thấp Độ mờ à 0.
Sau đó nhấp vào tab TỔNG QUAT, sau đó vào cổ điển cho loại nền và màu, chọn một màu tối, sau đóĐộ mờ sur 0.55, va cho Thời lượng chuyển đổi hãy đặt thanh trượt thành 0.5.
Đây là kết quả cuối cùng của thao tác của chúng tôi.
Hãy nhân đôi cột của chúng ta 2 lần và xóa 2 cột trống còn lại, việc còn lại chỉ là thay đổi hình nền cũng như nội dung trình soạn thảo văn bản cho 2 cột mới.
Xem trước tác phẩm của bạn trên Máy tính bảng và Điện thoại thông minh để xem nó trông như thế nào. Sau đó, lưu hoặc cập nhật nó.
Vì thế. Bạn vừa hiển thị một văn bản phía trên một hình ảnh với trang Builder Elementor.
Tải xuống Elementor Pro ngay!
Kết luận
Cho nên ! Đó là nó cho bài viết này hướng dẫn bạn cách hiển thị văn bản phía trên một hình ảnh. Nếu bạn có bất kỳ thắc mắc nào về cách đến đó, hãy cho chúng tôi biết trong vòng ý kiến.
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 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.
...
Cảm ơn bạn, đơn giản và hiệu quả