Một số người không muốn hiển thị giá dịch vụ của họ trên Website. Nhưng nhiều như nó có thể sợ một số khách, nó cũng cho thấy sự tự tin và chuyên môn. Tính minh bạch trong giá cả cho phép bạn thu hút đúng khách hàng với ngân sách phù hợp. Trong hướng dẫn hôm nay, chúng tôi sẽ chỉ cho bạn cách tạo một thiết kế tính giá tuyệt đẹp mà bạn có thể sử dụng cho dự án Divi tiếp theo của mình. Bạn cũng có thể tải xuống tệp JSON miễn phí!
Đi thôi.
khảo sát
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh nó trông như thế nào trên các kích thước màn hình khác nhau.
Hãy bắt đầu tái tạo!
Thêm phần 1
Màu nền
Bắt đầu bằng cách thêm một phần mới vào trang bạn đang làm việc. Mở cài đặt phần và thay đổi màu nền.
- Màu nền: # f8c5ac
Dải phân cách dưới
Thêm một dấu phân cách thấp hơn vào phần tiếp theo.
- Phong cách tách biệt: Tìm kiếm trong danh sách
- Flip Divider: Dọc
khoảng cách
Ngoài ra thêm một số đệm xuống.
- Đệm đáy: 130px
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:
Thêm mô-đun văn bản # 1 vào cột
Thêm nội dung H2
Thêm mô-đun văn bản đầu tiên vào cột của bạn và chèn nội dung H2 bạn chọn.
Cài đặt văn bản H2
Chuyển sang tab Thiết kế và thay đổi cài đặt văn bản H2 cho phù hợp:
- Phông chữ 2: Montserrat
- Tiêu đề 2 Phông chữ: Semi Bold
- Tiêu đề 2 Căn chỉnh văn bản: trung tâm
- Tiêu đề 2 Màu văn bản: # 0f1c4d
- Tiêu đề 2 Kích thước văn bản: pixel 57 (máy tính để bàn), pixel 35 (máy tính bảng), pixel 30 (điện thoại)
- Khoảng cách tiêu đề 2: -2px
Thêm mô-đun văn bản # 2 vào cột
Thêm nội dung
Thêm một mô-đun văn bản khác ngay bên dưới mô-đun trước đó và chèn nội dung bạn chọn.
Cài đặt văn bản
Chuyển sang tab Thiết kế và thay đổi cài đặt văn bản cho phù hợp:
- Phông chữ: Montserrat
- Sắp xếp văn bản: trung tâm
- Màu văn bản: #0f1c4d
- Kích thước văn bản: 22px (máy tính để bàn), 18px (máy tính bảng), 16px (điện thoại)
Thêm một mô-đun phân chia vào cột
tầm nhìn
Mô-đun tiếp theo và cuối cùng cần thiết trong cột này là mô-đun phân chia. Đảm bảo rằng tùy chọn “Hiển thị dấu phân cách” được bật.
- Hiển thị dải phân cách: Có
Dòng
Chuyển đến tab Thiết kế và thay đổi màu đường thành màu trắng.
- Màu đường kẻ: #ffffff
kích thước
Cũng thay đổi chiều rộng dải phân cách.
- Chiều rộng: 12%
Thêm phần 2
Màu nền
Hãy chuyển sang bản vẽ! Thêm một phần mới và thay đổi màu nền.
- Màu nền: #0f1c4d
khoảng cách
Sau đó thêm một số đệm tùy chỉnh lên và xuống.
- Phần đệm trên cùng: 70px
- Đệm đáy: 130px
Thêm hàng 1
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
Nếu không thêm bất kỳ mod nào, hãy mở cài đặt hàng và thay đổi chiều rộng thành kích thước màn hình nhỏ hơn.
- Chiều rộng: 80% (máy tính để bàn), 90% (máy tính bảng và điện thoại)
khoảng cách
Thêm một chút tùy chỉnh xuống điền tiếp theo.
- Upholstery ở phía dưới: 70px (máy tính để bàn), 20px (máy tính bảng), 0px (điện thoại)
biên giới
Ngoài ra, thêm một đường viền dưới cùng cho dòng.
- Chiều rộng của đường viền dưới cùng: 1px
- Màu viền dưới: #ffffff
trưng bày
Cuối cùng, để đảm bảo rằng tất cả các cột được hiển thị bên cạnh nhau, chúng tôi sẽ thêm một dòng mã CSS vào phần tử chính của hàng.
hiển thị: flex;
Thêm mô-đun Blurb vào cột 1
Chọn biểu tượng
Đã đến lúc bắt đầu thêm các mô-đun! Thêm mô-đun Blurb vào cột 1 và chọn biểu tượng bạn chọn.
Cài đặt biểu tượng mặc định
Chuyển sang tab Thiết kế và thay đổi cài đặt biểu tượng cho phù hợp:
- Màu biểu tượng: # f7f7f7
- Biểu tượng hình tròn: có
- Biểu tượng vòng tròn: # f8c5ac
- Biểu tượng định vị: Trên cùng
- 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: 96px (Máy tính để bàn), 20px (Máy tính bảng & Điện thoại)
Di chuột qua cài đặt biểu tượng
Thay đổi màu của biểu tượng di chuột.
- Màu biểu tượng: # 000000
Định danh CSS
Cũng chèn một định danh CSS.
- Định danh CSS: price-item-click-1
Thêm mô-đun văn bản # 1 vào cột 2
Thêm nội dung H3
Trên cột thứ hai! Thêm mô-đun văn bản đầu tiên và chèn nội dung H3.
Cài đặt văn bản H3
Chuyển sang tab Thiết kế và thay đổi cài đặt văn bản H3 cho phù hợp:
- Phông chữ 3: Montserrat
- Phông chữ 3: Semi Bold
- Tiêu đề 3 Màu văn bản: # f8c5ac
- Tiêu đề 3 Kích thước văn bản: pixel 40 (máy tính để bàn), pixel 25 (máy tính bảng), pixel 18 (điện thoại)
- Khoảng cách các chữ cái 3: -1px
- Tiêu đề 3 Chiều cao dòng: 1.1em
Thêm mô-đun văn bản # 2 vào cột 2
Thêm nội dung
Thêm một mô-đun văn bản khác vào cột 2 với nội dung bạn chọn.
Cài đặt văn bản
Chuyển đến tab Thiết kế và thay đổi cài đặt văn bản.
- Phông chữ: Montserrat
- Trọng lượng phông chữ của văn bản: Siêu nhẹ
- Màu văn bản: #f8c5ac
- Kích thước văn bản: 23px (máy tính để bàn), 18px (máy tính bảng), 14px (điện thoại)
- Khoảng cách chữ: -1px
- Chiều cao của dòng văn bản: 1.1em
Thêm một mô-đun văn bản vào cột 3
Thêm một mức giá cho nội dung
Hãy đi đến cột thứ ba! Thêm một mô-đun văn bản và đặt giá trong khu vực nội dung.
Cài đặt văn bản
Chuyển sang tab Thiết kế và thay đổi cài đặt văn bản cho phù hợp:
- Phông chữ: Montserrat
- Trọng lượng phông chữ của văn bản: Nặng
- Sắp xếp văn bản: trung tâm
- Màu văn bản: #ffffff
- Kích thước văn bản: 40px (máy tính để bàn), 25px (máy tính bảng), 18px (điện thoại)
Định danh và lớp CSS
Chuyển sang tab nâng cao và thêm CSS ID và lớp CSS.
- Định danh CSS: price-1
- Lớp CSS: price-hide-first
Nhân đôi dòng nhiều lần nếu cần
Khi bạn đã hoàn thành dòng và tất cả các mô-đun chứa, bạn có thể nhân đôi nó bao nhiêu lần tùy ý.
Sửa đổi ID CSS mô-đun Blurb
Thay đổi ID CSS của từng mô-đun Blurb mới cho phù hợp:
- Mô-đun Blurb 1: price-item-click-1
- Mô-đun Blurb 2: price-item-click-2
- Mô-đun Blurb 3: price-item-click-3
- ...
Thay đổi giá của mô-đun văn bản trùng lặp và id CSS
Làm tương tự cho mô-đun văn bản giá trong cột thứ ba của mỗi hàng.
- Giá 1: giá 1
- Giá 2: giá 2
- Giá 3: giá 3
- ...
Thêm một dòng mới
Cấu trúc cột
Thêm một dòng khác vào phần của bạn bằng cấu trúc cột sau:
kích thước
Nếu không thêm bất kỳ mod nào, hãy mở cài đặt hàng và thay đổi chiều rộng thành kích thước màn hình nhỏ hơn.
- Chiều rộng: 80% (máy tính để bàn), 90% (máy tính bảng và điện thoại)
trưng bày
Để đảm bảo tất cả các cột xuất hiện cạnh nhau trên kích thước màn hình nhỏ hơn, chúng tôi cũng sẽ thêm một dòng mã CSS vào phần tử hàng chính.
hiển thị: flex;
Thêm một mô-đun mã vào cột 1
Chèn mã CSS
Tiếp tục bằng cách thêm một mô-đun mã vào cột đầu tiên của dòng và chèn các dòng mã CSS sau:
.price-hide-first {
display: none;
}
.price-item-active .et-pb-icon {
color: black !important;
}
Thêm một mô-đun văn bản vào cột 2
Thêm nội dung
Chuyển đến cột thứ hai và thêm một mô-đun văn bản mới với nội dung bạn chọn.
Cài đặt văn bản
Thay đổi cài đặt văn bản cho phù hợp:
- Phông chữ: Montserrat
- Trọng lượng phông chữ của văn bản: Siêu nhẹ
- Màu văn bản: # f8c5ac
- Kích thước văn bản: 23px (máy tính để bàn), 18px (máy tính bảng), 14px (điện thoại)
- Khoảng cách chữ: -1px
- Chiều cao của dòng văn bản: 1.1em
Thêm một mô-đun văn bản trống vào cột 3
Để trống nội dung
Hãy đi đến cột cuối cùng. Thêm một mô-đun văn bản và đảm bảo khu vực nội dung vẫn trống.
Cài đặt văn bản
Chuyển đến tab Thiết kế và thay đổi cài đặt văn bản như sau:
- Phông chữ: Montserrat
- Trọng lượng phông chữ của văn bản: Nặng
- Sắp xếp văn bản: trung tâm
- Màu văn bản: #ffffff
- Kích thước văn bản: 40px (máy tính để bàn), 25px (máy tính bảng), 18px (điện thoại)
Định danh CSS
Hoàn thành các tham số mô-đun bằng cách thêm một định danh CSS.
- Định danh CSS: tổng giá-cal
Thêm tùy chọn chủ đề JQuery cho Divi
Chuyển đến tab tích hợp
Bây giờ thiết kế đã hoàn thành, đã đến lúc làm cho nó hoạt động với một số mã JQuery. Nếu bạn muốn thêm các tính toán giá vào một trang, bạn có thể đặt mã trong mô-đun mã. Tuy nhiên, nếu bạn đang sử dụng nó trên nhiều trang, hãy chuyển đến tùy chọn Chủ đề Divi và chọn tab Tích hợp.
Thêm mã JQuery vào Thẻ đầu
Chèn các dòng sau của mã JQuery giữa các thẻ script và bạn đã hoàn thành:
jQuery (function ($) {$ ('[id * = "price-item-click"]'). click (function () {var selector = $ (this) .attr ('id'). Replace ('- item-click ',' '); var $ price = $ (' # '+ selector); var sum = 0; $ price.toggle (); $ price.toggleClass (' price-active '); $ (this) .toggleClass ('price-item-active'); $ ('. price-active'). each (function () {sum + = parseFloat ($ (this) .text (). Replace (/ D / g, ' '));}); if (sum> 0) {$ ("# total-price-cal"). show (); $ ("# total-price-cal"). text ("$" + sum + "k");} else {$ ("# total-price-cal"). hide ();}});});
khảo sát
Bây giờ tất cả các bước đã được thực hiện, chúng ta hãy nhìn lại lần cuối những gì đã xảy ra với 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 đã hướng dẫn bạn cách tạo một mẫu tính giá đặc biệt với Divi. Đó là một cách tuyệt vời để hiển thị của bạn khách dịch vụ của bạn bắt đầu ở mức giá nào và để thu hút đúng đối tượng. Bạn có thể sử dụng phương pháp này cho bất kỳ phép tính giá nào mà bạn tạo cho dự án Divi tiếp theo của mình! Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, hãy nhớ để lại nhận xét trong phần bình luận bên dưới.
