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

Cách thêm hình động khối văn bản vào tiêu đề của bạn 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ị]

Tiêu đề của bạn là một trong những phần quan trọng nhất của trang chủ của bạn. Đây thường là những gì bạn nhìn thấy đầu tiên, và do đó những gì xác định ấn tượng đầu tiên. Giống như bất kỳ ấn tượng đầu tiên khác, bạn muốn nó là 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 hình động của các 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ã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 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

khoảng cách

Chuyển đến tab thiết kế phần và áp dụng các giá trị điền trên và dưới 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)

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

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:

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%

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 thẻ Div cho mỗi từ trong tiêu đề H1

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

<h1> <div id = Từ word-1 ″ class = Hiển thị trạng thái hiển thị> Sẵn sàng </ div>
<div id = Từ word-2 class = trạng thái hiển thị trạng thái> đến </ div>
<div id = "Word-3 ″ class =" trạng thái hiển thị "> Bản dựng </ div>
<div id = "word-4 ″ class =" display-state "> Đẹp </ div>
<div id = "word-5 ″ class =" display-state "> Trang web? </ div> </ h1>

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ài đặt văn bản H1

Chuyển đến tab thiết kế mô-đun và sửa đổi các tham số 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

khoảng cách

Sau đó thay đổi 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)

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

Chèn mã CSS

Để hoạt hình khối văn bản áp dụng cho tiêu đề của chúng tôi, chúng tôi sẽ cần 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 ! Quan trọng;} # 1-word {-webkit-animation: slide-right Tuyến tính 0.5 giây Cả hai giây; hoạt hình: trượt sang phải Tuyến tính 0.5 giây Cả 0.3;} # 2-word {-webkit-animation: slide-right Tuyến tính 0.5 giây Cả hai giây; hoạt hình: trượt sang phải Tuyến tính 0.5 giây Cả 0.6;} # 3-word {-webkit-animation: slide-right Tuyến tính 0.5 giây Cả hai giây; hoạt hình: trượt sang phải Tuyến tính 0.5 giây Cả 0.9;} # 4-word {-webkit-animation: slide-right Tuyến tính 0.5 giây Cả hai giây; hoạt hình: trượt sang phải Tuyến tính 0.5 giây Cả hai 1.2;} # word-5 {-webkit-animation: slide-right Tuyến tính 0.5 giây Cả hai giây; hoạt hình: trượt sang phải Tuyến tính 0.5 giây Cả 1.5;} @ -webkit-keyframes trượt sang phải {0% {màu nền: # 000; độ mờ: 0.5; màu: trong suốt;} 1% {độ mờ đục: 1;}} </ style>

khoảng cách

Chuyển đến tab thiết kế mô-đun và loại bỏ tất cả phần đệm dưới cùng mặc định.

  • Lề dưới: 0px

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

Thêm một bản sao

Các mô-đun tiếp theo chúng ta cần là một 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

Chuyển đến tab thiết kế mô-đun và sửa đổi các tham số nút cho phù hợp:

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]

  • 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
  • Nút phông chữ: Work Sans

khoảng cách

Sau đó, đi đến cài đặt khoảng cách và áp dụng lề tùy chỉnh và điền giá trị 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)

hoạt hình

Cũng tùy chỉnh các cài đặt hình ảnh động.

  • Phong cách hoạt hình: Lật
  • Hướng hoạt hình: xuống
  • Độ trễ hoạt hình: 2000 ms
  • Cường độ của hình ảnh động: 100%
  • Độ mờ khởi động của hình ảnh động: 100%
  • Đường cong tốc độ hoạt hình: dễ dàng ra vào
  • Lặp lại hoạt hình: một lần

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.

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

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:

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%

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

Thêm nội dung

Sau đó thêm một mô-đun văn bản với nội dung mô tả của sự lựa chọn của bạn.

Màu nền

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

  • Màu nền: #ffffff

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

Chuyển đến 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

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.

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]

  • 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)

Hộp bóng

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

  • Sức mạnh bóng mờ của hộp: 50px
  • Màu bóng: rgba (0,0,0,0,1)

khảo sát

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

cuối cùng suy nghĩ

Trong bài viết này, chúng tôi đã chỉ cho bạn cách thêm hình động của các khối văn bản CSS vào tiêu đề của bạn. Điều quan trọng là đảm bảo rằng tiêu đề của bạn được hiển thị và đọc từ đầu, thêm hình ảnh động vào tiêu đề của bạn chắc chắn có thể giúp bạn! 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 đề xuất nào, vui lòng để lại nhận xét trong phần bình luận bên dưới.

Dịch từ: ElegantThemes

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
2 cổ phiếu
cổ phiếu2
tweet
Enregistrer