Bạn có muốn tạo phần Anh hùng trong Divi cái nào là linh hoạt thay vì đáp ứng truyền thống?
Phần anh hùng của một Website là một trong những ứng cử viên tốt nhất cho thiết kế chất lỏng. Không giống như thiết kế đáp ứng truyền thống điều chỉnh theo các điểm ngắt khác nhau, thiết kế linh hoạt thích ứng liền mạch với chế độ xem của trình duyệt và giữ cho thiết kế nhất quán trên mọi thiết bị. Rốt cuộc, phần Anh hùng là thứ đầu tiên người dùng nhìn thấy trên Website.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo toàn bộ phần anh hùng linh hoạt trong Divi. Chìa khóa để tạo ra thiết kế linh hoạt này là thêm kích thước phông chữ gốc linh hoạt vào từng mô-đun được sử dụng và sau đó kết hợp đơn vị độ dài em (ai là liên quan đến kích thước phông chữ nội dung gốc ) trong cài đặt mô-đun.
Hãy bắt đầu nào!
khảo sát
Dưới đây là một cái nhìn nhanh về thiết kế mà chúng tôi sẽ tạo trong hướng dẫn này.
Lưu ý cách thiết kế linh hoạt thích ứng trơn tru với chiều rộng của cửa sổ trình duyệt.
Tạo một trang mới với Divi Builder
Để bắt đầu, bạn cần thực hiện những việc sau:
Từ bảng điều khiển WordPress, hãy chuyển đến Trang> Thêm mới để tạo một trang mới.
Đặt cho nó một tiêu đề có ý nghĩa đối với bạn và nhấp vào Sử dụng Divi Xây dựng
sau đó bấm Bắt đầu xây dựng (Xây dựng từ đầu)
Sau đó, bạn sẽ có một khung trống để bắt đầu thiết kế Divi.
Đọc cũng: Divi: Cách tạo phần Anh hùng với mô-đun Tiêu đề toàn băng thông
Cách thiết kế phần anh hùng linh hoạt trong Divi
Cài đặt phần
Để bắt đầu, hãy cập nhật cài đặt thiết kế hiện có cho phần này. Mở cài đặt phần và cập nhật phần sau:
- Dừng Gradient:
- 30%: # ff2000
- 30%: # 121212
- Hướng Gradient: 45deg
Dưới tab Thiết kế, cập nhật phần đệm:
- Đệm: 0px trên, 0px dưới
Tạo một dòng
Tiếp theo, thêm một hàng một cột vào phần.
Cài đặt dòng
Mở cài đặt dòng và cập nhật phần sau trong tab Thiết kế :
- Chiều rộng máng xối: 1
- Chiều rộng: 100%
- Chiều rộng tối đa: 1px
- Chiều cao tối thiểu: 100 vh (Máy tính để bàn), không có (Máy tính bảng và Điện thoại)
- Padding: 0px (Trên và dưới)
Tạo văn bản tiêu đề chạy có đường viền
Bây giờ phần và dòng đã hoàn tất, chúng ta có thể thêm văn bản tiêu đề chảy vào phần Anh hùng. Chúng tôi cũng sẽ thêm một đường viền linh hoạt vào mô-đun Văn bản để tạo thành phần thiết kế sáng tạo.
Thêm mô-đun Văn bản
Để tạo văn bản tiêu đề và đường viền, hãy thêm mô-đun Văn bản mới vào cột.
Cài đặt văn bản
Dưới tab Nội dung, Cập nhật nó nội dung của phần thân với mã HTML sau:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
Để làm cho các phần tử thiết kế trở nên linh hoạt, trước tiên chúng ta cần thêm kích thước phông chữ gốc linh hoạt vào mô-đun bằng cách sử dụng hàm CSS Clamp ().
Dưới tab Nâng cao, dán đoạn CSS sau:
font-size: clamp(32px, 4.1vw, 70px);
Dưới tab Thiết kế, cập nhật cài đặt thiết kế văn bản tiêu đề sau:
- Tiêu đề văn bản:
- Loại: H1
- Phông chữ: Montserrat
- Trọng lượng phông chữ: Nặng
- Màu: #ffffff
- Kích thước: 1em
- Khoảng cách chữ: 0,1em
- Chiều cao dòng: 1,2 em
Cũng cập nhật phần đệm mod như sau:
- Padding: 1st (Top, Bottom, Left and Right)
Để tạo thiết kế đường viền linh hoạt, hãy cập nhật những điều sau:
- Chiều rộng đường viền: 1em
- Màu viền: #ffffff
- Màu đường viền dưới cùng: rõ ràng
- Màu viền trái: rõ ràng
Tạo đường viền trọng âm
Để tạo đường viền dấu, chúng ta có thể sao chép mô-đun Văn bản hiện có.
Xóa đi nội dung của phần thân hiện có và cập nhật các thông số thiết kế như sau:
- Chiều rộng tối đa: 6,5cm
- Chiều cao: 3,25 em
- Chiều rộng đường viền: 0,5em
- Màu viền: # ff2000
Để định vị đường viền trọng âm, hãy thêm một vị trí tuyệt đối với độ lệch bằng chiều rộng của đường viền trong mô-đun Văn bản tiêu đề (1em).
Dưới tab Nâng cao, cập nhật các tùy chọn Vị trí sau:
- Chức vụ: Tuyệt đối
- Vị trí: trên cùng bên phải
- Khoảng cách dọc: 1em
- Khoảng cách ngang: 1em
Tạo văn bản phụ đề
Bên dưới văn bản tiêu đề, chúng tôi sẽ thêm văn bản phụ đề. Vì văn bản này nhỏ hơn, chúng tôi sẽ thêm kích thước phông chữ gốc linh hoạt nhỏ hơn.
Thêm một mô-đun Văn bản mới
Để tạo văn bản phụ đề, hãy thêm mô-đun Văn bản mới bên dưới mô-đun Văn bản tiêu đề hiện có.
Bạn có thể thêm một số câu văn bản điền như sau:
- Nội dung: Vestibulum ac diam sit amet quamosystemula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Thêm kích thước phông chữ gốc linh hoạt
Tiếp theo, chúng ta cần thêm một kích thước phông chữ linh hoạt mới hoạt động tốt hơn cho văn bản nhỏ. Trong tab Nâng cao, dán đoạn CSS sau vào bên dưới phần tử chính:
font-size: clamp(14px, 1.4vw, 24px);
Cài đặt thiết kế văn bản
Dưới tab Thiết kế, cập nhật những điều sau:
- Bản văn :
- Độ đậm phông chữ: Bán đậm
- Màu: #ffffff
- Kích thước: 1em
- Chiều cao: 1,6 em
Sau đó cập nhật kích thước và khoảng cách như sau:
- Chiều rộng tối đa: 19cm
- Lề: 2 em (Dưới), tự động (Trái), 5 em (Phải)
Tạo nút chất lỏng
Để tạo nút linh hoạt, hãy thêm mô-đun Nút mới bên dưới mô-đun Văn bản phụ đề.
Tiếp theo, cập nhật văn bản nút để đọc "7 ngày miễn phí Tral".
Thêm kích thước phông chữ gốc linh hoạt
Tiếp theo, chúng ta cần thêm một kích thước phông chữ linh hoạt mới phù hợp cho một nút.
Dưới tab Nâng cao, dán đoạn CSS sau vào bên dưới phần tử chính:
font-size: clamp(20px, 2.35vw, 40px);
Cài đặt thiết kế nút
Dưới tab Thiết kế, cập nhật những điều sau:
- Căn chỉnh nút: Phải
- Sử dụng kích thước tùy chỉnh cho nút: CÓ
- Màu văn bản nút: # ff2000
- Dừng Gradient:
- Màu 1 25%: rõ ràng
- Màu 2 25%: #ffffff
- Hướng Gradient: 45 độ
- Cái nút :
- Chiều rộng đường viền: 0 pixel
- Bán kính đường viền: 0 pixel
- Phông chữ: Montserrat
- Trọng lượng phông chữ: dày
- Phong cách: in nghiêng
- Hiển thị biểu tượng nút: CÓ
- Biểu tượng: mũi tên hình tam giác ở bên phải (xem ảnh chụp màn hình)
- Vị trí biểu tượng: Phải
- Biên: 8em (Phải)
- Lớp đệm: 0,2em (Trên và dưới), 1,5em (Trái), 1em (Phải)
Tạo hình ảnh cho phần Anh hùng
Với tất cả nội dung của phần Anh hùng cho đúng kích thước của trang, chúng ta sẵn sàng thêm hình ảnh phần Anh hùng ở bên trái. Để thực hiện việc này, trước tiên hãy thêm mô-đun Hình ảnh bên dưới nút.
Mở cài đặt hình ảnh và tải lên hình ảnh.
Cài đặt thiết kế hình ảnh
Dưới tab Thiết kế, cập nhật các cài đặt sau:
- Căn chỉnh hình ảnh: trái (Máy tính để bàn và Máy tính bảng), chính giữa (Điện thoại)
- Chiều rộng tối đa: 48% (Máy tính để bàn và máy tính bảng), 70% (Điện thoại)
- Phần đệm: 4% (Trái)
Cuối cùng, cung cấp cho hình ảnh một vị trí tuyệt đối với một độ lệch bằng cách sử dụng đơn vị độ dài vmin như sau:
- Vị trí: Tuyệt đối (Máy tính để bàn và Máy tính bảng), Tương đối (Điện thoại)
- Vị trí: trên cùng bên trái (Máy tính để bàn và Máy tính bảng)
- Độ lệch dọc: 30vmin (Máy tính để bàn và Máy tính bảng), 0px (Điện thoại)
Kết quả cuối cùng
Đây là kết quả cuối cùng trên một trang trực tiếp.
Xem thêm: Divi: Cách sử dụng Mặt nạ và Mẫu nền cho Phần anh hùng
Đây là cách thiết kế linh hoạt thích ứng trơn tru với chiều rộng của cửa sổ trình duyệt.
Tải DIVI ngay bây giờ !!!
Kết luận
Thêm thiết kế linh hoạt vào phần Anh hùng có thể là một cách tiện dụng để đảm bảo rằng phần trên cùng của màn hình đầu tiên nhất quán đẹp mắt trên tất cả các kích thước trình duyệt, mà không cần phải cập nhật thiết kế tại các điểm dừng cụ thể hoặc để sử dụng các truy vấn phương tiện.
Hy vọng rằng kỹ thuật này sẽ bổ sung một kỹ năng thiết kế hữu ích khác cho các dự án trong tương lai.
Chúng tôi cũng hy vọng rằ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.
...
