نحوه استفاده از ماژول دایره ای در سازنده Divi

شمارنده دایره ای به شما امکان می دهد یک آمار واحد را به روشی زیبا و دلپذیر نمایش دهید. همانطور که به پایین اسکرول می کنید، عدد معکوس می شمرد و نمودار دایره ای به تدریج پر می شود تا با مقدار درصد مطابقت داشته باشد. سعی کنید چندین ماژول شمارنده دایره را در یک صفحه ترکیب کنید تا به شما ارائه شود آخرین بازدید یک راه سرگرم کننده برای یادگیری در مورد کسب و کار یا مهارت های شخصی شما.

نحوه اضافه کردن ماژول متر مدور به صفحه خود

قبل از اینکه بتوانید یک ماژول شمارنده دایره به صفحه خود اضافه کنید، ابتدا باید به Divi Builder دسترسی داشته باشید. از وقتی که تم دیوی در وب سایت خود نصب شده است، متوجه یک دکمه خواهید شد از Divi ساز استفاده کنید بالای ناشر هر بار که صفحه جدیدی ایجاد می کنید.

با کلیک بر روی این دکمه می توانید Divi Builder را فعال کنید که به شما امکان دسترسی به تمام ماژول های Divi Builder را می دهد. سپس بر روی دکمه کلیک کنید از Visual Builder استفاده کنید برای شروع ژنراتور در حالت بصری.

همچنین می توانید بر روی دکمه کلیک کنید از Visual Builder استفاده کنید اگر در داشبورد وردپرس خود وارد شده اید ، وب سایت خود را مرور می کنید.

پس از ورود به Visual Builder ، می توانید بر روی دکمه خاکستری بعلاوه کلیک کنید تا یک ماژول جدید به صفحه خود اضافه کنید. ماژول های جدید فقط می توانند در داخل ردیف ها اضافه شوند. اگر صفحه جدیدی را شروع می کنید ، فراموش نکنید که ابتدا یک ردیف به صفحه خود اضافه کنید.

ماژول متر دایره را در لیست ماژول ها پیدا کرده و بر روی آن کلیک کنید تا به صفحه شما اضافه شود. لیست ماژول ها قابل جستجو است ، به این معنی که شما همچنین می توانید کلمه "شمارنده دایره" را تایپ کنید و سپس بر روی enter کلیک کنید تا به طور خودکار جستجو شود و ماژول شمارنده دایره اضافه شود!

پس از افزودن ماژول ، با لیست گزینه های ماژول از شما استقبال می شود. این گزینه ها به سه گروه اصلی تقسیم می شوند: محتویات , تصور et پیشرفته .

از Case برای نمایش اهداف پروژه در یک مطالعه موردی استفاده کنید

یکی از بهترین راه‌ها برای استفاده از ماژول شمارنده دایره، تصویرسازی است statistiques برای مطالعات موردی یا موارد نمونه کارها.

کافی است هر متر دایره را با عملکرد یا هدف خاصی از پروژه مشخص کنید تا کاربر بداند کدام خدمات در پروژه گنجانده شده است. در این مثال ، از ماژول "counter counter" برای نمایش سه هدف پروژه استفاده می کنم.

همانطور که در تصویر زیر مشاهده می کنید ، بالای صفحه شامل سه هدف پروژه با استفاده از ماژول Bar Counter و در پایین صفحه شامل نتایج مطالعه موردی با استفاده از ماژول Counter Number است. .

بیایید شروع.

از سازنده بصری برای افزودن یک بخش استاندارد با طرح کامل عرض (1 ستون) استفاده کنید. سپس یک ماژول شمارنده دایره به ردیف اضافه کنید.

تنظیمات پیشخوان حلقه را به شرح زیر به روز کنید:

گزینه های محتوا

عنوان: انیمیشن
شماره: 80
٪ نشانه: بله
نوار رنگ نوار: # e07a5e

گزینه های طراحی

رنگ دایره: #e07a5e
رنگ متن: تاریک
فونت عنوان: پیش فرض
عنوان فونت اندازه: 26px
عنوان رنگ متن: #405c60
تعداد قلم: پیش فرض
اندازه فونت اندازه: 46px
شماره متن متن: #405c60

