[Ad_1]
Hãy bắt đầu!
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 xuống bố cục MIỄN PHÍ
Để có được những thiết kế trong hướng dẫn này, trước tiên bạn cần tải xuống bằng cách sử dụng nút bên dưới. Để truy cập tải xuống, bạn cần đăng ký danh sách gửi thư Divi Daily của chúng tôi bằng cách sử dụng hình thức phía dưới. Là người đăng ký mới, bạn sẽ nhận được nhiều lợi ích Divi hơn nữa và gói Bố cục Divi miễn phí vào mỗi Thứ Hai! Nếu bạn đã có trong danh sách, chỉ cần nhập địa chỉ email của bạn vào bên dưới và nhấp vào tải xuống. Bạn sẽ không được "đăng ký lại" hoặc nhận thêm email.
Để nhập bố cục của phần vào thư viện Divi của bạn, hãy chuyển đến thư viện Divi.
Bấm vào nút Nhập.
Trong cửa sổ bật lên khả năng di động, hãy chọn tab nhập và chọn tệp để tải xuống từ máy tính của bạn.
Sau đó bấm vào nút nhập.
Sau khi hoàn tất, bố cục của các phần sẽ có sẵn trong Divi Builder.
Bạn sẽ tiếp tục hướng dẫn này chứ?
Những gì bạn cần để bắt đầu
Để bắt đầu, bạn cần thực hiện những việc sau:
- Nếu bạn chưa có, hãy cài đặt và kích hoạt Chủ đề Divi.
- Tạo một trang mới trong WordPress và sử dụng Divi Builder để chỉnh sửa trang trên giao diện người dùng (trình tạo trực quan).
- Chọn tùy chọn "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 đề phía 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 đề phía trên đường nước 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ổ.
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]
Trên 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: 100 vh (máy tính để bàn), tự động (máy tính bảng và điện thoại)
- Lớp đệm: 20vh trên, 20vh 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
Trên tab Thiết kế của Cài đặt Văn bản, cập nhật Kiểu Phông chữ Tiêu đề như sau:
- Phông chữ tiêu đề: Rubik
- Độ đậm phông chữ của tiêu đề: Bán đậm
- Kiểu phông chữ tiêu đề TT
- Căn chỉnh văn bản tiêu đề: Căn giữa
- Màu văn bản tiêu đề: # 302ea7
- Kích thước văn bản tiêu đề: 130px (máy tính để bàn), 70px (máy tính bảng), 40px (điện thoại)
- Khoảng cách chữ cái tiêu đề: 2px
- Chiều cao dòng tiêu đề: 1,3 em
Phần 2: Tạo phần dưới nếp gấp
Để chứng minh chức năng của thanh điều hướng cố định, chúng tôi cần thêm một phần bên dưới màn hình đầu tiên để chúng tôi có thể có chỗ để cuộn.
Để tạo phần này, hãy nhân đôi phần phía trên đường nước 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. Đây chỉ là một phần để điền thay vì nội dung thực tế trên một trang.
Sau đó, cập nhật nội dung của mô-đun văn bản bằng cách thay thế từ “Bên dưới” bằng “Bên 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 một phần mới và một dòng mới
Thêm một phần thông thường mới ngay bên dưới phần phía trên đường nước.
Sau đó, thêm một hàng vào một cột vào phần.
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.
- Infill: 0px trên, 0px 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: hiển thị
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 bên 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ó ở vị trí xuống. Để 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.
Để làm điều này, hãy chỉ định 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ính 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 điền như sau:
- Padding: 10 pixel ở trên cùng, 10 pixel ở dưới cùng
Tạo menu điều hướng
Với phần và hàng ở đú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ột mô-đun menu vào hàng thành 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 biểu trưng (tôi đang sử dụng hình ảnh 122px x 52px)
- loại bỏ màu nền mặc định
Trên 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 đang hoạt động: #fff
- Phông chữ menu: Rubik
- Kiểu phông chữ menu: TT
- Màu văn bản menu: #fff
- Kích thước văn bả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 menu trên điện thoại 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. Để giải quyết vấn đề này, chúng ta cần bù đắp phần trên cùng bằng cách sử dụng đườ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 của trình duyệt xuống dưới 980px để xem menu di động. Nhấp chuột phải vào phần chứa menu và chọn tùy chọn Kiểm tra Mục từ menu ngữ cảnh của trình duyệt. Bạn sẽ thấy một hộp công cụ bên dưới phần hiển thị các kích thước (bao gồm cả chiều cao) của phần. Đối với ví dụ này, chiều cao của phần thanh điều hướng là 72px.
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).
Trong tab Thiết kế, thêm đường viền trên cùng sau trên cả máy tính bảng và điện thoại:
- Chiều rộng đường viền trên cùng: 72px (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 độ 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 để không bị cắt.
Kết quả cuối cùng
Khám phá kết quả cuối cùng!
cuối cùng suy nghĩ
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 các tùy chọn dính và vị trí tích hợp của Divi. Đ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à trên cùng của bộ điều hướng. Hy vọng rằng điều này sẽ giúp thêm độc đáo và hấp dẫn hơn trên đường nước 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 trình tạo. Chủ đề Divi.
Tôi mong muốn được nghe từ bạn trong các ý kiến.
Để sức khỏe của bạn!
[Ad_2]
