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ể tham gia trở thành một DIYer nhỏ bằng cách thêm các thao tác tùy chỉnh sáng tạo để đảm bảo rằng 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ạnvà đặc biệt là khu vực CSS.

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

Đ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.

Đầ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.

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.

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.

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:

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ã 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.

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.

Đi đến " Header & Navigation> Header Elements 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 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:

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.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG CHỦ ĐỀ DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Hướng dẫn Divi khác

• trang web 5 để sử dụng hàng Divi chủ đề
• Cách thêm văn bản vào sản phẩm Divi WooCommerce
• Cách thay đổi màu menu giữa các trang Divi
• Cách cá nhân hóa lưới của blog với Divi
• Làm thế nào để sử dụng trình biên tập Divi vai trò trên WordPress
• Cách tạo thanh trượt Divi toàn màn hình
• Cách thay đổi màu của menu giữa các trang Divi
• Các tính năng có thể bạn chưa biết về Divi
• Cách sử dụng Divi Builder trên WordPress
• Cách sử dụng mô-đun cuộn video Divi
• Cách sử dụng mô-đun Divi Builder Flip
• Cách thêm mô-đun chứng thực trên Divi Builder
• Cách sử dụng mô-đun văn bản Divi
• Cách tạo thanh trượt trên Divi
• Cách chỉnh sửa vai trò người dùng Divi
• Cách sử dụng mô-đun Truyền thông xã hội Divi
• Cách sử dụng mô-đun cửa hàng trên chủ đề WordPress Divi
• Cách sử dụng mô-đun bên Divi
• Cách sử dụng mô-đun bảng giá Divi
• Cách sử dụng mô-đun tiêu đề của ấn phẩm Divi
• Cách thêm mô-đun video của Divi
• Cách sử dụng mô-đun điều hướng bài viết
• Cách sử dụng mô-đun tìm kiếm Divi
• Cách sử dụng mô-đun ví Divi
• Cách sử dụng mô-đun người trên Divi Builder
• Cách sử dụng mô-đun ví với bộ lọc Divi
• Cách sử dụng mô-đun trượt toàn bộ chiều rộng
• Cách sử dụng Mô-đun hình ảnh Divi Builder
• Cách sử dụng mô-đun điều hướng chiều rộng đầy đủ của Divi Builder
• Cách sử dụng mô-đun thư viện hình ảnh
• Cách sử dụng Mô-đun Thẻ Đa Năng Divi Builder
• Cách sử dụng Mô-đun danh mục đầu tư chiều rộng đầy đủ Divi
• Cách sử dụng mô đun tiêu đề toàn chiều rộng Divi
• Cách sử dụng Module Divi Counter
• Cách sử dụng thanh trượt bài viết trên Divi Builder
• Cách sử dụng mô-đun Optin Email Optin