Tạo một thanh xúc tiến hoạt ảnh cho mẫu trang của bạn trong Divi có thể là một cách tuyệt vời để quảng cáo các sản phẩm và ưu đãi đẹp mắt mà không cần phải dựa vào plugin. Bằng cách sử dụng các tính năng thiết kế mạnh mẽ của Divi, bạn có thể tạo trực quan xúc tiến khi bạn chỉnh sửa mẫu trong Divi Theme Builder. Sau đó, khi mô hình đã sẵn sàng, thanh xúc tiến sẽ xuất hiện trên bất kỳ trang nào được gán cho mẫu này. 

Chúng tôi cũng sẽ chỉ cho bạn cách làm cho thanh quảng cáo cố định (hoặc dính).

Những gì bạn cần để bắt đầu

Để bắt đầu, bạn phải để cài đặt và kích hoạt chủ đề Divi . Đảm bảo bạn có phiên bản Divi mới nhất.

Bạn cũng sẽ cần ít nhất một trang được tạo bằng Divi Builder cho mục đích thử nghiệm, điều này sẽ bị ảnh hưởng bởi mẫu thanh quảng cáo.

Tạo một thanh quảng cáo động ở đầu mẫu trang

Tạo một mẫu mới

Từ bảng điều khiển WordPress, đi tới Divi> Trình tạo chủ đề. Sau đó bấm vào ô "Thêm mẫu mới" để tạo mẫu mới.

Gán mẫu cho (các) trang mà thanh quảng cáo sẽ được hiển thị.

Trên mẫu mới, nhấp vào hộp "Thêm cơ thể tùy chỉnh" và chọn "Xây dựng cơ thể tùy chỉnh".

LƯU Ý: chúng tôi đang thêm thanh thăng hạng vào vùng nội dung mô hình (không phải tiêu đề) để nó có thể hoạt động với tiêu đề mặc định Divi cũng như tất cả các tiêu đề tùy chỉnh mà bạn có thể thêm sau.

Sau đó chọn tùy chọn “Build From Scratch”.

Thêm thanh quảng cáo vào mô hình

Trong trình chỉnh sửa bố cục mẫu, chúng ta có thể bắt đầu tạo thanh quảng cáo bằng Divi Builder.

Bắt đầu bằng cách thêm một hàng một cột vào phần thông thường.

Cài đặt dòng

Trước khi thêm một mô-đun, cập nhật các tham số Row như sau:

• Độ dốc nền bên trái: # 4a42ec
• Độ dốc nền bên phải: # 521d91
• Hướng Gradient: 90deg
• Sử dụng chiều rộng máng tùy chỉnh: CÓ
• Chiều rộng máng xối: 1
• Chiều rộng: 100%
• Chiều rộng tối đa: 100%
• Upholstery: 0px ở trên cùng, 0px ở phía dưới

Điều này hỗ trợ màu nền và chiều rộng của thanh quảng cáo mà chúng tôi tạo.

Thông số cột

Trước khi thoát cài đặt hàng, hãy nhấp để mở cài đặt cột. Sau đó, thêm CSS tùy chỉnh sau vào phần tử cột chính:

display: flex;align-items: center;justify-content: center;

CSS này sử dụng thuộc tính flex để căn chỉnh nội dung (hoặc module) trong cột xếp chồng theo chiều ngang (cạnh nhau). Nó cũng căn giữa các mô-đun trong cột theo chiều dọc và chiều ngang. Lý do chúng tôi làm theo cách này là để tránh phải sử dụng nhiều cấu trúc hàng cột sẽ xếp chồng lên nhau trên thiết bị di động. Với cấu hình này, nội dung sẽ vẫn được căn chỉnh theo chiều ngang trên tất cả các chiều rộng của trình duyệt.

Bây giờ chúng tôi đã sẵn sàng để thêm nội dung đến thanh khuyến mãi.

Thêm mô-đun Blurb

Đối với nội dung của ví dụ quảng cáo này, chúng tôi sẽ bao gồm một mô-đun trình bày với một biểu tượng nhỏ và blog văn bản với một nút ở bên phải (giống như thanh quảng cáo trên Eleganttheme.com).

Nhấp vào vòng tròn màu xám cộng với biểu tượng bên trong hàng và thêm mô-đun bản trình bày.

Đối với nội dung của văn bản trình bày, nhập thông tin sau:

• Tiêu đề: [nhập văn bản của chương trình khuyến mãi]
• Sử dụng biểu tượng: CÓ
• Biểu tượng: biểu tượng quà tặng (xem ảnh chụp màn hình)

Cập nhật cài đặt thiết kế bản trình bày như sau:

