Bạn có muốn tạo một thanh điều hướng trong Divi cố định từ dưới lên trên của trang không?
trong hướng dẫn Divi Hôm nay chúng tôi sẽ hướng dẫn bạn từng bước cách tạo thanh điều hướng từ dưới lên trên trong Divi.
Điều này sẽ cho phép thanh điều hướng ban đầu vẫn ở cuối trang để có bố cục độc đáo trong màn hình đầu tiên. Sau đó, khi bạn cuộn phần trong màn hình đầu tiên của trang, thanh điều hướng sẽ vẫn ở đầu trang và ở đó trong suốt trang.
Bạn có thể nói rằng trang sẽ "tiếp quản" menu ở cuối màn hình và mang lại hiệu ứng tương tác tốt cho menu chính của bạn và Website.
Hãy bắt đầu nào!
khảo sát
Để giúp bạn hình dung kết quả chúng tôi đang cố gắng đạt được, hãy xem kết quả cuối cùng:
Tải DIVI ngay bây giờ !!!
Hãy bắt đầu bằng cách tạo một trang mới với Divi Builder
Để bắt đầu, bạn cần thực hiện những việc sau:
Từ bảng điều khiển WordPress, hãy chuyển đến Trang> Thêm mới để tạo một trang mới.
Đặt cho nó một tiêu đề có ý nghĩa đối với bạn và nhấp vào Sử dụng Divi Builder
sau đó bấm Bắt đầu xây dựng (Xây dựng từ đầu)
Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.
Tạo thanh điều hướng từ dưới lên trên cố định trong Divi
Phần 1: Tạo Phần và Tiêu đề Trên Đường nước
Đối với phần đầu tiên của hướng dẫn này, chúng tôi sẽ tạo phần và tiêu đề trong màn hình đầu tiên sẽ đóng vai trò là phần tiêu đề chính của trang của chúng tôi. Phần này sẽ ở toàn màn hình trên màn hình nền để đảm bảo rằng phần đó chiếm toàn bộ cửa sổ hiển thị.
Đọc cũng: Divi: Chọn giữa bố cục lưới và toàn chiều rộng của mô-đun Danh mục có thể lọc
Thêm một hàng
Để bắt đầu, hãy thêm một hàng vào một cột vào phần mặc định.
Cài đặt phần
Trước khi thêm mô-đun, hãy mở cài đặt phần và thêm nền như sau:
- Màu nền: # e9f9ff
- Hình nền: [thêm hình ảnh]
Dưới tab Thiết kế, cập nhật chiều cao và phần đệm tối thiểu.
- Chiều cao tối thiểu: 100vh (Máy tính để bàn), tự động (Máy tính bảng và Điện thoại)
- Đệm: 20vh (Trên và dưới)
Văn bản tiêu đề
Để tạo văn bản tiêu đề, hãy thêm một mô-đun Văn bản mới vào dòng.
Sau đó cập nhật nội dung với tiêu đề H1 sau:
<h1>Above the Fold</h1>
Cài đặt văn bản
Dưới tab Thiết kế trong cài đặt mô-đun Văn bản, hãy cập nhật các kiểu phông chữ tiêu đề như sau:
- Phần mở đầu:
- Phông chữ: Ruby
- Độ đậm phông chữ: Bán đậm
- Phong cách: TT
- Căn chỉnh văn bản: căn giữa
- Màu văn bản: # 302ea7
- Kích thước: 130px (Máy tính để bàn), 70px (Máy tính bảng), 40px (Điện thoại)
- Khoảng cách giữa các chữ cái: 2px
- Chiều cao dòng: 1,3 em
Phần 2: Tạo phần bên dưới đường nước
Để chứng minh chức năng của thanh điều hướng cố định, chúng ta cần thêm một phần bên dưới màn hình đầu tiên để chúng ta có thể có chỗ để cuộn.
Để tạo phần này, hãy nhân đôi phần phía trên nếp gấp mà chúng ta vừa tạo.
Cập nhật nền của phần trùng lặp.
- Màu nền: # f4def1
Sau đó cung cấp cho phần này một chiều cao tối thiểu lớn để chúng ta có chỗ để cuộn trang xuống. Đây chỉ đơn giản là một phần được hoàn thành thay cho phần nội dung một trang thực sự.
- Chiều cao tối thiểu: 200vh
Sau đó cập nhật nội dung của mô-đun Văn bản bằng cách thay thế từ "Phía dưới" mệnh "Ở trên".
Phần 3: Tạo thanh điều hướng dính
Để tạo thanh điều hướng cố định từ dưới lên trên, bước đầu tiên của chúng ta là tạo một phần mới với một hàng đến một cột.
Đã thêm phần và dòng mới
Đầu tiên, hãy thêm một phần thông thường mới ngay bên dưới phần trong màn hình đầu tiên.
Tiếp theo, hãy thêm một hàng một cột vào phần này.
Nền và phần đệm của phần
Mở cài đặt phần và cập nhật màu nền.
- Màu nền: # 302ea7
Sau đó, loại bỏ phần đệm trên và dưới để thanh điều hướng có ít chiều cao hơn.
- Padding: 0px (Trên và dưới)
Thêm phần tràn có thể nhìn thấy
Để đảm bảo rằng các menu thả xuống vẫn hiển thị, hãy cập nhật các tùy chọn hiển thị như sau:
- Tràn ngang: Có thể nhìn thấy
- Tràn dọc: Có thể nhìn thấy
Cung cấp cho phần này một vị trí tuyệt đối trên thiết bị di động
Menu thả xuống trên thiết bị di động sẽ mở theo mặc định dưới biểu tượng bánh hamburger. Nếu chúng ta giữ thanh điều hướng ở dưới cùng, nó sẽ ẩn menu thả xuống nếu người dùng nhấp vào nó.
Để có trải nghiệm người dùng tốt hơn, chúng tôi muốn thanh điều hướng bắt đầu ở đầu trang trên màn hình máy tính bảng và điện thoại.
Đối với điều này, hãy cung cấp cho phần này một vị trí tuyệt đối trên máy tính bảng và điện thoại.
- Vị trí: tương đối (Máy tính để bàn), Tuyệt đối (Máy tính bảng và Điện thoại)
Thêm vị trí cố định cho máy tính để bàn và thiết bị di động
Để thêm vị trí cố định vào phần thanh điều hướng, hãy cập nhật thông tin sau:
- Vị trí cố định: Dán lên trên và dưới (Máy tính để bàn), Dán lên trên (Máy tính bảng và điện thoại)
Cập nhật phần đệm hàng
Khi phần dính hoàn tất, hãy mở cài đặt hàng bên trong phần và cập nhật phần đệm như sau:
- Padding: 10px (Trên và dưới)
Tạo menu điều hướng
Với phần và dòng ở vị trí, chúng tôi đã sẵn sàng tạo menu điều hướng.
Bắt đầu bằng cách thêm mô-đun Menu vào hàng một cột.
Nội dung menu
Cập nhật nội dung menu như sau:
- chọn menu từ danh sách thả xuống
- thêm hình ảnh logo
- loại bỏ màu nền mặc định
Dưới tab Thiết kế, cập nhật cài đặt biểu tượng và văn bản menu sau:
- Màu liên kết hoạt động: #fff
- Phông chữ menu: Ruby
- Kiểu phông chữ menu: TT
- Màu văn bản: #fff
- Kích thước văn bản trên menu: 16px
- Căn chỉnh văn bản: phải
- Màu dòng menu thả xuống: #e19dff
- Màu văn bản trên menu di động: # 302ea7
- Màu biểu tượng giỏ hàng: #fff
- Màu Biểu tượng Tìm kiếm: #fff
- Màu biểu tượng menu bánh hamburger: #fff
Sử dụng đường viền để bù đắp vị trí tuyệt đối của thanh điều hướng trên thiết bị di động
Vì phần thanh điều hướng có vị trí tuyệt đối trên thiết bị di động, nên thanh này sẽ nằm phía trên (và cắt ngang) phần trên cùng của trang. Để khắc phục điều này, chúng ta cần bù đắp phần trên cùng bằng cách sử dụng một đường viền trên cùng có cùng chiều cao với thanh điều hướng / phần.
Kiểm tra chiều cao của phần thanh điều hướng trên thiết bị di động
Để xác định chiều cao của thanh điều hướng trên thiết bị di động, hãy mở phiên bản trực tiếp của trang trong cửa sổ trình duyệt mới. Sau đó, bạn có thể giảm chiều rộng trình duyệt xuống dưới 980px để xem menu di động.
Bạn cũng có thể tham khảo: Divi: Cách tạo thanh điều hướng cố định
Nhấp chuột phải vào phần chứa menu và chọn tùy chọn kiểm tra phần tử trong menu ngữ cảnh của trình duyệt. Bạn sẽ thấy một cái hộp công cụ dưới mặt cắt ghi kích thước (bao gồm cả chiều cao) của mặt cắt.
Đối với ví dụ này, chiều cao của phần thanh điều hướng là 72 pixel.
Thêm phần bù đắp đường viền trên cùng vào phần trong màn hình đầu tiên
Bây giờ chúng ta đã xác định được chiều cao của phần, hãy mở cài đặt cho phần trên cùng (trong màn hình đầu tiên).
Dưới tab Thiết kế, thêm đường viền trên cùng sau trên máy tính bảng và điện thoại:
- Chiều rộng đường viền trên cùng: 72 pixel (Máy tính bảng và Điện thoại)
- Màu viền trên: # 302ea7
Vì đường viền có cùng chiều cao với phần có vị trí tuyệt đối, bạn sẽ không thể nhìn thấy đường viền vì nó chỉ dùng để đẩy phần xuống để nó không bị cắt.
Kết quả cuối cùng
Khám phá kết quả cuối cùng!
Tải DIVI ngay bây giờ !!!
Kết luận
Có thể dễ dàng tạo thanh điều hướng dính từ dưới lên trên bằng cách sử dụng vị trí tích hợp của Divi và tùy chọn dính.
Điều quan trọng là cung cấp cho phần trong màn hình đầu tiên có chiều cao 100vh, sau đó thêm phần thanh điều hướng bên dưới dính vào phần dưới và đầu của trình duyệt. Hy vọng điều này sẽ giúp thêm độc đáo và hấp dẫn hơn trong màn hình đầu tiên cho Website.
Thanh điều hướng dính này hoạt động tốt nhất cho một thiết kế trang đơn hơn là một mẫu tổng thể. Điều đó nói rằng, bạn có thể dễ dàng chọn sử dụng điều này làm thiết kế trang chủ của mình và sử dụng tiêu đề chung cho các trang còn lại bằng cách sử dụng Trình tạo chủ đề Divi .
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. 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ó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần nhiều yếu tố hơn để thực hiện các dự án tạo trang web Internet của mình.
Đừng ngần ngại cũng 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.
...
