Chào các bạn, có vẻ giao diện Flatsome khá quen thuộc với mọi người nhờ vào tốc độ và khả năng tùy biến UX/UI của nó. Tuy nhiên, có 1 điều mà chắc chắn các bạn khá là khó chịu là, cái Price Table của Flatsome khá củ chuối. Nên vì thế, mình sẽ share cho các bạn cách thêm sắc màu cho Price Table của Flatsome theo cách đơn giản nhất.
Hướng dẫn thêm màu sắc cho Flatsome Price Table
Mọi thứ mà các bạn chuẩn bị là 1 giao diện Flatsome hoàn chỉnh, bạn có thể click vào đây để lấy link tải giao diện Flatsome 3.15.4 với tốc độ load trang được cải thiện đáng kể.
Flatsome Colorful Price Table Shortcode
Đầu tiên, các bạn hãy tạo 1 trang hoặc block và đưa đoạn mã này vào khi đang tạo trang
[row label="CSS* Pricing: Color Box" v_align="equal" class="pricing-color-box"]
[col span="4" span__sm="12" padding="60px 0px 20px 0px" bg_color="rgb(218, 137, 94)"]
[ux_price_table title="Bronze" price="$150" depth_hover="0"] [bullet_item text="20 projects"]
[bullet_item text="20 pages"] [bullet_item text="Custom domain"] [bullet_item text="Professional design"]
[button text="Contact us" color="secondary" expand="true"]
[/ux_price_table]
[/col]
[col span="4" span__sm="12" padding="60px 0px 20px 0px" bg_color="rgb(196, 196, 196)"] [ux_price_table title="Silver" price="$250" depth_hover="0"]
[bullet_item text="50 projects"] [bullet_item text="50 pages"]
[bullet_item text="Custom domain"]
[bullet_item text="Professional design"] [button text="Contact us" color="secondary" expand="true"]
[/ux_price_table]
[/col]
[col span="4" span__sm="12" padding="60px 0px 20px 0px" bg_color="rgb(241, 183, 57)"]
[ux_price_table title="Gold" price="$500" depth_hover="0"] [bullet_item text="100 projects"]
[bullet_item text="50 pages"] [bullet_item text="Custom domain"]
[bullet_item text="Professional design"] [button text="Contact us" color="secondary" expand="true"]
[/ux_price_table]
[/col]
[/row]
Hoặc nếu bạn đã bên trong UX Builder thì các bạn hãy thao tác theo hình dưới
Vậy là xong, giờ tiến hành bước kế tiếp thôi !
Flatsome Colorful Price Table CSS
Sau khi đã hoàn tất Import shortcode vào trang, các bạn hãy tiến hành coppy đoạn CSS sau và bỏ vào trong trường tùy biến của Webiste WordPress. Hoặc trong hosting của các bạn, hãy vào đường dẫn sau:
wp-content/themes/flatsome-child/stylesheet.css <<< coppy css bỏ vào đây
/*************** PRICING: COLOR BOX ***************/ .pricing-color-box .col-inner { border-radius: 5px; /* Change border radius */ } .pricing-color-box .pricing-table .price { font-size: 250%; /* Change font size price */ padding: 50px 0px 10px 0px; } .pricing-color-box .pricing-table .title { color:#000; /* Change text color title */ background-color: rgba(0,0,0,0.02); width: fit-content; min-width: 50%; margin-top: -20px; position: absolute; z-index: 999; background: #fff; left: 0; right: 0; border: 1px solid #ececec; letter-spacing: 4px; font-size: 80%; padding: 10px; } .pricing-table { padding-bottom: 25px; }
Vậy là xong, tận hưởng thành quả thôi. Và dưới đây là Demo.
Thêm Icon cho Colorful Flatsome Price Table - Bảng giá sắc màu cho Flatsome
Bạn cũng có thể tùy biến và thêm Icon cho bảng giá của Flatsome đã chỉnh sửa cho sinh động hơn bằng cách sử dụng các file icon định dạng SVG. Các bạn có thể coppy đoạn Shortcode dưới đây rồi Import vào Flatsome của các bạn nhé.
Nhớ tải 2 File SVG cần thiết này nhé: Box SVG | Messenger SVG
[row label="CSS* Pricing: Color Box" v_align="middle" h_align="center" class="pricing-color-box"] [col span="6" span__sm="12" padding="60px 0px 20px 0px" bg_color="rgb(255,255,255)" depth="2" depth_hover="4"] [featured_box img="42" img_width="75" pos="center" margin="0px 0px 30px 0px" icon_color="rgb(255, 53, 53)"] [ux_price_table title="Hararetail" price="FREE" description=" **PHẦN MỀM QUẢN LÝ BÁN HÀNG CHUYÊN NGHIỆP** " depth_hover="0"] [bullet_item text="Miễn phí cho 2 cửa hàng, 10 nhân viên"] [bullet_item text="POS bán hàng PC, Mobile tiện dụng"] [bullet_item text="Quản lý bán hàng, đơn hàng"] [bullet_item text="Quản lý thông tin khách hàng"] [bullet_item text="Xử lý đơn hàng và giao hàng nhanh"] [bullet_item text="Tạo chương trình khuyến mãi"] [bullet_item text="Thống kê, báo cáo thông minh"] [bullet_item text="Phân quyền cho nhân viên"] [button text="Đăng ký" color="alert" style="shade" radius="10" expand="true" link="#tong-dai"] [/ux_price_table] [/featured_box] [/col] [col span="6" span__sm="12" padding="60px 0px 20px 0px" bg_color="rgb(255,255,255)" depth="2" depth_hover="4"] [featured_box img="52" pos="center" margin="0px 0px 30px 0px" icon_color="rgb(58, 53, 255)"] [/featured_box] [ux_price_table title="Harafunnel" price="FREE" description=" **FACEBOOK MESSENGER CHATBOT MARKETING** " depth_hover="0"] [bullet_item text="Chatbot miễn phí không giới hạn Fanpage"] [bullet_item text="Tạo kịch bản bán hàng và tư vấn khách tự động"] [bullet_item text="Social CRM phân nhóm khách hàng thông minh"] [bullet_item text="Phản hồi Comment, inbox tự động 24/7"] [bullet_item text="Miễn phí 5 công cụ tăng trưởng khách hàng"] [bullet_item text="Quản lý tất cả comment, inbox trên fanpages"] [bullet_item text="Tối đa tỷ lệ chuyển đổi đơn hàng, lead khách hàng"] [bullet_item text="Thu tệp khách hàng và quảng cáo tự động"] [button text="Đăng ký" color="alert" style="shade" radius="10" expand="true" link="#tong-dai"] [/ux_price_table] [/col] [/row]
Sau khi Import Shortcode xong thì đây là thành quả
Chúc các bạn thành công.
Nguồn: https://thietkewebfree.com/flatsome-colorful-price-table.html/
