Cần tạo một tiêu đề chung cho website với Đivi?
Tiêu đề chung sẽ xuất hiện ở mọi nơi trên Website, trừ khi bạn đã chỉ định một tiêu đề khác cho một trang hoặc bài đăng.
Hãy bắt đầu nào!
khảo sát
Đây là bản xem trước của tiêu đề chung mà chúng tôi sẽ thiết kế.
Định cấu hình menu chính của bạn
Bắt đầu bằng cách tạo menu của bạn trong cài đặt giao diện trang WordPress của bạn.
Truy cập tùy chọn Trình tạo chủ đề trong Divi
Trong các tùy chọn của Chủ đề Divi, nhấp vào Trình tạo chủ đề. Khi đó, bạn sẽ nhận thấy một mẫu trang web mặc định
Thêm và tạo một tiêu đề chung
Le mẫu trang web mặc định là nơi bạn có thể bắt đầu tạo tiêu đề toàn cầu, nội dung toàn cầu và chân trang toàn cầu tùy chỉnh của mình. Nhấp vào "Thêm tiêu đề toàn cầu" và tiếp tục bằng cách nhấp vào "Xây dựng tiêu đề toàn cầu" để bắt đầu quá trình.
Cài đặt phần
kích thước
Mở cài đặt phần mà bạn sẽ tìm thấy trên trang, trong tab Kiểu, thay đổi kích thước trên các kích thước màn hình khác nhau.
- Chiều rộng tối đa: 100%
- Chiều rộng tối đa: 1280px (dành cho PC và máy tính bảng), 100% (dành cho thiết bị di động)
khoảng cách
Loại bỏ tất cả các lề nội bộ trên cùng và dưới cùng
- Đỉnh lề bên trong: 0px
- Lề nội bộ dưới cùng: 0px
Biên giới
Bây giờ, thêm bán kính đường viền vào các góc dưới cùng bên trái và bên phải của phần.
- Dưới cùng bên trái: 50px
- Dưới cùng bên phải: 50px
Hộp bóng
Cũng hãy thêm một bóng hộp tinh tế.
- Độ mạnh của Box Shadow Blur: 60px
- Màu phông chữ phụ đề: rgba (0,0,0,0.13)
tầm nhìn
- Tràn ngang: Có thể nhìn thấy
- Tràn dọc: Có thể nhìn thấy
Dành một dòng mới cho tiêu đề
Bây giờ chúng tôi đã hoàn thành cài đặt phần chung, chúng tôi có thể bắt đầu thêm hàng. Tổng cộng, chúng ta sẽ cần hai dòng; một dành riêng cho tiêu đề và một cho phép các mục menu hiển thị. Chúng tôi sẽ bắt đầu với tiêu đề 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:
Cài đặt dòng
Cài đặt nền
Không thêm bất kỳ mô-đun nào vào dòng, hãy mở cài đặt dòng và thay đổi màu nền.
- Nền: # 38383F
kích thước
Sau đó, sửa đổi các thông số định cỡ dòng.
- 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: 100%
xem
Bây giờ, hãy đảm bảo các cột xuất hiện bên cạnh nhau trên màn hình nhỏ hơn bằng cách thêm dòng mã CSS này vào phần tử hàng chính.
01
display: flex;
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, đã đến lúc bắt đầu thêm mô-đun. Thêm mô-đun hình ảnh vào cột 1 và tải lên biểu trưng của bạn.
sự liên kết
Chuyển đến tab Kiểu và căn chỉnh hình ảnh ở bên trái.
kích thước
Đồng thời sửa đổi Chiều rộng của mô-đun.
khoảng cách
Đồng thời thêm các giá trị ký quỹ tùy chỉnh.
Thêm mô-đun theo dõi phương tiện truyền thông xã hội trong cột 2
Thêm mạng xã hội
Hãy chuyển sang cột thứ hai. Ở đó, chúng tôi sẽ cần một mô-đun theo dõi mạng xã hội. Thêm các mạng xã hội mà bạn chọn. Bạn có thể thêm bao nhiêu mạng xã hội tùy thích.
Mạng xã hội màu nền
Tiếp theo, mở từng mạng xã hội riêng lẻ và thay đổi màu nền thành màu hoàn toàn trong suốt.
- Màu nền: rgba (0,0,0,0)
sự liên kết
Quay lại cài đặt mô-đun bình thường và sau đó thay đổi toàn bộ căn chỉnh của mô-đun.
biểu tượng
Thay đổi cả cài đặt biểu tượng.
- Màu biểu tượng: #FFFFFF
- 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: 16px (PC và máy tính bảng), 12px (điện thoại)
khoảng cách
Thêm một lợi nhuận trên cùng.
Thêm mô-đun Nút trong cột 3
Di chuyển đến cột thứ ba và thêm mô-đun Nút chứa văn bản bạn chọn.
sự liên kết
Thay đổi căn chỉnh của nút trong tab Kiểu.
Cài đặt nút
Tùy chỉnh cài đặt nút như sau:
- 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: 12px (máy tính để bàn), 10px (máy tính bảng), 8px (điện thoại)
- Màu văn bản của nút: #ffffff
- Nút nền: # ffae25
- Chiều rộng đường viền nút: 0 pixel
- Nút Border Radius: 0 pixel
- Khoảng cách giữa các ký tự nút: 5 px (máy tính để bàn), 3 px (máy tính bảng và điện thoại)
- Nút Phông chữ: Mở Không có
- Nút Soft Light: Chữ in đậm
- Sao chép kiểu nút: TT
khoảng cách
Tùy chỉnh giá trị ký quỹ.
Dành một dòng mới cho thanh menu
Khi bạn đã điền vào dòng dành riêng cho tiêu đề chung, bạn có thể thêm một dòng khác ngay bên dưới.
Cài đặt dòng
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ỡ trong tab Kiểu.
khoảng cách
Sau đó, loại bỏ tất cả các lề dưới cùng và trên cùng.
Thêm mô-đun Menu vào cột
Chọn Menu
Tiếp theo, thêm mô-đun Menu vào cột và chọn menu bạn đã tạo trong phần đầu tiên của hướng dẫn này.
Bố trí
Chuyển sang tab Kiểu và thay đổi cài đặt bố cục như sau:
Kết nối
Đồng thời thay đổi màu của liên kết đang hoạt động trong tab Kiểu.
- Màu liên kết hiện hoạt: # ffae25
Menu thả xuống
Làm tương tự đối với màu dòng menu thả xuống trong cài đặt menu thả xuống.
- Màu hàng thả xuống: # ffae25
biểu tượng
- Màu biểu tượng menu bánh hamburger: # ffae25
Văn bản menu
Với cài đặt văn bản menu.
- Phông chữ menu: Prata
- Màu văn bản menu: # 000000
Đặt tiêu đề và thanh menu luôn ở trên cùng
Mở cài đặt phần
Khi bạn đã hoàn thành dòng thứ hai, tất cả những gì bạn phải làm là đảm bảo phần này vẫn ở đầu các trang và bài đăng của chúng tôi. Để làm điều này, chúng tôi sẽ mở lại cài đặt phần.
Thêm CSS tùy chỉnh vào phần tử chính
Tiếp theo, chúng ta sẽ chuyển đến tab nâng cao và chúng ta sẽ thêm một vài dòng mã CSS vào phần tử chính của phần.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Lưu các tùy chọn trình tạo chủ đề và tiêu đề chung
Khi bạn đã hoàn thành toàn bộ thiết kế tiêu đề chung, hãy nhớ lưu thiết kế trước khi thoát khỏi bố cục mẫu. Khi bạn đã ra khỏi bố cục mẫu, hãy lưu toàn bộ thay đổi của trình tạo chủ đề và bạn đã hoàn tất!
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.
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 đề chung tùy chỉnh bằng trình tạo chủ đề mới của Divi. Hướng dẫn này cho thấy việc tạo các tiêu đề đẹp và áp dụng chúng cho toàn bộ trang web của bạn dễ dàng như thế nào. Website hoặc các loại bài đăng tùy chỉnh cụ thể.
Chúng tôi hy vọng nó sẽ giúp bạn trong việc tùy chỉnh trang web của mình với Trình tạo chủ đề.
Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, vui lòng để lại bình luận cho chúng tôi trong phần phần bình luận bên dưới.
...
