Thủ thuật, CSS Ngày 20/12/2021 7447 lượt xem

Thêm Category vào Title trong UX Builder theme Flatsome

NHiều lúc bạn muốn tùy biến thanh Title cho đẹp và thêm sub Category vào bên phải trên danh mục để thể hiện rõ các danh mục…

Lê Anh ĐôngFlatsome trên Google News

Thêm Category vào Title trong UX Builder theme Flatsome

NHiều lúc bạn muốn tùy biến thanh Title cho đẹp và thêm sub Category vào bên phải trên danh mục để thể hiện rõ các danh mục muốn show ra trang chủ , Nay mình giúp bạn làm việc đó trên build UX dể dàng và đẹp

Thêm Category vào Title trong UX Builder theme Flatsome

Xem qua demo nhé sau khi custom sẽ được 🙂 nhìn đẹp đúng ko bạn , trước đây phải custom từng link và css cho nó , giờ ko cần làm đúng 1 lần sau đó muốn thêm chỉ việc dùng UX kéo ra thôi nhé

Thêm Category vào Title trong UX Builder theme Flatsome
Thêm Category vào Title trong UX Builder theme Flatsome

 

Thêm Category vào Title trong UX Builder theme Flatsome

Việc thêm nó vào Element cúng khá đơn giản các bạn cứ làm theo các bước dưới đây để thêm nó nhé, còn Css thì các bạn có thể tùy biến hoặc dùng luôn Css chia sẻ trong bài viết nhé.

Thêm element mới 

Trong Element của Ux Builder nó không thể custom lại bằng cách viết vào child theme, nên bắt buộc chúng ta phải tạo một Element trong file functions.php của child theme.

Hiển thị Title with Category vào UX builder

Đoạn code sau đây sẽ giúp thêm một Element với tên “Title with Category vào trong UX builder, khi các bạn chỉnh sửa trang bằng UX builder có thể dùng được Element này. Đoạn code bên dưới các bạn thêm vào functions.php của child theme.

 

Sau khi bạn thêm xong 2 code trên vô  functions.php  theme bạn đang sử dụng , bạn vô UX build sẽ thấy như hình

Thêm Category vào Title trong UX Builder theme Flatsome
Thêm Category vào Title trong UX Builder theme Flatsome

1 Box Title trong UX Builder sẽ xuất hiện trong UX , chỉ việc nhấp chọn hoặc kéo thả nó

 

Thêm Category vào Title trong UX Builder theme Flatsome
Thêm Category vào Title trong UX Builder theme Flatsome

Chọn các danh mục muốn hiện thị và lưu lại thôi nhé

Thêm Css cho đẹp hơn nhé bạn

Lưu ý : Nếu để vào HTML thì coppy mã trên còn để vào Custom css thì bỏ cặp thẻ này nhé <style type=”text/css”></style>

sau khi bạn làm đúng những cái trên lưu lại bạn sẽ thấy demo giống như này

 

Thêm Category vào Title trong UX Builder theme Flatsome
Thêm Category vào Title trong UX Builder theme Flatsome

Có thể thay đổi màu sắc phù hợp với web bạn qua code này

.section-title-normal { background: #4fba69; }

Xem demo ở link Sidebar

Chúc bạn thành công

Điểm 5/5 - ( Có 2 bình chọn)

Có Nhận xét cho "Thêm Category vào Title trong UX Builder theme Flatsome"

  1. Pingback: Thêm Block Share cho web theme Flatsome - FLATSOME - FREE EVERY THING

  2. Pingback: Thêm Category vào Title trong UX Builder theme Flatsome - FLATSOME - FREE EVERY THING

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Các dịch vụ của FLATSOME.XYZ