Divi: Cách bao gồm nút cuộn xuống trong mô-đun Fullwidth Header

Bạn có muốn thêm vào mô-đun Tiêu đề toàn băng thông của mình không Divi nút cuộn xuống?

Mô-đun Tiêu đề đầy đủ độ rộng của Divi bao gồm một nút cho người dùng biết họ có thể cuộn xuống. Khi họ nhấp vào nó, họ sẽ tự động được chuyển hướng đến phần tiếp theo. Đó là một nút đơn giản với nhiều biểu tượng để lựa chọn, màu sắc và kích thước của nó hoàn toàn có thể tùy chỉnh. 

Trong bài viết này, chúng ta sẽ xem cách tùy chỉnh nó và xem bốn nút cuộn xuống mà bạn có thể đưa vào mô-đun Fullwidth Header của mình. Chúng tôi cũng sẽ xem cách tùy chỉnh nó bằng CSS để có nhiều tùy chọn thiết kế hơn.

Hãy bắt đầu nào!

Tổng quan về các nút cuộn xuống

Đầu tiên, hãy xem các thiết kế mà chúng tôi sẽ tạo ra trong bài viết này.

ví dụ 1

Ví dụ 2

Tải DIVI ngay bây giờ !!!

Ví dụ 3

Ví dụ 4

Tải DIVI ngay bây giờ !!!

Các nút cuộn xuống Thiết kế tiêu đề chiều rộng đầy đủ

Đầu tiên, chúng ta sẽ tạo thiết kế tiêu đề có chiều rộng đầy đủ. Tôi đang xây dựng nó từ đầu bằng cách sử dụng các thiết kế từ gói bố cục trị liệu miễn phí có sẵn trong Divi . Tạo một trang mới và thêm một mô-đun tiêu đề toàn băng thông đến một phần có chiều rộng đầy đủ mới.

Xem thêm: Divi: Cách tạo sơ đồ tổ chức với mô-đun Blurb

Bộ chia phần có chiều rộng đầy đủ

Chúng tôi sẽ thêm một dải phân cách cho tiêu đề có chiều rộng đầy đủ này. Mở cài đặt của phần chiều rộng đầy đủ .

Sau đó cuộn xuống divider . Bấm vào tab đáy và chọn kiểu phân cách thứ 8. Đặt màu thành #e5e8f0 và nhập 10vw cho chiều cao. Đóng phần cài đặt.

• Bộ chia: Thấp
• Phong cách: phong cách thứ 8
• Màu: # e5e8f0
• Chiều cao: 10vw

Văn bản tiêu đề

Tiếp theo, mở mô-đun Tiêu đề toàn chiều rộng và thêm tiêu đề, phụ đề và văn bản nút của bạn. Xóa văn bản giả cho nội dung của cơ thể và để trống.

• Title: Bắt đầu hành trình của bạn để cảm thấy tốt hơn ngay hôm nay.
• Phụ đề: Leslie Saindon, Bác sĩ trị liệu được cấp phép
• Nút #1: Đặt lịch hẹn
• bodysuit: không có

Hình ảnh tiêu đề

Di chuyển đến Hình ảnh và chọn một hình ảnh tiêu đề. Tôi chọn một hình ảnh được cung cấp với Gói bố cục trị liệu.

Nền tiêu đề

Di chuyển đến Tiểu sử. Xóa màu nền và chọn tab Nền Gradient.

• Dừng Gradient:
  • 25%: # 2e5b61
  • 100%: RGBA (46, 91, 97, 0,5)

Kích hoạt Đặt gradient phía trên hình nền .

• Hình nền vuông phía trên Gradient: CÓ

Hình nền của tiêu đề có chiều rộng đầy đủ

Sau đó, chọnTab Hình nền và chọn một hình ảnh toàn màn hình. Tôi đang sử dụng một hình ảnh khác từ Gói Bố cục Trị liệu.

• Vị trí hình nền: Trung tâm trên cùng

Bố cục tiêu đề có chiều rộng đầy đủ

Sau đó, chọntab thiết kế và kích hoạt Đặt toàn màn hình .

• Đặt chế độ toàn màn hình: CÓ

Biểu tượng cuộn xuống tiêu đề có chiều rộng đầy đủ

Sau đó kích hoạt Hiển thị nút cuộn xuống. Chúng tôi sẽ tạo kiểu cho nút này trong các ví dụ của chúng tôi, vì vậy chúng tôi sẽ để nó ở cài đặt mặc định ngay bây giờ.

• Hiển thị nút cuộn xuống: CÓ

Hình ảnh tiêu đề