• Màu biểu tượng: # ff4a9e
• Hình ảnh / vị trí của các biểu tượng: bên trái
• Sử dụng kích thước phông chữ biểu tượng: CÓ
• Kích thước phông chữ biểu tượng: 16px
• Kích thước tiêu đề văn bản: 16px (máy tính để bàn), 14px (điện thoại)
• Dòng tiêu đề Hewight: 1.3em
• Độ rộng tối đa: 230px (chỉ dành cho điện thoại)
• Đệm: Hàng đầu 10px
• Phong cách hoạt hình: Trang trình bày
• Hướng hoạt ảnh: phải
• Độ trễ hoạt ảnh: 250ms

Thêm mô-đun nút

Sau đó, thêm một mô-đun nút bên dưới mô-đun Blurb. Do thuộc tính flex, mô-đun sẽ xuất hiện ở bên phải của vùng nền thay vì bên dưới.

Cập nhật các thông số thiết kế nút như sau:

• Sử dụng kiểu tùy chỉnh cho Nút: CÓ
• Kích thước văn bản nút: 15px (máy tính để bàn), 13px (điện thoại)
• Màu văn bản nút: #ffffff
• Chiều rộng của đường viền nút: 0px
• Bán kính đường viền của nút: 20px
• Trọng lượng phông chữ: bán đậm

• Lề (máy tính để bàn): 20px ở bên trái
• Lề (điện thoại): 10px ở bên trái
• Upholstery (office): 0px ở trên cùng, 0px ở phía dưới
• Đệm (điện thoại): 2px ở trên cùng, 2px ở dưới cùng, 8px ở bên trái, 8px ở bên phải
• Phong cách hoạt hình: Bounce
• Độ trễ hoạt ảnh: 1000ms

Cài đặt phần

Để hoàn thành thiết kế thanh khuyến mãi, hãy cập nhật phần chứa thanh khuyến mãi như sau:

• Upholstery: 0px ở trên cùng, 0px ở phía dưới
• Phong cách hoạt hình: Bounce
• Hướng hoạt ảnh: Xuống
• Thời lượng hoạt ảnh: 500ms
• Độ trễ hoạt ảnh: 250ms
• Hoạt ảnh bắt đầu opacity: 100%
• Chỉ số Z: 999

Thêm mô-đun xuất bản nội dung toàn chiều rộng

Tại thời điểm này, thanh khuyến mãi đã sẵn sàng. Nhưng vì đây là một mẫu, chúng tôi cần đảm bảo rằng chúng tôi thêm mô-đun đăng nội dung để hiển thị nội dung của (các) trang sử dụng mẫu này.

Đối với các trang được tạo (hoặc sẽ được tạo) bằng Divi Builder, bạn sẽ muốn sử dụng mô-đun nội dung bài đăng có chiều rộng đầy đủ để tối đa hóa vùng nội dung.

(LƯU Ý: Đối với các trang sử dụng trình chỉnh sửa mặc định, bạn sẽ muốn sử dụng mod nội dung bài đăng tiêu chuẩn trong phần thông thường để đạt được chiều rộng tối đa tương tự là 1080px theo mặc định.)

Thêm một phần chiều rộng đầy đủ

Trong phần chứa thanh quảng cáo của bạn, hãy thêm phần chiều rộng đầy đủ.

Thêm một mô-đun nội dung ở định dạng Toàn băng thông

Sau đó chọn mô-đun Full Broad Post Content.

Nó ít nhiều là như vậy. Bây giờ hãy đảm bảo và lưu bố cục trước khi thoát khỏi trình chỉnh sửa.

Sau đó lưu các thay đổi cho trình xây dựng chủ đề.

Kết quả cuối cùng

Avant

Bây giờ đây là trang trước khi chỉ định mô hình với thanh khuyến mãi.

Sau khi

Và đây là cùng một trang với mẫu mới với thanh quảng cáo.

Làm cho thanh quảng cáo dính

Để thanh quảng cáo phù hợp với tiêu đề mặc định của Divi, chúng tôi có thể thêm một đoạn CSS đơn giản vào phần có chứa thanh quảng cáo.

position: fixed;width: 100%;

Mở cài đặt phần và thêm mã CSS sau vào phần tử màn hình chính:

Sau đó, thêm mã CSS sau vào phần tử máy tính bảng chính:

position: relative;

Bây giờ hãy kiểm tra kết quả.

Đối với các chuyển đổi trước đó, bạn cũng có thể thêm URL liên kết vào toàn bộ hàng, trong tùy chọn liên kết Cài đặt hàng.

cuối cùng suy nghĩ

Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách thiết kế thanh quảng cáo (từ đầu) bằng Trình tạo chủ đề Divi. Thanh quảng cáo hoàn chỉnh với nhiều hoạt ảnh và thiết kế để làm cho nó thực sự hiển thị với khách. Bạn thậm chí có thể sửa thanh quảng cáo khi cuộn xuống trang để hiển thị rõ hơn. Và với khả năng kiểm soát vị trí đặt thanh quảng cáo trên trang web của bạn, ứng dụng này cực kỳ tiện lợi.