Theme option – cấu hình Flatsome

Flatsome >> Theme Options

1.Header

Là thành phân trên cùng của trang web và hiển thị như nhau ở tất cả các trang (thành phần chung của toàn bộ website).

Trong này sẽ có các cấu hình cho phần header của trang web, Các thành phần của Header gồm có 3 thành phần chính là : top bar – header main – header bottom Mỗi thành phần bạn có thể kéo thả các phần vào nó sẽ hiển thi ở phía trên để bạn xem và chỉ sửa cho hợp lý.

1.1 Presets

Trong phần nay Flatsome đã tạo sẵn một số header cho chung ta. Nếu bạn không biết cách sắp xếp thành phần cho hợp lý thì có thể tham khảo các mẫu có sẳn nay. Nó cũng được thiết kế đẹp và tối ưu.

1.2 Logo & Site Identity

Ở đây bạn có tất cả các cấu hình về Logo  như chọn logo, kích thướng hiển thị, khoảng cách lề, vị trí hiển thị là bên trái hay ở giữa, Logo hiển thị ở màu tối. Ngoài ra ở đây bạn có thể chỉnh sửa lại tên, tiêu đề website của mình, biểu tượng xuất hiện ở trên Tab mở web.

Để thay đổi logo ở phần logo Imager bạn nhấn vào Select File và chọn tới logo của mình là được. tương tự với Logo Imager Light Version là logo hiểu thị ở trong chế độ nền tối.

Ở 3 mục phía dưới Chúng ta sẽ có những cấu hình chung cơ bản như chiều cao của thanh, Màu nền, Màu chữa, Màu khi Hover chuột vào, cở chữ, khoảng cách dòng và phần Nav Style là áp dụng cho danh sách như menu. Và mỗi thành phần trong phần dẻ

1.3 Top Bar

Hiển thị trên cùng của khối cũng như là trên cùng của trang web của bạn. Mặc định của Flatsome là nó luôn được hiển thị, nếu bạn không cần dùng thì phải vào và tắt đi dấu tick ở  Enable Top Bar đi nhé. Ở trong thành phần này thường chứa các thông tin có bản như contact, Top bar menu (điều hướng tới các trang web giới thiệu hoặc quy định, điều khoản…) tuy nhiêu thích thêm gì là quền của bạn thôi. nó có thể chứa các HTML* để hiện thị thông tin nào đó hoặc chứa phần đăng nhập/ đăng ký, Liên kết xã hội ….

1.4 Header Main

Mặc định chứa logo trang web của chúng ta, Ngoài ra tùy vào trang của mình bạn có thể chưa thêm phầm Main menu vào một số tùy chọn điều hướng khác. ngoài ra ở đây còn tùy chọn Nav Push điểu chỉnh vị trí hiển thị so với Trên vào dưới của khung. bạn có thể kéo sang phải – trái để xem, Bạn có thể chọn hình nền cho khung, Thêm ‘Add shadow’, ‘Add divider’ ………….

1.5 Header Bottom

Thành phần này thì mắc định là không hiểu thị, Nhưng nếu muốn nó hiểu thị ra thì đơn giản bạn chỉ cần kéo các thành phần phía dưới vào khung tương ứng với  Header bottom là được. Bình thường nếu phần Header Main không có chứa được header menu thì bạn đấy nó xuống header bottom và hoặc chưa thêm vài thuộc tính khác nữa cho đầy đủ.

Khi kéo các thành phần vào trong có khối tương ứng chúng ta sẽ có kết quả như sao :

1.6 Header Mobile Menu / Overlay

Là menu được thiết kể để hiển thị trê các thiết bị di động (Thiệt bị màn hình nhỏ, nhỏ hơn 849px, bạn có thể tùy chỉnh lai thông qua css và js nhé) Bạn cũng có thể kéo đó ra để có thể hiển thị trên thiết bị màn hình hớn, tên là Nav Icon

Ở đây là tất cả những gì bạn có thể cấu hình trong này.cài đặt Chiều cao của thanh, vị trí hiển thị là bên trái hay ở giữa khi chuyển về chế độ màn hình nhỏ. Chọn biểu tượng, hiển thì tên của menu, Menu Elements những gì mà khi bạn nhấn vào và hiển thị ra menu gồm những gì. màu của chữ và màu nền.

Bạn có thể chọn vào hình con mắt ben trái  để tắt hoặc mở ra những gì mình muốn, Bạn có thể nhấm vào, nó sẻ hiện thị tương ứng, tới khi ưng ý thì lưu lại là được.

1.7 Sticky Header

Vậy phần này cài đặt cái gì? để làm gì. Như ta thường thấy trên rất nhiều trang web hiện nay, việc trang web rất dài và khi việc kéo xuống dưới xem nội dung và phải kéo lên lại để có thể nhần vào menu điều hương qua nới khác có vẻ bất lợi, nêu người ta đã đính menu đấy hoặc các nội dung nổi bật luôn được hiển thị cho người dùng tùy chọn nhanh hoắc luôn thấy để làm nội bật nội dung đấy. Flatsome cho phép chúng ta đính các phần trong nội dung Header lên đầu trang khi chúng ta kéo trang web xuống dưới một cách nhanh chóng qua phần này nhé. Để có thể làm được bạn vào phần Sticky Header rồi chọn thành phần muôn thiển thị ra

Chúng ta có thể chọn lại độ rộng thành phần khi hiểu thị ở chế độ này, thường thì sẻ giảm độ rộng một chút để tăng kích thướng khung nhìn của chúng ta.

Chọn Logo padding,  …

Chúng ta sẽ có các checkbok  để chọn các thành phần tương ứng có thể đính trên menu, các thành phần không được chọn sẽ được ẩn đi bình thường.

Chọn kiểu sticky style là hiệu ứng hiển thị ra, để mặc định vẩn đẹp nhất à.

Có thể chọn một logo khác thay hoặc giữ nguyên thì để trống vậy.

Sau khi chọn xong bạn nhớ lưu lại nhé

Dropdown Style

Trong phần này nếu bạn không hài lòng với phần menu con mắc định của Theme thì bạn có thể vào phần này tùy chỉnh thêm.

Ở đây bạn có một số thành phân tùy chỉnh cho menu con như Màu nền, đường viền, bo tròn, màu chữ, kiểu …. nếu bạn hãy vào thay đổi thử  nhé.

Các mục phía dưới là thiết lập cho cái item để hiển thị bên trong phần Header

Để cài đặt nhanh co các thành phần thì trong danh sách các item trên,bạn chọn vào nó sẽ đưa bạn tới phần cấu hình tương ứng.

 

 

Trên đây là cấu hình cho HTML, và Button, tuy nhiêu có nhiều hơn 1 thành phần ở trong một khối, ví dụ trong khối HTML bạn có thể cấu hình từ html1 – > html5, block1, block21,  Nêu bạn nên chọn đúng thành phần để chỉnh sửa cho đúng nha.

Ngoài ra có 2 thành phần bạn không tùy chọn ở đây là Main menu và Top Bar menu. Bạn vào phần cài đặt menu, tạo ra menu tương ứng cần hiễn thị ra và ticks vào check tương ứng với vị trí muốn hiện thị nhé

Phần thiết lập menu bạn chọn vị trí tương ứng hiển thị ra nhế.

Trên đây mình đã đi xong phần thiết lập cơ bản cho phần header rồi nhé, các mục tiếp theo mình sẽ đi tiếp ở các bài tiếp nha.

 

 

Nhận xét bài viết!