Divi: Cách tạo thanh trượt lời chứng thực nhỏ gọn cho tiêu đề

Bạn có muốn chèn một thanh trượt chứng thực nhỏ gọn cho tiêu đề Divi không?

Thêm lời chứng thực vào trang web của bạn là một cách hiệu quả để tạo uy tín cho doanh nghiệp (hoặc thương hiệu của bạn) và tạo niềm tin với người dùng. khách. 

Thanh trượt lời chứng thực là một công cụ tiện dụng để hiển thị lời chứng thực ở một nơi. Với ý nghĩ đó, bạn nên thêm một thanh trượt lời chứng thực nhỏ gọn vào tiêu đề của bạn để những lời chứng thực này là một trong những điều đầu tiên người dùng nhìn thấy khi họ truy cập vào website.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một thanh trượt lời chứng thực nhỏ gọn để hiển thị lời chứng thực ngắn trong tiêu đề của Website. 

Để làm điều này, chúng tôi sẽ sửa đổi Mô-đun thanh trượt Divi theo cách thú vị và độc đáo.

Hãy bắt đầu nào!

Nhưng trước khi bạn có thể khám phá hướng dẫn của chúng tôi về Divi, Chủ đề WordPress tốt nhất trên thế giới và dễ sử dụng nhất

khảo sát

Đây là thanh trượt lời chứng thực nhỏ gọn mà chúng tôi sẽ xây dựng bằng cách sử dụng mô-đun Divi's Slider.

Và đây là thanh trượt lời chứng thực tương tự được thêm vào tiêu đề chung.

Và đây là những gì nó trông giống như trên thiết bị di động.

Tạo một trang mới với Divi Builder

Để bắt đầu, bạn cần thực hiện những việc sau:

Từ bảng điều khiển WordPress, hãy chuyển đến Trang> Thêm mới để tạo một trang mới.

Đặt cho nó một tiêu đề có ý nghĩa đối với bạn và nhấp vào Sử dụng Divi Builder

sau đó bấm Bắt đầu xây dựng (Xây dựng từ đầu)

Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.

Cách tạo thanh trượt chứng thực nhỏ gọn trong Divi

Thêm hàng mới và mô-đun thanh trượt

Để bắt đầu, hãy thêm một hàng một cột vào phần.

Sau đó, thêm một mô-đun Slider vào dòng.

Chỉnh sửa trang trình bày

Trong cài đặt thanh trượt, hãy xóa trang chiếu thứ hai mặc định trong tab Nội dung, sau đó bấm để thay đổi cài đặt cho trang chiếu còn lại.

Nội dung trang trình bày

Dưới tab Nội dung từ cài đặt trang trình bày, hãy cập nhật những điều sau:

• Tiêu đề: “Donec solicitudin moltie malesuada. Vivamus suscipit tra tấn eget.
• Nút: Đọc tất cả
• Nội dung: - Tatiana Gagelman

Sau khi hoàn tất, hãy lưu cài đặt slide.

Đọc cũng: Divi: Cách sử dụng cài đặt mặt nạ nền và tùy chọn biến đổi mẫu

Cập nhật cài đặt thanh trượt

Nhân bản điều khiển trang chiếu và ẩn

Sau khi cập nhật slide đầu tiên với nội dung, nhân bản slide này để tạo một hoặc nhiều slide bổ sung.

Sau đó, trong nhóm tùy chọn Các yếu tố, ẩn các điều khiển thanh trượt bằng cách cập nhật những điều sau:

• Hiển thị Kiểm soát: KHÔNG

Cập nhật nền của tất cả các trang trình bày

Tiếp theo, chúng tôi sẽ thêm một nền sẽ được sử dụng cho tất cả các trang trình bày.

Để thêm nền, hãy cập nhật thông tin sau:

• Nền Gradient:
  • Gradient Dừng 0%: # 000000
  • Gradient dừng 100%: # 000000

• Hình nền:
  • Kích thước: Phù hợp
  • Vị trí: Trung tâm bên trái
  • Blend: Độ sáng

Cài đặt thanh trượt

Dưới tab Thiết kế, cập nhật những điều sau:

che

• Sử dụng lớp phủ nền: CÓ
• Màu lớp phủ nền: rgba (0,0,0,0.7)

Văn bản tiêu đề

• Tiêu đề:
  • Mức tiêu đề: H4
  • Phông chữ: Josefin Sans
  • Trọng lượng phông chữ: Trung bình
  • Căn chỉnh văn bản: trái
  • Kích thước văn bản: 16px (Máy tính để bàn và máy tính bảng), 14px (Điện thoại)
  • Chiều cao dòng: 1,5em

Phần thân của văn bản

• Thân hình :
  • Phông chữ: Josefin Sans
  • Căn chỉnh văn bản: trái
  • Màu văn bản: #aaaaaa
  • Khoảng cách chữ: 0,05em

Bouton

• Sử dụng kích thước tùy chỉnh cho nút: CÓ
• Cái nút :
  • Kích thước văn bản: 1em
  • Màu văn bản: Mặc định (Máy tính để bàn), # 000 (Di chuột)
  • Màu nền (Máy tính để bàn): rgba (255,255,255,0.19)
  • Màu nền (Di chuột): #ffffff
  • Chiều rộng đường viền: 0 pixel
  • Khoảng cách chữ: 0,05em
  • Phông chữ: Josefin Sans
  • Lề: 0px (Trên và dưới)
  • Padding: 0px (Trên và Dưới), 0,6em (Trái và Phải)

