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

Cách tạo thanh quảng cáo hoạt hình 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 701.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ị]

Tạo thanh quảng cáo động 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 thời trang mà không cần phải dựa vào plugin. Sử dụng các tính năng thiết kế mạnh mẽ của Divi, bạn có thể tạo thanh quảng cáo một cách trực quan khi bạn chỉnh sửa mẫu trong Trình tạo chủ đề Divi. Sau đó, khi mẫu đã sẵn sàng, thanh quảng cáo sẽ xuất hiện trên bất kỳ trang nào được gán cho mẫu đó. 

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.

Thêm một mô hình divi mới

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

Trang chủ Divi

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.

Thêm một mô hình cơ thể

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.

Thêm hàng vào một cột trên divi

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.

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í]

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;

Tùy chỉnh mã css

CSS này sử dụng thuộc tính flex để căn chỉnh nội dung (hoặc mô-đun) 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 điều 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 vào thanh quảng cáo.

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.

Thêm phần thứ hai của mô-đun tóm tắt

Đố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ấu hình của mô-đun tóm tắt divi

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.

Mô-đun nút Divi

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

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: 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
Tùy chỉnh mô-đun nút divi
  • 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
Tùy chỉnh giãn cách mô-đun nút divi

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
Tùy chỉnh mô-đun hoạt hình divi

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 đủ.

Tạo phần trình tạo divi có 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.

Toàn bộ chiều rộng nội dung bài viết divi

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.

Lưu bố cục divi

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

Trình tạo chủ đề divi

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:

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]

Nhập phần cố định

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

position: relative;

Thêm mã css vào phần divi

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

Divi kết quả động

Đố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 Divi Theme Builder. 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ị cho khách truy cập. Bạn thậm chí có thể sửa thanh quảng cáo khi cuộn xuống trang để hiển thị nhiều hơn. Và với khả năng kiểm soát vị trí của thanh quảng cáo trên trang web của bạn, ứng dụng vô cùng tiện lợi.

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