[UX Builder] Tạo Slide Sản Phẩm & Bài Viết để Liên Kết Trong Flatsome ...

Flatsome với các shortcode [UX Builder] giúp chúng ta làm được nhiều nhiệm vụ phức tạp mà không cần biết nhiều về code. Hôm nay mình sẽ giới thiệu các bạn làm slide để chèn hình ảnh hoặc danh sách các bài viết để chèn vào bất kỳ khu vực nào mình muốn.

UX Builder của flatsome là gì?

UX Builder là một trình hỗ trợ tạo giao diện kéo thả bằng các modul được lập trình sẵn trong theme, với giao diện trực quan các bạn có thể kéo thả và tạo ra các khối cơ bản dùng cho website mà không cần thao tác vào code của web.

Mội lợi điểm to lớn của UX Builder là sau khi tạo xong nó sẽ cung cấp cho chúng ta một shortcode có thể đem dùng hoặc nhúng vào bất kỳ đâu trong website wordpress.

Tạo slide sản phẩm & bài viết để liên kết trong Flatsome

Tạo slide bài viết

Vào UX Blocks tạo 1 block “Slide bài viết“ như sau nhé (tạo mới rồi copy nội dung bên dưới vào)

[blog_posts style="normal" columns="3" columns__md="1" posts="6" image_height="56.25%"]

1	[blog_posts style="normal"columns="3"columns__md="1"posts="6"image_height="56.25%"]

Ở đây chúng ta tạo list các bài viết mới nhất, các tham số như sau:

• style=”normal”: list bình thường – slide
• columns=”3″ : cột 3 bài viết
• columns__md=”1″ : 1 cột
• posts=”6″ : số bài viết trong slide là 6
• image_height=”56.25%”: kích thướng hình ảnh

Sau khi tạo xong UX blocks chúng ta sẽ có shortcode như sau:

Nhúng short code trên vào bất kỳ đâu trong bài viết hoặc sản phẩm để sử dụng nhé. Dưới đây là ví dụ shortcode trên được nhúng vào bài này.

<—————-bắt đầu ví dụ——————-->

codfe contact button

30/12/2024

Share Tweet Save Share Share [...]

Kỹ thuật dồn các icon vào 1 file để hiển thị khi làm web

Dồn các icon vào 1 file khi làm web thì chẳng có gì xa lạ [...]

23 Th8

Cách tạo mục lục tự động cho bài viết wordpress (TOC)

Cách tạo mục lục tự động cho bài viết wordpress (TOC) Tạo file codfe-toc.php trong [...]

26 Th12

CodePen Home Textarea Tabs + Syntax Highlighting

26/12/2023

Share Tweet Save Share Share [...]

Cách tạo danh mục (table of content) cho mô tả danh mục bài viết và sản phẩm

Thường các Plugin hỗ trợ tạo danh mục (H2 H3 H4) cho bài viết thường [...]

20 Th12

Tạo đồng hồ đếm ngược trong wordpress bằng PHP – JavaScript Countdown Clock

Share Tweet Save Share Share [...]

12 Th12

<—————Kết thúc ví dụ——————->

Tạo slide sản phẩm thì tương tự

Ta cũng tạo UX blocks mới và add shortcode như sau:

[ux_products style="normal" slider_nav_style="simple" show_cat="0" show_rating="0" show_add_to_cart="0" show_quick_view="0" equalize_box="true" cat="71" orderby="date" image_height="100%" class="codfe-lsit-product"]

1	[ux_products style="normal"slider_nav_style="simple"show_cat="0"show_rating="0"show_add_to_cart="0"show_quick_view="0"equalize_box="true"cat="71"orderby="date"image_height="100%"class="codfe-lsit-product"]

Giải thích các tham số

• style=”normal”  : slide bình thường
• slider_nav_style=”simple” : kiểu nút trái phải
• show_cat=”0″ : không hiển thị danh mục
• show_rating=”0″ : ko hiển thị bình chọn
• show_add_to_cart=”0″ : bỏ nút thêm vào giỏ hnag2
• show_quick_view=”0″ : bỏ xem nhanh
• equalize_box=”true” : canh chiều cao các sản phẩm bằng nhau
• cat=”71″ : id danh muc sản phẩm cần hiển thị
• orderby=”date” : sắp xếp sp theo ngày
• image_height=”100%”: kích thước hình 1:1 (vuông)
• class=”codfe-list-product” :  class để khi cần bổ xung thêm css

Các bạn xem thêm video sau để dễ hình dung hơn về cách dùng nhé!

&nbsp

2.3/5 - (6 bình chọn) Share Tweet Save Share Share Bài viết mới:

• 12 tính năng mà bạn cần thay đổi ngay khi vừa cài Windows 10
• Code nút liên hệ 03
• Fix lỗi menu 3 cấp trên Flatsome
• Khắc phục lỗi image file unicode wordpress – clear image file name wordpress
• Hiệu ứng đánh chữ