Divi: Cách tạo menu điều hướng dọc

Bạn có muốn tạo một menu điều hướng dọc để nó hiển thị nhiều mục hơn ở nền trước trong DIVI không?

Menu điều hướng dọc có thể hữu ích cho một số trang web cần nhiều mục menu ở phía trước. Menu ngang có thể khó mở rộng đến tất cả các liên kết menu cần thiết, đặc biệt là trên các chiều rộng trình duyệt nhỏ hơn. 

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo menu điều hướng dọc bằng Trình tạo chủ đề Divi. 

Điều này sẽ cung cấp cho bạn nhiều không gian hơn để giới thiệu các mục menu WordPress của mình.

Hãy bắt đầu nào!

khảo sát

Dưới đây là một cái nhìn nhanh về thiết kế mà chúng tôi sẽ tạo trong hướng dẫn này.

Chúng ta đi đến phần hướng dẫn.

Tạo tiêu đề toàn cầu mới

Đối với hướng dẫn này, chúng tôi sẽ tạo menu điều hướng dọc trong tiêu đề chung bằng trình tạo chủ đề của Divi

Để bắt đầu, hãy truy cập trang tổng quan WordPress và điều hướng đến Divi> Trình tạo chủ đề.

Sau đó nhấp vào khu vực "Thêm tiêu đề toàn cầu" của mẫu trang web mặc định và chọn "Build Global Header" từ danh sách thả xuống.

Đọc cũng: Cách tạo Tiêu đề chung với Trình tạo chủ đề trong DIVI

Thiết kế bố cục mặt cắt dọc

Trong trình chỉnh sửa bố cục tiêu đề chung, hãy mở cài đặt phần thông thường đã có và cập nhật phần sau.

• Chiều rộng tối đa: 300px
• Chiều cao: 100vh

• Lề trong: Trên cùng 4vh, Dưới 0px

Tiếp tục tùy chỉnh bằng cách thêm hộp bóng như sau:

• Hộp bóng: xem ảnh chụp màn hình
• Vị trí dọc của bóng hộp: 0px
• Độ mờ của bóng hộp: 20px
• Sức mạnh lan truyền của Box Shadow: -10px
• Màu bóng: rgba (0,0,0,0.3)

Để đảm bảo rằng menu điều hướng dọc vẫn hiển thị ở bên trái khi người dùng cuộn, hãy cập nhật tab Nâng cao đến vị trí cố định và cập nhật chỉ mục z như sau:

• Trạm cố định
• Chỉ số Z: 9999

Để đảm bảo rằng chúng ta có thể thấy điều hướng menu con sẽ mở rộng ra bên ngoài phần này, hãy thêm CSS tùy chỉnh sau vào phần tử chính:

overflow: visible !important;

Phần của bạn bây giờ sẽ ở trong một bố cục dọc ở phía bên trái của mẫu.

Thiết kế menu dọc

Với phần này, chúng tôi đã sẵn sàng để thiết kế menu dọc. Để làm điều này, chúng tôi sẽ sử dụng một mô-đun menu với CSS tùy chỉnh để tùy chỉnh điều hướng để hiển thị theo chiều dọc.

Chúng tôi cũng sẽ sử dụng đơn vị độ dài vh để menu thích ứng tốt với các độ cao trình duyệt khác nhau.

Thêm dòng

Để bắt đầu, hãy thêm một hàng vào một cột trong phần.

Tiếp theo, cập nhật các thông số dòng như sau:

Định kích thước và khoảng cách

• Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
• Khoảng cách cột: 1
• Chiều rộng tối đa: 100%
• Chiều rộng tối đa: 80%

• Biên nội bộ: Trên cùng 3vh, Dưới 3vh

Biên giới

• Chiều rộng đường viền: 1px
• Màu viền: #eeeeee

Đã thêm mô-đun Menu

Bên trong hàng một cột, hãy thêm một mô-đun Menu mới.

Chọn menu để hiển thị trong tab Nội dung.

Sau đó, thêm logo của website nhân vì nội dung động dưới nút Logo.

Trong tab Kiểu, hãy cập nhật thông tin sau:

• Phong cách: Căn giữa

• Menu phông chữ: Nunito Sans
• Màu văn bản menu: # 535b7c

• Kích thước văn bản trên menu: 18px (máy tính để bàn), 14px (máy tính bảng và điện thoại)
• Chiều cao hàng menu: 2 em

• Màu hàng thả xuống: # 535b7c
• Menu thả xuống Màu liên kết hoạt động: # 535b7c

• Màu biểu tượng giỏ hàng: # 535b7c
• Màu biểu tượng tìm kiếm: # 535b7c
• Màu biểu tượng menu bánh hamburger: # 535b7c

• Biên nội bộ: Trên cùng 2vh, Dưới 2vh

Đã thêm CSS tùy chỉnh cho menu

