OT Vertical Menu Flatsome là một trong những công cụ tạo ra menu dọc chuyên nghiệp được thiết kế dành riêng cho theme Flatsome. Để giúp bạn dễ dàng tạo bước Vertical Menu WordPress, Trust Media đã tổng hợp chi tiết cách hướng dẫn trong bài viết dưới đây. Khám phá ngay nhé!
Vertical Menu WordPress hay còn có tên gọi khác là menu dọc trong WordPress. Đây là menu được sắp xếp dưới thứ tự dọc thay thế cho kiểu ngang truyền thống. Hiện nay, Vertical Menu WordPress đã và đang trở nên phổ biến và được các cá nhân, doanh nghiệp kinh doanh ưa chuộng sử dụng rộng rãi. Bởi vì, chúng rất thân thiện với người sử dụng, đặc biệt là khi sử dụng các thiết bị điện thoại di động thông minh có kết nối mạng internet. Bên cạnh đó, bạn có thể tham khảo plugin mục lục bài viết ở đây!
Sau đây là một vài lợi ích mà các cá nhân, doanh nghiệp có thể nhận được khi sử dụng menu dọc trong nền tảng WordPress. Bạn hãy tham khảo ngay trước khi đưa ra quyết định có tạo menu có hình dạng này cho trang web của mình hay không nhé. Cụ thể chi tiết lợi ích như sau:
Trong trường hợp trang web mà bạn sử dụng để kinh doanh bán hàng với mẫu mã, mặt hàng đa dạng và phong phú thì Vertical Menu sẽ chính là một giải pháp hoàn toàn đúng đắn dành riêng cho bạn. Sau đây là phần hướng dẫn chi tiết các bước giúp bạn tạo được menu dọc trong nền tảng WordPress mà bạn có thể thực hiện theo:
Trước khi bắt tay vào quá trình tạo menu dọc trong WordPress, bạn cần phải tiến hành đăng nhập vào trang quản trị web của mình. Tiếp theo, bạn thực hiện việc download OT Vertical Menu Flatsome bằng cách: Trong phần thanh Dashboard ở góc trái màn hình → Kích chuột nhấn vào Plugin >> Add New >> Nhập tên OT Vertical Menu Flatsome để tìm kiếm và có thể cài đặt. Sau đó, tải OT Vertical Menu Flatsome về máy rồi kích hoạt plugin này.
Để có thể tiến hành việc cài đặt Vertical Menu trong phần header thì bạn phải truy cập vào mục Appearance. Sau đó, click nhấp chuột vào Customize. Khi đó, màn hình sẽ xuất hiện ra một trang khác. Tại đây, bạn hãy thực hiện việc nhấp chuột vào Header ở góc trái của màn hình.
Tiếp theo, ô Vertical Menu có màu đỏ sẽ xuất hiện. Lúc này, bạn hãy kéo ô đó lên bên phía trên phần không gian thuộc Header là có thể hoàn tất.
Trong bước này, bạn có thể dễ dàng điều chỉnh linh hoạt cho phần menu dọc của mình thông việc nhấp chuột vào mục cài đặt (hình bánh răng) trên ô màu đỏ. Khi ấy, giao diện sẽ hiển thị một bảng để bạn chỉnh sửa phần bố cục ở góc bên trái màn hình. Trong thanh menu dọc, bạn có thể tùy chỉnh những thông số như kích thước, màu sắc…
Sau khi thấy quá trình điều chỉnh vừa ý với mong muốn của bản thân, bạn chỉ cần nhấp click chuột vào ô Đăng để trang web hiển thị phần thông tin.
Cuối cùng, bạn quay trở lại phần giao diện trong phần quản lý trang web, tại mục Dashboard, bạn nhấn vào Cài đặt >> OT Vertical Menu Flatsome.
Tại đây, bạn cần chú ý một vài điểm sau:
Để bổ sung thêm những sản phẩm vào thanh menu dọc của website, bạn hãy kích click chuột vào Giao diện >> Chọn Menu >> Nhấn vào Chọn menu để sửa. Tuy nhiên, bạn cần phải chú ý rằng bạn đã sở hữu một menu có sẵn bao gồm tất cả sản phẩm cũng như danh mục của cửa hàng.
Nếu chưa có thì trong bước này bạn cần phải tạo một menu mới rời mới tiếp tục chuyển sang những bước tiếp theo. Tại phần Thiết lập menu >> Chọn Hiển thị vị trí >> Nhấn vào Vertical Menu >> Chọn Lưu thay đổi.
Để sở hữu một menu dọc đẹp và bắt mắt bạn cần bổ sung thêm một ít CSS sau để có thể dễ dàng điều chỉnh màu sắc cơ bản cũng như độ rộng của menu. Bạn hãy copy nguyên đoạn code dưới đây vào phần Custom CSS rồi tiến hành lưu lại. Đây sẽ là phần code giúp bạn giải quyết, xử lý hết tất cả những mục bị co lại bao gồm submenu của menu dọc, co lại menu ngang bên cạnh phần hiển thị bắt mắt.
/*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;
}
Ngoài ra, bạn vẫn có thể tạo được Vertical Menu nếu như không sử dụng theme OT Vertical Menu Flatsome. Hiện nay, WordPress đã và đang cung cấp nhiều theme bản quyền được sử dụng trong quá trình tạo menu dọc ngay trong phần cài đặt theme hoặc kết hợp với plugin Elementor Pre tương thích với tất cả mọi chủ đề.
Trên đây là chi tiết 3 bước tạo menu dọc trong WordPress bằng OT Vertical Menu Flatsome. Mong rằng bài viết này sẽ giúp bạn vận dụng thành công trong quá trình tạo menu dọc cho trang web của mình. Đừng quên tiếp tục theo dõi website của Trust Media để kịp thời cập nhật những kiến thức mới nhé!
Địa chỉ: Tầng 6 tòa nhà số 14 Pháo Đài Láng, Láng Thượng, Đống Đa, Hà Nội
Hotline: 0586 898 899
Mail: info@trustmedia.com.vn
