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

شمارنده های متحرک یک راه سرگرم کننده و موثر برای نمایش هستند statistiques به شما آخرین بازدید. انیمیشن با بارگذاری تنبل فعال می شود تا ناوبری صفحه واقعاً جالب باشد. می توانید هر تعداد شمارنده که بخواهید در داخل این ماژول قرار دهید.

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

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

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

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

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

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

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

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

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

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

بیایید شروع.

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

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

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

درصد استفاده: روشن
رنگ زمینه: #dddddd
رنگ پس زمینه میله: # e07a5e

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

رنگ متن: تاریک
فونت عنوان: پیش فرض
عنوان فونت اندازه: 20px
عنوان متن رنگ: # 405c60
عنوان ارتفاع خط: 2em
قلم درصد: پیش فرض
درصد قلم اندازه: 16px
درصد رنگ متن: #ffffff
درصد خط ارتفاع: 2.5em

حالا به برگه Content برگردید و انتخاب کنید + مورد جدیدی اضافه کنید برای اضافه کردن اولین نوار مخالف به ماژول.

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

برگه محتوا

عنوان: عنوان من
درصد: 80

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

دو پیشخوان نوار اضافی را به ماژول اضافه کنید و به هر یک عنوان و درصد بدهید.

این همه!

گزینه های پیشخوان در مقابل نوار

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

درصد استفاده

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

رنگ پسزمینه

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

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

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

برچسب مدیریت

با این کار برچسب ماژول در ژنراتور برای شناسایی آسان تغییر می کند. هنگام استفاده از نمای 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" را وارد کنید تا نوع واحد آن تغییر کند.

شعاع مرزی

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

از مرز استفاده کن

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

رنگ مرز

این گزینه بر رنگ حاشیه شما تأثیر می گذارد. یک رنگ سفارشی از انتخابگر رنگ انتخاب کنید تا آن را در حاشیه خود اعمال کنید.

عرض مرز

به طور پیش فرض ، مرزها 1 پیکسل عرض دارند. با کشیدن نوار لغزنده محدوده یا وارد کردن مقدار سفارشی در قسمت ورودی در سمت راست نوار لغزنده ، می توانید این مقدار را افزایش دهید. واحد اندازه گیری سفارشی پشتیبانی شده ، به این معنی که شما می توانید واحد پیش فرض را از "px" به مورد دیگری تغییر دهید مثلا em ، vh ، vw و غیره

سبک مرزی

حاشیه ها از هشت سبک مختلف پشتیبانی می کنند ، از جمله: جامد ، نقطه ای ، نقطه ای ، دوتایی ، شیار ، خط الراس ، قرار دادن داخل و شروع. سبک مورد نظر خود را از فهرست کشویی انتخاب کنید تا در حاشیه شما اعمال شود.

لنت نوار

Padding فضای اضافه شده در داخل ماژول شما ، بین لبه ماژول و عناصر داخلی آن است. در اینجا می توانید بالشتک بالا و بالشتک پایین را به ماژول میله اضافه کنید.

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

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

شناسه CSS

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

کلاس CSS

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

CSS سفارشی

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

دید

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

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