Có một tiêu đề nổi bật có nghĩa là đảm bảo rằng bạn có cơ hội thu hút sự chú ý của khách. Tiêu đề thường không được chú ý do kích thước và vị trí trung tâm của chúng, nhưng nếu bạn muốn tiến thêm một bước và làm cho tiêu đề nổi bật theo đúng nghĩa đen, thì bạn đã đến đúng chỗ.

Trong hướng dẫn này, chúng tôi sẽ kết hợp cài đặt hoạt ảnh từ Divi để tạo một tiêu đề nổi bật và thu hút sự chú ý của bạn khách.

Kết quả cuối cùng

Phần một: Thiết kế

Phần cấu hình

Màu nền

Hãy bắt đầu thiết kế! Tạo một trang mới và thêm một phần thông thường vào đó. Mở cài đặt phần và thay đổi màu nền.

• Màu nền: #EEE

khoảng cách

Sau đó, đi đến cài đặt khoảng cách phần và thêm lề điền tùy chỉnh.

• Đệm đáy: 10vw

Thêm hàng 1

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:

Màu nền

Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thay đổi màu nền của hàng.

•  Màu nền: #DDD

kích thước

Sau đó, chuyển đến cài đặt định cỡ và để hàng 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

khoảng cách

Ngoài ra, loại bỏ phần đệm bên trên và bên dưới mặc định cho dòng.

• Đệm ở đầu: 0px
• Đáy đệm: 0px

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

Đã đến lúc bắt đầu thêm mô-đun! Mô-đun đầu tiên chúng ta cần là mô-đun văn bản. Nhập phần đầu tiên của tiêu đề vào ô nội dung sử dụng kiểu văn bản đoạn văn.

Màu nền

Sau đó đi đến cài đặt nền của mô-đun và thêm màu nền.

• Màu nền: #ccc

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

Đồng thời thay đổi cài đặt văn bản trên tab Thiết kế.

• Phông chữ: Didact Gothic
• Trọng lượng phông chữ của văn bản: đậm
• Màu văn bản: #000000
• Kích thước văn bản: 10vw
• Chiều cao của dòng văn bản: 0.9em
• Định hướng văn bản: Trung tâm

khoảng cách

Sau đó, tạo bất kỳ hình dạng nào bạn thích bằng cách sử dụng đệm tùy chỉnh ở trên và dưới.

• Đệm ở đầu: 10vw
• Đệm đáy: 3vw

Hoạt hình

Cuối cùng nhưng không kém phần quan trọng, chúng tôi sẽ thêm một số hoạt ảnh. Điều quan trọng là đảm bảo rằng thời lượng hoạt ảnh và độ mờ bắt đầu bằng XNUMX. Điều này sẽ cho phép mô-đun văn bản hiển thị với hiệu ứng flash.

• 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: 0ms
• Độ trễ hoạt ảnh: 1000ms

Sao chép mô-đun văn bản x4

Khi bạn đã hoàn tất việc chỉnh sửa mô-đun văn bản đầu tiên, bạn có thể tiếp tục và sao chép nó bao nhiêu lần tùy ý, tùy thuộc vào độ dài tiêu đề của bạn. Đối với mỗi phần của tiêu đề mà bạn muốn hiển thị bằng hiệu ứng flash, bạn sẽ cần một mô-đun văn bản riêng biệt. Trong ví dụ này, chúng ta sẽ cần các mô-đun 4 bổ sung.

Màu nền

Với màu nền.

• Copy 1 = Màu nền: # 5900ff, màu văn bản: #FFF
• Copy 2 = để nguyên, sửa đổi thời lượng hoạt ảnh (Animation Delay): 1500ms
• Sao chép 3 = Màu nền: # ffb200, màu văn bản: #FFF, sửa đổi thời lượng hoạt ảnh: 2000ms
• Sao chép 4 = Màu nền: # 000, màu văn bản #FFF, sửa đổi thời lượng hoạt ảnh: 2500ms

Thêm một lề âm cho mỗi mô-đun văn bản ngoại trừ mô-đun đầu tiên

Khi bạn đã hoàn tất việc tùy chỉnh tất cả các mô-đun văn bản, bạn có thể tiếp tục và tạo chồng chéo. Để tạo sự chồng chéo này, chúng tôi sẽ thêm một lề trên cùng âm cho mỗi mô-đun văn bản trùng lặp. Nói cách khác, chúng tôi đảm bảo rằng tất cả các mô-đun tuân theo mô-đun đầu tiên sẽ xuất hiện phía trên mô-đun văn bản đầu tiên đó.

