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

Cách thêm hai nút cạnh nhau vào tiêu đề Divi toàn cầu của bạn

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

Có lời kêu gọi hành động rõ ràng trên các trang của bạn là cần thiết cho hầu hết các trang web. Và cách nào tốt hơn để thu hút sự chú ý đến một số CTA quan trọng nhất của bạn hơn là đặt chúng trong tiêu đề của bạn?

Trong hướng dẫn hôm nay, chúng tôi sẽ chỉ cho bạn cách thêm hai nút cạnh nhau vào tiêu đề toàn cầu của bạn bằng Trình tạo chủ đề Divi. Một trong các nút là chính, thứ cấp khác. Bạn cũng có thể tải xuống tệp JSON tiêu đề toàn cầu miễn phí!

khảo sát

Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh kết quả trên các kích thước màn hình khác nhau.

Văn phòng

1. Truy cập Trình tạo chủ đề Divi và tạo tiêu đề toàn cầu

Chuyển đến Trình tạo chủ đề Divi

Bắt đầu bằng cách vào Divi Theme Builder và nhấp vào "Thêm tiêu đề toàn cầu".

Tạo một tiêu đề toàn cầu

Tiếp tục bằng cách nhấp vào "Xây dựng tiêu đề toàn cầu".

2. Xây dựng một thiết kế tiêu đề toàn cầu

Thêm một phần mới

khoảng cách

Khi ở trong trình chỉnh sửa mô hình, bạn sẽ thấy một phần. Mở cài đặt phần và xóa tất cả phần đệm trên và dưới mặc định.

  • Phần đệm trên: 0px
  • Đệm dưới: 0px

Chỉ số Z

Ngoài ra hãy chắc chắn để tăng chỉ số z của phần trong cài đặt hiển thị. Điều này sẽ đảm bảo rằng nội dung tiêu đề tổng thể sẽ xuất hiện ở đầu toàn bộ trang và xuất bản nội dung.

  • Chỉ số Z: 99999

Thêm một dòng mới

Cấu trúc cột

Khi bạn đã hoàn thành cài đặt phần, hãy thêm một hàng mới vào phần bằng cấu trúc cột sau:

kích thước

Không thêm các mô-đun, mở các tham số dòng và để dòng chiếm toàn bộ chiều rộng của phần chứa.

  • Sử dụng chiều rộng máng tùy chỉnh: Có
  • Chiều rộng máng xối: 1
  • Cân bằng chiều cao cột: Có
  • Chiều rộng: 100%
  • Chiều rộng tối đa: 100%

khoảng cách

Cũng thay đổi các giá trị điền bên trái và bên phải của dòng.

  • Đệm bên trái: 2vw (bàn), 10vw (máy tính bảng và điện thoại)
  • Đệm bên phải: 2vw (bàn), 10vw (máy tính bảng và điện thoại)

Yếu tố chính

Để căn giữa tất cả nội dung của các cột, chúng tôi sẽ thêm hai dòng mã CSS này vào thành phần chính của dòng.

display: flex;align-items: center;

Xóa thuộc tính hiển thị máy tính để bàn trên máy tính bảng và điện thoại di động.

display: block;

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í]

Cột 1

biên giới

Tiếp tục bằng cách mở các cài đặt trong cột 1 và chỉ thêm một đường viền bên phải trên màn hình nền.

  • Độ rộng đường viền phải: 1px (bàn), 0px (máy tính bảng và điện thoại)
  • Màu viền phải: # d8d8d8

Chỉ số Z

Cũng tăng chỉ số z của cột.

  • Chỉ số Z: 11

Cột 2

Yếu tố chính

Sau đó mở cài đặt trong cột 2 và thêm các dòng mã CSS sau vào thành phần chính của cột để biến nó thành hai cột.

display: grid;grid-template-columns: 50% 50%;

Thêm một mô-đun menu vào cột 1

Chọn menu

Đã đến lúc bắt đầu thêm các mô-đun! Thêm một mô-đun menu vào cột 1 và chọn một menu bạn chọn.

Tải logo

Sau đó tải lên một logo.

Bố trí

Chuyển đến tab thiết kế mô-đun và đảm bảo áp dụng các cài đặt bố cục sau:

  • Phong cách: căn trái
  • Hướng của menu thả xuống: xuống

Menu văn bản

Sau đó thay đổi cài đặt văn bản menu.

  • Màu liên kết hoạt động: # ef6f49
  • Phông chữ menu: Montserrat
  • Trọng lượng phông chữ menu: Semi bold
  • Kiểu chữ menu: chữ hoa
  • Màu văn bản menu: # 333333 (mặc định), # ef6f49 (di chuột)
  • Kích thước văn bản menu: 0.7vw (máy tính để bàn), 1.8vw (máy tính bảng), 2.5vw (điện thoại)
  • Khoảng cách chữ cái menu: 1px

