2316 lượt xem

Hướng dẫn sử dụng theme Flatsome từ cơ bản đến nâng cao (phần 2)

Tiếp tục series hướng dẫn sử dụng theme Flatsome cùng Alowebtot, chúng tôi sẽ giúp bạn xây dựng một cách chuyên nghiệp và đào tạo chất lượng đầu vào lẫn đầu ra một cách chuyên nghiệp nhất có thể.

Trong bài viết trước chúng tôi đã giới thiệu cho các bạn về hướng dẫn sử dụng theme Flatsome p1 các bạn có thể xem tại : https://alowebtot.com/huong-dan-su-dung-theme-flatsome-p1

dichvuquantriweb 4 cach xay dung hinh anh dep trong thiet ke website
Hướng dẫn sử dụng theme Flatsome

Thêm Slider trong Flatsome

Click chuột vào Add Elements để thêm phần tử mới

Bạn hãy chú ý tới Left Column ( cột bên trái), bạn sẽ thấy xuất hiện các Element cần thiết cho website

add element
Add Elements

Lựa chọn một Element bất kỳ

Ví dụ bạn lựa chọn Slider:

  • Nhấn chuột vào Add Slides Here để thêm một hình ảnh làm slide
  • Left column sẽ là khu vực hiển thị để bạn tìm kiếm
ux builder 3

Sau khi lựa chọn Add Slider bạn tiếp tục lựa chọn banner, image đều được

ux builder 4

Ấn Apply

ux builder 5

Nhấp chọn Select media để đăng tải lên một hình ảnh

Nhấp chuột trái vào văn bản nếu muốn chỉnh sửa

ux builder 7

Nhấp chuột phải lựa chọn Delete nếu bạn muốn xóa nó đi

ux builder 8

Thêm class để tùy chỉnh CSS

Bạn có thể thêm class tại khu vực Advance

ux builder 9

Cuối cùng, bạn nhấn Apply để hoàn thành quá trình và lưu lại

Chia cột trong Flatsome

Để chia cột bạn lại thêm một Add Elements mới (Đối với các phần tử khác bạn cũng làm tương tự bước này)

ux builder 10

Tiếp đến bạn chọn Row

ux builder 11

Chọn một số cột muốn hiển thị Ấn Add elements để thêm ảnh hoặc bất cứ điều gì bạn muốn

ux builder 13

Thêm văn bản trong Flatsome

Tiếp tục sau khi bạn chọn Add elements, bạn sẽ thêm văn bản vào như sau

ux builder 14
  • Nháy đúp chuột để thêm văn bản vào
  • Click chuột trái vào khối văn bản -> Open Text Editer
ux builder 15

Thêm video trong Flatsome

Để thêm video bạn cũng chọn Add elements rồi lựa chọn “Video” trong mục từ khóa tìm kiếm

ux builder 16

Thêm sản phẩm trong Flatsome

Để thêm sản phẩm trước website bạn phải cài đặt Plugin Woocommerce và thêm sản phẩm vào tại đây

ux builder 17

Cuối cùng ấn Apply để hoàn thành Mỗi lần thực hiện xong hãy ấn Update để lưu lại kết quả của cả quá trình bạn làm Với Ux Buider, bạn phải chăm chỉ thực hành với nó để trở nên thành thục. Bạn nên xem các giao diện website khác nhau để từ đó áp dụng chúng. Luyện tập càng tần suất cao, bạn sẽ mang lại thành quả cho mình đến nhanh hơn bao giờ hết. Đội ngũ website Alowebtot chúng tôi xin gửi lời chúc, mong các bạn sớm thành công.

people waving hand illustration concept 52683 29825
Lời chúc từ đội ngũ Alowebtot tới khách hàng