Hướng dẫn thiết kế giao diện website như javis.com.vn sử dụng wordpress theme Flatsome

Hướng dẫn thiết kế giao diện website như javis.com.vn sử dụng wordpress theme Flatsome là bài trong chuỗi video hướng dẫn tự thiết kế website bán hàng wordpress chỉ trong 10 phút của mình.

Trong bài viết trước mình đã hướng dẫn các bạn cài đặt sử dụng wordpress theme Flatsome để làm trang bán hàng bằng wordpress (có video kèm theo). Đây là video tiếp theo từng bước tạo ra một trang giao diện giống như Javis Store.

Giao diện trang TMDT Javis.com.vn

Trước khi bắt đầu bạn có thể xem giao diện của Javis Store theo đường link bên trên, (Nếu giao diện có thay đổi và không còn giống trên Video thì có thể xem ảnh bên dưới:

Thứ tự chỉnh sửa và thiết kế giao diện

Trong Video hướng dẫn này sẽ được phân chia hướng dẫn chỉnh sửa cụ thể từng phần của website, sử dụng các công cụ như UX Builder (Kéo thả các phần tử, đối tượng vào nội dung) và Flatsome design (Đây là một phần của theme option).

Quảng cáo 1 phút:
Toàn bộ blog của mình không giới thiệu sản phẩm gì khác ngoài những sản phẩm mình đang sử dụng và thấy rất tốt.

  1. Theme dành cho wordpress – Flatsome bestseller wordpress woocommerce theme tùy biến cực cao, không cần code mà chỉ cần kéo thả. Sử dụng làm được blog cá nhân (dùng luôn blog của store) và website bán hàng.
  2. Affiliate cho wordpress tích hợp với nhiều flatform woocommerce, digitals download…Plugin chính mình đã việt hóa lên tới 98% sử dụng tiếng việt – Ultimate Affiliate pro – wordpress affiliate plugin.
  3. Tham gia Affiliate (Đại lý bán hàng) tại Javis Store, chiết khấu lên tới 15%, thời gian lưu cookie là 365 ngày. Sản phẩm thời trang nam duy nhất có hình thức Affiliate tại việt Nam và chiết khấu cực cao.

Phần 1: Chỉnh sửa header

Trong phần header được chỉnh sửa chủ yếu bằng thao tác kéo thả các đối tượng được thiết kế sẵn, Flatsome được thiết kế dể bán hàng nên nó có hỗ trợ tất cả những thứ cần thiết mà một trang website bán hàng cần có.

Trong một video tiếp theo mình sẽ hướng dẫn chuyên sâu hơn làm sao làm chủ được phần header, với nhiều kiểu tùy biến, nhiều cách thiết lập nhìn đẹp mắt hơn.

Phần 2: Chỉnh sửa phần main

Đây là phần nội dung chính của trang, mình thiết kế dựa theo giao diện mặc định tương tự như javis.com.vn và thời lượng video dài nên mình bị giới hạn trong một khuôn khổ nhất định nên không đi tập trung, chuyên sâu hơn thiết kế từng chi tiết nhỏ được.

Trong phần này mình có sử dụng một số các đoạn mã Css (Được tùy chỉnh copy chèn vào Flatsome –> Advanced –> Custome Css) bạn có thể download file tại đây: https://www.mediafire.com/?716 [Upadted: Tạm dừng chia sẻ vì bộ css này code riêng cho Javis.com.vn]

Phần 3: Chỉnh sửa Footer

Nội dung phần footer mình đi nhanh gọn, chủ yếu chỉnh sửa màu sắc để nhìn phù hợp hơn, Các widget mở rộng như footer 1, footer 2 là chứa các phần tử bạn muốn thiết lập. Vì thời gian video cũng dài nên mình rút ngắn lại và bỏ phần này đi.

Video cụ thể xây dựng trang website bán hàng tương tự như Javis.com.vn

Tóm lại: Video này chỉ mong muốn show cho bạn một điều rặng, Flatsome hỗ trợ tùy chỉnh và thay đổi giao diện rất đơn giản và có thể xây dựng được giao diện như thế nào theo ý bạn đều được tùy vào khả năng sáng tạo của mỗi người.

Chúc bạn tận hưởng những thành quả ngọt ngào trong tương lại!

2 thoughts on “Hướng dẫn thiết kế giao diện website như javis.com.vn sử dụng wordpress theme Flatsome

  1. Thanh says:

    Chào bạn trước tiên xin cảm ơn những chia sẻ quý báu của bạn. Mình đang sử dụng theme này nhưng mình không biết về Css, bạn có thể chia sẻ giúp mình đoạn CSS màu sắc về thanh tiêu đề.. Cảm ơn rất nhiêu

Trả lời

Thư điện tử 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 *