تنظیمات را ذخیره کنید

اکنون دو بار ماژول حلقه شمارنده را کپی کرده و هر نسخه را به ستون دوم و سوم خط خود بکشید.

از آنجا که عناصر طراحی شما به ماژول های تکراری منتقل شده اند ، فقط باید عنوان و شماره کنتور مدور را به روز کنید.

این همه!

بازدید از صفحه

تنظیمات شمارنده دیجیتال

در برگه محتوا ، تمام عناصر محتوای ماژول ، مانند متن ، تصاویر و آیکون ها را پیدا خواهید کرد. همه اینها را کنترل می کند چی به نظر می رسد که در ماژول شما همیشه در این برگه باشد.

عنوان

عنوانی برای پیشخوان دایره وارد کنید. این معمولاً کلمه ای است که آماری را که مشاهده می کنید نشان می دهد. زیر شماره در نمودار پای نمایش داده می شود.

نمبر

یک عدد برای پیشخوان دایره ای تنظیم کنید. انتخاب یک عدد کمتر از 100 نمودار دایره را با درصدی برابر با عددی که وارد کرده اید پر می کند. به عنوان مثال ، با وارد کردن عدد 20 ، دایره 20٪ با رنگ لهجه شما پر می شود.

نشانه درصد

در اینجا می توانید انتخاب کنید که آیا علامت درصد باید بعد از عدد تعریف شده در بالا اضافه شود.

رنگ پس زمینه نوار

با این کار رنگ پر شدن نوار تغییر می کند. مقدار رنگ پر شدن توسط "شماره" انتخاب شده در بالا کنترل می شود. اگر عدد 50 و یک رنگ آبی را انتخاب کنید ، دایره شما 50 درصد با یک رنگ آبی پر می شود.

برچسب مدیریت

با این کار برچسب ماژول در ژنراتور برای شناسایی آسان تغییر می کند. هنگام استفاده از نمای WireFrame در Visual Builder ، این برچسب ها در بلوک ماژول رابط Divi Builder ظاهر می شوند.

گزینه های طراحی شمارنده دایره ای

در برگه Design ، تمام گزینه های یک ظاهر طراحی شده ماژول ، مانند قلم ها ، رنگ ها ، اندازه و فاصله را پیدا خواهید کرد. این برگه به شما امکان می دهد ظاهر ماژول خود را اصلاح کنید. هر ماژول Divi دارای یک لیست طولانی از تنظیمات طراحی است که می توانید برای تنظیم دقیق هر مورد از آنها استفاده کنید.

رنگ دایره

این رنگی است که برای قسمت پر نشده دایره (فضای منفی که با رنگ پس زمینه نوار تعریف شده در برگه محتوا پر نمی شود) استفاده خواهد شد.

شفافیت رنگ دایره

با استفاده از این تنظیم می توانید میزان تیرگی قسمت پرشده از دایره را کاهش دهید.

رنگ متن

در اینجا می توانید متن خود را روشن یا تیره انتخاب کنید. اگر با پس زمینه تیره کار می کنید ، متن شما باید سبک باشد. اگر پس زمینه شما روشن است ، متن شما باید سیاه باشد.

فونت عنوان

با انتخاب قلم مورد نظر از منوی کشویی می توانید قلم متن خود را تغییر دهید. Divi با ده ها فونت عالی ارائه می شود که توسط Google Fonts طراحی شده اند. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. شما همچنین می توانید سبک متن خود را با استفاده از گزینه های پررنگ ، اریب ، بزرگ و زیر خط تنظیم کنید.

اندازه فونت عنوان

در اینجا می توانید اندازه متن عنوان خود را تنظیم کنید. می توانید نوار لغزنده فاصله را برای افزایش یا کاهش اندازه متن خود بکشید یا می توانید مستقیماً مقدار اندازه متن مورد نظر را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

رنگ متن عنوان

به طور پیش فرض ، تمام رنگ های متن در Divi با رنگ سفید یا خاکستری تیره ظاهر می شوند. اگر می خواهید رنگ متن عنوان خود را تغییر دهید ، با استفاده از این گزینه رنگ مورد نظر خود را از انتخابگر رنگ انتخاب کنید.

