Tiêu đề của bạn là một trong những phần quan trọng nhất của trang chủ. Đây thường là những gì bạn nhìn thấy đầu tiên và do đó là những gì quyết định ấn tượng đầu tiên. Giống như bất kỳ ấn tượng đầu tiên nào khác, bạn muốn nó phải tốt. Bây giờ, nếu bạn đang tìm kiếm một cách sáng tạo để trình bày tiêu đề của mình, bạn sẽ thích hướng dẫn này vì chúng tôi sẽ chỉ cho bạn cách thêm hoạt ảnh khối văn bản CSS vào tiêu đề của bạn và bạn cũng có thể tải xuống tệp JSON bố cục miễn phí!

khảo sát

Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem kết quả trên các kích thước màn hình khác nhau.

Hướng dẫn divi xem trước tiêu đề hoạt hình

Hãy bắt đầu thiết kế

Thêm phần # 1

Nền Gradient

Bắt đầu bằng cách thêm một phần thông thường vào một trang mới hoặc vào trang bạn đang làm việc. Mở cài đặt phần và áp dụng nền gradient sau:

  • Màu 1: # f0f2b
  • Màu 2: # c10b1a
  • Kiểu gradient: tuyến tính
  • Hướng dốc: 63deg
Cấu hình các phần divi

khoảng cách

Chuyển sang tab thiết kế phần và áp dụng các giá trị điền trên cùng và dưới cùng tùy chỉnh sau trên các kích thước màn hình khác nhau:

  • Phần đệm trên: 7vw (máy tính để bàn), 20vw (máy tính bảng), 25vw (điện thoại)
  • Đệm dưới: 7vw (bàn), 20vw (máy tính bảng), 25vw (điện thoại)
Cấu hình giãn cách phần Divi

biên giới

Ngoài ra, thêm một đường viền cho phần.

  • Độ rộng đường viền: 2vw (trên cùng, bên trái, bên phải)
  • Chiều rộng đường viền dưới cùng: 0vw
  • Màu viền: #ffffff
Cấu hình đường viền phần Divi

Thêm một dòng mới

Cấu trúc cột

Tiếp tục thêm một dòng mới vào phần bằng cấu trúc cột sau:

Cấu hình bố cục cột Divi

kích thước

Mở các tham số dòng và sửa đổi các tham số kích thước phù hợp:

  • Chiều rộng: 100%
  • Chiều rộng tối đa: 100%
Cấu hình chiều rộng cột Divi

Thêm một mô-đun văn bản vào cột

Thêm nội dung H1

Sau đó thêm một mô-đun văn bản với tiêu đề H1 bạn chọn.

Thêm một mô-đun văn bản vào cột 1 divi

Thêm thẻ Div cho mỗi từ trong tiêu đề H1

Chuyển sang tab văn bản của bản sao tiêu đề của bạn và thêm một div khác cho mỗi từ trong tiêu đề của bạn. ID CSS phải khác nhau cho mỗi từ.

Sẵn sàng
tại
Xây dựng
Xinh đẹp
Các trang web?

Thêm thẻ mô-đun văn bản divi

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

Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản H1 cho phù hợp:

  • Phông chữ: Work Sans
  • Trọng lượng phông chữ: trung bình
  • Màu văn bản tiêu đề: #ffffff
  • Kích thước văn bản tiêu đề: 4vw (máy tính để bàn), 5vw (máy tính bảng), 6vw (điện thoại)
  • Chiều cao dòng đầu: 1,4 em
Tiêu đề tham số 1 divi

khoảng cách

Sau đó, thay đổi các giá trị lề trên các kích thước màn hình khác nhau.

  • Lề trái: 20vw (bàn và máy tính bảng), 15vw (điện thoại)
  • Lề phải: 35vw (máy tính để bàn), 20vw (máy tính bảng), 15vw (điện thoại)
Cấu hình giãn cách mô-đun văn bản Divi

Thêm một mô-đun mã vào cột

Chèn mã CSS

Để hoạt ảnh của khối văn bản áp dụng cho tiêu đề của chúng ta, chúng ta sẽ cần một số mã CSS. Chúng tôi sẽ thêm mã CSS này vào một mô-đun mã mới.

<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>

Dán mã css divi

khoảng cách

Chuyển sang tab thiết kế mô-đun và xóa tất cả phần đệm dưới cùng mặc định.

  • Lề dưới: 0px
Tùy chỉnh pháp sư mô-đun divi

Thêm một mô-đun nút vào cột

Thêm một bản sao

Mô-đun tiếp theo chúng ta cần là mô-đun nút. Nhập một bản sao của sự lựa chọn của bạn.

Tạo một bản sao của mô-đun boton divi

Cài đặt nút

Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt nút cho phù hợp:

  • Sử dụng kiểu tùy chỉnh cho nút: Có
  • Kích thước văn bản nút: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Màu văn bản nút: #ffffff
  • Màu nền của nút: # 000000
  • Độ rộng đường viền nút: 0px