• Lề trên: -31.98vw

Đường biến đổi

Biến đổi Dịch

Tiếp tục bằng cách chuyển đổi toàn bộ dòng, bắt đầu với các tham số chuyển đổi.

• Dưới cùng: -35vw

Biến đổi xoay

Cũng thay đổi các giá trị xoay của biến đổi.

• Trái: 320deg

Thêm dòng 2

Cấu trúc cột

Ở vị trí thứ hai! Bây giờ hiệu ứng tiêu đề đã có, chúng ta có thể bắt đầu thêm các mô-đun còn lại. Thêm một hàng mới bằng cách sử dụng cấu trúc cột sau:

kích thước

Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và để hàng chiếm toàn bộ chiều rộng của màn hình trong cài đặt định cỡ:

• 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

khoảng cách

Loại bỏ điền trên cùng mặc định từ dòng tiếp theo.

• Phần đệm trên: 0px

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

Thêm nội dung H1

Đã đến lúc thêm các mô-đun. Mô-đun đầu tiên sẽ là mô-đun văn bản. Bạn có thể thêm nội dung mà bạn muốn

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

Sau đó, chuyển đến tab thiết kế và thay đổi cài đặt H1.

• Phông chữ của tiêu đề: Didact Gothic
• Trọng lượng tiêu đề: đậm
• Cỡ chữ: 1.8vw (Máy tính), 3.8vw (Máy tính bảng), 4vw (Điện thoại)

khoảng cách

Thêm lề tùy chỉnh trong phần khoảng cách.

• Lề trên: -4vw
• Lề dưới: 2vw
• Lề trái: 30vw
• Lề phải: 30vw (Máy tính), 15vw (Máy tính bảng & Điện thoại)

Thêm một mô-đun phân cách vào cột 2

tầm nhìn

Mô-đun tiếp theo là mô-đun phân tách. Đảm bảo rằng tùy chọn “Hiển thị dải phân cách” được bật.

• Hiển thị Dấu phân cách: Có

Màu

Sau đó, chuyển đến tab "Thiết kế" và thay đổi màu của dấu phân cách.

• Màu: #000000

Dimentionnement

Thay đổi cả các tùy chọn khoảng cách.

• Khoảng cách Trọng lượng: 8px
• Chiều rộng: 7%

khoảng cách

Luôn luôn với các tùy chọn kích thước.

• Biên độ thấp: 1vw
• Lề trái: 30vw

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

Thêm nội dung

Mô-đun tiếp theo sẽ là một mô-đun văn bản khác. Bạn phải cung cấp nội dung de Votere choix.

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

Sau đó, bạn cần thay đổi cài đặt văn bản trong tab "Thiết kế".

• Kích thước văn bản: 0.8vw (Máy tính), 1.3vw (Máy tính bảng), 1.6vw (Điện thoại)
• Chiều cao của dòng: 2.2em

khoảng cách

Thêm một số lề trong phần khoảng cách.

• Biên độ thấp: 3vw
• Lề trái: 30vw
• Lề phải: 30vw (Máy tính), 15vw (Máy tính bảng & Điện thoại)

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

Cài đặt mô-đun nút

Đối với mô-đun cuối cùng, sẽ là mô-đun nút. Bạn sẽ thêm nội dung bạn chọn và thay đổi cài đặt như sau:

• Sử dụng kiểu tùy chỉnh: Có
• Cỡ chữ: 1vw (Máy tính), 1.5vw (Máy tính bảng), 2vw (Điện thoại)
• Chiều rộng của đường viền nút: 0px
• Phông chữ: Poppin
• Trọng lượng văn bản: đậm
• Kiểu chữ: Chữ hoa

khoảng cách

Đi tới cài đặt khoảng cách và thêm một lề bên ngoài tùy chỉnh cũng như một lề trong và thế là xong.

• Ký quỹ ngoài bên trái: 30vw
• Biên độ cao bên trong: 1vw
• Bên trong lề thấp: 1vw
• Lề trong bên trái: 3vw
• lề trong bên phải: 3vw

để thúc

Trong hướng dẫn này, chúng tôi đã xem cách thiết kế tiêu đề với văn bản động, chỉ sử dụng các tùy chọn nội bộ của Divi. Đây là một kỹ thuật tuyệt vời cho phép bạn thu hút sự chú ý của khách một cách rất nguyên bản.