Bạn có muốn tạo tiêu đề toàn cầu phụ với Divi không?
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo tiêu đề xoay toàn cầu xuất hiện ở bên trái trang và bài đăng của bạn. Màu nền của tiêu đề hoàn toàn trong suốt, cho phép nội dung của trang/bài viết.
Chúng tôi đảm bảo rằng tiêu đề chung vẫn cố định ở phía bên trái khi cuộn và chúng tôi cũng làm cho menu trở thành phiên bản thân thiện với thiết bị di động.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo lại thiết kế từ đầu!
Đi thôi.
khảo sát
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh kết quả mà chúng ta muốn đạt được.
Chuyển đến trình tạo chủ đề của Divi và bắt đầu tạo tiêu đề chung
Từ bảng điều khiển WordPress, hãy chuyển đến Divi> Trình tạo chủ đề
Bấm vào “Thêm tiêu đề chung”
Sélectionnez “Xây dựng tiêu đề toàn cầu”.
Bắt đầu tạo tiêu đề bên toàn cục
Thêm một phần mới
Màu nền
Khi ở trong trình chỉnh sửa mẫu, bạn có thể mở phần đã có ở đó và thay đổi màu nền trên các kích thước màn hình khác nhau.
- Màu nền: rgba (0,0,0,0) (Máy tính để bàn), #FFFFFF (Máy tính bảng và Điện thoại)
kích thước
Đi tới tab Thiết kế, kéo tùy chọn xuống Sizing và sau đó thay đổi các thông số định cỡ phần.
- Chiều rộng: 5vw (Máy tính để bàn), 100% (Máy tính bảng và Điện thoại)
- Chiều cao tối thiểu: 100 vw (Máy tính để bàn), tự động (Máy tính bảng và Điện thoại)
khoảng cách
Sau đó kéo tùy chọn Khoảng cách xuống và thay đổi cài đặt như sau:
- Đệm (Trên và Dưới): 2vw
Hộp bóng
Sau đó đi đến Hộp bóng và thêm bóng hộp tùy chỉnh trên các kích thước màn hình khác nhau.
- Box Shadow Horizontal Vị trí: 32px (Máy tính để bàn), 0px (Máy tính bảng và Điện thoại)
- Độ mạnh của Box Shadow Blur: 49px
- Sức mạnh lan tỏa: 0px (Máy tính để bàn), 19px (Máy tính bảng và Điện thoại)
- Màu bóng: rgba (0,0,0,0.12)
Thêm CSS tùy chỉnh
Chúng tôi cũng sẽ đảm bảo rằng tiêu đề bên toàn cục vẫn cố định ở bên trái bằng cách thêm một vài dòng mã CSS vào phần tử phần chính.
position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
Khi di chuột qua phần
Hãy nhớ thêm các dòng mã CSS này vào phần tử chính khi di chuột qua phần này.
position: fixed;
top: 0;
Chế độ hiển thị mặc định
Sau đó, tăng chỉ số z trong các tham số vị trí.
- Chỉ số Z: 99999
Khả năng hiển thị khi di chuột
Đảm bảo cùng một giá trị áp dụng khi di chuột.
- 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, hãy tiếp tục bằng cách 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
Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt dòng và thay đổi cài đặt định cỡ.
- Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
- Chiều rộng máng xối: 1
khoảng cách
Đồng thời loại bỏ tất cả các lề mặc định.
- Đệm (Trên và Dưới): 0px
Thông số cột
Đã thêm CSS tùy chỉnh (máy tính bảng và điện thoại)
Trên máy tính bảng và điện thoại, chúng tôi chọn một màn hình hoàn toàn khác. Chúng tôi sẽ đặt ba mô-đun khác nhau bên cạnh nhau. Để làm điều này, chúng ta sẽ cần thêm một số mã CSS.
Mở cài đặt cột, chuyển đến tab Nâng cao và chèn các dòng mã CSS sau vào khoảng trống Yếu tố chính cho máy tính bảng và điện thoại:
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
Thêm mô-đun Hình ảnh vào cột
Tải logo
Đã đến lúc bắt đầu thêm các mô-đun! Mô-đun đầu tiên chúng ta cần là mô-đun Hình ảnh. Tải lên tệp hình ảnh biểu trưng nửa trong suốt mà bạn chọn.
kích thước
Sau đó chuyển đến tab Thiết kế và thay đổi chiều rộng trên các kích thước màn hình khác nhau.
- Chiều rộng: 4 vw (Máy tính để bàn), 12 vw (Máy tính bảng), 16 vw (Điện thoại)
Quy mô chuyển đổi
Tăng kích thước của mô-đun bằng cách thay đổi cài đặt tỷ lệ chuyển đổi sau đó.
- Phải: 170% (Máy tính để bàn), 100% (Máy tính bảng và Điện thoại)
- Thấp: 170% (máy tính để bàn), 100% (máy tính bảng và điện thoại)
"Dịch Dịch"
Và đẩy mô-đun sang bên phải bằng cách sửa đổi các thông số sau
- Dưới cùng: 1vw (Máy tính để bàn), 0vw (Máy tính bảng và Điện thoại)
Thêm mô-đun Menu vào cột
Chọn menu để thêm
Mô-đun tiếp theo chúng ta cần là 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 đó, xóa màu nền khỏi mô-đun.
Bố trí
Sau đó chuyển đến tab Thiết kế và thay đổi cài đặt bố cục.
- Phong cách: Căn giữa
- Hướng menu thả xuống: Xuống dưới
Menu cài đặt văn bản
Đồng thời thay đổi cài đặt văn bản menu.
- Màu liên kết hoạt động: #cecece
- Menu phông chữ: Montserrat
- Trọng lượng phông chữ của Menu: In đậm
- Màu văn bản: # 000000
- Kích thước văn bản menu: 0,9 vw (Máy tính để bàn), 2 vw (Máy tính bảng), 2,5 vw (Điện thoại)
Menu văn bản khi di chuột
Thay đổi màu của văn bản menu khi di chuột.
- Màu văn bản menu: #afafaf
Menu thả xuống
Chúng tôi cũng đang thực hiện một số thay đổi đối với cài đặt menu thả xuống.
- Màu dòng menu thả xuống: # 000000
- Màu văn bản của menu thả xuống: # 000000
biểu tượng
Sau đó, thay đổi màu biểu tượng menu bánh hamburger.
- Màu biểu tượng menu bánh hamburger: # 000000
khoảng cách
Và thêm các giá trị lề tùy chỉnh trên các kích thước màn hình khác nhau.
- Biên (Trên và Dưới): 18 vw (Máy tính để bàn), 0 vw (Máy tính bảng và Điện thoại)
- Lề (Trái và Phải): -13vw (Máy tính để bàn), 0vw (Máy tính bảng và Điện thoại)
Biến đổi xoay
Bây giờ, để tạo hiệu ứng xoay, chúng ta sẽ thử với các giá trị xoay chuyển đổi của mô-đun.
- Trái: 270 độ (Máy tính để bàn), 0 độ (Máy tính bảng và Điện thoại)
Thêm mô-đun “Theo dõi trên mạng xã hội” vào cột
Thêm mạng xã hội
Hãy chuyển sang mô-đun “Theo dõi truyền thông xã hội”, đây là mô-đun tiếp theo và cuối cùng mà chúng tôi cần để hoàn thành tiêu đề xoay quanh toàn cầu của mình. Thêm một số mạng xã hội mà bạn lựa chọn.
Đặt lại kiểu biểu tượng mạng xã hội
Tiếp tục bằng cách đặt lại cài đặt cho từng mạng xã hội riêng lẻ. Điều này sẽ giúp chúng ta loại bỏ màu nền của chúng.
sự liên kết
Sau đó chuyển sang tab Thiết kế của mô-đun và thay đổi căn chỉnh của mô-đun trên các kích thước màn hình khác nhau.
- Mô-đun căn chỉnh: Trái (Máy tính để bàn), Phải (Máy tính bảng và Điện thoại)
Cài đặt biểu tượng
Cuối cùng, thay đổi cả cài đặt biểu tượng.
- Màu biểu tượng: # 000000
- Sử dụng kích thước biểu tượng tùy chỉnh: CÓ
- Kích thước phông chữ biểu tượng: 2,1 vw
Lưu các thay đổi của hàm tạo và xem kết quả
Khi bạn đã hoàn thành tất cả các mô-đun, bạn có thể lưu mô hình, thoát khỏi trình tạo của chủ đề của Divi và trực quan hóa kết quả trên của bạn Website !
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.
Văn phòng
Tải DIVI ngay bây giờ !!!
Kết luận
Trong bài viết này, chúng tôi đã hướng dẫn bạn cách tạo tiêu đề toàn cục xoay. Trừ khi bạn chọn khác, tiêu đề chung mà chúng tôi đã tạo sẽ xuất hiện trên tất cả các bài đăng và trang 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ó.
Xem thêm 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.
...
