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.

Ví dụ thiết kế thiết kế divi

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

Phần tham số diviThê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:

Thêm phần cột képMà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

Thông số dòng Divi

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

Cài đặt hàng divi cột 1Màu nền 2

Điều tương tự cho cột thứ hai.

  • Màu nền của cột 2: #000000

Nền cột 2

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ó

Cấu hình thiết kế định cỡ dòng Divikhoả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

Định cấu hình phần đệm dòng divitrư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;

Cài đặt css phần tử chính

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ô-đun hình ảnh dòng diviThê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

Cài đặt nền hình ảnh mô-đun DiviThê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

Cấu hình nền hình ảnh mô-đun Divi

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

Cấu hình chiều rộng khoảng cách mô-đun hình ảnhkhoả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)

Cấu hình lề mô-đun hình ảnh

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%

Cài đặt hoạt ảnh mô-đun hình ảnh Divi

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 mô-đun DiviCà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

Cấu hình kiểu nút Divi

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

Cài đặt giãn cách mô-đun nút Divi

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)

Cài đặt bóng mô-đun nút Divi

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ấu hình mô-đun văn bản Divi

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)

Divi điều chỉnh mô-đun tham số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)

Cấu hình của lề mô-đun văn bản divi

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%

Văn bản mô-đun hoạt hình Conifgurer divi

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ó

Hiển thị dấu phân tách diviMà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

Tab kiểu mô-đun phân tách DiviHoạ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%

Hoạt ảnh phân tách mô-đun Divi

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.

Thêm một mô-đun văn bản divi

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

Văn bản mô-đun điều khiển văn bản divikhoả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)

Cài đặt giãn cách mô-đun văn bản DiviHoạ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%

Aniamtion cài đặt mô-đun văn bản Divicuố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!