برخی افراد تمایلی به نمایش قیمت خدمات خود بر روی خود ندارند وب سایت. اما به همان اندازه که ممکن است برخی را بترساند آخرین بازدید، همچنین نشان دهنده اعتماد و تخصص است. شفافیت در قیمت گذاری به شما این امکان را می دهد که با بودجه ای که می توانید با آن کار کنید، مشتریان مناسب را جذب کنید. در آموزش امروز، ما به شما نشان خواهیم داد که چگونه یک طرح محاسبه قیمت خیره کننده ایجاد کنید که می توانید برای پروژه بعدی Divi خود از آن استفاده کنید. همچنین می توانید فایل JSON را به صورت رایگان دانلود کنید!
برویم.
بررسی
قبل از اینکه به آموزش بپردازیم ، بیایید نگاهی سریع به نحوه نمایش آن در اندازه های مختلف صفحه بیندازیم.
بیایید شروع به بازیابی کنیم!
بخش 1 را اضافه کنید
رنگ پس زمینه
با افزودن بخش جدیدی به صفحه ای که در آن کار می کنید شروع کنید. تنظیمات بخش را باز کرده و رنگ پس زمینه را تغییر دهید.
- رنگ زمینه: # f8c5ac
تقسیم پایین
جداکننده پایینی را به قسمت بعدی اضافه کنید.
- سبک جدایی: در لیست جستجو کنید
- Flip Divider: عمودی
فاصله
همچنین مقداری بالشتک را به پایین اضافه کنید.
- بالشتک پایین: 130px
یک خط جدید اضافه کنید
ساختار ستون
با استفاده از ساختار ستون زیر، اضافه کردن یک ردیف جدید ادامه دهید:
ماژول متن # 1 را به ستون اضافه کنید
محتوای H2 را اضافه کنید
اولین ماژول متن را به ستون خود اضافه کنید و محتوای H2 مورد نظر خود را وارد کنید.
تنظیمات متن H2
به تب Design بروید و متناسب با آن تنظیمات متن H2 را تغییر دهید:
- فونت عنوان 2: مونتسرات
- عنوان 2 قلم: نیمه پررنگ
- عنوان 2 تراز متن: مرکز
- عنوان 2 رنگ متن: # 0f1c4d
- عنوان متن 2 اندازه متن: پیکسل های 57 (دسک تاپ) ، پیکسل های 35 (رایانه لوحی) ، پیکسل های 30 (تلفن)
- عنوان 2 فاصله نامه: -2px
ماژول متن # 2 را به ستون اضافه کنید
اضافه کردن محتوا
ماژول متن دیگری درست زیر نمونه قبلی اضافه کنید و محتوای مورد نظر خود را وارد کنید.
تنظیمات متن
به تب Design بروید و متناسب با آن تنظیمات متن را تغییر دهید:
- متن قلم: مونتسرات
- ترتیب متن: مرکز
- رنگ متن: #0f1c4d
- اندازه متن: 22px (دسک تاپ) ، 18px (رایانه لوحی) ، 16px (تلفن)
ماژول تقسیم را به ستون اضافه کنید
دید
آخرین و آخرین ماژول مورد نیاز در این ستون ، ماژول تقسیم است. مطمئن شوید که گزینه "Show Separator" فعال باشد.
- نمایش تقسیم: بله
خط
به تب Design بروید و رنگ خط را به سفید تغییر دهید.
- رنگ خط: #ffffff
اندازه
همچنین عرض تقسیم کننده را تغییر دهید.
- عرض: 12٪
بخش 2 را اضافه کنید
رنگ پس زمینه
بیایید به سراغ نقاشی برویم! بخش جدیدی اضافه کنید و رنگ پس زمینه را تغییر دهید.
- رنگ پس زمینه: #0f1c4d
فاصله
سپس مقداری بالشتک سفارشی را به بالا و پایین اضافه کنید.
- پد بالا: 70px
- بالشتک پایین: 130px
ردیف 1 اضافه کنید
ساختار ستون
با اضافه کردن ساختار ستون زیر ، اضافه کردن یک خط جدید به بخش ادامه دهید:
اندازه
بدون اضافه کردن هیچگونه حالت ، هنوز تنظیمات ردیف را باز کرده و عرض را به اندازه صفحه کوچکتر تغییر دهید.
- عرض: 80٪ (دسک تاپ) ، 90٪ (رایانه لوحی و تلفن)
فاصله
کمی پر کردن بعدی را پر کنید.
- اثاثه یا لوازم داخلی در پایین: 70px (دسک تاپ) ، 20px (رایانه لوحی) ، 0px (تلفن)
مرز
همچنین یک حاشیه پایین به خط اضافه کنید.
- عرض مرز پایین: 1px
- رنگ حاشیه پایین: #ffffff
نمایش
در آخر ، برای اطمینان از نمایش تمام ستون ها در کنار یکدیگر ، یک خط کد CSS به عنصر اصلی ردیف اضافه خواهیم کرد.
نمایش: flex؛
ماژول Blurb را به ستون 1 اضافه کنید
نماد را انتخاب کنید
وقت آن است که شروع به اضافه کردن ماژول ها کنید! ماژول Blurb را به ستون 1 اضافه کنید و نماد مورد نظر خود را انتخاب کنید.
تنظیمات پیش فرض نماد
به برگه Design بروید و تنظیمات نماد را بر این اساس تغییر دهید:
- رنگ نماد: # f7f7f7
- نماد حلقه: بله
- نماد حلقه: # f8c5ac
- نمادهای موقعیت یابی: بالا
- از اندازه قلم آیکون استفاده کنید: بله
- اندازه قلم نماد: 96 پیکسل (دسک تاپ) ، 20 پیکسل (تبلت و تلفن)
روی تنظیمات نماد بروید
رنگ نماد شناور را تغییر دهید.
- رنگ نماد: # 000000
شناسه CSS
همچنین یک شناسه CSS وارد کنید.
- شناسه CSS: قیمت-کلیک-1
ماژول متن # 1 را به ستون 2 اضافه کنید
محتوای H3 را اضافه کنید
در ستون دوم! ماژول متن اول را اضافه کرده و محتوای H3 را وارد کنید.
تنظیمات متن H3
به تب Design بروید و متناسب با آن تنظیمات متن H3 را تغییر دهید:
- فونت عنوان 3: مونتسرات
- عنوان فونت 3: نیمه پررنگ
- عنوان 3 رنگ متن: # f8c5ac
- عنوان متن 3 اندازه متن: پیکسل های 40 (دسک تاپ) ، پیکسل های 25 (رایانه لوحی) ، پیکسل های 18 (تلفن)
- فاصله حروف 3: -1px
- عنوان 3 ارتفاع خط: 1.1em
ماژول متن # 2 را به ستون 2 اضافه کنید
اضافه کردن محتوا
ماژول متن دیگری را با محتوای مورد نظر خود به ستون 2 اضافه کنید.
تنظیمات متن
به تب Design بروید و تنظیمات متن را تغییر دهید.
- متن قلم: مونتسرات
- وزن قلم متن: فوق العاده سبک
- رنگ متن: #f8c5ac
- اندازه متن: 23px (دسک تاپ) ، 18px (رایانه لوحی) ، 14px (تلفن)
- فاصله نامه: -1px
- ارتفاع خط متن: 1.1em
ماژول متن را به ستون 3 اضافه کنید
قیمت را به محتوا اضافه کنید
بیایید به ستون سوم برویم! ماژول متن را اضافه کنید و قیمت را در قسمت محتوا قرار دهید.
تنظیمات متن
به تب Design بروید و متناسب با آن تنظیمات متن را تغییر دهید:
- متن قلم: مونتسرات
- وزن قلم متن: سنگین
- ترتیب متن: مرکز
- رنگ متن: #ffffff
- اندازه متن: 40px (دسک تاپ) ، 25px (رایانه لوحی) ، 18px (تلفن)
شناسه و کلاس CSS
به برگه Advanced بروید و CSS ID و کلاس CSS را اضافه کنید.
- شناسه CSS: price-1
- کلاس CSS: first-hide-first
خط را هر چند بار که لازم باشد کپی کنید
پس از اتمام خط و تمام ماژول های موجود در آن ، می توانید آن را هر چند بار که می خواهید کپی کنید.
شناسه CSS ماژول Blurb را اصلاح کنید
متناسب با آن شناسه CSS هر ماژول Blurb جدید را تغییر دهید:
- Blurb 1 ماژول: قیمت-مورد-کلیک-1
- Blurb Module 2: price-item-click-2
- Blurb Module 3: price-item-click-3
- ...
قیمت ماژول متن تکراری و شناسه CSS را تغییر دهید
همین کار را برای ماژول متن قیمت در ستون سوم هر سطر انجام دهید.
- قیمت 1: قیمت 1
- قیمت 2: قیمت 2
- قیمت 3: قیمت 3
- ...
یک خط جدید اضافه کنید
ساختار ستون
با استفاده از ساختار ستون زیر خط دیگری به بخش خود اضافه کنید:
اندازه
بدون اضافه کردن هیچگونه حالت ، هنوز تنظیمات ردیف را باز کرده و عرض را به اندازه صفحه کوچکتر تغییر دهید.
- عرض: 80٪ (دسک تاپ) ، 90٪ (رایانه لوحی و تلفن)
نمایش
برای اطمینان از اینکه همه ستون ها در اندازه صفحه نمایش کوچکتر کنار هم ظاهر می شوند ، همچنین یک خط کد CSS به عنصر ردیف اصلی اضافه می کنیم.
نمایش: flex؛
ماژول کد را به ستون 1 اضافه کنید
کد CSS را وارد کنید
با اضافه کردن یک ماژول کد به ستون اول خط و درج خطوط زیر کد CSS ادامه دهید:
.price-hide-first {
display: none;
}
.price-item-active .et-pb-icon {
color: black !important;
}
ماژول متن را به ستون 2 اضافه کنید
اضافه کردن محتوا
به ستون دوم بروید و ماژول متن جدید را با محتوای دلخواه خود اضافه کنید.
تنظیمات متن
تنظیمات متن را بر این اساس تغییر دهید:
- متن قلم: مونتسرات
- وزن قلم متن: فوق العاده سبک
- رنگ متن: # f8c5ac
- اندازه متن: 23px (دسک تاپ) ، 18px (رایانه لوحی) ، 14px (تلفن)
- فاصله نامه: -1px
- ارتفاع خط متن: 1.1em
ماژول متن خالی را به ستون 3 اضافه کنید
محتوای خالی را ترک کنید
بیایید به ستون آخر برویم. ماژول متن را اضافه کنید و مطمئن شوید که قسمت محتوا خالی باشد.
تنظیمات متن
به تب Design بروید و تنظیمات متن را به صورت زیر تغییر دهید:
- متن قلم: مونتسرات
- وزن قلم متن: سنگین
- ترتیب متن: مرکز
- رنگ متن: #ffffff
- اندازه متن: 40px (دسک تاپ) ، 25px (رایانه لوحی) ، 18px (تلفن)
شناسه CSS
پارامترهای ماژول را با اضافه کردن شناسه CSS تکمیل کنید.
- شناسه CSS: کل قیمت-کال
گزینه های موضوع JQuery را به Divi اضافه کنید
به برگه ادغام بروید
اکنون که طراحی انجام شده است، زمان آن رسیده است که با مقداری کد JQuery کار کند. اگر می خواهید محاسبات قیمت را به یک صفحه اضافه کنید، می توانید کد را در یک ماژول کد قرار دهید. با این حال، اگر از آن در چندین صفحه استفاده می کنید، به گزینه بروید تم دیوی و تب Integration را انتخاب کنید.
کد JQuery را به Head Tags اضافه کنید
خط های زیر کد JQuery را وارد کنید بین برچسب های اسکریپت و شما تمام شد:
jQuery (تابع ($) {$ ('[[id * = "price-item-click"] "). کلیک کنید (function () {var selector = $ (this) .attr (' id '). جایگزین (' - کلیک کنید روی مورد ، کلیک کنید .toggleClass ('price-item-active')؛ $ ('. price-active'). هر (تابع () {sum + = parseFloat ($ (this) .text (). change (/ D / g، ') '))؛})؛ if (sum> 0) {$ ("# # total-price-cal"). show ()؛ $ ("# # total-price-cal"). text ("$" + sum + "k")؛} other {$ ("# total-price-cal"). hide ()؛}})؛})؛
بررسی
اکنون که همه مراحل برداشته شده است ، بیایید نگاهی نهایی به آنچه در اندازه های مختلف صفحه نمایش رخ داده است ، بررسی کنیم.
آخرین افکار
در این مقاله نحوه ایجاد یک الگوی محاسبه قیمت استثنایی با Divi را به شما نشان دادیم. این یک راه عالی برای نشان دادن خود است آخرین بازدید خدمات شما با چه قیمتی شروع می شود و برای جذب مخاطب مناسب. شما می توانید از این رویکرد برای هر محاسبه قیمتی که برای پروژه Divi بعدی خود ایجاد می کنید استفاده کنید! در صورت داشتن هر گونه سوال یا پیشنهاد، حتما در قسمت نظرات زیر نظر خود را بنویسید.
