Bạn có muốn tạo một phần Hero Divi với mô-đun Tiêu đề toàn chiều rộng hoặc tự thiết kế một phần không?
Xây dựng một phần anh hùng của Website từ đầu hoặc sử dụng mô-đun Divi Fullwidth Header là hai cách để tạo thiết kế bắt mắt cho website.
Trong bài viết này, chúng ta sẽ xem xét những ưu và nhược điểm của việc sử dụng mô-đun Fullwidth Header so với việc tạo phần Hero của riêng bạn bằng Divi.
Chúng ta hãy đi!
Tầm quan trọng của các phần chính của trang web
Phần Anh hùng là phần đầu tiên mà bạn khách xem khi nào họ đến trên của bạn Website. Đây thường là biểu ngữ có chiều rộng đầy đủ và cũng có thể được gọi là Tiêu đề anh hùng. Đó là một vị trí nổi bật trên trang web của bạn vì nó có khả năng để lại ấn tượng đầu tiên lâu dài.
Đọc cũng: Divi: Cách hiển thị mô-đun Fullwidth Header trên toàn màn hình
Do đó, điều quan trọng là nó được thiết kế sao cho dễ đọc mà vẫn bắt mắt và hấp dẫn. Các phần Website Hero rất quan trọng vì chúng có thể thu hút sự chú ý của khách hàng tiềm năng, mô tả nhanh chóng một trang và dẫn đến sự tương tác bổ sung cũng như khách hàng tiềm năng. Các phần anh hùng phải được gắn thương hiệu, bao gồm tiêu đề H1 và CTA.
Tạo phần Anh hùng từ đầu
Thiết kế phần Anh hùng từ đầu cho phép bạn có toàn quyền kiểm soát thiết kế và nội dung. Tùy thuộc vào tình huống và nhu cầu của bạn, đây có thể là một giải pháp tuyệt vời cho trang web của bạn.
Chúng ta hãy xem xét những ưu và nhược điểm của cách tiếp cận này.
Lợi ích của phương pháp này
Đầu tiên, chúng ta hãy xem xét những lợi ích của việc xây dựng phần Anh hùng trên trang web từ đầu bằng Divi.
- Kiểm soát toàn bộ thiết kế
- Sử dụng bất kỳ mô-đun Divi nào
Nhược điểm của phương pháp này
Bây giờ chúng ta hãy xem xét những mặt trái của việc tạo một phần anh hùng từ đầu.
- Bạn phải xây dựng từ đầu
- Yêu cầu nhiều mod
Tạo phần Anh hùng bằng mô-đun Tiêu đề Toàn bộ băng thông Divi
Tạo phần anh hùng bằng cách sử dụng mô-đun Divi Fullwidth Header giúp bạn dễ dàng tạo một thiết kế đáp ứng di động, bắt mắt chỉ trong vài phút.
Chúng ta hãy xem xét những ưu và nhược điểm của cách tiếp cận này.
Lợi ích của phương pháp này
Chúng ta hãy xem xét những lợi ích của việc xây dựng phần Anh hùng với mô-đun Tiêu đề toàn băng thông Divi.
- Tất cả của bạn nội dung nằm trong một mô-đun duy nhất
- Thiết kế đã được tối ưu hóa
Nhược điểm của phương pháp này
Bây giờ chúng ta hãy đánh giá những nhược điểm của việc thiết kế phần Hero với mô-đun Divi Fullwidth Header.
- Ít linh hoạt hơn với thiết kế
Mô-đun Tiêu đề toàn băng thông của Divi đi kèm với các tùy chọn cho nội dung được xác định trước, trong khi nhiều nội dung có thể bị giới hạn nếu bạn muốn thêm một phần nội dung không có sẵn trong mô-đun. Điều này có nghĩa là bạn sẽ kém linh hoạt hơn với thiết kế tổng thể.
Từng bước xây dựng hai phần Anh hùng
Bây giờ bạn đã hiểu ưu và nhược điểm của cả hai cách tiếp cận, hãy xây dựng từng phần Anh hùng để bạn có thể thấy chính xác cách hoạt động của mỗi cách tiếp cận.
Tạo một trang mới với Divi Builder
Để bắt đầu, bạn cần thực hiện những việc sau:
- Cài đặt Divi trên trang web WordPress của bạn.
- Thêm một trang và đặt cho nó một tiêu đề.
- Bật trình tạo trực quan
Tạo phần Anh hùng của bạn từ đầu
Bây giờ trang của chúng ta đã được thiết lập, hãy bắt đầu tạo một phần anh hùng từ đầu.
Tải DIVI ngay bây giờ !!!
Kích hoạt "Divi Builder"
Để sử dụng trình tạo kéo và thả của Divi, chúng ta sẽ cần kích hoạt Trình tạo trực quan bằng cách nhấp vào nút “Sử dụng DiviBuilder”. Thao tác này sẽ tải lại trang bằng Trình tạo trực quan Divi.
Chọn: Xây dựng từ đầu
Bây giờ trang của bạn đã được tải lại với trình tạo trực quan được bật, hãy nhấp vào tùy chọn “ XÂY DỰNG TỪ SCRATCH để chúng tôi có một trang trống để làm việc khi thiết kế.
Thêm hàng và định cấu hình cột
Tạo một hàng với cấu trúc cột sau.
Thêm mod
Bây giờ chúng ta hãy thêm các mô-đun nội dung mà chúng ta sẽ cần.
- 2 Mô-đun Văn bản, dải phân cách, một nút ở cột bên trái
- 1 Mô-đun hình ảnh ở cột giữa
- 1 Mô-đun Hình ảnh ở cột bên phải
Phần phong cách
Bây giờ hãy cấu hình cài đặt phần.
Thêm một phần, sau đó định cấu hình các cài đặt sau:
- Nền: # 1d1d25
Kiểu văn bản tiêu đề
Tùy chỉnh văn bản tiêu đề:
- Tiêu đề 1:
- Độ đậm phông chữ: Bán đậm
- Màu văn bản: #ffffff
- Kích thước văn bản: 90px
- Chiều cao dòng: 1,1 em
máy phân ly
Định cấu hình cài đặt dải phân cách:
- Màu dòng: rgba (255,255,255,0.3)
- Trọng lượng dải phân cách: 10px
- Chiều rộng tối đa: 260 pixel
bài kiểm tra cơ thể
Tùy chỉnh văn bản nội dung:
- Màu văn bản: rgba (255,255,255,0.7)
- Kích thước văn bản: 13px
- Chiều cao dòng: 1,8 em
Bouton
Bây giờ chúng ta hãy tùy chỉnh nút.
Trong tab 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: 14px
- Màu văn bản: #ffffff
- Nền nút:
- Chiều rộng đường viền: 0 pixel
- Bán kính đường viền: 0 pixel
Trong tab Khoảng cách:
- Trên và dưới: 40px
- Trái và Phải: 20px
Thêm hình ảnh
Thêm hình ảnh vào mô-đun hình ảnh.
Điều chỉnh cài đặt dòng
Trong các thông số dòng:
- Lề (Trái): 15vw
Điều chỉnh cột thứ 2
Trong cột thứ hai, hãy định cấu hình các cài đặt này:
CSS tùy chỉnh
Dán mã sau vào phần mã của phần tử chính:
argin-right: -15vw!important;
z-index: 100!important;khoảng cách
Thêm 100 pixel của phần đệm trên cùng.
Đây rồi! Bây giờ bạn có một phần Anh hùng tùy chỉnh được thiết kế đầy đủ.
Tải DIVI ngay bây giờ !!!
Tạo phần Anh hùng của bạn với mô-đun Tiêu đề toàn diện rộng của Divi
Bây giờ chúng ta hãy xem cách tạo lại phần Anh hùng này bằng cách sử dụng mô-đun Tiêu đề Toàn diện rộng của Divi.
Tải DIVI ngay bây giờ !!!
Thêm một trang và chọn Build From Scratch
Thêm một trang mới, đặt tiêu đề cho nó, sau đó nhấp vào “Sử dụng Divi Builder” rồi chọn Build From Scratch.
Chèn một phần đầy đủ băng thông và một tiêu đề đầy đủ băng thông
Chèn phần Chiều rộng đầy đủ, sau đó chọn Tiêu đề toàn băng thông trong thư viện mô-đun.
Nội dung
Thêm nội dung văn bản vào mô-đun trong tab Văn bản.
Hình ảnh
Thêm hình ảnh trong tab hình ảnh.
Thay đổi màu nền
Trong tab nền, hãy định cấu hình cài đặt sau:
- Nền: # 1D1D25
Văn bản tiêu đề
Định cấu hình cài đặt văn bản tiêu đề:
- Độ đậm phông chữ tiêu đề: Bold
- Kích thước văn bản: 90px
bài kiểm tra cơ thể
Định cấu hình cài đặt văn bản nội dung:
- Màu văn bản nội dung: rgba (255,255,255,0.55)
Văn bản phụ đề
Định cấu hình cài đặt văn bản phụ đề:
- Độ đậm phông chữ của phụ đề: Bold
- Màu văn bản: # 4C594C
- Khoảng cách giữa các chữ cái: 3px
nút
Bây giờ chúng ta hãy tùy chỉnh hai nút.
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 kiểu tùy chỉnh cho nút một: Có
- Nút một
- Nền: # 4c594c
- Chiều rộng đường viền: 0 pixel
- Bán kính đường viền: 0px
- Hiển thị biểu tượng: CÓ
- Chỉ hiển thị biểu tượng khi di chuột: Không
- Padding: 25 pixel (Top và Bottom); 25px (Trái), 50px (Phải)
Nút hai
Trên tab Nút Hai, hãy đị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Ó
- Chiều rộng hai đường viền của nút: 0 pixel
- Bán kính đường viền: 0px
- Padding: 25px (Trên, Dưới, Trái và Phải)
- Bóng hộp nút: Chọn thứ 4
- Hộp Shadow Ngang Vị trí: 0px
- Box Shadow Vertical Vị trí: 2px
- Màu bóng: #ffffff
Đây rồi! Giờ đây, bạn đã có một phần Anh hùng được thiết kế đầy đủ bằng cách sử dụng mô-đun Tiêu đề Toàn bộ băng thông Divi.
Tải DIVI ngay bây giờ !!!
Kết luận
Xây dựng phần Anh hùng với Divi thật dễ dàng, cho dù bạn đang xây dựng từ đầu hay sử dụng mô-đun Tiêu đề toàn chiều rộng. Cả hai tùy chọn đều cho phép bạn tạo các thiết kế tiêu đề tuyệt đẹp thu hút sự quan tâm của bạn khách.
Tùy thuộc vào nhu cầu riêng của bạn, một trong hai tùy chọn là một lựa chọn tuyệt vời để cân nhắc khi tạo kiểu cho phần Anh hùng của bạn.
Sau khi đọc những ưu và nhược điểm của cả hai, bạn sẽ thiết kế phần Anh hùng của mình như thế nào?
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 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.
...
