Bỏ qua đến nội dung chính

Cách tạo phần anh hùng hoạt hình trên Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Hầu hết các trang web có một phần "Heros", không còn cần phải chứng minh chính nó. Vai trò của nó không chỉ là nổi bật, mà còn được chia thành nhiều yếu tố củng cố lời kêu gọi hành động tồn tại. Các phần anh hùng nội dung có cấu trúc dễ hiểu rất dễ hiểu và thường được sử dụng bởi các loại trang web khác nhau.

Và trong khi việc tạo các phần anh hùng chia nội dung cho máy tính để bàn có vẻ đơn giản, không phải lúc nào cũng dựa vào ngoại hình. Đây là nơi hướng dẫn này sẽ hữu ích. Chúng tôi sẽ tạo lại một phần anh hùng phân chia di động tương tác cao, nó sẽ không chỉ trông đẹp trên di động, mà bất kể kích thước của màn hình. Chúng tôi cũng kết hợp các hình ảnh động tuyệt vời để phù hợp với phong cách thiết kế 2019 với sự hoàn hảo. Chúng tôi hy vọng hướng dẫn này sẽ khuyến khích bạn tạo các phần của các anh hùng di động có nội dung chia nhỏ.

Chúng ta hãy đi!

khảo sát

Trước khi đi sâu vào hướng dẫn, hãy xem kết quả mà bạn có thể nhận được sau 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, truy cập cài đặt khoảng cách và loại bỏ tất cả các lề đệm trên cùng và dưới cùng theo 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

Tiếp theo, đi đến các tham số kích thướ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 rằng cả 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.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

display: flex;

Thêm một mô-đun hình ảnh vào cột 1

Để trống vùng hình ảnh

Bây giờ chúng tôi sẽ đi đến 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 hình ảnh vào vùng hình ảnh, chúng tôi sẽ tải hình ảnh vào cài đặt nền trong các bước tiếp theo, do đó bạn phải xóa hình ảnh được thêm theo mặc định. Do đó, chúng ta sẽ có thể chơi với cách định vị hình ảnh và chiếm bao nhiêu không gian trong hàng của chúng ta.

Thêm màu nền

Điều hướng đến 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à hình nền bằng cách sử dụng hiệu ứng hợp nhất để 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 của hì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 ảnh nền: nhân lên

kích thước

Chúng tôi đã sử dụng hai cột có kích thước bằng nhau cho dò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ẽ tự thay đổi kích thước của từng mô-đun được thêm vào để tạo ấn tượng rằng chúng tôi đang sử dụng một cấu trúc cột khác nhau. Lý do chúng tôi 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ứ phản hồi

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 phải quyết định kích thước của hình ảnh trong cài đặt khoảng cách. Chúng tôi cũng sử dụng một đơ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 của 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 một hình ảnh động vào mô-đun Hình ảnh. Khi bạn áp dụng hình ảnh động, bạn sẽ nhận thấy rằng hình ảnh sẽ chỉ bắt đầu xuất hiện khi nó 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ó trượt sang trái.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

  • 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: 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 Design 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

Cũng 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ột mô-đun văn bản. Thêm nội dung H1 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 giá trị khoảng cách là tốt.

  • 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 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 Design và thay đổi màu của dải 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.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuấ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: 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ả về sự lựa chọn của bạn.

Cài đặt văn bản

Sau đó, truy cập cài đặt văn bản trên tab Thiết kế và thực hiện một số thay đổi tương ứng:

  • 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

Cũng 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
  • Thời gian hoạt hì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 đẹp mắt của các anh hùng nội dung được chia bằng Divi. Các phần anh hùng chia nội dung rất phổ biến và được sử dụng thường xuyên trên Web, nhưng điều quan trọng là phải đảm bảo rằng chúng có độ phản hồi cao. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy chắc chắn để lại nhận xét và thoải mái chia sẻ nó trên mạng xã hội!

Bài viết này chứa comments 0

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
4 cổ phiếu
cổ phiếu4
tweet
Enregistrer