Bạn có muốn biết cách tạo phần Anh hùng bằng mô-đun Tiêu đề toàn diện rộng của Divi không?
Xây dựng phần Anh hùng là một cách tuyệt vời để thu hút sự chú ý đến nội dung quan trọng đối với trang của bạn. Đây là một nội dung kích thước lớn mà bạn có thể sử dụng để kể câu chuyện của mình, chia sẻ thông tin về công việc của bạn hoặc làm nổi bật một sản phẩm hoặc dịch vụ.
Với mô-đun Tiêu đề Toàn diện của Divi, bạn có thể thêm tiêu đề, phụ đề, hai nút, văn bản nội dung, hình ảnh biểu trưng và hình ảnh tiêu đề. Tất nhiên, bạn cũng có thể sử dụng các tùy chọn nền để thêm và kết hợp hình ảnh, độ dốc, màu sắc, mẫu và mặt nạ.
Bạn có thể thay đổi tất cả các cài đặt này trong cài đặt mô-đun thay vì phải chuyển đổi giữa nhiều mô-đun hình ảnh, văn bản và nút.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo phần Anh hùng hấp dẫn và bắt mắt bằng cách sử dụng mô-đun Fullwidth Header của Divi.
Đi nào !
khảo sát
Đây là bản xem trước về những gì chúng tôi sẽ thiết kế.
Những gì bạn cần để bắt đầu
Trước khi bắt đầu, hãy đảm bảo bạn có phiên bản Divi mới nhất trên Website.
Bây giờ bạn đã sẵn sàng để bắt đầu!
Cách tạo phần anh hùng với mô-đun tiêu đề toàn băng thông của Divi
Đọc cũng: Divi: Cách sử dụng "Gradient Builder" để làm đẹp hình ảnh của bạn
Tạo một trang mới với bố cục được xác định trước
Hãy bắt đầu bằng cách sử dụng một bố cục được xác định trước từ thư viện Divi. Đối với thiết kế này, chúng tôi sẽ sử dụng trang chủ gói bố trí bác sĩ thú y.
Từ bảng điều khiển Worpress, hãy thêm một trang mới vào Website
Đặt cho nó một tiêu đề, sau đó chọn tùy chọn Sử dụng Divi Builder.
Chúng tôi sẽ sử dụng một bố cục được xác định trước từ thư viện Divi cho ví dụ này. Vì vậy, hãy chọn Duyệt qua các bố cục.
Tìm và chọn bố cục người nuôi chó.
Sélectionnez Sử dụng bố cục này để thêm bố cục vào trang của bạn.
Bây giờ chúng tôi đã sẵn sàng để thiết kế.
Thêm mô-đun Tiêu đề đầy đủ độ rộng
Chúng tôi sẽ tạo lại phần anh hùng bằng cách sử dụng mô-đun Fullwidth Header. Thêm một phần có chiều rộng đầy đủ mới vào trang, bên dưới tiêu đề hiện có.
Thêm mô-đun Tiêu đề đầy đủ độ rộng vào phần.
Tiếp theo, xóa phần tiêu đề ban đầu.
Tùy chỉnh mô-đun Tiêu đề đầy đủ băng thông
Thêm nội dung
Mở cài đặt mô-đun và thêm nội dung bên cạnh mô-đun:
- Chức danh: Bác sĩ thú y
- Phụ đề: Divivet. Phục vụ những người bạn tốt nhất của chúng tôi
- Nút # 1: Tất cả các dịch vụ
- Nút # 2: Đặt lịch hẹn
- Toàn thân: Praesent sapien massa, bìm bìm bịp, vdestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id illdiet et, porttitor tại sem. Cras ultricies ligula sed magna dictum porta.
Tiếp theo, thêm một hình ảnh tiêu đề.
Cài đặt nền Gradient
Chuyển đến cài đặt nền. Xóa màu nền ban đầu, sau đó thêm một gradient nền.
- 0%: rgba (255,170,205,0.48)
- 40%: rgba (110,66,255,0.24)
- 87%: rgba (124,239,255,0.71)
- Loại Gradient: Hình elip
- Vị trí Gradient: Phải
Sau đó chọn tab Mặt nạ nền và thêm một mặt nạ nền.
- Mặt nạ nền: Corner Blob
- Màu mặt nạ: #FFFFFF
- Chuyển đổi: dọc
Tùy chỉnh văn bản
Chuyển tab mới Thiết kế và thay đổi cài đặt tiêu đề
- Phông chữ tiêu đề: Nunito
- Độ đậm phông chữ tiêu đề: Cực đậm
- Kiểu phông chữ: TT (Chữ hoa)
- Màu văn bản tiêu đề: # a9cb6b
- Kích thước văn bản: 14px
- Khoảng cách chữ cái tiêu đề: 2px
Đi đến phần của Bài kiểm tra cơ thể và tùy chỉnh phông chữ.
- Màu văn bản: # 000000
- Kích thước văn bản nội dung:
- Máy tính để bàn: 18px
- Điện thoại: 14px
- Chiều cao đường cơ thể: 1.8em
Xem thêm: Divi: Cách tùy chỉnh giỏ hàng và các biểu tượng tìm kiếm của mô-đun "Fullwidth Menu"
Tiếp theo, mở cài đặt phụ đề và tùy chỉnh phông chữ.
- Phông chữ phụ đề: Nunito
- Độ đậm phông chữ của phụ đề: Bold
- Màu văn bản: # 000000
Cuối cùng, thay đổi kích thước của văn bản
- Kích thước văn bản phụ đề:
- Máy tính để bàn: 56px
- Có thể di chuyển: 32px
- Chiều cao dòng phụ đề: 1.2em
Tùy chỉnh nút # 1
Tiếp theo, chúng tôi sẽ tùy chỉnh các kiểu nút. Bắt đầu bằng cách bật các kiểu tùy chỉnh cho nút một, sau đó điều chỉnh kích thước văn bản.
- Sử dụng kiểu tùy chỉnh cho nút: CÓ
- Kích thước văn bản nút một: 14px
Thêm một gradient nền vào nút. Các giá trị gradient như sau:
- 58%: # 316EFF
- 100%: # 1D2B60
- Hướng Gradient: 90deg
Tiếp theo, tùy chỉnh cài đặt đường viền và cài đặt phông chữ.
- Nút Một:
- Chiều rộng đường viền: 0px
- Bán kính đường viền: 80px
- Khoảng cách chữ: 2px
- Phông chữ: Nunito
- Độ đậm phông chữ: Cực đậm
- Kiểu: TT (Viết hoa)
- Hiển thị một biểu tượng nút: KHÔNG
Tiếp theo, tùy chỉnh cài đặt lề và đệm cho thiết kế màn hình nền và thêm bóng hộp.
- Nút Một Lề
- Trên cùng: 200px
- Dưới cùng: 0px
- Nút một đệm:
- Trên cùng: 16px
- Dưới cùng: 16px
- Còn lại: 2em
- Đúng: 50em
- Box Shadow: Xem Chụp
Sử dụng cài đặt đáp ứng để đặt các giá trị lề và giá trị đệm khác nhau trên thiết bị di động.
- Nút Một Lề-Trên cùng-Di động: 25px
- Nút One Padding-Right-Mobile: 10em
Tùy chỉnh nút # 2
Đầu tiên, nhấp chuột phải vào nút số 1 và nhấp vào Sao chép nút một kiểu.
Tiếp theo, nhấp chuột phải vào nút hai và dán các kiểu từ nút số 1.
Bây giờ chúng ta có thể tùy chỉnh nút hai. Thay đổi màu văn bản.
- Nút hai màu văn bản: # 121F60
Tùy chỉnh gradient nền cho nút hai.
- 30%: rgba (0,229,198,0)
- 100%: # 00e5c6
Sử dụng cài đặt đáp ứng để điều chỉnh độ dốc nền cho thiết bị di động.
- 0%: rgba (0,229,198,0)
- 100%: # 00e5c6
Tiếp theo, điều chỉnh lề và phần đệm cho thiết kế máy tính để bàn.
- Nút Hai Lề:
- Lên trên: 0px
- Dưới cùng: 0px
- Còn lại: 30%
- Nút hai đệm:
- Trên cùng: 16px
- Dưới cùng: 16px
- Còn lại: 48em
- Đúng: 2em
Sử dụng cài đặt responseifq để đặt các giá trị lề và giá trị đệm khác nhau cho thiết kế di động.
- Nút Hai Lề-Trái-Di động: 5%
- Nút hai đệm:
- Di động trái: 35%
- Di động phải: 5%
CSS tùy chỉnh
Cuối cùng, phần lớn công việc thiết kế đã hoàn thành. Bây giờ chúng ta cần thêm CSS tùy chỉnh để hoàn thành thiết kế. Chuyển tab mới Nâng cao và mở phần Tùy chỉnh CSS.
Đầu tiên, hãy bắt đầu với CSS cho hình ảnh tiêu đề. CSS này cho phép hình ảnh tiêu đề hiển thị phía trên nút.
z-index: 1;
position:relative;
Tiếp theo, CSS tùy chỉnh trong tiêu đề. Chúng tôi sẽ đặt các giá trị khác nhau cho chế độ xem trên máy tính để bàn và thiết bị di động bằng cách sử dụng cài đặt đáp ứng.
Đối với máy tính để bàn:
padding-top:50px;
padding-bottom:30px;
Đối với điện thoại di động:
padding-top:5px;
padding-bottom:10px;
Cuối cùng, thêm CSS sau vào nút một và nút hai.
white-space: nowrap;
Kết quả cuối cùng
Đây là thiết kế cuối cùng cho phần anh hùng tiêu đề có chiều rộng đầy đủ của chúng tôi.
Đọc cũng: Divi: Cách tạo phần thành viên trong nhóm dưới dạng băng chuyền
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Mô-đun Tiêu đề toàn băng thông cho phép bạn dễ dàng tạo phần Hero đẹp mắt để quảng cáo dịch vụ của mình và nói với bạn khách bạn đang nói về cái gì vậy Website.
Cài đặt tích hợp giúp bạn dễ dàng tùy chỉnh mọi khía cạnh của tiêu đề và tất cả đều ở cùng một nơi, vì vậy không cần phải chuyển đổi giữa nhiều mô-đun để xây dựng phần Anh hùng của bạn.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi 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 thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách 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.
...
