Phần tử ID CSS

CSS tùy chỉnh có thể được áp dụng cho mọi phần, cột và tiện ích Elementor. Thêm CSS (Cascading Style Sheet) vào trường Custom CSS là để tạo kiểu và trang trí cho các phần, cột và widget. Nó cũng có thể biến một trang HTML cơ bản thành một thiết kế hiện đại

Tuy nhiên, Elementor Custom CSS là một tính năng chỉ có trên Elementor Pro. Nhưng đừng lo, chúng tôi có giải pháp cho bạn nếu bạn đang sử dụng phiên bản Elementor miễn phí nhưng muốn thêm CSS tùy chỉnh vào Elementor của mình. Bài viết này sẽ hướng dẫn bạn cách làm điều đó

Mục lục

• Cách thêm CSS tùy chỉnh trong Elementor Phiên bản miễn phí
  • Bước 1. Thêm mã CSS bổ sung
  • Bước 2. Thêm ID CSS Elementor
• Điểm mấu chốt

Cách thêm CSS tùy chỉnh trong Elementor Phiên bản miễn phí

Trong ví dụ này, chúng tôi muốn cung cấp cho bạn mã CSS để gán nút chuyển màu nhiều màu trong Elementor. Mã CSS bên dưới chỉ hoạt động nếu bạn thêm vào trường CSS tùy chỉnh trên tab Nâng cao trên bảng cài đặt, bạn cần nâng cấp lên Elementor Pro để truy cập tính năng đó

selector .elementor-button {
  background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}

Để sử dụng mã đó để gán nút chuyển màu nhiều màu trong phiên bản miễn phí của Elementor, bạn cần chỉnh sửa mã đó và thực hiện một số bước mà chúng tôi sẽ giải thích sau

Bước 1. Thêm mã CSS bổ sung

Chúng tôi sẽ thêm đoạn mã CSS vào trình chỉnh sửa CSS của WordPress Customizer. Trên bảng điều khiển WordPress của bạn, điều hướng đến Giao diện -> Tùy chỉnh

Khi bạn vào bảng cài đặt tùy chỉnh, hãy chuyển đến khối CSS bổ sung và nhấp vào khối đó. Sao chép mã CSS ở trên và dán vào trường CSS bổ sung

Như chúng tôi đã đề cập, bạn cần chỉnh sửa mã CSS để gán nút chuyển màu nhiều màu. Xóa văn bản selector và thay thế bằng ID CSS duy nhất tùy chỉnh. Bạn có thể đặt bất kỳ ID CSS nào vào mã;

Ghi chú. Thêm ID CSS duy nhất tùy chỉnh của bạn bắt đầu bằng phím thăng/hashtag (#) và không có dấu cách

Khi bạn đã chỉnh sửa mã CSS, hãy áp dụng nó bằng cách nhấp vào nút Xuất bản

Bước 2. Thêm ID CSS Elementor

Được rồi, chúng ta sẽ chuyển sang bước tiếp theo. Chúng tôi sẽ thêm một ID lớp duy nhất để gọi mã CSS được áp dụng trong CSS bổ sung

Chuyển đến trình chỉnh sửa Elementor của bạn. Sau đó, hãy chọn tiện ích nút từ bảng tiện ích rồi kéo và thả vào vùng canvas. Khi bạn đã thêm tiện ích nút, bạn có thể chỉnh sửa và định kiểu tiện ích theo sở thích của mình

Trên bảng Cài đặt tiện ích nút, điều hướng đến tab Nâng cao -> Bố cục -> ID CSS. Tiếp theo, vui lòng nhập ID CSS duy nhất tùy chỉnh mà bạn đã thêm trước đó trong CSS bổ sung

Ghi chú. Thêm ID CSS duy nhất tùy chỉnh của bạn mà không cần phím thăng/hashtag (#) và dấu cách

Như bạn có thể thấy từ ảnh GIF ở trên, nút này là một dải màu nhiều màu khi bạn thêm CSS iD tùy chỉnh duy nhất. Đừng quên lưu dự án của bạn bằng cách nhấp vào nút Lưu bản nháp

Tốt. Giả sử bạn muốn thêm dải màu nhiều màu cho một tiện ích nút khác có dải màu nhiều màu khác

Đầu tiên, quay lại trường CSS bổ sung, sau đó sao chép và dán mã hiện có vào cuối CSS bổ sung. Khi bạn đã dán nó, vui lòng thay thế ID CSS duy nhất tùy chỉnh của bạn bằng một ID mới, sau đó chỉnh sửa đoạn mã CSS cụ thể hơn trên khối khai báo của CSS. Trong ví dụ này, chúng tôi thay thế ID CSS bằng #button2

CSS khối khai báo bắt đầu bằng dấu ngoặc nhọn bên trái (‘{‘) và kết thúc khi đạt đến dấu ngoặc nhọn bên phải phù hợp (‘}‘)

Bạn có thể tạo một gradient bằng cách sử dụng các công cụ trực tuyến CSS gradient để lấy khối khai báo. Nhấp vào đây để xem một số công cụ trực tuyến gradient CSS mà chúng tôi khuyên dùng

Khi bạn đã chỉnh sửa mã CSS mới của mình, hãy áp dụng nó bằng cách nhấp vào nút Xuất bản

Tiếp theo, quay lại trình chỉnh sửa Elementor của bạn, sau đó tải lại trang của bạn. Thêm tiện ích Nút mới, sau đó chỉnh sửa và tạo kiểu nếu bạn muốn. Trên cài đặt tiện ích Nút, điều hướng đến tab Nâng cao -> Bố cục -> ID CSS. Sau đó, vui lòng nhập ID CSS duy nhất tùy chỉnh mới của bạn vào trường ID CSS

Đó là nó. Như bạn có thể thấy từ hình ảnh trên, bây giờ bạn có hai nút với độ dốc nhiều màu khác nhau. Lưu dự án của bạn hoặc xuất bản nó nếu bạn muốn

Điểm mấu chốt

Bài viết này hướng dẫn bạn cách thêm CSS tùy chỉnh trong phiên bản miễn phí của Elementor. Với một vài thủ thuật, bạn có thể làm cho Elementor miễn phí của mình trông giống như Elementor Pro

Theo ý kiến ​​của chúng tôi, hướng dẫn này phù hợp với bạn nếu bạn là người mới sử dụng WordPress và Elementor. Tuy nhiên, nếu trang web của bạn đang phát triển hoặc thậm chí đã được thiết lập, chúng tôi khuyên bạn nên nâng cấp lên Elementor Pro. Bên cạnh tất cả các tính năng và lợi ích được cung cấp, với Elementor Pro, bạn có thể làm việc hiệu quả hơn

Làm cách nào để thêm CSS ID vào Elementor?

Làm cách nào để sử dụng mã CSS trong Elementor?

Tôi có thể thêm ID và lớp trong CSS không?