Nút thêm Wordpress vào tiêu đề

Bạn có thể tạo một nút đơn giản cho bất kỳ liên kết nào trên điều hướng chính. Tất cả những gì bạn cần làm là thêm tên lớp btn vào mục menu của bạn và nó sẽ tạo một nút đơn giản. Để thay đổi màu của nút, kích thước, phần đệm, v.v., điều đó cần phải được thực hiện thông qua css tùy chỉnh vì tôi không muốn làm phong phú chủ đề với nhiều tùy chọn hơn cho một thứ quá đơn giản

Kết quả

Liệu nó có trả lời cho câu hỏi của bạn không? . Vui lòng thử lại sau

Nếu bạn muốn thêm lời kêu gọi hành động vào trang web WordPress của mình và đặt nó ở một nơi dễ nhận biết, khu vực tiêu đề của trang web của bạn là nơi hoàn hảo để làm điều đó. Tiêu đề ở đầu mỗi trang web thường là một trong những điều đầu tiên mọi người nhìn thấy khi mở một trang. Điều này làm cho nó trở thành một nơi tự nhiên để thêm một số yếu tố quan trọng như tiêu đề và tiêu đề trang web của bạn, điều hướng trang web chính, logo thương hiệu của bạn và tất nhiên là các nút CTA của bạn

Toàn bộ mục đích của việc thêm nút ở vị trí đầu tiên là khiến khách truy cập của bạn thực hiện hành động mong muốn và nhấp vào chúng để chuyển hướng họ đến một trang cụ thể trên trang web của bạn (hoặc bên ngoài trang web của bạn). Đó là lý do tại sao bạn nên làm cho nút hiển thị ngay lập tức trên trang của mình để thu hút sự chú ý của khách truy cập và khiến họ nhấp để chuyển đổi nhiều hơn. Điều này có nghĩa là thiết kế của nút phải cho phép nó nổi bật so với các liên kết tiêu chuẩn khác có thể xuất hiện trong menu tiêu đề của bạn

Hiện tại, theo mặc định, WordPress không có khả năng thêm các nút riêng biệt vào khu vực tiêu đề của bạn. Thay vào đó, bạn có thể thêm menu điều hướng vào tiêu đề của mình bằng các liên kết có cùng thiết kế. Tuy nhiên, có một cách “Chuyển đổi” một liên kết menu trong điều hướng tiêu đề của bạn và làm cho nó xuất hiện dưới dạng một nút. May mắn thay, điều này rất dễ thực hiện, hãy sử dụng một số CSS tùy chỉnh. Lần này chúng tôi sẽ chỉ cho bạn cách thêm nút vào menu điều hướng tiêu đề WordPress của bạn. Ngay sau đây, chúng tôi cũng sẽ chỉ cho bạn cách. thêm và tùy chỉnh tiện ích nút cho bất kỳ khu vực tiêu đề nào khác mà bạn muốn (ngoài việc thêm nó ngay bên cạnh menu điều hướng của bạn) Sử dụng chủ đề cầu nối. Vì vậy, ngồi lại, thư giãn và tiếp tục đọc

Thêm các nút vào menu tiêu đề WordPress của bạn bằng CSS tùy chỉnh

Để bắt đầu biến liên kết menu của bạn thành một nút, bạn cần thêm liên kết menu bạn muốn sử dụng để. đi Xem >> Menu. Sau đó, thêm liên kết vào menu điều hướng dựng sẵn

Nếu menu của bạn đã có mục menu mà bạn muốn biến thành nút, chỉ cần nhấn vào mũi tên trên mục menu của bạn để mở rộng và chỉnh sửa mục đó

Nếu bạn chưa tạo mục menu của mình, tùy thuộc vào việc mục menu của bạn có dẫn đến một trang, bài đăng hay bài đăng khác hay không, bạn có thể tìm thấy mục đó ở bên trái màn hình (tìm mục đó trong Trang, Bài đăng, v.v. ). gõ) rồi nút Thêm vào Menu. Nếu bạn muốn liên kết đến một trang bên ngoài trang web của mình, Liên kết Riêng tư hãy nhập danh sách thả xuống và nhập url của bạn và liên kết văn bản theo cách thủ công rồi Thêm vào Menu

Sau đó, hãy chắc chắn rằng bạn cung cấp. Nhãn điều hướng cho mặt hàng của bạn (nếu bạn chưa có)

Sau khi làm điều đó, bạn nên tiếp tục và nút Tùy chọn hiển thị (nằm ở đầu màn hình). Đảm bảo hộp có nội dung “Lớp CSS” được chọn. Điều này cho phép bạn thêm một lớp CSS tùy chỉnh vào liên kết của mình và sau đó định dạng nó theo cách bạn muốn