Sau đó cuộn xuống Hình ảnh và thay đổi các góc tròn trên cùng bên trái thành 200px cho máy tính để bàn. Đặt phần còn lại của các góc tròn thành 0px. Thay đổi góc tròn thành 100 pixel cho máy tính bảng và điện thoại.

• Hình ảnh góc bo tròn:
  • Máy tính để bàn: 200px trên cùng bên trái, 0px tất cả những thứ khác
  • Máy tính bảng và Điện thoại: 100px trên cùng bên trái, 0px tất cả những thứ khác

Văn bản tiêu đề tiêu đề

Sau đó cuộn xuống Tiêu đề văn bản. Sử dụng H1 cho cấp tiêu đề. Chọn Cormorant Garamond cho phông chữ tiêu đề, đặt độ đậm thành Bold và màu # e1ecea.

• Tiêu đề:
  • Cấp độ tiêu đề: H1
  • Phông chữ: Cormorant Garamond
  • Độ đậm phông chữ: Bold
  • Màu văn bản: # e1ecea

Sau đó đặt kích thước cho cả ba kích thước màn hình. Sử dụng 90 pixel cho máy tính để bàn, 40 pixel cho máy tính bảng và 24 pixel cho điện thoại. Thay đổi chiều cao dòng thành 1.1em.

• Kích thước văn bản tiêu đề: 90px, 40px, 24px
• Chiều cao dòng tiêu đề: 1,1 em

Văn bản phụ đề tiêu đề toàn chiều rộng

Sau đó cuộn xuống Văn bản phụ đề. Thay đổi phông chữ thành Inter, độ đậm thành đậm và màu thành #e1ecea.

• Phụ đề :
  • Phông chữ: Inter
  • Độ đậm phông chữ: Bold
  • Màu văn bản: # e1ecea

Đặt kích thước ở 22px cho máy tính để bàn, 20px cho máy tính bảng và 16px cho điện thoại. Thay đổi nó chiều cao hàng ở mức 1,6 em.

• Kích thước văn bản phụ đề: 22px, 20px, 16px
• Chiều cao dòng phụ đề: 1,6 em

nút tiêu đề

Cuộn xuống Cài đặt Nút một và kích hoạt Sử dụng kiểu tùy chỉnh cho nút một . Thay đổi kích thước thành 14px, màu văn bản thành # 2e5b61 và màu nền thành # e1ecea.

• 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: # 2e5b61
  • Nền: # e1ecea

Thay đổi chiều rộng của ranh giới ở 0px và bán kính của ranh giới ở 50px. Sử dụng Inter cho phông chữ và thay đổi độ đậm nhạt thành nửa đậm.

• Nút Một:
  • Chiều rộng đường viền: 0px
  • Bán kính đường viền: 50px
  • Phông chữ: Inter
  • Trọng lượng: In đậm

vì đệm nút , sử dụng 20px cho Top và Bottom và 40px cho Left và Right.

• Nút Một Padding: 20 px trên và dưới, 40 px trái và phải

Đọc cũng: Divi: Cách tạo phần Anh hùng linh hoạt

Ví dụ về các nút cuộn xuống

Bây giờ chúng ta đã có tiêu đề chiều rộng đầy đủ, hãy xem cách tùy chỉnh các nút cuộn xuống. Chúng ta sẽ xem xét bốn ví dụ với nhiều sự kết hợp khác nhau của các biểu tượng, màu sắc và kích thước.

Các nút cuộn xuống bao gồm ba tham số. Mỗi cài đặt có thể được điều chỉnh độc lập cho từng kích thước màn hình. Các thông số bao gồm:

• Lựa chọn các biểu tượng – chọn từ 11 biểu tượng. Chúng bao gồm các thiết kế mũi tên khác nhau có hoặc không có nền, bao gồm không có hình tròn, hình tròn và hình khối.
• Màu - bộ chọn màu Divi tiêu chuẩn.
• Kích thước – điều chỉnh kích thước Divi tiêu chuẩn.

Nó cũng bao gồm một trường CSS trong tab Nâng cao. 

Chúng tôi sẽ sử dụng tất cả các thông số này.

Xem thêm: Divi: 5 lớp phủ mặt nạ và hoa văn áp dụng cho hình nền

Ví dụ 1

Đối với ví dụ đầu tiên của chúng tôi, chúng tôi sẽ sử dụng một biểu tượng không có hình tròn không có nền. Chọn biểu tượng đầu tiên, thay đổi màu thành #e1ecea và thay đổi kích thước thành 66px cho máy tính để bàn, 60px cho máy tính bảng và 50px cho điện thoại.

