Bạn có muốn thêm nội dung xem trước vào máy tính bảng có thể cuộn trên Divi không?
Thêm nội dung mở đầu vào Website có thể là một chiến lược tiếp thị hiệu quả. Điều này đặc biệt hiệu quả đối với khuyến khích những thứ như sách điện tử. Bạn cho họ xem trước nội dung để họ muốn xem thêm.
Trong hướng dẫn hôm nay, chúng tôi sẽ chỉ cho bạn cách hiển thị nội dung xem trước video trong một máy tính bảng thả xuống trong Divi.
Để làm điều này, chúng tôi sẽ tận dụng các tùy chọn tích hợp của Divi để biến một cột thành một vùng chứa thả xuống (được thiết kế để trông giống như một máy tính bảng) có thể bao gồm bất kỳ loại nội dung nào bạn muốn.
Bạn có thể sử dụng nó cho khuyến khích các chương đầu tiên của bất kỳ cuốn sách điện tử nào, hiển thị các thiết kế mẫu từ danh mục đầu tư của bạn hoặc bất kỳ loại nội dung nào khác.
Hãy bắt đầu!
khảo sát
Đây là cái nhìn nhanh về máy tính bảng với nội dung có thể cuộn mà chúng tôi sẽ tạo trong hướng dẫn này.
Tạo một trang mới với Divi Builder
Trong bảng điều khiển WordPress, hãy chuyển đến “Trang> Thêm mới”
Đặt một tiêu đề có ý nghĩa đối với bạn, sau đó nhấp vào “Sử dụng DiviBuilder”
sau đó bấm "Bắt đầu xây dựng"
Thiết kế máy tính bảng với nội dung mở đầu có thể cuộn trong Divi
Tạo hộp chứa máy tính bảng thả xuống với cột Divi
Thêm một hàng
Để bắt đầu, hãy tạo một hàng hai cột với một phần thông thường.
Cài đặt cột 1
Màu nền
Mở cài đặt cột 1 và thêm nền trắng vào cột.
- Nền: #ffffff
Biên giới và Lề
Đi tới tab Thiết kế tùy chọn thả xuống Khoảng cách và thay đổi cài đặt như sau:
- Padding (Trên cùng, Dưới cùng, Trái và Phải): 25px (trên, dưới, trái, phải)
Sau đó kéo tùy chọn xuống Biên giới và thay đổi cài đặt cho phù hợp:
- Góc tròn: 20px
- Chiều rộng đường viền: 30px
- Màu viền: # 000000
Hộp bóng
Để tạo chiều sâu cho thiết kế máy tính bảng, hãy kéo tùy chọn xuống Hộp bóng và thêm bóng hộp sau:
- Box Shadow: xem ảnh chụp màn hình
- Hộp Shadow (Ngang và Dọc) Vị trí: 5 px
- Màu bóng: # 555555
Chiều cao và chiều rộng cột tùy chỉnh với CSS
Chìa khóa để làm cho nội dung cột có thể cuộn được là cung cấp cho nó một chiều cao xác định. Điều này sẽ làm cho nội dung tràn chiều cao cột.
Chúng tôi cũng muốn tỷ lệ khung hình của máy tính bảng luôn nhất quán, vì vậy, bạn cũng nên cung cấp cho cột chiều rộng tối đa.
Để cung cấp cho cột một chiều cao và chiều rộng tùy chỉnh, hãy chuyển đến tab Nâng cao và cập nhật những điều sau:
Dưới Tùy chỉnh CSS, thêm CSS sau cho màn hình máy tính để bàn (Phần tử chính):
height:650px;
max-width: 488px;
Sau đó, kích hoạt tab cho màn hình khác và dán CSS tùy chỉnh sau cho màn hình điện thoại của phần tử chính:
max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Tràn dọc: cuộn
Như đã đề cập trước đó, cột hiện có một chiều cao xác định, điều này chắc chắn sẽ làm cho nội dung của cột tràn theo chiều dọc.
Để đảm bảo rằng nội dung tràn có thể được xem bằng cách cuộn xuống cột, hãy đặt tùy chọn hiển thị tràn dọc thành "Cuộn". Để làm điều này, hãy mở rộng tùy chọn Hình ảnh tốt chuyển hướng Nâng cao
- Tràn dọc: Cuộn
Thêm nội dung mở đầu vào cột thả xuống
Tại thời điểm này, cột (hoặc giá) đã sẵn sàng cho nội dung. Bạn có thể sử dụng bất kỳ mô-đun Divi nào trong cột này để tạo nội dung xem trước của mình.
Trong ví dụ này, chúng tôi đang thêm nội dung ebook giả sẽ bao gồm một mô-đun lời quảng cáo (để hiển thị lời gọi hành động ban đầu), một mô-đun Hình ảnh (để hiển thị bìa sách) và một mô-đun bản văn (để hiển thị một số chương của ebook).
Cuộn CTA (Kêu gọi hành động) với nền bìa sách
Mục nội dung mở đầu đầu tiên mà chúng tôi sẽ thêm là một mô-đun lời quảng cáo điều này sẽ đóng vai trò như một lời kêu gọi hành động “Cuộn để xem trước”.
Chúng tôi sẽ sử dụng biểu tượng trình bày, tiêu đề và nền với bìa sách làm hình nền và lớp phủ gradient màu.
Trong cột máy tính bảng, hãy thêm một mô-đun lời quảng cáo.
Cập nhật nội dung như sau:
- Tiêu đề: Cuộn để đọc một đoạn trích
Tùy chọn thả xuống “Hình ảnh & Biểu tượng”
- Sử dụng biểu tượng: Có
- Biểu tượng: xem ảnh chụp màn hình
Sau đó kéo tùy chọn xuống Tiểu sử và thêm một gradient
- Màu bên trái: rbga (0,0,0,0,0.0)
- Màu bên phải: #ffffff
- Vị trí bắt đầu: 20%
- Vị trí cuối cùng: 85%
- Hình nền vuông phía trên Gradient: CÓ
Sau đó thêm hình ảnh bìa sách. Để có kết quả tốt nhất, hãy thêm hình ảnh khoảng 600px x 850px .
Trên tab Thiết kế, cập nhật các kiểu sau cho biểu tượng và tiêu đề:
- Màu biểu tượng: # 000000
- Kích thước phông chữ biểu tượng: 80px (máy tính để bàn và máy tính bảng), 70px (điện thoại)
- Phông chữ tiêu đề: Montserrat
- Căn chỉnh văn bản tiêu đề: căn giữa
- Màu văn bản: # 000000
Sau đó, chúng ta có thể di chuyển biểu tượng và tiêu đề xuống cột bằng cách thêm một lề trên cùng.
Để tăng kích thước và khoảng trống cho vùng ngoại ô, hãy cập nhật thông tin sau:
- Chiều cao: 100%
- Lề: 25px (Dưới cùng)
- Padding: 400px (máy tính để bàn và máy tính bảng), 270px (điện thoại)
Hình ảnh bìa sách
Nội dung đoạn teaser tiếp theo sẽ là hình ảnh bìa sách. Để thêm hình ảnh, chỉ cần thêm mô-đun Hình ảnh bên dưới mô-đun Blurb.
Sau đó, tải lên cùng một hình ảnh được sử dụng cho nền nổi bật.
Nội dung của bản xem trước văn bản
Nội dung đoạn giới thiệu cuối cùng của chúng tôi sẽ là văn bản bao gồm một số chương hư cấu từ ebook của chúng tôi. Để thêm văn bản, hãy thêm một mô-đun Văn bản mới bên dưới hình ảnh trước đó.
Sau đó, dán mã HTML sau vào tab văn bản nội dung:
<h3>Chapitre 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<h3>Chapitre 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Trong tab Thiết kế, cập nhật kiểu đầu đề và khoảng cách như sau (Tiêu đề 3):
- Phông chữ: Montserrat
- Độ đậm phông chữ: Cực đậm
- Căn chỉnh văn bản: Căn giữa
- Chiều cao dòng: 1,3 em
- Phần đệm: 10% (Trên và dưới)
Một vài nét cuối cùng
Cập nhật thông số dòng
Với nội dung đã có, chúng tôi cần thực hiện một số điều chỉnh đối với hàng để làm cho thiết kế phản hồi nhanh hơn. Mở Cài đặt Dòng và cập nhật những điều sau:
- Chiều rộng: 100% (máy tính để bàn), 90% (máy tính bảng và điện thoại)
- Chiều rộng tối đa: 1px (máy tính để bàn), 080px (máy tính bảng và điện thoại)
Thêm nội dung bổ sung vào cột 2
Lúc này, chúng ta có thể thêm nội dung bổ sung vào cột 2 nếu cần. Đối với ví dụ này, chúng tôi đã thêm mô-đun Văn bản và mô-đun Nút và tùy chỉnh chúng tương tự như thiết kế được hiển thị trong gói bố cục sách điện tử của chúng tôi.
Tải xuống DIVI ngay bây giờ !!!
Kết quả cuối cùng
Bây giờ hãy xem kết quả cuối cùng.
Kiểm tra nội dung thả xuống có sẵn bên trong máy tính bảng máy tính xách tay.
Và đây là cách thiết kế xếp chồng lên màn hình máy tính bảng và điện thoại.
Kết luận
Có lẽ điều tốt nhất về thiết kế máy tính bảng cuộn này là tính linh hoạt của nó. Vì máy tính bảng về cơ bản là một cột Divi, bạn có thể sử dụng bất kỳ số lượng mô-đun Divi nào (văn bản, hình ảnh, nút) để thiết kế nội dung bạn muốn giới thiệu.
Hy vọng điều này sẽ giúp bạn vào lần tiếp theo khi bạn cần giới thiệu một số nội dung giới thiệu trên Website.
Nếu bạn muốn biết thêm về Divi, đừng ngần ngại truy cập danh mục của chúng tôi về Hướng dẫn Divi. Bạn cũng có thể tham khảo Cách tạo trang Blog bằng mô-đun Divi Blog
Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, đừng ngại để lại bình luận trong phần bình luận bên dưới.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến 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 khi đó, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