Bây giờ bạn sẽ có thể thấy tùy chọn lớp CSS mới trong cài đặt mục menu. Nhập tên cho lớp menu của bạn (của chúng tôi là title-menu-buttonnhưng ở đây bạn có thể gán bất kỳ tên duy nhất nào bạn chọn)

Có quan hệ.   Hướng dẫn nhanh về Kế toán WooC Commerce

bắn tôi Lưu Menu Nhấn nút để lưu cài đặt của bạn

Tiếp theo, bạn nên tùy chỉnh giao diện của nút menu tiêu đề bằng cách sử dụng một số mã CSS tùy chỉnh. đi Giao diện >> Tùy chỉnh Truy cập tùy biến chủ đề WordPress của bạn và bắn cho tôi Nút CSS bổ sung

Thêm mã CSS tùy chỉnh của bạn tại đây và sau đó Xuất bản. Tuy nhiên, hãy nhớ rằng thao tác này sẽ làm cho tất cả các thay đổi của bạn hiển thị trực tiếp ngay lập tức, vì vậy hãy đảm bảo chỉ nhấn nút này sau khi bạn hoàn toàn hài lòng với giao diện của nút menu tiêu đề

Nếu bạn muốn, vui lòng thêm mã CSS của chúng tôi hoặc thay đổi nó theo cách bạn muốn để phù hợp với sở thích thiết kế của mình (thay đổi đường viền và bán kính đường viền, màu nền và văn bản, v.v. )

.header-menu-button { 
background-color:#86af49;
border:1px;
border-radius:25px;
}
.header-menu-button a, .header-menu-button a:hover, .header-menu-button a:active { 
color:#fff !important;
}

Chúng tôi đã chọn nút màu xanh lá cây (hoàn toàn phù hợp với bố cục của chúng tôi) và màu trắng đồng nhất của văn bản nút. Chúng tôi cũng đã đặt bán kính đường viền là 25px để giữ cho các cạnh của nút hơi tròn. Bạn nên nhớ rằng bạn càng giảm số pixel, các cạnh sẽ càng sắc nét và khi bạn tăng số pixel, nút của bạn sẽ có hình dạng tròn hơn

Ngay sau khi bạn thêm mã CSS của mình và nhấp vào Xuất bản, bạn sẽ có thể xem giao diện của nút trong bản xem trước của trang web

Thêm các nút vào dòng tiêu đề của bạn bằng chủ đề Qode

Chúng tôi đã đề cập ngay từ đầu rằng WordPress không đi kèm với tùy chọn thêm nút vào trường tiêu đề của bạn ngay lập tức. Tuy nhiên, một số chủ đề WordPress đi kèm với nhiều tính năng bổ sung nhằm mục đích mở rộng hơn nữa chức năng của WordPress theo nhiều cách khác nhau. Ví dụ: trong trường hợp chủ đề Qode, có một tiện ích có tên. Qode Button cái này cho phép bạn thêm và tùy chỉnh một nút trực tiếp trong khu vực tiêu đề của bạn. Chúng tôi sẽ chỉ cho bạn cách thực hiện việc này bằng chủ đề Bridge, vì vậy hãy tiếp tục đọc

Bây giờ, chúng ta nên chỉ ra ngay rằng Bridge (và nhiều chủ đề Qode khác) bao gồm nhiều khu vực tiện ích tùy chỉnh mà bạn có thể sử dụng để thêm các tiện ích khác nhau vào trang web của mình. Đặc biệt khi nói đến tiêu đề trang web, nó bao gồm hai khu vực chính – tiêu đề trên cùng và tiêu đề dưới cùng. Sau đó, các khu vực này được chia tiếp. Tiêu đề trên cùng bên trái, Tiêu đề trên cùng bên phải, Tiêu đề dưới cùng bên phải và Tiêu đề dưới cùng khu vực tiện ích ở giữa. Bạn có thể thêm widget vào bất kỳ khu vực nào trong số này bằng cách vào Giao diện >> Widget

Nếu bạn đang sử dụng Bridge và không thấy một số trường này trong danh sách các trường tiện ích của mình, thì có khả năng một trong các trường tiêu đề (thường là Đầu tiêu đề) bị tắt. Cần thiết Đảm bảo rằng trường này được hiển thị bằng cách truy cập nó. Tùy chọn Qode >> Tiêu đề Trong bảng điều khiển WordPress của bạn

Tiếp theo, tìm bộ phận Over the Hood và thay đổi Show Header Top Area bằng Yup

Có nhiều tùy chọn khác ở đây liên quan đến khu vực Tiêu đề trên mà bạn có thể điều chỉnh theo sở thích của mình, chẳng hạn như màu nền, phần đệm, khả năng ẩn khi cuộn, v.v.