فاصله نامه های عنوان

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف از متن عنوان خود را افزایش دهید ، از نوار لغزنده فاصله برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

ارتفاع خط عنوان

ارتفاع خط بر فضای بین هر خط از متن عنوان تأثیر می گذارد. اگر می خواهید فضای بین هر خط را افزایش دهید ، از نوار لغزنده فاصله برای تنظیم فضا استفاده کنید یا اندازه فضای مورد نظر را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

شماره پلیس

اندازه فونت شماره

در اینجا می توانید اندازه متن شماره گذاری شده خود را تنظیم کنید. می توانید برای افزایش یا کاهش اندازه متن خود ، نوار لغزنده فاصله را بکشید ، یا می توانید مستقیماً مقدار اندازه متن مورد نظر را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

رنگ متن شماره

به طور پیش فرض ، تمام رنگ های متن در Divi با رنگ سفید یا خاکستری تیره ظاهر می شوند. اگر می خواهید رنگ متن خود را تغییر دهید ، با استفاده از این گزینه رنگ مورد نظر خود را از انتخاب کننده رنگ انتخاب کنید.

فاصله حروف شماره دار

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف از متن خود را افزایش دهید ، از نوار لغزنده فاصله برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

ارتفاع خط شماره

ارتفاع خط بر فضای بین هر خط از متن دیجیتال شما تأثیر می گذارد. اگر می خواهید فضای بین هر ردیف را افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فضای مورد نظر خود را در قسمت ورودی در سمت راست لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

گزینه های پیشخوان حلقوی پیشرفته

در زبانه Advanced ، گزینه هایی را پیدا می کنید که ممکن است طراحان وب با تجربه تر ، مانند ویژگی های سفارشی CSS و HTML ، مفید باشند. در اینجا می توانید CSS سفارشی را به عناصر مختلف ماژول اعمال کنید. همچنین می توانید کلاسها و شناسه های CSS سفارشی را به ماژول اعمال کنید ، که می تواند برای سفارشی کردن ماژول در پرونده style.css موضوع کودک شما استفاده شود.

شناسه CSS

یک شناسه CSS اختیاری برای استفاده برای این ماژول وارد کنید. از یک شناسه می توان برای ایجاد یک سبک CSS سفارشی یا پیوند دادن به بخشهای خاصی از صفحه خود استفاده کرد.

کلاس CSS

کلاس های CSS اختیاری را برای استفاده برای این ماژول وارد کنید. یک کلاس CSS می تواند برای ایجاد یک استایل سفارشی CSS استفاده شود. می توانید چندین کلاس را که با یک فاصله از هم جدا شده اند اضافه کنید. این کلاس ها را می توان در شما استفاده کرد تم دیوی کودک یا در CSS سفارشی که با استفاده از گزینه‌های تم Divi یا تنظیمات صفحه سازنده Divi به صفحه یا وب‌سایت خود اضافه می‌کنید.

CSS سفارشی

CSS سفارشی همچنین می تواند بر روی ماژول و هر یک از عناصر داخلی ماژول اعمال شود. در بخش Custom CSS ، یک قسمت متنی پیدا می کنید که می توانید CSS را مستقیماً به هر عنصر اضافه کنید. ورودی های CSS در این تنظیمات از قبل با برچسب های سبک جاسازی شده اند. بنابراین شما فقط باید قوانین CSS را که با نقطه ویرگول جدا شده اند وارد کنید.

دید

این گزینه به شما امکان می دهد دستگاه هایی را که ماژول روی آنها نشان داده می شود کنترل کنید. می توانید به صورت جداگانه ماژول خود را در رایانه لوحی ، تلفنهای هوشمند یا دسک تاپ غیرفعال کنید. اگر می خواهید از حالت های مختلف در دستگاه های مختلف استفاده کنید یا اگر می خواهید با حذف عناصر خاصی از صفحه ، طراحی تلفن همراه را ساده کنید ، این کار مفید است.

این برای این آموزش است.

نحوه استفاده از ماژول دایره ای در سازنده Divi

نحوه اضافه کردن ماژول متر مدور به صفحه خود