Bạn có muốn cải thiện các bài đăng trên blog của mình không? Divi bằng cách thêm phần Anh hùng vào đó?
Các phần Anh hùng toàn màn hình trông tuyệt vời trên bất kỳ trang web nào, nhưng chúng đặc biệt tuyệt vời trên các bài đăng trên blog.
Mặc dù hình ảnh nổi bật ở chế độ toàn màn hình, vẫn có rất nhiều tùy chọn thiết kế để đặt tiêu đề và văn bản meta. Thật dễ dàng để làm với Trình tạo chủ đề Divi .
Trong bài viết này, chúng ta sẽ xem một số cách để thêm phần Hero toàn màn hình vào mẫu bài đăng trên blog của bạn. Divi.
Chúng ta hãy bắt đầu.
khảo sát
Đây là bản xem trước về những gì chúng tôi sẽ thiết kế trong hướng dẫn này.
Đọc cũng: Divi: Cách sử dụng "Gradient Builder" để làm đẹp hình ảnh của bạn
Phần anh hùng với mô-đun phiên bản Post Title Desktop
Phần anh hùng với mô-đun phiên bản di động Post Title
Bố cục phần Hero thay thế với mô-đun phiên bản dành cho máy tính để bàn Post Title
Tải DIVI ngay bây giờ !!!
Bố cục phần Anh hùng thay thế với mô-đun Tiêu đề bài đăng trên thiết bị di động
Phần anh hùng với siêu dữ liệu Phiên bản máy tính để bàn
Phần anh hùng với siêu dữ liệu phiên bản di động
Tải DIVI ngay bây giờ !!!
Các mẫu bài đăng trên blog cho phần anh hùng toàn màn hình của bạn
Bạn có thể tạo mẫu bài đăng trên blog trong Divi Trình tạo Chủ đề từ đầu hoặc tải xuống một mẫu từ blog Chủ đề Thanh lịch. Để tìm thấy chúng, hãy tìm kiếm trên blog “mẫu bài đăng trên blog miễn phí”. Nếu bạn tải xuống một mẫu, hãy nhớ giải nén nó.
Đối với các ví dụ của chúng tôi, chúng tôi sẽ sử dụng Mẫu bài đăng blog miễn phí cho Gói bố cục thiết kế thời trang của Divi . Chúng tôi cũng sử dụng gói bố trí tự do Nhà thiết kế thời trang đầu trang và chân trang .
Tải xuống hoặc tạo mẫu bài đăng trên blog của bạn cho phần Hero toàn màn hình của bạn
Bạn có thể tải xuống mẫu bài đăng trên blog của mình hoặc tạo một mẫu từ đầu. Chúng tôi sẽ tải lên một phần, nhưng quá trình tạo phần Anh hùng toàn màn hình là giống nhau.
Xem thêm: Divi: Cách sử dụng Mặt nạ và Mẫu nền cho Phần anh hùng
Phương pháp 1: Mô-đun Tiêu đề bài viết toàn màn hình
Phương pháp này sẽ sử dụng Mô-đun PostTitle . Đó là một lựa chọn tốt nếu bạn muốn hiển thị tất cả thông tin cùng nhau. Sau khi bạn có mẫu của mình, hãy chọn biểu tượng chỉnh sửa để mở nó.
Mẫu chúng tôi đã tải lên có một phần với hình ảnh nổi bật. Chúng tôi sẽ loại bỏ phần này và thêm một Phần toàn chiều rộng ở vị trí của nó.
Sélectionnez Tiêu đề bài đăng toàn băng thông trong danh sách các mô-đun có chiều rộng đầy đủ.
Tất cả các mục được chọn theo mặc định. Để chúng được kích hoạt. Cuộn đến Vị trí hình ảnh nổi bật và chọn Tiêu đề trên.
- Vị trí hình ảnh nổi bật: Trên tiêu đề
Di chuyển đến Màu nền và đặt màu thành #fff9f2
- Bối cảnh: #fff9f2
Văn bản tiêu đề
Chọn tab Thiết kế. Đối với văn bản tiêu đề, giữ nguyên H1 và chọn Playfair Display. Đặt nó thành Left Justified và chọn màu #34332e.
- Tiêu đề:
- Cấp tiêu đề: H1
- Phông chữ: Playfair Display
- Căn chỉnh văn bản: căn trái
- Màu văn bản: #34332e
Đến cỡ chữ , đặt phiên bản máy tính để bàn thành 65px, phiên bản di động thành 42px và chiều cao hàng thành 1,2em.
- Kích thước văn bản tiêu đề (Máy tính để bàn): 65px (Máy tính để bàn), 42px (Điện thoại)
- Chiều cao dòng tiêu đề: 1,2 em
Meta text
Di chuyển đến Siêu văn bản. Chọn Montserrat cho phông chữ và đặt thành chữ trung bình, chữ hoa, căn phải cho phiên bản máy tính để bàn và căn trái cho phiên bản di động. Chọn màu #7b7975.
- Phông chữ Meta:
- Phông chữ: Montserrat
- Trọng lượng: Trung bình
- Phong cách: TT
- Siêu văn bản:
- Căn chỉnh: phải (Máy tính để bàn), trái (Điện thoại)
- Màu sắc: #7b7975
Đặt cỡ chữ cho phiên bản máy tính để bàn là 14 px, cho phiên bản di động là 10 px, khoảng cách giữa các chữ cái là 1 px và chiều cao của dòng là 1,6 em. Đóng cài đặt của bạn và lưu mẫu của bạn.
- Siêu văn bản:
- Kích thước (Máy tính để bàn): 14px
- Kích thước (Điện thoại): 10px
- Khoảng cách chữ: 1px
- Chiều cao dòng: 1,6 em
Tiêu đề trên hình nền
Nếu bạn quyết định muốn tiêu đề xuất hiện trên hình ảnh nổi bật, hãy sử dụng các cài đặt thiết kế tương tự và quay lại tab Nội dung.
Sélectionnez Tiêu đề/Hình nền Meta vì Vị trí hình ảnh nổi bật.
- Vị trí hình ảnh nổi bật: Tiêu đề/Hình nền meta
Di chuyển đến Tiểu sử và chọn Nền Gradient. Đặt màu bên trái thành #fff9f2, màu bên phải thành rgba(255,255,255,0), hướng thành 90 độ, vị trí bắt đầu thành 30% và chọn có để đặt dải màu phía trên hình nền. Đóng và lưu cài đặt của bạn.
- Dừng Gradient:
- 30%: #fff9f2
- 100%: rgba (255,255,255,0)
- Hướng dốc: 90 độ
- Hình nền vuông phía trên Gradient: CÓ
Phương pháp 2: Phần anh hùng toàn màn hình với siêu dữ liệu
Phương pháp này sẽ sử dụng mô-đun Văn bản với nội dung động về các thông tin. Đây là một lựa chọn tốt nếu bạn muốn hiển thị tất cả các mục ở những nơi khác nhau.
Đầu tiên, tải xuống mẫu và xóa phần đầu tiên. Chúng tôi sẽ tạo lại các mô-đun và cài đặt của chúng ở cột bên trái, nhưng chúng tôi sẽ xem qua chúng để bạn có thể định cấu hình chúng.
Cài đặt phần anh hùng toàn màn hình với siêu dữ liệu
Mở cài đặt của phần và cuộn đến Hình ảnh nền. Lựa chọn Nền Gradient và thay đổi cài đặt như sau:
- Dừng Gradient:
- 30%: #fff9f2
- 100%: rgba (255,255,255,0)
- Hướng Gradient: 90 độ
- Hình nền vuông phía trên Gradient: CÓ
Sélectionnez Hình ảnh nền và chọn tùy chọn Sử dụng nội dung động.
Chọn Hình ảnh nổi bật trong các tùy chọn.
Chọn tab Thiết kếvà cuộn đến Sizing. Thêm 100vh vào chiều cao tối thiểu. Đóng phần cài đặt.
- Chiều cao tối thiểu: 100vh
Cài đặt phần anh hùng toàn màn hình với siêu dữ liệu
Tiếp theo, thêm một hàng cột đôi vào phần.
Thêm một mô-đun văn bản trong cột bên phải.
Cho anh ấy nội dung, chọn Sử dụng nội dung động.
Chọn Tiêu đề Đăng / Lưu trữ trong danh sách các tùy chọn.
- Nội dung động: Tiêu đề bài đăng/Lưu trữ
Đi tới tab Thiết kế.
- Phần mở đầu:
- Văn bản: H1
- Phông chữ: Playfair Display
- Căn chỉnh văn bản: căn trái
- Màu văn bản: #34332e
Đối với kích thước của văn bản , đặt cho phiên bản máy tính để bàn thành 65px, cho phiên bản di động thành 42px và chiều cao hàng thành 1,2em.
- Phần mở đầu:
- Kích thước văn bản: 65px(Máy tính để bàn), 42px(Điện thoại)
- Chiều cao dòng: 1,2 em
Di chuyển đến Khoảng cách và nhập 50% cho phần đệm trên cùng. Đóng Cài đặt.
- Đệm: 50% (Trên cùng)
Bạn cũng có thể đọc bài viết này trên: Cách tạo phần anh hùng với mô-đun tiêu đề toàn băng thông của Divi
Phần anh hùng với danh mục siêu dữ liệu
Thêm một phần mới thường xuyên dưới phần Anh hùng.
Mở cài đặt của nó và đặt màu nền trên #fff9f2. Đóng Cài đặt.
- Màu nền: #fff9f2
Sau đó, thêm một dòng của 4 cột sang phần mới.
Anh hùng toàn màn hình với văn bản danh mục siêu dữ liệu
Thêm một mô-đun văn bản ở cột bên trái.
Mở cài đặt mô-đun và chọn Sử dụng nội dung động cho phần thân của văn bản.
Sélectionnez Danh mục quá khứ trong danh sách.
- Nội dung động: Danh mục bài đăng
Chọn tab Thiết kế và cuộn xuống Tiêu đề văn bản. Chọn H4. Chọn Playfair Display cho phông chữ và đặt thành chữ trung bình, chữ hoa, căn phải cho phiên bản máy tính để bàn và căn trái cho phiên bản điện thoại. Chọn màu #7b7975.
- Phần mở đầu:
- Hiển thị văn bản
- Phông chữ: Playfair Display
- Trọng lượng phông chữ: Trung bình
- Phong cách: TT
- Căn chỉnh văn bản: Căn giữa
- Màu văn bản: # 7b7975
Đặt kích thước phông chữ cho phiên bản máy tính để bàn thành 14 px, cho phiên bản di động thành 10 px, giãn cách chữ thành 1 px và chiều cao dòng thành 1,6 em. Đóng cài đặt của bạn và lưu mẫu của bạn.
- Tiêu đề 4:
- Kích thước (Máy tính để bàn): 14px
- Kích thước (Điện thoại): 10px
- Khoảng cách chữ: 1px
- Chiều cao dòng: 1,6 em
Di chuyển đến Khoảng cách và thêm 0px vào lề dưới. Đóng Cài đặt.
- Lề (Dưới cùng): 0px
Phần Hero toàn màn hình với siêu dữ liệu Meta Text
Tiếp theo, sao chép mô-đun Danh mục và kéo nó sang cột tiếp theo. Mỗi mô-đun Meta có cùng cài đặt. Chúng tôi sẽ trình bày cách tạo mô-đun đầu tiên và sau đó sao chép mô-đun đó hai lần để tạo các mô-đun khác.
Tác giả
Mở cài đặt và xóa nội dung năng động.
Bấm vào Sử dụng nội dung động và lựa chọn Tác giả bài đăng.
- Nội dung động: Tác giả bài viết
trong tab Thiết kế, Thay đổi các cài đặt sau.
- Tiêu đề 4:
- Phông chữ: Montserrat
- Trọng lượng phông chữ: Trung bình
- Phong cách: TT
- Căn chỉnh văn bản (Máy tính để bàn): Căn giữa
- Căn chỉnh văn bản (Điện thoại): Trái
- Màu sắc: #7b7975
các thông số của cỡ chữ bao gồm:
- Kích thước văn bản: 14px (Máy tính để bàn), 10px (Điện thoại)
- Khoảng cách chữ: 1px
- Chiều cao dòng: 1,6 em
La lề dưới phải có 0px.
- Lề (Dưới cùng): 0px
Ngày
bản sao mô-đun Tác giả và kéo nó vào cột tiếp theo.
Xóa đi nội dung năng động hiện tại, chọn Sử dụng nội dung động và chọn Đăng ngày xuất bản. Đóng Cài đặt.
- Nội dung động: Ngày xuất bản bài đăng
ý kiến
Enfin, bản sao mô-đun Post Publish Date và kéo nó vào cột cuối cùng.
Cũng như các mô-đun khác, hãy xóa nội dung động và chọn Sử dụng nội dung động .
Chọn Số lượng bình luận bài đăng từ sự lựa chọn của bạn.
- Nội dung động: Số lượng bình luận bài đăng
Lần này thêm một khoảng trắng và từ Nhận xét trong trường Sau . Đóng chế độ nhỏ sau đó đóng cài đặt. Lưu công việc của bạn.
- Sau: Nhận xét
Đọc cũng: Divi: Cách hiển thị mô-đun Fullwidth Header trên toàn màn hình
Résultats
Phần anh hùng với mô-đun phiên bản Post Title Desktop
Phần anh hùng với mô-đun phiên bản di động Post Title
Bố cục phần Hero thay thế với mô-đun phiên bản dành cho máy tính để bàn Post Title
Bố cục phần Anh hùng thay thế với mô-đun Tiêu đề bài đăng trên thiết bị di động
Phần anh hùng với siêu dữ liệu Phiên bản máy tính để bàn
Phần anh hùng với siêu dữ liệu phiên bản di động
Tải DIVI ngay bây giờ !!!
Kết luận
Đó là tất cả! Đây là cái nhìn của chúng tôi về cách thêm phần Hero toàn màn hình vào mẫu bài đăng trên blog của bạn. Divi.
Mô-đun Divi và Trình tạo chủ đề cung cấp một số tùy chọn để tạo các phần Anh hùng toàn màn hình. Tất cả các phương pháp đều hoạt động rất tốt và tất cả đều có ưu điểm của chúng.
Sử dụng các phương pháp này, bạn có thể thêm phần Anh hùng toàn màn hình vào bất kỳ mẫu bài đăng blog Divi 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.
...