Tự động điền và hoạt ảnh

Tiếp theo, cập nhật khoảng cách thanh trượt cho nhỏ gọn và đặt tốc độ hoạt ảnh tự động mong muốn.

• Lề: 0px (Trên và dưới)
• Phần đệm: 1em (Trên và Dưới), 5% (Trái và Phải)
• Hoạt ảnh tự động: BẬT
• Tốc độ hoạt ảnh tự động: 3500

CSS tùy chỉnh

Dưới tab Nâng cao, thêm CSS tùy chỉnh sau để cập nhật kiểu của từng phần tử thanh trượt (tiêu đề, nút và mũi tên)

Tiêu đề trang trình bày

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Điều này sẽ đảm bảo rằng tiêu đề trang chiếu sẽ không tạo ra ngắt dòng trên màn hình nhỏ hơn.

Nút trượt

position:absolute;
bottom: 1em;
right: 6%;

Điều này tạo cho nút một vị trí tuyệt đối để nó nằm ngay bên dưới tiêu đề và bên phải của trang trình bày, làm cho thanh trượt thậm chí còn nhỏ gọn hơn.

Kéo mũi tên

font-size: 30px;
margin-top: -15px;

Nó chỉ làm cho các mũi tên điều hướng thanh trượt nhỏ hơn để phù hợp với kích thước nhỏ gọn của thanh trượt.

Mẹo: Thêm cùng màu nền vào cột để chuyển tiếp trang chiếu mượt mà hơn

Để thực hiện việc này, hãy mở cài đặt của cột chính của thanh trượt và thêm màu nền sau:

• Nền: # 000000

Thêm hình nền của tác giả vào trang chiếu

Nếu bạn muốn bao gồm hình nền tác giả cho trang chiếu, bạn có thể thực hiện việc này bằng cách thêm hình nền vào mỗi trang chiếu.

Khi bạn đã thêm hình nền vào trang chiếu, hình nền sẽ kế thừa các kiểu đã có trong cài đặt thanh trượt (không phải trang chiếu).

Kết quả

Kiểm tra kết quả cuối cùng.

Thêm thanh trượt lời chứng thực nhỏ gọn vào mẫu tiêu đề

Lưu mô-đun trong thư viện Divi

Trước khi chúng ta có thể thêm thanh trượt lời chứng thực nhỏ gọn vào tiêu đề chung, trước tiên chúng ta cần đăng ký mô-đun trong thư viện Divi. 

Bạn có thể thực hiện việc này bằng cách di chuột qua mô-đun Slider và nhấp vào " Thêm vào thư viện“. Sau đó, đặt tên cho bố cục và nhấp vào nút " Lưu vào Thư viện".

Đã thêm bố cục mô-đun lời chứng thực nhỏ gọn vào mẫu tiêu đề

Chỉnh sửa tiêu đề tùy chỉnh

Khi mô-đun trượt lời chứng thực mới đã được lưu vào thư viện, chúng tôi đã sẵn sàng thêm nó vào tiêu đề tùy chỉnh.

Truy cập vào Divi> Trình tạo chủ đề, sau đó nhấp vào biểu tượng cho phép bạn sửa đổi " Tiêu đề tùy chỉnh".

Chèn mô-đun trượt lời chứng thực đã ghi từ thư viện

Trong trình chỉnh sửa bố cục tiêu đề, hãy nhấp để thêm mô-đun trượt lời chứng thực nhỏ gọn ở nơi bạn muốn nó xuất hiện.

Trong bản mod “InsertModule”, chọn tab “Thêm từ thư viện”. Tìm thanh trượt lời chứng thực nhỏ gọn mà bạn đã lưu trước đó trong thư viện và chọn nó.

Sau khi tải, hãy lưu các thay đổi.

Xem thêm: Divi: Cách hiển thị mô-đun Fullwidth Header trên toàn màn hình

Kết quả cuối cùng

Dưới đây là thanh trượt lời chứng thực được thêm vào tiêu đề chung.

Ở đây chúng tôi có thanh trượt lời chứng thực không có ảnh nền của tác giả.

Và đây là những gì nó trông giống như trên thiết bị di động.

Tải DIVI ngay bây giờ !!!

Kết luận

Thanh trượt chứng thực nhỏ gọn có thể là một bổ sung mới cho tiêu đề của bất kỳ thứ gì Website đang tìm cách nâng cao độ tin cậy của các dịch vụ của mình ở nơi dễ thấy nhất trên trang web của mình. 

Bạn cũng có thể sử dụng nó để chuyển hướng khách đến trang chứng thực hoặc trang bán hàng để tăng chuyển đổi. Chúng tôi hy vọng điều này sẽ hữu ích cho bạn trong các dự án Divi tiếp theo của bạn.

Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.

Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần nhiều yếu tố hơn để thực hiện các dự án tạo trang web Internet của mình.

Đừng ngần ngại cũng tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.

Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.

...