Trong hướng dẫn mới này, chúng tôi sẽ chỉ cho bạn cách tạo một nút nhiều dòng với biểu tượng trong Elementor.
Cần lưu ý rằng bạn sẽ không cần bất kỳ plugin bổ sung nào để làm như vậy. Phiên bản Elementor Pro sẽ cung cấp cho bạn mọi thứ bạn cần để đạt được điều đó
Để có ý tưởng về những gì chúng ta sẽ làm trong hướng dẫn này, video sau đây sẽ cho bạn thấy bản xem trước về những gì chúng ta sẽ làm cùng nhau.
Bây giờ chúng ta bắt đầu làm việc.
Khám phá quá Cách tạo trang tùy chỉnh cho WooCommerce trong Elengười cố vấn
Hãy tạo một phần mới bằng cách chọn một phần có một cột.
Sau đó, một trong bảng điều khiển bên, chúng ta hãy chọn Chiều cao tối thiểu vì Hauteur và Chiều cao tối thiểu hãy nhấp vào VH và đặt thanh trượt thành 100.
Bây giờ hãy kéo Tiện ích nút trong khu vực làm việc của chúng tôi
Trong tab Nội dung từ thanh bên Hãy thay đổi trường Văn bản bằng cách nhập Tải xuống trên App Store, sau đó vào sự liên kết hãy nhấp vào Trung tâm
Sau đó bấm vào nút thư viện biểu tượng, gõ quả táo vào thanh tìm kiếm, chọn biểu tượng mà chúng ta quan tâm và bấm vào nút chèn.
Quay lại thanh bên, hãy thay đổi Khoảng cách biểu tượng thành 14
Đọc cũng: Cách tạo thẻ hiệu ứng từ danh mục đầu tư trong Elementor
Trong tab Phong cách, hãy sửa đổi màu nền nút trên Đen
Hãy thay đổi nó kích thước kiểu chữ trên 25
Sur bán kính biên giới, hãy lấy 20 cho tất cả các bán kính cạnh. Cho lợi nhuận nội bộ, hãy lấy 14-36-14-36 cho lề Lên, phải, xuống và trái.
Xem thêm: Cách thay đổi hình ảnh bằng cách nhấp vào nút trong Elementor
Bây giờ chúng ta sẽ đi tới tab Nội dung và hãy chuyển văn bản nút thành hai dòng.
Để thực hiện việc này, hãy sao chép và dán mã sau vào trường văn bản:
<span class="top-small-text">TEXTE DE PREMIERE LIGNE</span> <br> TEXTE DE DEUXIEME LIGNE
Sau đó, hãy thay đổi văn bản FIRST LINE TEXT thành Tải xuống trên và văn bản của SECOND LINE TEXT trong App Store
Bây giờ chúng ta cần có nhiều quyền kiểm soát hơn đối với dòng đầu tiên và dòng thứ hai
Để làm điều này, hãy chuyển đến tab tiên tiến sau đó trong phần Tùy chỉnh CSS, sao chép và dán mã sau:
selector .elementor-button-icon{
font-size: 62px;
}
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
NHẬN XÉT: Nếu chưa có phần này, bạn phải nhanh chóng nâng cấp lên phiên bản Pro.
Vì vậy, để cá nhân hóa nút của bạn đủ, ví dụ, bạn có thể phóng to biểu tượng bằng cách sửa đổi giá trị của font-size từ phần mã:
selector .elementor-button-icon{
font-size: 62px;
}
Đọc cũng: Cách xuất và nhập mô hình Elementor
Để tùy chỉnh màu của dòng đầu tiên, chỉ cần thay đổi giá trị của color và nếu bạn muốn thay đổi giá trị kích thước phông chữ, bạn phải thay đổi font-size từ phần mã sau:
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
Và ở đây bạn vừa tạo một nút nhiều dòng với biểu tượng. Bạn có thể xem trước nó.
Tải xuống Elementor Pro ngay bây giờ !!!
Kết luận
Vì thế ! Đó là tất cả trong bài viết này, nó sẽ hướng dẫn bạn cách tạo một nút nhiều dòng có biểu tượng trong Elementor. Nếu bạn có bất kỳ mối quan tâm nào về cách đến đó, chúng tôi rất muốn nghe ý kiến của bạn 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.
...
