Tạo các bài đăng blog có giá trị cần nhiều thời gian và công sức. Cùng với việc tìm các chủ đề tốt nhất để viết trong thị trường ngách của bạn, điều quan trọng là giữ cho người đọc tương tác và cho phép họ nhanh chóng tìm thấy thông tin họ đang tìm kiếm.
Bây giờ, một cách tốt để tiếp cận loại trải nghiệm người dùng này là chia sẻ một hộp tóm tắt trực quan ở cuối bài đăng trên blog của bạn, ngay trước những suy nghĩ cuối cùng.
Với các khối bố cục mới của Divi, giờ đây bạn có thể dễ dàng tạo một hộp tóm tắt với các tùy chọn được tích hợp sẵn của Divi. Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn quy trình và bạn cũng sẽ có thể tải xuống tệp JSON bố cục miễn phí!
Hãy bắt đầu tái tạo!
Sử dụng mẫu xuất bản cho gói chủ đề thứ sáu
Tải xuống Gói xây dựng chủ đề thứ sáu
Hộp tóm tắt mà chúng tôi sẽ tạo lại trong suốt hướng dẫn này hoàn toàn phù hợp với mẫu bài đăng Gói xây dựng chủ đề thứ sáu tự do. Truy cậpbài viết trên blog và tải xuống toàn bộ gói.
Chuyển đến Trình tạo chủ đề Divi
Sau đó đi đến Trình tạo chủ đề Divi.
Tải mẫu xuất bản
Nhấp vào biểu tượng ở góc trên bên phải và tải xuống mẫu bài đăng từ Gói Xây dựng Chủ đề. Đảm bảo chỉnh sửa mọi thay đổi đối với trình tạo chủ đề sau đó.
Mở một ấn phẩm Gutenberg hiện có hoặc tạo một ấn phẩm mới
Bây giờ, khi bạn đã thêm mẫu bài đăng tương ứng, đã đến lúc tạo hộp tóm tắt. Mở hoặc tạo một bài đăng mới bằng Gutenberg.
Thêm một bản tóm tắt của tiêu đề H2
Đến cuối bài viết trên blog, chúng tôi sẽ thêm một tiêu đề H2 mới.
Thêm một khối Divi mới trực tuyến
Tiếp theo chúng ta sẽ thêm một khối bố cục Divi mới.
Tạo một bố cục mới bên trong khối Divi
Khi bạn đã thêm khối, bạn sẽ có hai tùy chọn. Chọn để tạo một bố cục mới.
Cài đặt phần
Màu nền
Bên trong trình chỉnh sửa khối bố cục Divi, bạn sẽ thấy một phần. Mở phần này và sử dụng nền trắng cho nó.
- Màu nền: #FFFFFF
khoảng cách
Chuyển sang tab thiết kế phần và thêm các giá trị lề và phần đệm tùy chỉnh.
- Lề trên: 100px
- Lề trái: -10% (văn phòng), 0% (máy tính bảng và điện thoại)
- Lề phải: -10% (văn phòng), 0% (máy tính bảng và điện thoại)
- Phần đệm trên: 0px
- Đệm dưới: 0px
biên giới
Cũng thêm một bán kính đường viền.
- Dưới cùng bên trái: 16px
- Dưới cùng bên phải: 16px
Hộp bóng
Với một cái bóng tinh tế của hộp.
- Sức mạnh bóng mờ của hộp: 60px
- Lực truyền bóng hộp: 10px
- Màu bóng: rgba (0,0,0,0,08)
Thêm một dòng mới
Cấu trúc cột
Tiếp tục thêm một dòng mới vào phần bằng cấu trúc cột sau:
kích thước
Nếu chưa thêm mô-đun, hãy mở cài đặt hàng và để hàng chiếm toàn bộ chiều rộng của vùng chứa phần.
- Sử dụng chiều rộng máng tùy chỉnh: Có
- Chiều rộng máng xối: 1
- Cân bằng chiều cao cột: Có
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
khoảng cách
Sau đó loại bỏ phần đệm trên và dưới mặc định khỏi dòng.
- Phần đệm trên: 0px
- Đệm dưới: 0px
Cài đặt cột 1
Màu nền
Sau đó mở cài đặt trong cột 1 và sử dụng màu nền trắng cho việc này.
- Màu nền: #FFFFFF
khoảng cách
Cũng thêm giá trị điền tùy chỉnh.
- Phần đệm trên: 70px
- Đệm dưới: 70px
- Đệm trái: 70 px
- Đệm bên phải: 70px
Hộp bóng
Tiếp tục bằng cách thêm một bóng hộp tinh tế với một màu bóng di chuột và mặc định khác.
- Sức mạnh bóng mờ của hộp: 50px
- Màu bóng mặc định: rgba (0,0,0,0)
- Màu bóng di chuột: rgba (0,0,0,0,15)
Thang đo chuyển đổi Hover
Khi di chuột, chúng tôi cũng muốn mở rộng cột một chút.
- Phải: 105%
- Thấp: 105%
Chỉ số Hover Z
Hoàn thành các tham số cột bằng cách thêm chỉ số di chuột z.
- Chỉ số di chuột Z: 11
Thêm mô-đun văn bản # 1 vào cột
Thêm một số vào khu vực nội dung
Đã đến lúc thêm mô-đun, bắt đầu bằng mô-đun văn bản đầu tiên. Thêm số vào ô nội dung.
Nền Gradient
Sau đó thêm một nền gradient.
- Màu 1: # ff5e92
- Màu 2: # ffd4b6
- Hướng dốc: 165deg
Cài đặt văn bản
Chuyển đến tab thiết kế mô-đun và thay đổi cài đặt văn bản như sau:
- Phông chữ: Poppin
- Màu văn bản: #ffffff
- Kích thước văn bản: 26px
- Sắp xếp văn bản: trung tâm
kích thước
Sau đó chỉ định chiều rộng và chiều cao.
- Chiều rộng: 150px
- Chiều cao: 150px
biên giới
Cũng thêm một bán kính đường viền.
- Dưới cùng bên trái, trên cùng bên phải và dưới cùng bên phải: 100 pixel
Phần tử chính CSS
Để căn giữa văn bản trong vùng chứa của chúng tôi, chúng tôi sẽ cần thêm một vài dòng mã CSS vào phần tử mô-đun chính trong tab nâng cao.
display: flex;align-items: center;justify-content: center;
Chức vụ
Và chúng tôi sẽ kết thúc các tham số mô-đun bằng cách định vị lại mô-đun.
- Vị trí: tuyệt đối
- Vị trí: trên cùng bên trái
Thêm mô-đun văn bản # 2 vào cột
Thêm nội dung H3
Hãy chuyển sang mô-đun văn bản tiếp theo. Điền thêm nội dung H3 tùy bạn chọn.
Cài đặt văn bản H3
Sau đó sửa đổi kích thước của văn bản H3 của mô-đun.
- Tiêu đề 3 Kích thước văn bản: 23px
khoảng cách
Đồng thời thay đổi cài đặt khoảng cách.
- Lề trên: 100px
- Lề dưới: 20px
Thêm một mô-đun tách vào cột
tầm nhìn
Mô-đun tiếp theo chúng ta cần là một mô-đun tách. Đảm bảo rằng tùy chọn “Hiển thị dấu phân cách” được bật.
- Hiển thị dấu phân cách: Có
Cài đặt dòng
Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt hàng như sau:
- Màu đường kẻ: # ff5e92
- Kiểu dáng: chắc chắn
- Vị trí đường: cao
kích thước
Cũng sửa đổi kích thước của mô-đun.
- Trọng lượng bộ chia: 2px
- Chiều rộng: 20%
Thêm mô-đun văn bản # 3 vào cột
Thêm nội dung
Hãy chuyển sang mô-đun văn bản tiếp theo và cuối cùng. Điền thêm nội dung de Votere choix.
Cột nhân bản
Khi bạn đã hoàn thành cột và tất cả các mô-đun của nó, bạn có thể sao chép toàn bộ cột.
Thay đổi màu bóng của hộp mặc định
Mở cài đặt trong cột 2 và thay đổi màu bóng mặc định.
- Màu bóng: rgba (0,0,0,0,06)
Thay đổi nền gradient của mô-đun văn bản n ° 1
Mở mô-đun văn bản đầu tiên trong 2 cột tiếp theo và thay đổi nền gradient.
- Màu 1: # 7e5ce6
- Màu 2: # 25b8ee
Thay đổi đường viền của mô-đun văn bản n ° 1
Cũng thay đổi cài đặt viền mô-đun.
- Trên cùng bên trái, dưới cùng bên trái và dưới cùng bên phải: 100 pixel
Thay đổi vị trí của mô-đun văn bản # 1
Và định vị lại mô-đun trong tab nâng cao.
- Vị trí: trên cùng bên phải
Thay đổi màu của dải phân cách
Tiếp tục bằng cách mở cài đặt cho mô-đun tách. Thay đổi màu của đường để phù hợp với bảng màu mới.
- Màu đường kẻ: # 7e5ce6
Thay đổi tất cả nội dung
Cuối cùng, sửa đổi toàn bộ nội dung của mô-đun trong cột 2.
Nhân bản toàn bộ phần hai lần
Khi bạn đã hoàn thành phần đầu tiên, bạn có thể sao chép nó hai lần.
Thay đổi khoảng cách của phần trùng lặp đầu tiên
Mở cài đặt trong phần trùng lặp đầu tiên và thay đổi giá trị lề cho phù hợp:
- Lề trái: -5% (máy tính để bàn), 0% (máy tính bảng và điện thoại)
- Lề phải: -5% (văn phòng), 0% (máy tính bảng và điện thoại)
Thay đổi khoảng cách của phần trùng lặp thứ hai
Đồng thời mở trùng lặp thứ hai, xóa tất cả các giá trị lề và thay vào đó là một lề thấp hơn.
- Lề dưới: 100px
Thay đổi tất cả nội dung
Cuối cùng, sửa đổi toàn bộ nội dung của mô-đun.
Lưu bố cục trong thư viện Divi để sử dụng lại
Nếu bạn định sử dụng hộp tóm tắt này trong các bài đăng trên blog khác, hãy nhớ lưu nó vào thư viện Divi để bạn có thể truy cập dễ dàng! Đó là nó !
khảo sát
Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem xét lần cuối cùng xem nó trông như thế nào trên các kích thước màn hình khác nhau.
cuối cùng suy nghĩ
Trong bài viết này, chúng tôi đã chỉ cho bạn cách thêm hộp tóm tắt vào bài đăng Gutenberg của bạn với các khối bố cục mới của Divi. Hộp tóm tắt là một cách trực quan tuyệt vời để giúp bạn khách để tìm thông tin mà họ đang tìm kiếm.
Bạn cũng có thể tải xuống tệp JSON bố cục miễn phí! Nếu có bất kỳ thắc mắc nào, đừng ngại để lại ý kiến trong phần bình luận bên dưới.
