Như đã nói ở bài Giới thiệu về Ux Builder và hệ thống công cụ giúp xây dựng giao diện của Flatsome hôm nay mình sẽ xây dụng một giao diện mẫu giống một trang web có sẳn nhé. Demo : https://avovatheme.com/xem-trang?page=noithat&id=496 bạn truy cập theo link để xem giao diên trước nhé
Những kiếm thức áp dụng vào trong này cũng khác là nhiều mình sẽ đi qua từng bược để bạn theo dõi.
1. Cấu hình cơ bản – Flatsome -> Theme Options
Style -> Color
Vì trang này dùng một màu xanh chủ đạo nên mình chọn lại màu Primaty color và Secondary color là màu xanh luôn nhé, Bình thường màu của cái này bạn chọn là 2 màu chính của trang web minh.
Bạn kéo xuống phía dưới có thêm một số tùy chọn về màu sắc cho các thẻ tiêu đề, màu của thẻ <P> và màu của thẻ <a> thẻ Link….
Nếu bạn muốn chúng giống nhau và không muốn viết code Css kiểu thì bạn chọn mặc định ở đây nhé.
Style – > Typography cài đặt Font chữ
Tương tự như trên bạn vào Typography để cài đặt font . Trong này flatsome cho bạn rất nhiều tùy chọn đa dạng về font. Mình cài mặc định cho các thành phần là font Roboto và subset là Vietnamese , còn variant thì bạn để mặc định cũng được hoăc có thể thay đổi sau. Cái này quy đinh chữ in đậm hay nét mảnh.
Bạn cài tương tự cho các thành phần phía dưới nhé, trong một trang web bạn không nên sử dụng nhiều loại font khác nhau.
Bạn có thể cài đặt Text Transforms khác với mặc đinh luôn nhé. Thường thì mình để mặc định và tự css cho các thành phần trong đấy nhưng ở bài này mình cấu hình sẳn luôn Navigation / Tabs -> Normal .
Cài đặt Trang chủ
Bạn vào chọn cài đặt trang tĩnh -> chọn trang chủ hoặc trang bạn sẽ xây dựng giao diện làm trang chủ nhé. ở đây mình tại ra một trang tên là trang chủ cho dễ. Vào phần thuộc tính trang chọn Page Full Width để trang có thể full luôn nha. ngoài ra bạn cũng có thể chọn các thành phần khác cho phù hợn với các dự án layout sau này.
Bạn có thể vào Page -> Default -> page template chọn vào: Full width làm mặc định. (hoặc template bạn muốn)
Vào Layout Chọn Full Width
Site content width bạn thêm vào 1200px ( độ rộng phần nội dung bên trong, cái này mặc định cho man hình lớn).
Cuối cùng bạn vào Menu ở mục Phần giao diện trong phần quản trị để tạo ra một thanh menu nhé.
Để thêm các thành phẩn vào menu, bạn cần tạo chúng, ở đây gồm trang vào chuyên mục và cửa hàng …. để hiểu thị thì bạn nhớ Check vào phần thiết lập menu -> Main Menu nha.
2. Header
Bạn vào Flatsome -> Header để cấu hình cài đặt phần Header này nhé.
Ở đây menu cũng khá đơn giản, chỉ có phần Header main hiển thị và chứa Logo – menu – là số điện thoại thì mình chèn vào một cái HTML ->html1. Một việc nữa là vào phần header stiky -> chek vào ô Header main sticky on scroll nhé.
Thêm mốt số cấu hình khác : -Header main -> hieght :70px (chiều cao menu)
3: Xây dựng trang chủ ( hiển thị nội dung ngoài trang chủ )
Ta tìm hiểu qua về trang chủ của trang demo gồm những thành phần gì nhé.
Bàn vào chỉnh sửa trang => Chỉnh sử Ux Builder
1. Slider
2. Phần giới thiệu dịch vụ
3. Quy trình thiết kế nội thất.
4. Thi công nội thất.
5. Dự án thực hiện
6. Sản phẩm nội thất
7. Tin tức nội thất
8. Ý kiến khách hàng
Chúng ta bắt đầu xây dựng theo từng phầ nhé (Mình sẻ lấy hình ảnh từ trang demo để thực hiện nên nhé)
1. Slider
Ở đây là một silder trong đấy có 2 tấm hình, đơn giản thôi
Chúng ta thêm vào 1 slider -> tiếp theo ở phía trong chúng ta thêm vào 2 Imager và thêm hình vào cho mỗi đối tượng trên.
Trong mỗi đối tượng trên luôn có nhiều cấu hình để có thể tạo ra nhiều nhiêu ứng đẹp mắt, bạn có thể từ tự tiềm hiểu. Mỗi lần bạn add thêm mỗi đối tượng vào , nó sẻ tự động chuyển vào khung cài đặt cái không số. Nếu tắt đi rồi mà muôn vào lại bạn có thẻ nháy chột vào thanh tương ứng rồi chọn vào Options để vào lại. cũng như DoubleClick vào nó.
– Ở slider
Bạn có thể cấu hình : – admin label: một loại chú thích chỉ vào chế độ chỉnh sửa trang mới có thể nhìn thấy, ở các mục bao ngoài cùng bạn nên đặt tên cho nó để nhanh chóng phân biệt.
Auto slider: Bạn chọn thời gian chuyển cho mỗi slider được tính bằng ms, tất nhiên nó chỉ chạy khi bạn chọn On ở Auto slider.
Advanced -> Ở đây bạn có thể đặt các class riêng cho đối tượng của mình để có thể tùy chỉnh thêm bằng css riêng. Visibility -> bạn chọn khi nào thì đối tượng của mình được hiển thị hoặc không hiển thị ở đâu. vi dụ mình không cho slider của mình hện khi xem trên điện thoại thì ở đây chọn là Hedi for mobile.
– Image：
Chọn hình ảnh cho đối tượng ở mục Ảnh -> select media.
Ở Image Size -> Original ở đây là kích thước đầy đủ cho hình ảnh, vi hình slider nên bạn chọn kiểu này để có thể hiển thị rõ hình minh đưa vào nhé.
Nếu những hình của bạn đưa vào không có cùng tỷ lệ kích thước thì bạn nên cố định chiều cao để tránh khi slider chạy thì trang web sẻ nhảy lên xuống khi thay đổi hình, không được mượt mà. Những hình ở trang demo thì bạn không cần thêm cái này.
Lightbox : = On khi click vào hình thì cho phép mở hình đấy lên ở trong một khung và cho phép phóng to hình ra.
Ngoài ra bạn có thể gắn thêm link vào các hình ảnh để có thể đi tới địa chỉ khi click vào hình.
Có một số tùy chọn khác nếu bạn cần có thể tự cấu hình vào xem thứ nhé.
2. Phần giới thiệu dịch vụ
Được chia thành 2 phần: Bên trái là phần test mô tả, bên phải là 3 bài viết có hình và tiêu đề.
– Phần mô tả
Ở phần này chúng ta chèn vào một đối tượng Row và chưa thành 2 cột lớn nhỏ. gồm cột chứa mô tả rộng 4/12
Khi kéo vào đối tượng test Bạn soạn thảo nội dụng như trên là được.
Phần bên phải sẽ là một slider và hiển thị 3 cột chứa 3 bài viết tương ứng. Đơn giản bạn tạo ra một Blog post Cấu hình hiển thị
Sở đồ trình bài : Type -> Slider; columns -> 3;
Bài viết : Catagory -> Dự án; Total post: Tổng số bài tối đa sẽ lấy ra, offset: Loại bỏ X bài viết đầu tiên.
Meta: Bạn chọn cái nào không hiển thị ra thì chọn Hidden nó là được.
Ảnh : Bạn chọn lại chiều cao mặc định là 56% -> 75% (3/4)
Văn bản : Bạn chon Kích ở là S hoặc xs là ok.
Bạn cấu hình cơ bản như trên là cũng khá ok rồi. bởi vi trang demo còn có thêm Css để trang đẹp hơn. ở đây mình sẽ không nói về vấn đề này, mình chỉ giới thiệu và cấu hình cơ bản bằng tất cả những tùy chọn sẵn có của Flatsome thôi.
3. Quy trình thiết kế nội thất. & 4. Thi công nội thất.
2 mục này tương tự nhau gồm có một title ở đầu , một row 2 cột chứa hình ảnh và một Accordion (các tab hiển thị)
Ngoài cùng mình chọn mộ cái Section – > Title +Row
Title: hiển thị dòng chữ: Quy trình thiết kế nội thất -> Style : center, tag : h4, title : Quy trinh…..
Như vậy là được nhưng bạn có thể có thêm nhiều tùy chọn phía dưới như tùy chọn Icon, Màu sắc, Rộng, Margin ……
Row -> 2 Columns (6/12 +6/12)
Bên phải : columns 1 bạn chèn 1 một hình ảnh (Image), Bên phải bạn chọn chèn vào 1 Accordion và thêm nội dung vào trong Pannel -> text
Tiêu đề và add Elements là một Text thêm nội dung vào là ok.
Bạn làm tương tự như đổi vị trí cot là dược nhé.
5. Dự án thực hiện
Ở đây ta thấy trong này gồm có một tiêu đề phía trên + các dư án thực hiện ở phía dưới. ở đây ta thực hiện như sau :
Giống như các mục ở trên đã thực hiện Bạn tạo ra một Row 1 columns (12/12) Chèn vào Title + Blog Post cấu hình -> ok
mình tin chăc bạn có thể tự làm được
6. Sản phẩm nội thất
Ở đây bạn add thêm vào một Product vào Bạn có thể cấu hình một số thông tin như Type: Slider, Columns : 4, Ngoài ra bạn có thể cấu hình một số khác như Columns Spacing, Animate, Bài viết …….
Ngoài ra bạn còn cần vào Flatsome -> Theme Options -> Shop (Woocommence) -> category Product: Ở đây bạn có thể cấu hình tắt hoặc hiển thị Quick View, category, Tỉ lệ hiển thị hình ảnh, Product Box và Custom sale Bubble Text hiển thị giảm giá theo %….
7. Tin tức nội thất
Tin tưc nội thất ở đây được chia thành 2 cột, trong cột 1 là một bài đăng và cột 2 là danh sách :
Ở cột 1: Hiển thị một bài đăng
Type : Row, Columns =1, Total post : 1, Date : hidden, Chiều cao ảnh : 75%, Kích cỡ : Original …. bạn có thể đặt thêm class và cách hiển thị trên di động.
Côt 2:
Style : Vertical, Type : row, Colums spacing = small, columns =1, Tatol Post = 3, offset =1(không hiển thị bài đăng đầu tiền để khổi trùng lặp với bài ở cột 1) , Date = hidden, Chọn lại độ rộng : khoảng 35%;
ok như vậy là bạn đã hiển thị ra như demo rồi đấy.
8. Ý kiến khách hàng
Đây là một phần cuối cùng trong phần nội dung của trang .
Để theme vào một nhận xét đánh giá của khách hàng thì trong các elements ban tìm tới Testimoninal và add nó vào dự án của chúng ta sau đấy tự câu hình là có thể, nhưng ở đây mình giới thiệu cho mọi người một cách khác để nhanh chóng tạo được cái template nhờ vào Flatsome studio được xây dựng và chia sẻ. Bạn chon nhữ template phù hợp và thêm vào dự án của mình là được. Đầu tiên bạn Add Emlement từ thanh menu bên trái chọn -> Flatsome Studio
Trong này có nhiều template có sắn khá là hay, Bạn tìm được cái mình ưng ý rồi Import vào là được. Bạn cũng có thể chọn Preview để xem được chi tiết hơn trước khi quyết định.
Đây là kết quả khi chúng ta Import về
Bạn chọn vào từng đối tượng Testimonias và thay đổi thông tin là ok. Ở đây là một Slider -> Panner ->text box nên bạn cũng có thể cấu hình cho những đối tượng này để nó chạy và hiển thị tuy theo sở tích của mình.
Lưu ý là bạn chỉ có thể add Flatsome Studio từ thành phần ngoài cùng. Nghĩa là bạn không chen nó vào một section hoắc một row nào đó mình tạo sẳn, mà nó là một thành phần mới hoàn toàn, Sau khi tạo ra bạn có thể kéo chúng vào các đối tượng chứa của mình sau nhé.
Như vậy làm mình đã hoàn thành phần nội dung của trang rồi. bây giờ còn cuối cùng là footer.
Footer
Như trang demo, ta thấy footer của chúng ta có 4 cột chứa các nôi dung tương ứng: Để cài được bạn vào Flatsome -> Theme Options -> Footer
Ở đây bạn chọn được số cột hiển thị ra, chọn màu và màu nên, hình nền. Mình chọn 4 cột, Màu chữ tối, nền trắng.
Trong phần giao diện -> widget Bạn tìm tới phần footer ( Gồm footer 1 và footer 2 ) Bạn có thể chọn 1 trong 2 để chọn hiển thị ra ngoài. ở đây mình chon vào footer 2 nha, chọn cài nào cũng giống nhau. nếu bạn chọn 2 cái thì lưu ý là cái footer1 nằm trước footer nhé.
Đây là thành phần cuối cùng của trang web chúng ta. bạn cài đặt trong theme options -> footer nhé.
Kết quả của bài này là :
OK cảm ơn mọi người đã xem tới đây. Bài sau mình sẽ thiết kết một trang bán hàng . Hi vong được sự ủng hộ của mọi người
