[Hướng dẫn] Tạo menu dọc đẹp Flatsome với OT Flatsome Vertical Menu

OT Flatsome Vertical Menu-06

OT Flatsome Vertical Menu 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 bạn làm Flatsome cũng có thể tạo ra một sản phẩm ngon không kém mà còn “MIỄN PHÍ”. Hiện tại Plugin OT Flatsome Vertical Menu 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í.

ot-flatsome-menu
ot-flatsome-menu

Với các tính năng mà OT Flatsome Vertical Menu cung cấp thì bạn cũng hoàn toàn có thể xây dựng 1 menu dọc cực đẹp rồi.

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

Bước 1: Cài đặt plugin

Các bạn vào Plugin > Cài mới > Gõ tên OT Flatsome Vertical Menu và cài đặt, active nó nhé!

Sau khi active, các bạn vào Cài đặt > OT Flatsome Vertical Menu

OT Flatsome Vertical Menu
OT Flatsome Vertical Menu

Các bạn đặt tên cho Menu là Danh mục sản phẩm nhé! Hình thức show menu thì bạn có thể chọn là Click để show menu hoặc Hover để show Menu nha

OT Flatsome Vertical Menu-02
OT Flatsome Vertical Menu-02

Ngoài ra các bạn có thể tick vào Auto Show Sub in Homepage để menu này tự động sổ xuống trên Trang chủ nhé!

Bước 2: Thiết lập menu

Bạn truy cập Giao diện > Menu rồi chọn Vertical Menu rồi kéo các mục bạn chọn vào trong menu theo ý muốn nhé!

OT Flatsome Vertical Menu-03
OT Flatsome Vertical Menu-03

Sau khi tạo menu xong, bạn nhớ tích vào mục Vertical Menu dưới chân trang rồi > Bấm Lưu nhé

OT Flatsome Vertical Menu-04
OT Flatsome Vertical Menu-04

Bước 3: Thêm Menu dọc vào Header

Bạn truy cập Giao diện > Tuỳ biến > Header rồi trong mục Header bạn chọn mục có tên Vertical menu màu đỏ kéo vào trong Header nhé. Sau đó bấm Đăng nha.

OT Flatsome Vertical Menu-05
OT Flatsome Vertical Menu-05

Ok vậy là xong rồi. Tuy nhiên để làm đẹp cho Menu bạn có thể thêm đoạn code CSS sau vào file style.css hoặc theo đường dẫn: Giao diện > Tuỳ biến > Add CSS nha

/*Menu dọc chỉnh chữ*/
#mega-menu-title {
width: 240px;
background: #fdd504; /*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: 240px;
text-transform: uppercase;
color:#000;
}

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

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

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

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

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

Và đây là kết quả

OT Flatsome Vertical Menu-06
OT Flatsome Vertical Menu-06

Chúc các bạn thành công ^^

Trả lời

Email của bạn sẽ không được hiển thị công khai.