Có quan hệ.   Làm cách nào để thêm Tìm kiếm của Google vào trang web WordPress của bạn?

Tất nhiên, trong số các tùy chọn khác liên quan đến Trường con tiêu đề, bạn có thể thay đổi màu đường viền, độ trong suốt, đặt nó ở dạng lưới, v.v. Bạn cũng sẽ tìm thấy các tùy chọn tiêu đề chung khác, chẳng hạn như

Khi bạn hài lòng với cài đặt của mình, nút Lưu thay đổi

Bây giờ, hãy xem cách bạn có thể thêm nút vào một trong các khu vực tiện ích này. Qode nút xe. Bạn có thể thêm nút này vào bất kỳ khu vực tiện ích Tiêu đề nào bạn muốn. Chúng tôi sẽ chỉ cho bạn cách thêm một nút. Khu vực tiện ích Tiêu đề Dưới cùng bên phải sẽ hiển thị nút của chúng tôi ngay bên cạnh menu điều hướng tiêu đề. Đây là một trong những khu vực phổ biến nhất để thêm nút vào trang web và nó rất có ý nghĩa vì bản thân menu điều hướng là một trong những yếu tố trang web dễ nhận thấy nhất

Để thực hiện việc này với tiện ích Nút Qode, hãy chọn khu vực tiện ích của bạn (Tiêu đề Dưới cùng bên phải) và Thêm tiện ích Nhấn nút (hoặc kéo nó vào khu vực tiện ích ở bên phải)

Sử dụng các tùy chọn tiện ích Qode Button, bạn sẽ có thể. điều chỉnh kích thước nút của bạn, thêm văn bản nút, liên kết nút, thay đổi màu của nút (màu di chuột, màu nền, v.v. ) và nhiều hơn nữa

bắn tôi Lưu Sau khi bạn hoàn tất việc thiết lập các tùy chọn tiện ích nút của mình, hãy nhấn và tiếp tục để xem nút của bạn trông như thế nào khi hoạt động

Tất nhiên, như chúng tôi đã đề cập trước đó, bạn có thể dễ dàng thêm nút của mình vào bất kỳ khu vực tiện ích tiêu đề có sẵn nào khác. Ví dụ: khi chúng tôi thêm (và tùy chỉnh) tiện ích Nút Qode vào khu vực tiện ích Trên cùng bên trái, nút của chúng tôi trông như thế này (như chúng tôi đã làm cho khu vực Tiêu đề Dưới cùng bên phải)

Như bạn có thể thấy, nút của chúng tôi hiện được đặt phía trên logo bên trái

Hoặc, đây là giao diện của nút của chúng tôi khi được thêm vào khu vực tiện ích Trên cùng bên phải

Tất nhiên, bạn có thể sử dụng tùy chọn CSS tùy chỉnh mà chúng tôi đã sử dụng trong phương thức đầu tiên ở một trong các chủ đề của chúng tôi (để biến mục menu của bạn thành một nút), nhưng tiện ích Nút Qode là một tùy chọn đơn giản hơn nhiều vì nó cho phép bạn tạo kiểu cho nó. Bạn có thể đặt nút của mình theo bất kỳ cách nào bạn muốn mà không cần sử dụng bất kỳ mã nào. Hơn nữa, như bạn có thể thấy từ các ví dụ minh họa của chúng tôi ở trên, bạn có thể đặt nó ở bất cứ đâu bạn muốn trong tiêu đề của mình

Giải pháp

Cho dù bạn muốn thêm liên kết vào biểu mẫu đăng ký, nút mua hay bất kỳ loại CTA nào khác, tiêu đề của bạn là một trong những nơi tốt nhất để thu hút sự chú ý đến nút của bạn và thúc đẩy khách truy cập hành động. Về bản chất, việc thêm một nút vào menu tiêu đề của bạn rất dễ dàng – tất cả những gì bạn phải làm là biến đổi mục menu hiện có của mình bằng cách gán cho nó một lớp CSS tùy chỉnh, sau đó Giao diện >> Tùy chỉnh màn hình. Tuy nhiên, nếu bạn đang sử dụng (hoặc dự định sử dụng) một trong các chủ đề của chúng tôi, bạn sẽ có nhiều tùy chọn tùy chỉnh hơn theo ý của mình và bạn sẽ có thể nhanh chóng và dễ dàng đặt nút của mình vào bất kỳ khu vực tiện ích nào bạn muốn (không phải . Thực đơn). Vì vậy, hãy chọn phương pháp ưa thích của bạn và làm theo hướng dẫn của chúng tôi một cách cẩn thận để bạn có thể thêm CTA nổi bật vào tiêu đề của mình, điều này sẽ giúp cải thiện trải nghiệm người dùng và tăng chuyển đổi của bạn