Menu cần CSS tùy chỉnh để đạt được điều hướng dọc mà chúng tôi đang tìm cách đạt được. Để bắt đầu, hãy chuyển đến tab nâng cao và thêm CSS tùy chỉnh sau vào liên kết menu và biểu trưng menu.

Liên kết menu CSS (máy tính để bàn):

width: 100%;

padding: 1vh 15px;

background: #f8f8f8;

border-radius: 3px;

border: 1px solid #eeeeee;

Liên kết menu CSS (máy tính bảng):

width: auto;

border:none;

Biểu trưng CSS của menu:

margin-bottom: 20px;

Tiếp theo, thêm một lớp CSS tùy chỉnh vào mô-đun Menu như sau:

Lớp CSS: et-vert-menu

Lớp này sẽ được sử dụng để nhắm mục tiêu menu cụ thể này trong CSS tùy chỉnh bên ngoài của chúng tôi mà chúng tôi sẽ thêm bằng cách sử dụng mô-đun Mã.

Thêm CSS tùy chỉnh với mô-đun Mã

Trong mô-đun Trình đơn, hãy thêm mô-đun Mã.

Sau đó, dán mã sau vào hộp mã (hãy nhớ đặt mã đó giữa các thẻ kiểu):

/* Menu de Navigation Style Vertical*/

.et-vert-menu .et_pb_menu__menu>nav>ul {

  flex-direction: column;

  margin-left: 0px!important;

  margin-right: 0px!important;

  width: 100%;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li {

  margin: 10px0!important;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {

  display:block!important;

  padding: 0px!important;

  }

  .et-vert-menu .et_pb_menu__menu>nav>ul ul {

    padding: 0px!important;

    top: 0px!important;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {

  left:calc(100%- 1px) !important;

  top:0px!important;

  }

.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {

  content: "5"!important; /*change arrow icon for submenu*/

  right: 20px!important;

  }

.et-vert-menu .nav li ul {

    left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/

  }

@media alland (min-width: 981px) {

.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {

    width: 100%; /*width of the vertical navigation menu*/

  }

/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/

#et-main-area {

  width: calc(100%- 300px);

  margin-left: 300px;

}

}

Thiết kế nút và biểu tượng theo dõi trên mạng xã hội

Bây giờ menu đã hoàn tất, chúng ta có thể thêm một nút và một số liên kết theo dõi trên mạng xã hội để hoàn thành tiêu đề dọc.

Thêm dòng

Thêm một hàng mới một cột bên dưới hàng hiện tại.

Thêm một nút

Sau đó, thêm một mô-đun Nút vào dòng.

Cập nhật cài đặt nút như sau:

• Căn chỉnh nút: trung tâm

• Sử dụng các kiểu tùy chỉnh cho Nút: CÓ
• Kích thước văn bản nút: 18px (máy tính để bàn), 14px (máy tính bảng và điện thoại)
• Màu văn bản của nút: #ffffff
• Màu nền của nút: # 535b7c
• Chiều rộng đường viền nút: 0 pixel

Tiếp theo, chuyển đến tab nâng cao và dán CSS tùy chỉnh sau vào phần tử chính:

Phần tử chính CSS (máy tính để bàn)

display:block;

width: 100%;

Phần tử chính CSS (máy tính bảng)

display:inherit;

Đã thêm các biểu tượng theo dõi trên mạng xã hội

Bên dưới nút, thêm mô-đun Theo dõi chúng tôi trên mạng xã hội.

Thêm các mạng xã hội bạn muốn vào tab nội dung.

Trên tab Kiểu, cập nhật thông tin sau:

• Căn chỉnh mô-đun: Trung tâm

• Màu biểu tượng: # 535b7c

Sau đó, mở cài đặt cho từng mạng xã hội và xóa màu nền.

Sau đó, thêm một lề nhỏ trên cùng như sau:

• Ký quỹ: Đỉnh 3vh

Cập nhật thông số dòng

Sau khi các Biểu tượng theo dõi trên mạng xã hội hoàn tất, hãy mở Cài đặt dòng và điều chỉnh những điều sau:

• Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
• Khoảng cách cột: 1

• Lề trong: Trên cùng 3vh, Dưới 0px

Lưu bố cục và mẫu

Sau khi hoàn tất, hãy lưu bố cục và mẫu.

Kết quả cuối cùng

Đây là kết quả cuối cùng trên một trang trực tiếp.

Tải xuống DIVI ngay bây giờ !!!

Kết luận

Menu điều hướng dọc hiển thị ở đây đã được đặt một vị trí cố định. Tuy nhiên, nếu bạn cần thêm không gian cho các mục menu hoặc nội dung bổ sung, bạn có thể thay đổi vị trí của phần thành tuyệt đối

Thiết lập phần dọc cũng mở ra cánh cửa để tạo các thanh bên tùy chỉnh. 

Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.

Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.

Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.

...