Cần tìm hiểu cách thêm hình ảnh vào văn bản trong Elementor ?

Elementor giúp mọi người có thể trở thành nhà thiết kế web mà không cần phải có kỹ năng CSS nâng cao. Trình chỉnh sửa trực quan của nó cho phép bạn tạo một trang web đẹp mà không cần viết một dòng mã CSS. Bạn chỉ có thể thêm bất kỳ yếu tố thiết kế (widget) nào bạn muốn và tùy chỉnh chúng trong bảng cài đặt.

Mặc dù vậy, có một số kỹ năng CSS sẽ là một phần thưởng lớn khi sử dụngElementor. Bạn sẽ có thể áp dụng các kiểu độc đáo cho trang web của mình bằng cách sử dụng chức năng CSS tùy chỉnh đểElementor. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm hình ảnh vào văn bản trong Elementor bằng tính năng CSS tùy chỉnh của Elementor.

Trong một số công cụ chẳng hạn như GIMP và Photoshop, bạn thường cần thêm điểm đánh dấu lớp để thêm hình ảnh trong văn bản. Trong Elementor, bạn có thể thực hiện điều tương tự bằng cách thêm mã CSS mà tiện ích Tiêu đề yếu tố và tiện ích Văn bản không có tùy chọn cài đặt để thêm hình ảnh làm nền.

Thêm hình ảnh vào văn bản Elementor

Trước khi bắt đầu, hãy đảm bảo rằng bạn đã nâng cấp phiên bản Elementor của mình lên phiên bản chuyên nghiệp nếu bạn chưa nâng cấp vì chức năng CSS tùy chỉnh chỉ khả dụng trên Elementor Pro. Khi bạn đã sẵn sàng, hãy tạo một trang hoặc mẫu mới và chỉnh sửa nó bằng Elementor. Tất nhiên, bạn cũng có thể chỉnh sửa một trang hoặc mẫu hiện có.

Xem thêm: Elementor: Cách thêm mục lục

Thêm tiện ích Tiêu đề vào hộp chỉnh sửa.

Cách thêm hình ảnh vào văn bản trong Elementor

Đi tới bảng cài đặt để thay thế văn bản mặc định trong tab Nội dung.

Cũng đọc hướng dẫn của chúng tôi về: Elementor: Cách sử dụng công cụ chọn màu

Đi tới tab Phong cách để cá nhân hóa văn bản. Bạn có thể đặt kích thước văn bản, kiểu phông chữ, v.v. bằng cách nhấp vào biểu tượng bút chì trong Tùy chọn kiểu chữ dưới khối Tiêu đề. Vì bạn muốn sử dụng hình ảnh làm nền cho văn bản của mình, nên không cần đặt màu văn bản.

Sau đó chuyển đến tab tiên tiến và mở khối Tuỳ chỉnh CSS và dán mã CSS sau đây. Thay thế URL hình ảnh bằng URL hình ảnh của riêng bạn.

selector .elementor-heading-title
{
     background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70%  ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}

Đây là ví dụ.

Cách thêm hình ảnh vào văn bản trong Elementor

Tải xuống Elementor Pro ngay!

Kết luận

Đây là ! Đó là nó cho bài viết này hướng dẫn bạn cách thêm hình ảnh vào văn bản trong Elementor. Nếu bạn có bất kỳ mối quan tâm nào về cách đến đó fcho chúng tôi biết trong ý 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.

...