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 đề chung của bạn bằng Trình tạo nút. chủ đề từ 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 miễn phí tệp JSON tiêu đề chung!
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 đề 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
Chỉ số Z
Ngoài ra, hãy đảm bảo tăng chỉ mục 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 đề chung sẽ xuất hiện ở đầu toàn bộ trang và đăng 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ột, chúng ta sẽ thêm hai dòng mã CSS này vào thành phần 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;
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
Đồng thời 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 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%;
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 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
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.
- 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
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
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)
Trình đơn biểu trưng 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ộ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>
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.
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 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à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 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)
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 các nút trùng lặp và thay đổi URL.
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
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)
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%
3. Lưu các thay đổi đối với trình tạo chủ đề và kết quả xem trước
Sau khi tiêu đề chung của bạn hoàn tất, hãy lưu tất cả các thay đổi được thực hiện đối với trình tạo chủ đề và xem kết quả trên Website!
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.
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ụ. Thêm các nút vào tiêu đề tổng thể của bạn sẽ giúp bạn làm nổi bật một số CTA quan trọng nhất trong Website. 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.
