Nhu cầu để tạo một menu nổi trong suốt trong Divi ?
Bạn đang tìm cách đặt tiêu đề tổng thể phía trên các phần chính của trang? Trong phần hướng dẫn Divi Hôm nay chúng tôi sẽ chỉ cho bạn chính xác cách thực hiện điều đó.
Chúng tôi sẽ tạo một tiêu đề toàn cầu tuyệt đẹp từ đầu (sử dụng hàm tạo của chủ đề de Divi) và chúng ta sẽ áp dụng hiệu ứng nổi cho thanh menu.
Đi thôi.
khảo sát
Trước khi đi sâu vào hướng dẫn này, chúng ta hãy xem nhanh kết quả mà chúng ta muốn đạt được.
Đi tới Trình tạo chủ đề của Divi và thêm mẫu mới
Allez trên Divi> Theme Builder.
Tạo tiêu đề chung với Trình tạo chủ đề Divi
Nhấp vào 'Thêm tiêu đề chung' và tiếp tục bằng cách chọn 'Xây dựng tiêu đề toàn cầu'.
Cài đặt phần
Màu nền
Khi ở trong trình chỉnh sửa mẫu, bạn sẽ thấy một phần trên trang. Mở phần này và thay đổi màu nền thành màu hoàn toàn trong suốt. Điều này sẽ cho phép mọi thứ bên dưới phần hiển thị.
- Nền: rgba (0,0,0,0)
kích thước
Sau đó, chuyển đến tab Kiểu phần và thay đổi chiều rộng tối đa.
- Chiều rộng tối đa (Xem ảnh chụp màn hình): 100%
khoảng cách
Đồng thời loại bỏ tất cả các lề nội bộ trên cùng và dưới cùng mặc định.
- Đỉnh lề bên trong: 0px
- Lề nội bộ dưới cùng: 0px
Chỉ số Z
Và để đảm bảo phần này luôn đứng đầu mọi thứ nội dung Từ phần anh hùng, chúng ta sẽ cần tăng chỉ số z trong cài đặt hiển thị.
- Chỉ số Z: 99999
Thêm một dòng mới
Cấu trúc của cột
Khi bạn đã hoàn tất cài đặt phần, bạn có thể thêm một hàng mới bằng cách sử dụng cấu trúc cột sau:
kích thước
Không thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thay đổi cài đặt định cỡ như sau:
- Hài hòa chiều cao cột: Có
- Chiều rộng tối đa: 100%
- Chiều rộng tối đa: 100%
khoảng cách
Sau đó, thêm các lề nội bộ tùy chỉnh (Trên cùng và Dưới cùng).
- Lợi nhuận nội bộ cao nhất: 2vw
- Lề bên trong dưới cùng: 0vw
Yếu tố chính
Tiếp theo, chuyển đến tab Nâng cao và đảm bảo các cột nằm cạnh nhau trên kích thước màn hình nhỏ hơn bằng cách thêm một dòng mã CSS vào phần tử hàng chính.
display: flex;
Cột 2
Màu nền
Tiếp tục bằng cách mở cài đặt cột 2 và thay đổi màu nền thành màu bán trong suốt.
- Màu nền: rgba (255,255,255,0.71)
Biên giới
Cũng thêm một đường viền dưới cùng vào cột.
- Chiều rộng đường viền dưới: 2px
- Màu đường viền dưới và nút: # f4583f
Hộp bóng
Và tạo hiệu ứng nổi bằng cách thêm một bóng hộp tinh tế.
- Hộp bóng: [Xem Chụp]
- Vị trí bắt đầu: 20px
- Độ mạnh làm mờ Bow Shadow: 50px
- Sức mạnh lan truyền của Box Shadow: -20px
- Màu phông chữ phụ đề: rgba (0,0,0,0.23)
Thêm mô-đun Hình ảnh vào cột 1
Tải logo
Khi bạn đã hoàn thành cài đặt hàng và cột, đã đến lúc thêm mô-đun, bắt đầu với mô-đun Hình ảnh trong cột 1. Tải lên biểu trưng có nền trong suốt.
sự liên kết
Chuyển sang tab Kiểu mô-đun và thay đổi căn chỉnh.
- Căn chỉnh hình ảnh: Căn giữa
kích thước
Đồng thời thay đổi chiều rộng của mô-đun trong cài đặt định cỡ.
- Chiều rộng tối đa: 8 vw (máy tính để bàn), 14 vw (máy tính bảng), 21 vw (điện thoại)
Thêm mô-đun Menu vào cột 2
Chọn một Menu
Chúng ta hãy đến với chuyên mục tiếp theo. Ở đó, mô-đun duy nhất chúng ta cần là một mô-đun Menu. Chọn một menu của sự lựa chọn của bạn.
Xóa màu nền
Sau đó, chuyển đến cài đặt nền và loại bỏ màu nền.
Bố trí
Chuyển sang tab Kiểu mô-đun và thay đổi bố cục.
- Phong cách: Căn giữa
- Menu thả xuống: xuống
Văn bản menu
Đồng thời tạo kiểu cài đặt văn bản menu.
- Phông chữ menu: Mulish
- Màu văn bản menu: # 6f6666
- Kích thước menu: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
Menu thả xuống
Sau đó, thay đổi cài đặt từ menu thả xuống.
- Màu hàng thả xuống: # f4583f
biểu tượng
Sử dụng cùng màu này cho màu biểu tượng menu bánh hamburger trong cài đặt biểu tượng.
- Màu biểu tượng menu bánh hamburger: # f4583f
khoảng cách
Hoàn thành cài đặt mô-đun bằng cách thêm phần đệm Trên cùng và Dưới cùng trong cài đặt Khoảng cách.
- Biên độ nội bộ cao nhất: 1,5 vw
- Lề nội bộ dưới cùng: 1,5 vw
Thêm mô-đun Nút vào cột 3
Thêm văn bản vào nút
Hãy chuyển sang cột tiếp theo và cuối cùng. Thêm mô-đun Nút với văn bản bạn chọn.
sự liên kết
Sau đó, thay đổi căn chỉnh của mô-đun.
- Căn chỉnh nút: căn giữa
Cài đặt nút
Tiếp tục bằng cách tùy chỉnh nút cho phù hợp:
- 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: 0,9 vw (máy tính để bàn), 1,5 vw (máy tính bảng), 2,5 vw (điện thoại)
- Màu văn bản của nút: #ffffff
- Nút nền: # f4583f
- Chiều rộng đường viền nút: 0 pixel
- Màu viền nút: # f4583f
- Nút Border Radius: 0 pixel
- Phông chữ nút: Mulish
- Nút làm mờ ánh sáng: Chữ in đậm
khoảng cách
Hoàn thành cài đặt mô-đun bằng cách thêm đệm tùy chỉnh trên các kích thước màn hình khác nhau.
- Lề nội bộ trên và dưới: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
- Lề bên trong trái và phải: 2vw (máy tính để bàn), 3vw (máy tính bảng), 4vw (điện thoại)
Tham số phần bổ sung
Mặt hàng chính mặc định
Khi bạn đã hoàn thành việc tùy chỉnh chung, còn một việc nữa phải làm; đặt phần trên nội dung trang của bạn. Để làm điều này, chúng ta sẽ cần thêm hai dòng mã CSS vào thành phần chính của phần.
position: absolute;
top: 0;
Yếu tố chính khi di chuột
Đảm bảo thêm các dòng mã CSS giống nhau đó vào tùy chọn di chuột của phần tử chính. Điều này sẽ ngăn phần đó không bị nhấp nháy khi bạn di chuột qua nó.
position: absolute;
top: 0;
Lưu các thay đổi của hàm tạo và xem kết quả
Khi bạn đã hoàn thành phần này, bạn có thể lưu tiêu đề chung và hiển thị kết quả trên trang web của mình!
khảo sát
Bây giờ chúng ta đã đi qua tất cả các bước, chúng ta hãy xem lại kết quả lần cuối.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Vì thế ! Đó là nó cho bài viết này. Chúng tôi đã hướng dẫn bạn cách tạo thanh menu nổi và trong suốt với Trình tạo chủ đề của Divi. Tiêu đề được đặt phía trên phần đầu tiên của trang hoặc bài đăng của bạn.
Để tự làm quen với Trình tạo chủ đề của Divi, bạn cũng có thể đọc bài viết của chúng tôi về Cách tạo Tiêu đề toàn cầu với Trình tạo chủ đề của Divi
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 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.
...
