Bỏ qua đến nội dung chính

Làm thế nào để thay đổi màu sắc của các menu giữa các trang Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Làm cho trang web của bạn nổi bật giữa đám đông đôi khi nói dễ hơn làm. May mắn thay, bạn có thể tự mình chơi một chút tự làm bằng cách thêm những điểm sáng tạo cá nhân hóa sẽ làm cho blog của bạn nổi bật so với những người khác.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách sử dụng trình tạo Divi để tùy chỉnh blog của bạn, đặc biệt là khu vực CSS.

Đây là khu vực tôi đang nói về:

Điều này có nghĩa là mọi thay đổi chúng tôi áp dụng ở đây sẽ chỉ có hiệu lực trên trang chúng tôi đang chỉnh sửa. Đây là một tính năng cực kỳ thú vị và hữu ích!

Đây là kết quả cuối cùng mà chúng ta sẽ có ở cuối hướng dẫn này. Màu nền của menu điều hướng thay đổi tùy thuộc vào trang bạn đang truy cập. Là một tùy chọn bổ sung, bạn sẽ nhận thấy rằng các biểu tượng cũng thay đổi màu sắc.

Trước tiên tôi sẽ chỉ cho bạn cách áp dụng màu nền trên menu. Sau đó, riêng tôi sẽ chỉ cho bạn cách làm cho các biểu tượng xã hội phù hợp.

Nếu bạn chưa đọc hướng dẫn của chúng tôi về trình bày chủ đề WordPress Divi, Tôi mời bạn làm điều đó.

Hãy bắt đầu!

Áp dụng màu cho các menu

Đầu tiên, tôi sử dụng định dạng tiêu đề mặc định. Nếu bạn sử dụng định dạng khác, hướng dẫn này vẫn có hiệu lực vì ID "divs" chung của Divi giống nhau cho tất cả các định dạng (# main-header), theo như tôi biết. Nếu bạn có vấn đề với các định dạng khác.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Chúng tôi phải đảm bảo rằng các liên kết ở phía dưới. Các màu tôi đã chọn, mà bạn sẽ tìm thấy trên Coolors.co nếu bạn muốn sử dụng chúng, ở phía tối hơn, vì vậy tôi phải làm cho liên kết văn bản có màu sáng. Tôi đã chọn màu trắng.

Tôi sử dụng rgba (255,255,255,0.6) sẽ là màu của liên kết và màu trắng đậm là màu của liên kết hoạt động (cho hiệu ứng hình ảnh mong muốn)

Sau đó đi đến trang mà bạn muốn áp dụng thay đổi đầu tiên (bạn nên xem các liên kết đơn tại chỗ). Nhấp vào biểu tượng tại "dòng 3" và một hộp tùy chọn sẽ xuất hiện.

Bây giờ, thêm CSS sau vào hộp này:

# Hand-header {background: #474f61; }

Bạn nên có một cái gì đó tương tự như thế này, đừng quên thay đổi mã thập lục phân của màu bạn chọn:

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Bấm vào Lưu và cập nhật Và điều này sẽ áp dụng cho menu chính, tất cả trong một dòng mã.

Bây giờ, bạn chỉ cần thêm cùng một mã cho tất cả các trang của mình và thay đổi mã hex mỗi lần.

Biểu tượng mạng xã hội (Tùy chọn)

Về phần này, chúng tôi sẽ sửa đổi mã chúng tôi đã thực hiện, sau đó thêm một số mã ở cấp CSS của trang web và tôi sẽ giải thích lý do tại sao một số CSS nên được thêm vào trong các trang riêng lẻ và tại sao một số không nên được.

Vì vậy, trước tiên bạn phải chắc chắn rằng bạn đã thiết lập các liên kết xã hội của bạn. Đi đến " Tùy chọn Divi> Chủ đề chung Và thêm URL của bạn vào các trang truyền thông xã hội của bạn.

Sau đó vào phần cài đặt của bạn trong thanh menu phụ và đặt màu nền và văn bản. Tôi chọn "màu trắng" làm màu của văn bản vì tôi sẽ thêm nền màu tròn cho mỗi biểu tượng xã hội để khớp với màu menu mới, để biểu tượng có thể xuất hiện.

Đi đến " Tiêu đề & Điều hướng> Các yếu tố của tiêu đề Và đánh dấu vào ô " Hiển thị các biểu tượng xã hội '.

Bạn có nhớ cách chúng tôi tiến hành thêm CSS trên mỗi trang không? Chúng tôi sẽ quay lại và chỉnh sửa những gì chúng tôi đã viết trước đó. Thay thế những gì bạn có ở đó bằng CSS sau hoặc nếu bạn nhận ra những gì khác biệt, bạn chỉ cần thêm mã bổ sung.

# Hand-header, # .và top-header-xã hội-icon {background: #474f61; }

Mã này sẽ cho phép trang web của chúng tôi không chỉ thay đổi màu nền cho menu trên trang này mà còn cả nền của các biểu tượng xã hội của chúng tôi. Chúng tôi chỉ cần thêm một yếu tố khác vào hỗn hợp. Bạn nên có một cái gì đó trông như thế này:

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Bạn có thể cần kiểm tra xem màu hex có chính xác trên mỗi trang không.

CSS chung

Đoạn mã sau sẽ nằm trong " Tùy chọn chủ đề> hộp CSS Hoặc trong tập tin phong cách của chủ đề con.

# Top-header-xã hội-biểu tượng .và li {margin-left: 5px; } # .và top-header-xã hội-icon {padding: 4px; margin-bottom: 8px; width: 30px; height: 30px; border-radius: 50%; line-height: 24px; }

Bạn có thể tự hỏi tại sao điều này không phải là như vậy trong hộp CSS của trang. Lý do là đoạn mã đặc biệt này ảnh hưởng đến tất cả các yếu tố được nhắm mục tiêu nên việc đặt mã chính xác ở nhiều nơi không hiệu quả. Chỉ thay đổi màu nền trên mỗi trang, nhưng mã này không thay đổi trên mỗi trang. Đó chỉ là một cách thực hành tốt nhất để tránh tăng thêm trọng lượng cho trang web của bạn.

Đó là tất cả cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn tùy chỉnh các menu trên blog WordPress của bạn.

Hướng dẫn Divi khác

Bài viết này chứa comments 3
  1. Bonjour,

    Cảm ơn bạn cho tất cả các hướng dẫn của bạn.
    Bạn có biết nếu chúng ta có thể đặt menu con divi (cấp thứ hai bên dưới danh sách thả xuống) trong chiều rộng không? chiếm toàn bộ chiều rộng của trang

  2. Bonjour,

    Làm thế nào để bạn thay đổi màu sắc của văn bản trong tiêu đề chính? Có một nền (trong tiêu đề chính của tôi) trong suốt, màu phông chữ tôi đã chọn (trên tiêu đề chính của tôi, hiển thị các chủ đề khác nhau của tôi) thông qua giao diện tùy biến divi là màu đen. Tuy nhiên, tôi muốn nó có màu trắng trên một số trang vì ảnh bên dưới quá tối.

    Làm thế nào?

    Merci par avance,

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
22 cổ phiếu
cổ phiếu13
tweet2
Enregistrer7