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 701.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ị]

Đôi khi làm cho trang web của bạn nổi bật so với đám đông nói dễ hơn làm. May mắn thay, bạn có thể bắt đầu chơi trò mày mò nhỏ bằng cách thêm các điểm sáng tạo của cá nhân hóa sẽ làm cho blog của bạn nổi bật giữa đám đông.

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 đến:

Phần trình tạo css wordpress tùy chỉnh

Điều này có nghĩa là bất kỳ thay đổi nào chúng tôi thực hiện ở đây sẽ chỉ có hiệu lực trên trang chúng tôi đang chỉnh sửa. Đó 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.

Biểu tượng thay đổi màu divi

Đầu tiên tôi sẽ hướng dẫ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 đang sử dụng định dạng khác, hướng dẫn này vẫn có hiệu quả vì ID chung của các “div” trên Divi là giống nhau cho tất cả các định dạng (# main-header), theo như tôi biết. Nếu bạn gặp vấn đề với các định dạng khác.

Định dạng tiêu đề Divi

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 cần đảm bảo các liên kết xuất hiện ở phía dưới. Các màu tôi đã chọn, 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.

Cá nhân hóa menu divi

Tôi đang sử dụng rgba (255,255,255,0.6) sẽ là màu liên kết và màu trắng đậm là màu 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 "3 dòng" và một hộp tùy chọn sẽ xuất hiện.

Trình tạo Wordpress Divi

Bây giờ hãy 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ã hex thành bất kỳ màu nào bạn muốn:

Cài đặt divi tùy chỉnh màu

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ạ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ây giờ bạn chỉ cần thêm cùng một mã này 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.

Biểu tượng divi xã hội

Sau đó, chuyển đế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 đang chọn 'trắng' làm màu văn bản vì tôi sẽ thêm nền màu tròn vào từng biểu tượng xã hội để phù hợp với màu menu mới, để biểu tượng có thể xuất hiện.

Tùy chỉnh menu phụ

Đi đến " Header & Navigation> Header Elements Và đánh dấu vào ô " Hiển thị các biểu tượng xã hội '.

Divi phần tử tiêu đề wordpress

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 cho nền của các biểu tượng xã hội của chúng tôi. Chúng tôi chỉ thêm một yếu tố khác vào hỗn hợp. Bạn sẽ có một cái gì đó giống như sau:

Trình chỉnh sửa chủ đề divi mã css tùy chỉnh

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.

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]

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.

Tùy chọn phần tùy chỉnh divi css chủ đề

# 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ó nền trong suốt (trên tiêu đề chính của tôi), màu phông chữ tôi đã chọn (trên tiêu đề chính, trình bày các phần khác nhau của tôi) qua giao diện tùy chỉnh 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