Bạn có thể đã duyệt qua các blog cung cấp bố cục có văn bản lật. Nói chung thiết kế này được sử dụng trên các blog loại tạp chí và nó là một hiệu ứng khá thú vị mà người ta có thể thêm vào Divi. Trong hướng dẫn này, tôi khuyên bạn nên khám phá cách thêm văn bản đảo ngược trong bố cục của bạn trên Divi.
Phải nói rằng với Divi, bạn có thể xoay bất kỳ phần tử nào trên trang của mình bằng cách sử dụng các tùy chọn chuyển đổi được tích hợp trong bản cập nhật 3.2. Vì vậy, chúng ta sẽ thiết kế một bố cục gồm ba phần kết hợp các ví dụ về văn bản được xoay.
Tổng quan về kết quả cuối cùng
Sử dụng gói có sẵn
Để đạt được bố cục này, bạn phải tải xuống dự án được lưu trong tệp ZIP. Khi bạn đã tải xuống, tất cả những gì bạn cần làm là nhập nó vào Divi Builder. Bạn có thể tải xuống tệp này trực tiếp bằng cách nhấp vào liên kết Tải xuống sau đây.
Téléchager
Cách thêm văn bản xoay vào Divi
Để bắt đầu, chúng tôi sẽ tạo một tiêu đề với văn bản dọc. Để làm điều này, chúng tôi sẽ xoay một mô-đun blurb bằng cách sử dụng các tùy chọn chuyển đổi. Bạn phải tạo một phần thông thường với một hàng gồm hai cột.
Trước khi thêm mô-đun, bạn phải loại bỏ lề trong và dưới của phần bằng cách cập nhật cài đặt phần đệm bên trong như sau: rdập nổi tùy chỉnh: 0px ở trên cùng, 0px ở phía dưới.
Sau đó, bạn cũng phải thay đổi các tham số của dòng:
- Hình nền: [thêm hình ảnh bạn chọn rộng ít nhất 1920 pixel]
- Màu nền của cột 1: #121212
- Độ rộng tùy chỉnh: 100%
- Chiều rộng máng xối: 1
- Cân bằng chiều cao cột: CÓ
- Đệm tùy chỉnh (máy tính để bàn): 0px ở trên cùng, 0px ở phía dưới
- Đệm tùy chỉnh (máy tính bảng): 40% ở bên phải
- Đệm tùy chỉnh (điện thoại): 30% ở bên phải
- Cột 1 Đệm tùy chỉnh (máy tính để bàn): 200px ở trên cùng, 200px ở dưới cùng
- Cột 1 Đệm tùy chỉnh (máy tính bảng): 150px ở trên cùng, 150px ở dưới cùng
- Bóng của hộp: như trong ảnh chụp màn hình
- Vị trí ngang của Bóng của hộp: 0px
- Vị trí bóng hộp dọc: -100px
- Màu bóng: #f6454e
Thêm mô-đun tóm tắt (Blurb)
Bước tiếp theo bây giờ là thêm một mô-đun cho tiêu đề. Để thực hiện việc này, hãy thêm một mô-đun tóm tắt vào cột bên trái trên cùng một hàng.
Cập nhật mô-đun như sau:
- Tiêu đề: THIẾT KẾ BLOG
- Nội dung: Bạn có thể viết bất cứ điều gì.
- Sử dụng biểu tượng: CÓ
- Biểu tượng: trái tim
- Màu biểu tượng: # f6454e
- Kích thước phông chữ biểu tượng: 32px
- Định hướng của văn bản: trung tâm
- Cấp Tiêu đề: H1 (vì nó là tiêu đề chính của trang)
- Phông chữ: Muli
- Tiêu đề Kiểu chữ: TT
- Màu tiêu đề văn bản: #ffffff
- Kích thước tiêu đề văn bản: 70px (máy tính để bàn), 50px (máy tính bảng), 36px (điện thoại)
- Màu văn bản cơ thể: #cccccc
- Khoảng cách các chữ cái của cơ thể: 4px
- Chiều rộng: 500px
- Sắp xếp mô-đun: trung tâm
Lưu ý rằng vì chúng ta sẽ xoay mô-đun trình bày sao cho thẳng đứng, chiều rộng tùy chỉnh của 500 px sẽ tương ứng với chiều cao của mô-đun trình bày dọc. Do đó điều quan trọng là nội dung phù hợp với mô-đun này. Trong ví dụ này, chúng tôi sử dụng một lượng nhỏ văn bản và thay đổi kích thước phông chữ tiêu đề trên các thiết bị khác nhau để văn bản không bao bọc và không làm phiền thiết kế.
Cách xoay mô-đun
Để xoay mô-đun tóm tắt (và tất cả nội dung), cập nhật các tùy chọn chuyển đổi như sau:
- Chuyển đổi xoay trục X: -90deg
Bạn sẽ cần nhập giá trị -90deg theo cách thủ công. Điều này sẽ giúp bạn căn chỉnh nội dung theo chiều dọc từ dưới lên trên.
Thêm một nút dọc
Bây giờ chúng ta sẽ thêm một nút ở cuối tiêu đề để nhắc người dùng cuộn trang xuống. Sau đó, chúng tôi có thể xoay nút bằng cách sử dụng các tùy chọn chuyển đổi, giống như chúng tôi đã làm cho mô-đun tóm tắt.
Tạo một hàng mới với cấu trúc một cột.
Trước khi thêm mô-đun nút của chúng tôi, hãy cập nhật cài đặt hàng như sau:
- Màu nền: #f6454e
- Độ rộng tùy chỉnh: 100%
- Chiều rộng máng xối: 1
Sau đó, thêm một mô-đun nút vào dòng và cập nhật các tùy chọn nút sau:
- Sắp xếp các nút: trung tâm
- Sử dụng kiểu tùy chỉnh cho Nút: Có
- Kích thước văn bản nút: 16px
- Màu văn bản nút: #ffffff
- Chiều rộng của đường viền nút: 0px
- Không gian của các chữ cái của các nút: 9 pixel
- Trọng lượng phông chữ: ánh sáng
- Kiểu chữ: TT
- Biểu tượng nút: mũi tên phải
Xoay và định vị nút
Để xoay và định vị nút, chúng tôi sẽ sử dụng kết hợp các lề và chuyển đổi xoay như sau:
- Lề tùy chỉnh (Máy tính để bàn): -50px ở trên cùng, 50px ở dưới cùng, -50px ở bên trái
- Lề tùy chỉnh (máy tính bảng): 0px ở bên trái
- Chuyển đổi xoay trục X: 90deg
Lần này, núm xoay được xoay 90 độ để hiển thị văn bản theo chiều dọc từ trên xuống dưới. Điều này có vẻ ổn vì chúng tôi muốn người dùng cuộn xuống.
