Hôm nay tôi sẽ chỉ cho bạn cách thiết kế một thiết kế cho các bài đánh giá sách bắt mắt bằng cách sử dụng Ebook Chỉ có Gói bố cục Divi và các tùy chọn tích hợp Divi. Đó là một cách tuyệt vời để thêm bằng chứng xã hội vào trang đích của bạn, tăng độ tin cậy và chia sẻ các đánh giá ngắn của mọi người một cách tinh tế.
Hãy bắt đầu thiết kế
Tải lên bố cục trang đích của gói sách điện tử
Điều đầu tiên cần làm là tạo một trang mới bằng cách sử dụng bố cục trang đích củaEbook Gói bố cục mà bạn sẽ tìm thấy trong Bố cục có sẵn.
Thêm một phần mới
Cuộn xuống bố cục và thêm một phần mới nơi bạn muốn hiển thị các bài đánh giá sách.
Thêm một dòng mới
Cấu trúc cột
Tiếp tục thêm một hàng mới bằng cấu trúc cột sau:
Nền Gradient Cột 1
Không thêm bất kỳ mô-đun nào nữa, hãy mở cài đặt dòng và thêm nền gradient vào cột đầu tiên.
- Màu 1: #ffffff
- Màu 2: #f4f4f4
- Cột 1 Vị trí bắt đầu: 12%
- Cột 1 Vị trí cuối cùng: 12%
Màu nền 2
Đồng thời thêm màu nền tùy chỉnh vào cột thứ hai.
- Màu nền của cột 2: #9400ff
kích thước
Chuyển sang tab Thiết kế và xóa tất cả không gian tùy chỉnh giữa các cột bằng cách sử dụng cài đặt sau:
- Sử dụng chiều rộng máng tùy chỉnh: Có
- Chiều rộng máng xối: 1
khoảng cách
Chúng tôi cũng đang thay đổi cài đặt giãn cách dòng.
- Lề trên: 100px
- Lề dưới: 100px
- Đệm hàng đầu: 0px
- Đệm dưới: 0px
Thêm mô-đun hình ảnh vào cột 1
Tải lên 1: Ảnh 1
Khi cài đặt hàng của bạn đã sẵn sàng, bạn có thể bắt đầu thêm các mô-đun khác nhau, bắt đầu với một mô-đun hình ảnh trong cột đầu tiên. Tải lên hình ảnh bạn chọn nhưng đảm bảo tỷ lệ khung hình là 1: 1. Điều này có nghĩa là chiều cao và chiều rộng phải có cùng giá trị.
Hình ảnh sắp
Chọn căn chỉnh của hình bên trái trên tab Thiết kế.
- Căn chỉnh hình ảnh: trái
kích thước
Chúng tôi cũng đang thay đổi chiều rộng của mô-đun này cho các kích thước màn hình khác nhau.
- Chiều rộng: 20% (máy tính để bàn và máy tính bảng), 30% (điện thoại)
khoảng cách
Để cho phép chồng chéo ở phía bên trái của dòng, chúng tôi thêm giá trị lề trái âm trong cài đặt Khoảng cách của mô-đun Hình ảnh.
- Lề trái: -30px
biên giới
Để hoàn thành thiết kế của hình ảnh, chúng tôi cũng thêm '50vw' vào mỗi góc trong cài đặt đường viền. Điều này sẽ đảm bảo rằng hình ảnh duy trì hình dạng tròn trên các kích thước màn hình khác nhau.
Thêm mô-đun văn bản # 1 vào cột 1
Thêm biểu tượng ngôi sao vào khu vực nội dung
Hãy chuyển sang mô-đun tiếp theo, đó là mô-đun văn bản xếp hạng. Để làm nổi bật số lượng ngôi sao, chúng ta sẽ sử dụng các ký hiệu. Hãy tiếp tục, sao chép các ký hiệu sau và dán vào hộp nội dung của mô-đun văn bản mới: ★★★★.
Màu nền
Thay đổi phần dưới của mô-đun sau đó.
- Màu nền: # 9400ff
Cài đặt văn bản
Chuyển sang tab Thiết kế và thay đổi cả cài đặt văn bản.
- Phông chữ: Montserrat
- Trọng lượng phông chữ của văn bản: Nặng
- Kích thước văn bản: 45px (máy tính để bàn), 30px (máy tính bảng), 25px (điện thoại)
- Chiều cao của dòng văn bản: 1em
- Sắp xếp văn bản: trung tâm
kích thước
Tiếp tục bằng cách thay đổi độ rộng của mô-đun.
- Chiều rộng: 35%
khoảng cách
Và thêm một khoảng cách tùy chỉnh.
- Lề trái: 50px
- Lề phải: 50px
- Đệm hàng đầu: 20px
- Đệm dưới: 20px
Hộp bóng
Để làm nổi bật hộp đánh giá, chúng ta sẽ thêm một bóng mờ.
- Lực lượng bóng mờ hộp: 50px
- Màu bóng: rgba (0,0,0,0,3)
Biến Dịch
Cuối cùng, chúng tôi sẽ định vị lại mô-đun văn bản bằng cách sử dụng các giá trị chuyển đổi bản dịch tùy chỉnh. Bạn có thể hoãn bước này cho đến khi bạn cũng đã thêm tất cả các mô-đun vào cột của mình.
- Phải: 360px (máy tính để bàn), -84px (máy tính bảng), -70px (điện thoại)
- Dưới cùng: -113px (máy tính để bàn), 190px (máy tính bảng), 141px (điện thoại)
Thêm mô-đun văn bản # 2 vào cột 1
Thêm nội dung
Mô-đun tiếp theo chúng ta cần trong cột 1 là một mô-đun văn bản khác. Thêm nội dung theo lựa chọn của bạn và liên kết tới người đánh giá và cuốn sách.
Cài đặt văn bản
Chuyển sang tab Thiết kế và thay đổi cài đặt văn bản cho phù hợp:
- Phông chữ: Montserrat
- Kích thước văn bản: 18px
Cài đặt liên kết văn bản
Thay đổi màu sắc của văn bản liên kết quá.
- Màu văn bản liên kết: #9400ff
khoảng cách
Sau đó, chuyển đến cài đặt giãn cách và định vị lại phần tử bằng cách sử dụng các giá trị lề tùy chỉnh.
- Lề trên: -100px (máy tính để bàn), 0px (máy tính bảng và điện thoại)
- Lề trái: 200px (máy tính để bàn), 50px (máy tính bảng), 20px (điện thoại)
- Lề phải: 50px (máy tính bảng), 20px (điện thoại)
Thêm mô-đun văn bản # 3 vào cột 1
Thêm nội dung H3
Hãy chuyển sang mô-đun tiếp theo, đó là mô-đun văn bản chứa tiêu đề của phiên bản H3.
Cài đặt văn bản H3
Chuyển sang tab Thiết kế và thay đổi cài đặt văn bản H3.
- Phông chữ 3: Montserrat
- Tiêu đề 3 Trọng lượng phông chữ: đậm
- Tiêu đề 3 Màu văn bản: #000000
khoảng cách
Ngoài ra, thêm một lề tùy chỉnh.
- Lề trên: 80px (máy tính để bàn), 50px (máy tính bảng và điện thoại)
- Lề trái: 50px (máy tính để bàn và máy tính bảng), 20px (điện thoại)
- Lề phải: 50px (máy tính để bàn và máy tính bảng), 20px (điện thoại)
Thêm mô-đun văn bản 4 vào cột 1
Thêm nội dung
Hãy chuyển sang mô-đun tiếp theo và cuối cùng mà chúng ta cần trong cột 1, đây là một mô-đun văn bản khác có sửa đổi thực tế.
khoảng cách
Đi tới cài đặt giãn cách của mô-đun này và áp dụng các cài đặt sau:
- Lề trên: 20px
- Lề dưới: 50px
- Lề trái: 50px (máy tính để bàn và máy tính bảng), 20px (điện thoại)
- Lề phải: 50px (máy tính để bàn và máy tính bảng), 20px (điện thoại)
Thêm mô-đun hình ảnh vào cột 2
Thay đổi cài đặt CSS của cột 2
Chúng ta sẽ sử dụng các thuộc tính flex để căn chỉnh hình ảnh vào trung tâm:
hiển thị: flex;
Tải ảnh bìa sách xuống
Trong cột thứ hai, chúng ta sẽ cần hai mô-đun, bắt đầu bằng một mô-đun hình ảnh với bìa sách. Đối với hướng dẫn này, chúng tôi đang sử dụng bìa sách được cung cấp cùng với sách tổng quan về Divi, nhưng bạn cũng có thể thêm bìa sách của riêng mình.
kích thước
Chuyển đến tab Thiết kế của mô-đun Hình ảnh và thay đổi chiều rộng.
- Chiều rộng: 79% (máy tính để bàn), 40% (máy tính bảng và điện thoại)
Yếu tố chính cao cấp
Ở đây chúng tôi sẽ cố gắng căn chỉnh hình ảnh ở trung tâm.
- align-self: trung tâm;
Sao chép thiết kế nhiều lần như bạn muốn
Khi bạn đã tạo bài đánh giá sách đầu tiên, bạn có thể sao chép toàn bộ dòng bao nhiêu lần tùy ý, tùy thuộc vào số lượng đánh giá bạn muốn xem trên trang đích của mình.
cuối cùng suy nghĩ
Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách thiết kế các bài đánh giá sách tuyệt vời cho các trang xuất bản sách điện tử tiếp theo của bạn. Điều này giúp bạn thêm bằng chứng xã hội vào trang của mình và thuyết phục khách độ tin cậy của cuốn sách của bạn. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy nhớ để lại nhận xét trong phần bình luận bên dưới!
