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 901.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ó các lời kêu gọi hành động rõ ràng trên các trang của bạn là điều cần thiết đối với hầu hết các trang web. Và còn 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 vào 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 đề tổng thể của bạn bằng Trình tạo chủ đề của Divi. Một trong các nút là chính, nút còn lại là phụ. Bạn cũng có thể tải xuống tệp JSON tiêu đề chung 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

Nút Juxaposed divi

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

Sử dụng trình tạo chủ đề

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

Cấu hình đầu

2. Xây dựng một thiết kế tiêu đề tổng thể

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

khoảng cách

Khi vào bên trong trình chỉnh sửa mẫu, 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
Cấu hình không gian Divi

Chỉ số Z

Đồng thời đảm bảo 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
Cấu hình chỉ mục Z

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:

Cấu hình bố cục

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%
Cấu hình thứ nguyên

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)
Cài đặt dòng Divi

Yếu tố chính

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

display: flex;align-items: center;

Xóa thuộc tính màn hình máy tính để bàn trên máy tính bảng và thiết bị 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ấu hình kiểu dòng Divi

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
Cấu hình đường viền cột

Chỉ số Z

Đồng thời tăng chỉ số z của cột.

  • Chỉ số Z: 11
Cài đặt nâng cao cấu hình cột

Cột 2

Yếu tố chính

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

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

Cấu hình kiểu cột 1

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.

Mô-đun menu lựa chọn

Tải logo

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

Cấu hình logo Divi

Bố trí

Chuyển sang 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
Bố cục menu

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
Cấu hình menu Divi

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.

  • Màu nền của menu thả xuống: #ffffff
  • Màu của dòng trong menu thả xuống: # ef6f49
Cấu hình menu thả xuống Divi

biểu tượng

Tiếp theo, thay đổi màu của biểu tượng menu bánh hamburger.

  • Màu biểu tượng menu bánh hamburger: # 000000
Cấu hình biểu tượng menu Divi

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)
Cấu hình thứ nguyên menu Divi

Menu Logo CSS

Và hoàn thành cài đặt mô-đun bằng cách thêm một dòng mã CSS vào biểu trưng menu trong tab nâng cao.

margin-right: 10vw;

Thêm mã css menu divi

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 cách giữa các mục menu:

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

Cột divi mã css tùy chỉnh

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

Thêm một bản sao

Hãy chuyển sang 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.

Sao chép mô-đun nút divi

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

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

Cấu hình liên kết nút

sự liên kết

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

  • Căn chỉnh nút: Phải
Cấu hình căn chỉnh mô-đun nút

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
Cài đặt nút kiểu Divi
  • 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
Tùy chỉnh phông chữ nút divi

khoảng cách

Hoàn thành cài đặt mô-đun bằng cách thêm các giá trị đệm tùy chỉnh trên 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)
Cài đặt không gian nút Divi

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

Khe cắm mô-đun Divi

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

Mở mô-đun các nút trùng lặp và thay đổi URL.

Cấu hình liên kết nút Divi

Thay đổi căn chỉnh

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

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

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

Cũng thay đổi cài đặt nú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)
Tùy chỉnh màu nút

Thang đo chuyển đổi Hover

Hoàn thành cài đặt nút bằng cách thêm hiệu ứng di chuột theo tỷ lệ biến đổi.

  • Phải: 110%
  • Thấp: 110%
Chuyển đổi nút Divi

3. Lưu các thay đổi đối với trình tạo chủ đề và kết quả 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!

Lưu thay đổi
Cấu hình đầu divi

khảo sát

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

Kết quả demo cuối cùng

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 đề tổng thể của bạn bằng trình tạo chủ đề của 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à nút phụ. Việc thêm các nút vào tiêu đề tổng thể 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 mình. Bạn cũng có thể tải xuống tệp JSON miễn phí! Nếu có bất kỳ thắc mắc nào, đừng ngại để lại ý kiến ​​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