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

Cách tạo vùng siêu anh hùng bằng văn bản hoạt hình

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 701.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ướng dẫn này, bổ sung cho hướng dẫn mà chúng tôi đã thực hiện vài ngày trước. Chúng tôi thực sự đã chỉ cho bạn cách thêm văn bản cuộn vào một cột trên Divi. Hôm nay chúng tôi sẽ hướng dẫn bạn cách sử dụng kỹ thuật tương tự để thêm vào phần "siêu anh hùng" (biểu thức được sử dụng để mô tả một khu vực rộng lớn của trang web được thiết kế để thu hút sự chú ý và làm nổi bật các yếu tố nhất định) .

Chúng ta hãy bắt đầu.

Thêm bố cục được xác định trước

Để thêm bố cục vào trang của bạn, hãy mở menu cài đặt ở cuối trình tạo Divi và nhấp vào biểu tượng dấu cộng. Trong cửa sổ bật lên Tải lên từ Thư viện, hãy chọn Gói Bố cục Người tuyển dụng. Sau đó bấm để sử dụng bố cục trang chủ.

Mô hình mẫu divi

Xóa nội dung bổ sung với bố cục

Khi bản trình bày đã tải lên trang, hãy triển khai dạng xem wireframe và xóa tất cả nội dung khỏi bản trình bày ngoại trừ tiêu đề có chiều rộng đầy đủ và phần ngay bên dưới nó.

Phần sửa đổi thiết kế divi

Tạo hoạt ảnh văn bản lựa chọn

Như bạn có thể thấy, từ "được thuê" đã được sử dụng như một phần tử thiết kế văn bản lớn trong một mô-đun văn bản ở phần thứ hai. Chúng tôi sẽ biến mô-đun văn bản này thành một phần tử thiết kế loa văn bản đáp ứng. Chìa khóa để làm cho hình chữ nhật văn bản trở nên đáp ứng là đảm bảo dòng và mô-đun văn bản kéo dài toàn bộ chiều rộng của cửa sổ trình duyệt. Chúng tôi có thể làm điều này bằng cách sử dụng 100% chiều rộng. Sau đó, chúng ta có thể sử dụng đơn vị độ dài vw cho kích thước văn bản. Điều này sẽ làm cho văn bản phù hợp với chiều rộng của trình duyệt. Sau đó, chúng tôi sẽ áp dụng các nguyên tắc tương tự mà chúng tôi đã sử dụng trước đây để minh họa ví dụ văn bản cuộn đơn giản của chúng tôi.

Đây là cách để làm điều đó.

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í]

Cập nhật các tham số của dòng

Như đã đề cập trước đó, hàng phải là 100% để thiết kế của lựa chọn văn bản đáp ứng này hoạt động. Điều này cho phép mô-đun văn bản của chúng tôi sử dụng đơn vị chiều dài vw so với chiều rộng của trình duyệt. Vì bố cục được xác định trước của chúng tôi đã có một dòng với 100% chiều rộng, chúng tôi không phải làm gì cả.

Cấu hình chiều rộng mô-đun dòng Divi

Tuy nhiên, chúng ta phải điều chỉnh phần còn lại của cài đặt như sau.

  • Ký quỹ: -24vw xuống
  • Chuyển đổi dịch trục Y: -24vw
  • Tràn ngang: ẩn
  • Tràn dọc: ẩn

Cấu hình cài đặt dòng Divi

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]

Lề âm dưới cùng là loại bỏ khoảng trống âm còn lại mỗi khi chúng ta di chuyển hàng bằng cách sử dụng lệnh dịch chuyển. Và chúng ta cần ẩn phần tràn hàng cho hiệu ứng văn bản lựa chọn của chúng ta.

Cập nhật thiết kế văn bản của mô-đun văn bản

Bây giờ tất cả những gì bạn phải làm là cập nhật mô-đun văn bản để chuyển đổi nó thành một phần tử thiết kế văn bản lớn.

Mở mô-đun văn bản và cập nhật như sau:

  • Màu văn bản văn bản: rgba (255,255,255,0.16)
  • Kích thước văn bản văn bản: 36vw
  • Ký quỹ: -100% ở bên trái, 100% ở bên phải

Kích thước văn bản sử dụng đơn vị chiều dài vw, vì vậy văn bản vừa vặn với chiều rộng của trình duyệt.

Cấu hình mô-đun văn bản Divi

Thêm một hình ảnh động vào mô-đun văn bản

  • Phong cách hoạt hình: Trang trình bày
  • Hướng hoạt ảnh: trái
  • Thời lượng hoạt ảnh: 10000ms
  • Cường độ hoạt ảnh: 100%
  • Hoạt hình của đường cong tốc độ: tuyến tính
  • Lặp lại hình ảnh động: Vòng lặp

Cấu hình hoạt ảnh văn bản DiviThiết kế cuối cùng

Bây giờ, kiểm tra thiết kế cuối cùng.

Thuê hoạt hình divicuối cùng suy nghĩ

Hộp văn bản có thể là một công cụ hữu ích cho thiết kế web. Chúng không bị giới hạn ở việc chỉ hoạt động như những người dịch chuyển tức thời. Họ cũng có thể thêm một yếu tố hoạt ảnh thú vị vào thiết kế web của bạn. Và điều tuyệt vời nhất là Divi giúp bạn dễ dàng sáng tạo và thiết kế mọi thứ đẹp đẽ. Hy vọng hướng dẫn này sẽ giúp bạn tạo các văn bản lựa chọn đơn giản bất cứ khi nào bạn cần.

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]

Hy vọng nhận được từ bạn trong các ý kiến.

Để sức khỏe của bạn!

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