• Biểu tượng: Biểu tượng đầu tiên
• Màu: # e1ecea
• Kích thước: 66px (Máy tính để bàn và Máy tính bảng), 50px (Điện thoại)

Điều này tạo ra một mũi tên xuống màu xanh lá cây nhạt hoạt động tốt với phần còn lại của thiết kế và đủ nổi bật để thông báo cho người dùng.

Ví dụ 2

Đối với ví dụ thứ hai, chúng tôi sẽ sử dụng biểu tượng được khoanh tròn. Chọn biểu tượng thứ bảy và đổi màu thành #e8c553. Chúng ta sẽ phóng to biểu tượng cho cái này. Thay đổi kích thước thành 78px cho máy tính để bàn, 70px cho máy tính bảng và 60px cho điện thoại.

• Biểu tượng: Biểu tượng thứ 7
• Màu: # e8c553
• Kích thước: 78px (Máy tính để bàn), 70px (Máy tính bảng), 60px (Điện thoại)

Màu này là một biến thể của màu vàng trong gói bố cục, nhưng nhẹ hơn và hoạt động tốt nhất trên nền xanh lục. Biểu tượng có các góc sắc nét, nhưng hình tròn phù hợp với thiết kế bo tròn của bố cục.

Ví dụ 3

Đối với ví dụ thứ ba của chúng tôi, chúng tôi sẽ sử dụng một biểu tượng có hình tròn xung quanh và nền. Thao tác này tô màu nền và tạo biểu tượng có khẩu độ hiển thị hình nền của Website. 

Để có kết quả tốt nhất, chúng ta cần chú ý đến kích thước biểu tượng và màu nền của nút.

Chọn biểu tượng thứ tám và thay đổi màu của nó thành # 0e4951. Đặt kích thước thành 60px cho máy tính để bàn, 56pc cho máy tính bảng và 50px cho điện thoại.

• Biểu tượng: Biểu tượng thứ 8
• Màu: # 0e4951
• Kích thước: 60px (Máy tính để bàn), 56px (Máy tính bảng), 50px (Điện thoại)

Màu xanh lá cây là một bóng tối của màu xanh lá cây trong nền. Bóng tối hơn nổi bật so với màu xanh lá cây và vẫn phù hợp với phần còn lại của bố cục.

Ví dụ 4

Điều gì sẽ xảy ra nếu bạn muốn kết hợp các màu để bạn có màu nền đằng sau biểu tượng cutout? Chúng ta có thể làm điều này với CSS. 

Đối với ví dụ này, chúng tôi sẽ sử dụng CSS để tạo hình nền đằng sau biểu tượng sẽ hiển thị thông qua biểu tượng cutout. Bản thân biểu tượng sẽ sử dụng các cài đặt tiêu chuẩn.

Chọn biểu tượng thứ mười một và thay đổi màu thành # e1ecea. Chúng tôi sẽ đặt biểu tượng nhỏ hơn cho biểu tượng này và tạo một hình nền lớn. Thay đổi kích thước thành 50px cho máy tính để bàn, 40px cho máy tính bảng và 30px cho điện thoại.

• Biểu tượng: 11^EME
• Màu sắc: #e1ecea
• Kích thước: 50px (Máy tính để bàn), 40px (Máy tính bảng), 30px (Điện thoại)

Sau đó chuyển đến tab Nâng cao và cuộn đến trường Nút cuộn xuống và nhập CSS này:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

Định dạng CSS này thêm phần đệm vào trên cùng, bên phải, dưới cùng và bên trái. Tôi đã sử dụng phần đệm này để tạo hình bầu dục nền phù hợp với thiết kế tiêu đề bằng hướng dẫn thiết kế bố cục.

Kết quả của các ví dụ khác nhau

Ví dụ 1

Ví dụ 2

Tải DIVI ngay bây giờ !!!

Ví dụ 3

Ví dụ 4

Tải DIVI ngay bây giờ !!!

Kết luận

Đây là tổng quan của chúng tôi về bốn nút cuộn xuống mà bạn có thể đưa vào mô-đun Divi Header Fullwidth của mình. Nút cuộn bao gồm một số biểu tượng để bạn lựa chọn và bạn có thể đặt màu sắc và kích thước của nó. 

Bằng cách sử dụng trường CSS, bạn có thể tùy chỉnh thêm nút. Sự kết hợp của các tùy chọn tạo kiểu nút và CSS cung cấp cho bạn nhiều khả năng thiết kế với các nút cuộn xuống của bạn.

Hy vọng điều này sẽ hữu ích cho trang blog tiếp theo của bạn. 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.

...