Tham số mô-đun nút Divi
  • Nút phông chữ: Work Sans
Thay đổi phông chữ nút divi

khoảng cách

Sau đó, chuyển đến cài đặt giãn cách và áp dụng các giá trị lề và đệm tùy chỉnh trên các kích thước màn hình khác nhau.

  • Lề trên: 3vw (văn phòng),
  • Lề trái: 20vw (bàn và máy tính bảng), 15vw (điện thoại)
  • Phần đệm trên: 1.2vw (máy tính để bàn), 2vw (máy tính bảng), 4vw (điện thoại)
  • Đệm dưới: 1.2vw (bàn), 2vw (máy tính bảng), 4vw (điện thoại)
  • Lớp đệm bên trái: 1.8vw (máy tính để bàn), 3vw (máy tính bảng), 6vw (điện thoại)
  • Đệm bên phải: 1.8vw (bàn), 3vw (máy tính bảng), 6vw (điện thoại)
Cấu hình giãn cách nút Divi

Hoạt hình

Tùy chỉnh cài đặt hoạt ảnh.

  • Phong cách hoạt hình: Lật
  • Hướng hoạt ảnh: xuống
  • Độ trễ hoạt ảnh: 2000 ms
  • Cường độ hoạt ảnh: 100%
  • Độ mờ bắt đầu hoạt ảnh: 100%
  • Đường cong tốc độ hoạt ảnh: dễ vào-ra
  • Lặp lại hoạt ảnh: một lần
Tùy chỉnh hoạt ảnh mô-đun văn bản Divi

Thêm phần # 2

Tiếp tục bằng cách thêm một phần thông thường mới ngay bên dưới phần trước.

Thêm một phần divi mới

khoảng cách

Mở cài đặt phần và loại bỏ phần đệm trên mặc định.

  • Phần đệm trên: 0px
Định cấu hình giãn cách phần divi

Thêm một dòng mới

Cấu trúc cột

Tiếp tục thêm một hàng mới bằng cấu trúc cột sau:

Thêm một cột divi phần mới

kích thước

Không thêm nhiều mô-đun, mở các tham số dòng và để dòng chiếm toàn bộ chiều rộng của phần chứa.

  • Chiều rộng: 100%
  • Chiều rộng tối đa: 100%
Định cỡ phần divi

Thêm một mô-đun văn bản vào cột

Thêm nội dung

Tiếp theo, thêm một mô-đun văn bản có nội dung mô tả về sự lựa chọn của bạn.

Cài đặt văn bản mô-đun Divi

Màu nền

Thêm một màu nền trắng.

  • Màu nền: #ffffff
Màu phông chữ Divi conifguration

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

Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản cho phù hợp:

  • Phông chữ: Work Sans
  • Màu văn bản: # 9b9b9b
  • Kích thước văn bản: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
  • Chiều cao của dòng văn bản: 2.6em
Cấu hình phông chữ tiêu đề Divi

khoảng cách

Đồng thời thêm các giá trị khoảng cách tùy chỉnh trên các kích thước màn hình khác nhau.

  • Lề trên: -5vw (máy tính để bàn), -20vw (máy tính bảng), -27vw (điện thoại)
  • Lề trái: 20vw (bàn), 13vw (máy tính bảng), 8vw (điện thoại)
  • Lề phải: 20vw (máy tính để bàn), 13vw (máy tính bảng), 8vw (điện thoại)
  • Phần đệm trên: 5vw (máy tính để bàn), 7vw (máy tính bảng và điện thoại)
  • Đệm dưới: 5vw (bàn), 7vw (máy tính bảng và điện thoại)
  • Lớp đệm bên trái: 3vw (máy tính để bàn), 5vw (máy tính bảng), 6vw (điện thoại)
  • Đệm bên phải: 3vw (bàn), 5vw (máy tính bảng), 6vw (điện thoại)
Cấu hình giãn cách phần mô-đun Divi

Hộp bóng

Và hoàn thành cài đặt mô-đun bằng cách áp dụng một bóng hộp tinh tế. Đó là nó!

  • Sức mạnh bóng mờ của hộp: 50px
  • Màu bóng: rgba (0,0,0,0,1)
Mô-đun văn bản divi cấu hình bóng

khảo sát

Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem xét lần cuối cùng xem nó trông như thế nào trên các kích thước màn hình khác nhau.

Hướng dẫn divi kết quả cuối cùng

cuối cùng suy nghĩ

Trong bài viết này, chúng tôi đã hướng dẫn bạn cách thêm hình động khối văn bản CSS vào tiêu đề của bạn. Điều quan trọng là đảm bảo tiêu đề của bạn hiển thị và đọc được ngay từ đầu, thêm hoạt ảnh vào tiêu đề của bạn chắc chắn có thể hữu ích! Bạn cũng có thể tải xuống tệp JSON bố cục miễn phí. Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, đừng ngại để lại bình luận trong phần bình luận bên dưới.

Dịch từ: ElegantThemes