[Tip hay Flatsome]OT Flatsome addon làm menu dọc cực hay cho Flatsome

Nếu có bạn nào muốn làm menu dọc thì tìm đúng cái rồi đấy. OT Flatsome là một addon rất mạnh trong việc tạo và thêm icon menu cho Flatsome. Trong bản thông báo của Flatsome thì chỉ có Ubermenu – Plugin tính phí được flatsome đưa ra để tương thích với việc tùy biến, thêm mới menu. Tuy nhiên, ở VN, các anh em làm Flatsome cũng có thể tạo ra một sản phẩm ngon không kém mà còn Free. Hiện tại Plugin OT Flatsome addon cũng có bản tính phí với  tính năng Megamenu và thêm shortcode để chèn tùy ý vào các vị trí.

Có phải bạn nào cũng xài bản có phí được đâu. Còn tùy vào điều kiện. Hôm nay em sẽ hướng dẫn các bạn xài bản Free nhưng đủ chức năng dùng.

Hướng dẫn sử dụng OT Flatsome Vertical Menu

Các bạn cứ xài theo quy chuẩn thôi. Vào Plugin/Cài mới. Gõ OT Flatsome Vertical Menu và cài đặt. Chờ hoàn tất rồi kích hoạt.

Để sử dụng, bạn vào phần Tùy biến/Header.

Trên phần Header, nó sẽ có phần Vertical menu đỏ. Bạn kéo nó xuống vị trí cần đặt. Lưu lại.

Bây giờ sẽ đến phần tạo menu. Các bạn sẽ tạo menu danh mục sản phẩm, hoặc danh mục ngành hàng, dịch vụ của mình. Rồi thêm vào menu như bình thường.

Chú ý: Trong phần tạo menu, bạn chú ý thêm phần ICON như hình dưới đây. Nhấp vào Select để lựa chọn.

Mục Icon này có nhiều tùy chọn. Các bạn có thể sử dụng hình ảnh SVG, font Awesome, …

Tùy nhu cầu và khả năng mà các bạn có thể chọn một loại phù hợp là được. Ở đây mình hay dùng ảnh png nên mình tích vào Image. Khi nhấp Select và chọn hình ảnh chèn vào. Nó sẽ hiện trên ngay menu hình ảnh bạn chọn (Có thumbnail). Sau đó lưu lại. Và tận hưởng thành quả thôi.

Vì cái mặc định của thằng OT Flatsome Vertical Menu có cái chiều rộng menu dọc hơi bị dài. Với lại không cho phép chỉnh màu nền với bản Free này. Dưới đây mình có đoạn code cho các bạn chỉnh sửa.

/*Menu dọc chỉnh chữ*/
#mega-menu-title {
width: 250px;
background: #f63345; /*Màu nền danh mục SP chèn mã màu khác tại đây*/
text-transform: uppercase;
}
#mega-menu-title {
width: 250px;
text-transform: uppercase;
}

#mega_menu a:hover {
width: 250px;
}

#menu-item-716.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-716 {
width: 245px;
}

#mega_menu.sf-menu.sf-vertical.sf-js-enabled.sf-arrows {
width: 250px;
}

#mega-menu-wrap.ot-vm-hover {
width: 0px;
}

.nav.header-nav.header-bottom-nav.nav-center.nav-uppercase {
left: 10px;
}
#mega-menu-wrap{
width:250px;
background:#ed1c24;
}