Hầu hết các trang web đều có phần “Anh hùng”, phần này không cần phải chứng minh nữa. Vai trò của nó không chỉ nổi bật mà còn được chia thành nhiều yếu tố nhằm củng cố lời kêu gọi hành động hiện có. Các phần anh hùng để nội dung phân chia với cấu trúc dễ hiểu rất phổ biến và thường xuyên được sử dụng bởi các loại trang web khác nhau.
Và mặc dù tạo phần anh hùng để nội dung Việc phân chia văn phòng có vẻ đơn giản, bạn không nên luôn tin tưởng vào vẻ bề ngoài. Đây là lúc hướng dẫn này sẽ có ích. Chúng tôi sẽ tạo lại phần anh hùng phân chia trên thiết bị di động có tính tương tác cao, không chỉ trông đẹp mắt trên thiết bị di động mà còn bất kể kích thước màn hình. Chúng tôi cũng kết hợp các hình ảnh động xuất sắc để phù hợp hoàn hảo với phong cách thiết kế năm 2019. Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn để tạo các phần anh hùng trên thiết bị di động của riêng bạn để nội dung tách ra.
Chúng ta hãy đi!
khảo sát
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem những gì bạn sẽ nhận được từ hướng dẫn này.
Thiêt kê giao diện
Thêm một phần mới
khoảng cách
Bắt đầu bằng cách tạo một trang mới hoặc mở một trang hiện có. Thêm một phần thông thường mới vào nó, đi tới cài đặt giãn cách và loại bỏ tất cả các lề đệm trên và dưới mặc định.
- Đệm tốt nhất: 0px
- Đáy đệm: 0px
Thêm một dòng mới
Cấu trúc của cột
Chúng tôi sẽ tiếp tục thêm một dòng mới và sử dụng cấu trúc cột sau:
Màu nền
Không thêm nhiều mô-đun, mở cài đặt dòng và thêm màu nền hoàn toàn đen.
- Màu nền: #000000
Màu nền 1
Ngoài ra, thêm một màu nền đen cho cột đầu tiên.
- Màu nền của cột 1: #000000
Màu nền 2
Điều tương tự cho cột thứ hai.
- Màu nền của cột 2: #000000
kích thước
Sau đó, chuyển đến cài đặt định cỡ và để hàng và cột của nó lấp đầy toàn bộ chiều rộng của màn hình.
- Làm cho dòng này đầy đủ chiều rộng: Có
- 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ó
khoảng cách
Chúng tôi cũng loại bỏ tất cả các lề trên và dưới mặc định của dòng.
- Đệm ở đầu: 0px
- Đáy đệm: 0px
- Upholstery phải: 1vw
trưng bày
Cuối cùng, chúng tôi sẽ đảm bảo hai cột xuất hiện cạnh nhau trên màn hình nhỏ hơn. Để làm điều này, chúng ta sẽ cần thêm một dòng mã CSS vào tab Nâng cao của dòng.
display : flex; |
Thêm mô-đun hình ảnh vào cột 1
Để trống vùng hình ảnh
Bây giờ chúng tôi đang đi tất cả các mô-đun chúng tôi cần! Bạn phải bắt đầu với mô-đun hình ảnh trong cột đầu tiên. Thay vì tải ảnh lên vùng ảnh, chúng ta sẽ tải ảnh lên cài đặt nền trong các bước tiếp theo, vì vậy chúng ta cần xóa ảnh đã thêm theo mặc định. Do đó, chúng ta có thể xem cách định vị hình ảnh và bao nhiêu không gian nó chiếm trong hàng của chúng ta.
Thêm màu nền
Đi tới cài đặt nền của mô-đun Hình ảnh và thêm màu nền. Trong bước tiếp theo, chúng tôi sẽ kết hợp màu nền này và một hình nền bằng cách sử dụng hiệu ứng pha trộn để làm tối hình ảnh.
- Màu nền: #686868
Thêm một hình nền
Thêm một hình ảnh nền của sự lựa chọn của bạn và thay đổi cài đặt nền phù hợp:
- Kích thước ảnh nền: Bìa
- Vị trí của hình nền: trung tâm
- Lặp lại hình nền: Không lặp lại
- Trộn hình nền: nhân
kích thước
Chúng tôi đã sử dụng hai cột có kích thước bằng nhau cho hàng chúng tôi đang làm việc, nhưng kết quả không giống nhau. Chúng tôi sẽ thay đổi kích thước của từng mô-đun được thêm theo cách thủ công để làm cho nó trông giống như chúng tôi đang sử dụng cấu trúc cột khác. Lý do chúng tôi đang làm điều này (thay vì chỉ chọn một cấu trúc cột khác) là để làm cho mọi thứ đáp ứng.
trên màn hình nhỏ hơn. Truy cập các tham số kích thước của mô-đun hình ảnh và thay đổi chiều rộng.
- Chiều rộng: 88%
- Sắp xếp mô-đun: bên trái
khoảng cách
Bây giờ chúng ta cần quyết định kích thước của hình ảnh của chúng ta trong cài đặt giãn cách. Chúng tôi cũng sử dụng đơn vị hiển thị cho các giá trị này để đảm bảo rằng thiết kế của chúng tôi vẫn đáp ứng đầy đủ, bất kể kích thước màn hình.
- Phần đệm trên: 26.3vw (máy tính để bàn), 48vw (máy tính bảng), 72vw (điện thoại)
- Upholstery ở phía dưới: 26.3vw (máy tính để bàn), 48vw (máy tính bảng), 72vw (điện thoại)
Hoạt hình
Cuối cùng, chúng tôi sẽ thêm hoạt ảnh trang chiếu vào mô-đun Hình ảnh. Khi bạn áp dụng hoạt ảnh, bạn sẽ nhận thấy rằng hình ảnh sẽ không bắt đầu xuất hiện cho đến thời điểm nó đi vào cột đầu tiên. Màu nền của cột thứ hai vẫn ở trên cùng của mô-đun hình ảnh khi nó được kéo sang trái.
- Phong cách hoạt hình: Trượt
- Lặp lại hình ảnh động: Một lần
- Hướng hoạt ảnh: trái
- Thời lượng hoạt hình: 1450ms
- Cường độ hoạt hình: 60%
- Hoạt ảnh bắt đầu opacity: 100%
Thêm một mô-đun nút vào cột 1
Thêm một bản sao
Mô-đun tiếp theo chúng ta cần trong cột 1 là mô-đun nút. Nhập một bản sao của sự lựa chọn của bạn.
Cài đặt nút
Sau đó, chuyển đến tab Thiết kế và thay đổi cài đặt nút.
- Sử dụng kiểu tùy chỉnh cho nút: Có
- Kích thước văn bản nút: 1.5vw (máy tính để bàn), 2.5vw (máy tính bảng), 4vw (điện thoại)
- Màu văn bản nút: #ffffff
- Màu nền của nút: #e02b20
- Chiều rộng của đường viền nút: 0px
- Bán kính đường viền của nút: 1px
- Nút Phông chữ: Poppin
- Trọng lượng phông chữ: đậm
khoảng cách
Đồng thời thay đổi các giá trị khoảng cách.
- Lề trên: -3.3vw (máy tính để bàn), -6vw (máy tính bảng), -9.1vw (điện thoại)
- Đệm trái: 8vw
- Upholstery phải: 8vw
Hộp bóng
Và thêm một bóng tinh tế để tạo chiều sâu trên trang.
- Lực lượng bóng mờ hộp: 20px
- Màu bóng: rgba (0,0,0,0.3)
Thêm mô-đun văn bản # 1 vào cột 2
Thêm nội dung H1
Trên cột thứ hai! Mô-đun đầu tiên chúng ta sẽ cần là mô-đun văn bản. Thêm bất kỳ nội dung H1 nào mà bạn chọn.
Cài đặt văn bản H1
Sau đó, chuyển đến tab Thiết kế và thay đổi cài đặt văn bản H1.
- Phông chữ: Poppin
- Màu văn bản tiêu đề: #ffffff
- Kích thước tiêu đề văn bản: 4vw (máy tính để bàn), 5vw (máy tính bảng), 6vw (điện thoại)
khoảng cách
Thay đổi cả các giá trị khoảng cách.
- Lề trên: 12vw
- Lề trái: -20vw
- Lề phải: 17vw (máy tính để bàn), 15vw (máy tính bảng), 1vw (điện thoại)
Hoạt hình
Và thêm một hình ảnh động tinh tế.
- Phong cách hoạt hình: Trượt
- Lặp lại hình ảnh động: Một lần
- Hướng hoạt hình: Xuống
- Thời lượng hoạt hình: 1450ms
- Cường độ hoạt hình: 10%
- Hoạt ảnh bắt đầu opacity: 100%
Thêm một mô-đun phân chia vào cột 2
tầm nhìn
Mô-đun tiếp theo chúng ta cần trong cột thứ hai là mô-đun phân chia. Đả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ải phân cách: Có
Màu
Sau đó, chuyển đến tab Thiết kế và thay đổi màu của dấu phân cách.
- Màu: #e02b20
Hoạt hình
Thêm một hình ảnh động cho các mô-đun phân chia tiếp theo.
- Phong cách hoạt hình: Trượt
- Lặp lại hình ảnh động: Một lần
- Hướng hoạt hình: Phải
- Thời lượng hoạt hình: 1450ms
- Cường độ hoạt hình: 83%
- Hoạt ảnh bắt đầu opacity: 100%
Thêm mô-đun văn bản # 2 vào cột 2
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 thứ hai! Thêm một mô tả của sự lựa chọn của bạn.
Cài đặt văn bản
Sau đó, chuyển đến cài đặt văn bản trong tab Thiết kế và thực hiện một số thay đổi cho phù hợp:
- Phông chữ: Poppin
- Trọng lượng phông chữ của văn bản: Ánh sáng
- Màu văn bản: #919191
- Kích thước văn bản: 0.9vw (máy tính để bàn), 1.8vw (máy tính bảng), 2.2vw (điện thoại)
- Khoảng cách các chữ cái văn bản: 0.1vw
- Chiều cao của dòng văn bản: 2.2em
khoảng cách
Đồng thời thay đổi các giá trị khoảng cách.
- Lề trên: 9vw (máy tính để bàn), 19vw (máy tính bảng), 23vw (điện thoại)
- Lề dưới: 12vw (máy tính để bàn), 19vw (máy tính bảng), 23vw (điện thoại)
- Lề trái: -3vw
- Lề phải: 20vw (máy tính để bàn), 6vw (máy tính bảng), 3vw (điện thoại)
Hoạt hình
Và cuối cùng, thêm một hình ảnh động mờ dần vào mô-đun và bạn đã hoàn tất!
- Phong cách hoạt hình: Fade
- Lặp lại hình ảnh động: Một lần
- Thời lượng hoạt hình: 1400ms
- Độ trễ hoạt ảnh: 1000ms
- Hoạt ảnh bắt đầu opacity: 0%
cuối cùng suy nghĩ
Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách tạo các phần anh hùng nội dung phân tách tuyệt vời với Divi. Các phần anh hùng phân tách nội dung rất phổ biến và thường xuyên được sử dụng trên web, nhưng điều quan trọng là phải đảm bảo rằng chúng rất nhạy. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy để lại bình luận và chia sẻ nó trên phương tiện truyền thông xã hội!