Văn bản trình đơn thả xuống

Đồng thời thay đổi cài đặt văn bản trong menu thả xuống.

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]

  • Màu nền của menu thả xuống: #ffffff
  • Màu của dòng trong menu thả xuống: # ef6f49

biểu tượng

Sau đó thay đổi màu sắc của biểu tượng menu hamburger.

  • Màu sắc biểu tượng menu Hamburger: # 000000

kích thước

Ngoài ra, thêm chiều rộng logo tối đa cho các tham số kích thước.

  • Chiều rộng logo tối đa: 9vw (bàn), 12vw (máy tính bảng), 15vw (điện thoại)

Menu Logo CSS

Và hoàn thành các tham số mô-đun bằng cách thêm một dòng mã CSS vào logo menu trong tab nâng cao.

margin-right: 10vw;

Thêm một mô-đun mã vào cột 1

Thêm mã CSS tùy chỉnh vào mô-đun

Mô-đun tiếp theo và cuối cùng chúng ta cần trong cột 1 là mô-đun mã. Thêm các dòng mã CSS sau để tùy chỉnh khoảng trắng giữa các mục menu:

<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>

Thêm mô-đun nút đầu tiên vào cột 2

Thêm một bản sao

Hãy đi đến mô-đun tiếp theo! Thêm mô-đun nút đầu tiên và nhập một bản sao bạn chọn.

Thêm một liên kết

Sau đó thêm một liên kết đến mô-đun nút.

sự liên kết

Chuyển đến tab thiết kế mô-đun và thay đổi căn chỉnh nút.

  • Căn chỉnh nút: Phải

Cài đặt nút

Cũng tạo kiểu cho nút.

  • Sử dụng kiểu tùy chỉnh cho nút: Có
  • Kích thước văn bản nút: 0.8vw (máy tính để bàn), 1.7vw (máy tính bảng), 2.5vw (điện thoại)
  • Màu văn bản nút: # 000000
  • Màu nền của nút: # edeef0 (mặc định), # d6d7d8 (di chuột)
  • Độ rộng đường viền nút: 0px
  • Bán kính đường viền nút: 0px
  • Khoảng cách chữ cái nút: 2px
  • Phông chữ: Montserrat
  • Trọng lượng phông chữ: Semi bold
  • Kiểu phông chữ: chữ hoa

khoảng cách

Hoàn thành cài đặt mô-đun bằng cách thêm giá trị điền tùy chỉnh vào các kích thước màn hình khác nhau.

  • Phần đệm trên: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Đệm dưới: 1vw (bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Lớp đệm bên trái: 2vw (máy tính để bàn), 4vw (máy tính bảng), 6vw (điện thoại)
  • Đệm bên phải: 2vw (bàn), 4vw (máy tính bảng), 6vw (điện thoại)

Mô-đun nút sao chép

Một khi bạn đã hoàn thành mô-đun nút đầu tiên, sao chép nó.

Chỉnh sửa liên kết

Mở mô-đun nút trùng lặp và chỉnh sửa URL.

Thay đổi căn chỉnh

Cũng thay đổi sự liên kết của các mô-đun.

  • Nút căn chỉnh: bên trái

Thay đổi cài đặt nút

Cũng thay đổi cài đặt nút.

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]

  • Màu văn bản nút: #ffffff
  • Màu nền của nút: # ef6f49 (mặc định), # e06945 (di chuột)

Thang đo chuyển đổi Hover

Hoàn thành các tham số nút bằng cách thêm hiệu ứng di chuột vào thang đo chuyển đổi.

  • Phải: 110%
  • Thấp: 110%

3. Lưu các sửa đổi của trình tạo chủ đề và kết quả của bản xem trước

Khi tiêu đề toàn cầu của bạn hoàn tất, hãy lưu mọi thay đổi vào trình tạo chủ đề và đăng kết quả lên trang web của bạn!

khảo sát

Bây giờ chúng ta đã trải qua tất cả các bước, hãy xem xét kết quả cuối cùng trên các kích thước màn hình khác nhau.

cuối cùng suy nghĩ

Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách thêm hai nút cạnh nhau vào tiêu đề toàn cầu bằng trình tạo chủ đề Divi.

Một trong những nút chúng tôi đã thêm là nút chính, nút còn lại là phụ. Thêm các nút vào tiêu đề toàn cầu của bạn giúp bạn làm nổi bật một số CTA quan trọng nhất trên trang web của bạn. Bạn cũng có thể tải xuống tệp JSON miễn phí! Nếu bạn có bất kỳ câu hỏi nào, vui lòng để lại nhận xét trong phần bình luận bên dưới.

Bài viết này chứa comments 0

Để 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
1 cổ phiếu
cổ phiếu1
tweet
Enregistrer