Bạn có muốn tùy chỉnh mô-đun Tiêu đề toàn băng thông của Divi bằng cách cân bằng các nút chính và phụ không?
Mô-đun Divi Tiêu đề đầy đủ băng thông giúp bạn dễ dàng thêm các phần Anh hùng đẹp mắt vào Website. Mô-đun này đi kèm với hai nút, văn bản tiêu đề, văn bản phụ đề, văn bản nội dung, logo và hình ảnh khiến cho các tùy chọn tùy chỉnh trở nên vô tận.
Trong bài viết hôm nay, chúng tôi sẽ chỉ cho bạn cách tạo lại Phần anh hùng bằng cách sử dụng Tiêu đề toàn chiều rộng của Divi. Chúng tôi sẽ bắt đầu thiết kế của mình bằng cách sử dụng 3 gói bố cục được tạo sẵn và thiết kế các phần của chúng tôi với trọng tâm là cân bằng nút chính và nút phụ.
Chúng tôi muốn nút chính nổi bật vì đó là lời kêu gọi hành động chính của chúng tôi trong khi vẫn giữ cho nút phụ hiển thị và có thể truy cập được mà không vượt qua nút chính.
Nguyên tắc thiết kế nút chính và nút phụ
Các nút chính và nút phụ giúp hướng dẫn khách của bạn Website đối với một số cổ phiếu nhất định. Các nút chính thường là tác vụ phổ biến nhất hoặc được mong muốn và các nút phụ là tác vụ ít phổ biến hơn. Điều này giúp hướng dẫn các khách đến nơi họ muốn đến.
Để làm được điều này, các nút chính phải nổi bật một cách trực quan và các nút phụ không được quá nổi bật. Điều này có nghĩa là các nút chính phải đặc biệt hơn và có trọng lượng trực quan hơn để thu hút nhiều sự chú ý hơn.
Bây giờ chúng ta đã hiểu cách hoạt động của các nút chính và nút phụ, hãy đến với phần hướng dẫn!
khảo sát
Đây là cái nhìn về ba tiêu đề có chiều rộng đầy đủ mà chúng ta sẽ thiết kế ngày hôm nay.
Hãy bắt đầu bằng cách tạo một trang mới với Divi Builder
Từ bảng điều khiển WordPress, hãy chuyển đến Trang> Thêm mới để tạo một trang mới.
Đặt cho nó một tiêu đề có ý nghĩa đối với bạn và nhấp vào Sử dụng Divi Builder
sau đó bấm Bắt đầu xây dựng (Xây dựng từ đầu)
Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.
Đọc cũng: Divi: Cách sử dụng Mặt nạ và Mẫu nền cho Phần anh hùng
Thiết kế của ví dụ đầu tiên
Bây giờ trang của chúng ta đã được thiết lập, hãy bắt đầu với tiêu đề có chiều rộng đầy đủ của trang đích UX.
Định cấu hình trang của chúng tôi
Trước khi có thể bắt đầu tùy chỉnh, chúng tôi sẽ cần tải gói bố cục được xác định trước UX từ thư viện Divi. Khi bạn kích hoạt Visual Builder, bạn sẽ thấy ba tùy chọn bật lên, hãy chọn Duyệt qua các bố cục.
Tải gói bố cục
Để tải gói bố cục UX trên trang của bạn:
- Trong tab “Bố cục tạo sẵn”, sử dụng chức năng tìm kiếm để tìm gói bố cục UX.
- Khi bạn tìm thấy nó, hãy nhấp vào nó. Điều này sẽ hiển thị chi tiết bố cục và các trang có sẵn.
- Bấm vào Landingvà bấm “Sử dụng bố cục này”.
Chúng tôi sẽ tạo lại phần trên cùng của bố cục dưới dạng mô-đun Tiêu đề toàn băng thông.
Xóa phần đầu tiên
Vì chúng tôi sẽ tạo lại phần đầu tiên bằng cách sử dụng mô-đun Fullwidth Header thay vào đó, chúng tôi sẽ cần xóa phần này. Di chuột qua phần này và nhấp vào biểu tượng thùng rác.
Thêm một phần chiều rộng đầy đủ
Trước khi có thể thêm tiêu đề toàn chiều rộng, chúng ta cần thêm một phần chiều rộng đầy đủ.
Nhấp vào mũi tên "+" để hiển thị các phần Divi sau đó nhấp vào "Chiều rộng đầy đủ". Thao tác này sẽ tự động hiển thị thư viện Mô-đun toàn băng thông Divi.
Thêm tiêu đề toàn chiều rộng
Trong thư viện mô-đun Divi Fullwidth, nhấp vào " Tiêu đề toàn băng thông".
Thêm nội dung
Trước khi bắt đầu tùy chỉnh mô-đun, hãy thêm nó nội dung cần thiết cho mô-đun này.
Thêm nội dung văn bản
Trong tab Văn bản, thêm nội dung tiếp theo :
- Tiêu đề: Cải thiện kiến thức thiết kế UX của bạn
- Phụ đề: Khóa học thiết kế UX
- Nút # 1: Tổng quan về khóa học
- Nút số 2: Tìm hiểu thêm
- Nội dung: mặc định
Thêm hình ảnh
Bây giờ chúng tôi có nội dung văn bản tại chỗ, chúng ta cần thêm hai hình ảnh vào thiết kế của mình.
- Trong tab Hình ảnh, thêm hình ảnh logo (các ngôi sao) và hình ảnh tiêu đề (hình ảnh người đang cầm điện thoại).
Thay đổi màu nền
Trong tab Tiểu sử, định cấu hình tham số này:
- Màu nền: #131517
Tùy chỉnh tiêu đề toàn chiều rộng
Giờ thì nội dung của chúng ta đã được thiết lập, hãy thêm một số kiểu dáng cho nội dung đó thông qua Thiết kế.
Biểu tượng cuộn xuống
Hãy thêm biểu tượng cuộn xuống, mũi tên xuống.
- Hiển thị nút cuộn xuống: CÓ.
- Chọn biểu tượng mũi tên xuống.
- Cuộn xuống Màu biểu tượng: #000
Hình ảnh
Hãy thêm các đường cong vào hình ảnh của chúng ta bằng cách làm tròn các góc.
Trong tab Hình ảnh, định cấu hình các cài đặt sau:
- Hình ảnh được làm tròn góc : Nhấp vào nút liên kết chuỗi để hủy liên kết các góc, sau đó nhập 1000px vào hộp nhập dưới cùng bên trái và dưới cùng bên phải. Thao tác này sẽ làm tròn góc dưới bên trái và góc dưới bên phải của hình ảnh của chúng ta.
Văn bản tiêu đề
Ở đây, hãy tùy chỉnh văn bản tiêu đề của mô-đun này. Trong tab Tiêu đề văn bản, định cấu hình các cài đặt này:
- Tiêu đề:
- Phông chữ: PT Sans
- Độ đậm phông chữ: Bold
- Kích thước văn bản: 5 rem
- Chiều cao dòng: 1,2 em
Phần thân của văn bản
Đây là nơi chúng tôi tùy chỉnh văn bản nội dung cho mô-đun này. Trong tab Bài kiểm tra cơ thể, định cấu hình các cài đặt này:
- Phông chữ cơ thể: Mukta
- Kích thước văn bản nội dung: 18px
Văn bản phụ đề
Đây là nơi chúng tôi tùy chỉnh văn bản phụ đề cho mô-đun này. Trong tab Văn bản phụ đề, định cấu hình các cài đặt này:
- Phụ đề :
- Phông chữ: Mukta
- Độ đậm phông chữ: Bold
- Phong cách: chữ hoa
- Màu văn bản: # 13d678
- Khoảng cách giữa các chữ cái: 3px
nút một
Đây là nơi chúng ta có thể xác định các kiểu tùy chỉnh cho nút một: nút chính. trong tab Nút một, định cấu hình các cài đặt này:
- Sử dụng Kiểu tùy chỉnh cho nút Một: CÓ
- Nút Một:
- Màu văn bản: #ffffff
- Màu nền: # 13d678
- Chiều rộng đường viền: 0 pixel
- Bán kính đường viền: 100px
- Phông chữ: Mukta
- Độ đậm phông chữ: Bold
- Hiển thị biểu tượng một nút: CÓ
- Biểu tượng: Mũi tên phải
- Chỉ Hiển thị Biểu tượng Khi Di chuột cho Nút Một: Không
Nút hai
Bây giờ, hãy tùy chỉnh cái thứ hai: nút phụ. trong tab Nút hai, định cấu hình các cài đặt này:
- Sử dụng kiểu tùy chỉnh cho nút: CÓ
- Nút hai
- Màu văn bản: #ffffff
- Màu nền: #303030
- Chiều rộng đường viền: 0 pixel
- Bán kính đường viền: 100 pixel
- Phông chữ: Mukta
- Độ đậm phông chữ: Bold
- Hiển thị biểu tượng nút hai: Có
- Biểu tượng nút hai: Mũi tên phải
- Chỉ hiển thị biểu tượng trên nút di chuột Hai: CÓ
Thêm liên kết nút
Đừng quên thêm liên kết vào các nút của bạn! Trong tab liên kết, định cấu hình các cài đặt sau:
- URL liên kết nút # 1: Dán URL của nút 1 vào đây.
- URL liên kết nút # 1: Dán URL của nút 2 vào đây.
Lưu công việc của bạn
Bây giờ chúng ta đã có tiêu đề toàn chiều rộng được thiết kế đầy đủ, hãy đảm bảo lưu thiết kế của bạn!
- Nhấp vào mũi tên màu xanh lá cây ở dưới cùng bên phải của cửa sổ mô-đun.
- Lưu
- Thoát VisualBuilder.
Đọc cũng: Divi: Cách tạo phần Anh hùng linh hoạt
Hãy vui vẻ thử nghiệm
Các cách để tùy chỉnh mô-đun Divi Fullwidth Header là vô tận. Việc tận dụng nút chính và nút phụ có thể giúp bạn định hướng khách đến trang bạn muốn họ xem hoặc thực hiện hành động (chẳng hạn như gửi yêu cầu) mà bạn muốn họ thực hiện.
Hãy xem thêm hai ví dụ về tiêu đề có chiều rộng đầy đủ có nút chính nổi bật.
Tiêu đề toàn chiều rộng từ gói "Trung tâm Hưu trí"
Kiểu nút
Chúng ta hãy xem xét các kiểu nút chính và nút phụ độc đáo.
nút một
Trên tab Nút Một, hãy định cấu hình các cài đặt sau:
- Sử dụng các kiểu tùy chỉnh cho nút một: CÓ
- Nút Một:
- Kích thước văn bản: 14px
- Màu văn bản: #ffffff
- Màu nền: # 0a0a0a
- Chiều rộng đường viền: 0 pixel
- Bán kính viền: 10px
- Khoảng cách chữ: 3px
- Độ đậm phông chữ: Bold
- Kiểu phông chữ: TT
- Chỉ hiển thị biểu tượng khi di chuột cho Buttpn One: CÓ
- Đệm một nút: 15px (Trên và Dưới), 25px (Trái và Phải)
Nút hai
Trong tab Nút hai, định cấu hình các cài đặt sau:
- Sử dụng kiểu tùy chỉnh cho nút: CÓ
- Nút Hai:
- Kích thước văn bản: 14px
- Màu văn bản: #ffffff
- Màu nền: # 0a0a0a
- Chiều rộng đường viền: 0 pixel
- Bán kính viền: 10px
- Độ đậm phông chữ: Bold
- Kiểu phông chữ: TT
- Nút Hai Đệm: 10px(Dưới cùng), 10px(Trái và Phải)
Và ở đó bạn đi! Hai nút duy nhất, một nút nổi bật và một nút ở vị trí thứ hai.
Tiêu đề toàn chiều rộng của gói "Lập kế hoạch tài chính"
Kiểu nút
Chúng ta hãy xem xét các kiểu nút chính và nút phụ độc đáo.
nút một
Trong tab Nút một, định cấu hình các cài đặt sau:
- Sử dụng Kiểu tùy chỉnh cho nút Một: CÓ
- Nút Một:
- Kích thước văn bản: 18px
- Màu văn bản: #ffffff
- Màu nền: #1b4ffe
- Đệm: 15px()Trên và Dưới); 25px (Trái và Phải)
Nút hai
Trong tab Nút hai, định cấu hình các cài đặt sau:
- Sử dụng kiểu tùy chỉnh cho nút thứ hai: CÓ
- Nút Hai:
- Màu văn bản: # 1b4ffe
- Màu nền: Rõ ràng
- Màu biểu tượng: # 1b4ffe
Tải DIVI ngay bây giờ !!!
Kết luận
Mô-đun Tiêu đề toàn băng thông của Divi giúp bạn dễ dàng tạo các phần Anh hùng tuyệt đẹp trên Website.
Việc sử dụng chiến lược các nút chính và nút phụ sẽ cải thiện trải nghiệm người dùng của bạn và giúp khách truy cập trang web thực hiện các hành động họ muốn thực hiện.
Các tùy chọn tùy chỉnh là vô tận với tiêu đề có chiều rộng đầy đủ, vì vậy hãy thử nghiệm vui vẻ!
Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần nhiều yếu tố hơn để thực hiện các dự án tạo trang web Internet của mình.
Đừng ngần ngại cũng tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
